Files Billing soft launch (#1948)

* update packages * handle billing enabled flag * intercept request in test * Update packages/files-ui/src/Contexts/BillingContext.tsx Co-authored-by: Thibaut Sardan <[email protected]> * early return vs ternary * lingui extract Co-authored-by: Thibaut Sardan <[email protected]> Co-authored-by: GitHub Actions <[email protected]>
ChainSafe · Feb 16, 2022 · e1701e7 · e1701e7
1 parent 80081c0
commit e1701e7
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 57 deletions.
diff --git a/packages/common-components/src/Tabs/Tabs.tsx b/packages/common-components/src/Tabs/Tabs.tsx
@@ -50,7 +50,7 @@ interface TabInjectedClasses {
 
 export interface ITabsProps<TabKey> {
   className?: string
-  children: React.ReactElement<ITabPaneProps<TabKey>> | React.ReactElement<ITabPaneProps<TabKey>>[]
+  children: React.ReactElement<ITabPaneProps<TabKey>> | Array<React.ReactElement<ITabPaneProps<TabKey>> | null>
   activeKey?: TabKey
   onTabSelect: (key: TabKey) => void
   injectedClass?: TabInjectedClasses
@@ -59,14 +59,15 @@ export interface ITabsProps<TabKey> {
 const Tabs = <TabKey, >({ className, children, activeKey, injectedClass, onTabSelect }: ITabsProps<TabKey>) => {
   const classes = useStyles()
   const selectedChild = Array.isArray(children)
-    ? children.find((child) => activeKey === child.props.tabKey)
+    ? children.find((child) => activeKey === child?.props?.tabKey)
     : children
 
   return (
     <div className={clsx(classes.root, injectedClass?.root)}>
       <ul className={clsx(className, classes.tabList, injectedClass?.tabList)}>
         {Array.isArray(children)
           ? children.map((elem, index) => {
+            if (!elem) return null
             return (
               <li
                 data-testid={elem.props.testId}

diff --git a/packages/files-ui/cypress/tests/subscription-plan-spec.ts b/packages/files-ui/cypress/tests/subscription-plan-spec.ts
@@ -17,7 +17,11 @@ import { downgradeDetailsModal } from "../support/page-objects/modals/billing/do
 import { cryptoPaymentModal } from "../support/page-objects/modals/billing/cryptoPaymentModal"
 
 describe("Subscription Plan", () => {
-
+  beforeEach(() => {
+    cy.intercept("GET", "**/billing/eligibilities", {
+      body: { is_eligible: true }
+    })
+  })
   context("desktop", () => {
 
     it("can add, update and remove a credit card for billing", () => {

diff --git a/packages/files-ui/package.json b/packages/files-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.18.28",
+    "@chainsafe/files-api-client": "1.18.29",
     "@chainsafe/web3-context": "1.3.1",
     "@emeraldpay/hashicon-react": "^0.5.1",
     "@lingui/core": "^3.7.2",
@@ -51,7 +51,7 @@
     "react-scripts": "3.4.4",
     "react-swipeable": "^6.0.1",
     "react-toast-notifications": "^2.4.0",
-    "react-qr-code":"2.0.3",
+    "react-qr-code": "2.0.3",
     "react-zoom-pan-pinch": "^1.6.1",
     "remark-gfm": "^1.0.0",
     "typescript": "~4.0.5",

diff --git a/packages/files-ui/src/Components/Modules/Settings/index.tsx b/packages/files-ui/src/Components/Modules/Settings/index.tsx
@@ -21,6 +21,7 @@ import { ProfileIcon, SubscriptionPlanIcon } from "@chainsafe/common-components"
 import clsx from "clsx"
 import SecurityTab from "./SecurityTab"
 import DisplayTab from "./DisplayTab"
+import { useBilling } from "../../../Contexts/BillingContext"
 
 const TabPane = (props: ITabPaneProps<SettingsPath>) => TabPaneOrigin(props)
 const useStyles = makeStyles(({ constants, breakpoints, palette }: ITheme) =>
@@ -145,6 +146,7 @@ const Settings: React.FC = () => {
   const { path = desktop ? "profile" : undefined } = useParams<{path: SettingsPath}>()
   const classes = useStyles()
   const { redirect, history } = useHistory()
+  const { isBillingEnabled } = useBilling()
 
   const onSelectTab = useCallback(
     (key: SettingsPath) => redirect(ROUTE_LINKS.SettingsPath(key))
@@ -193,6 +195,16 @@ const Settings: React.FC = () => {
             >
               <ProfileTab />
             </TabPane>
+            <TabPane
+              className={clsx(classes.tabPane, (!desktop && !path) ? classes.hideTabPane : "")}
+              title={t`Display`}
+              tabKey="display"
+              testId="tab-display"
+              icon={<ProfileIcon className={classes.profileIcon} />}
+              iconRight={<CaretRightIcon />}
+            >
+              <DisplayTab />
+            </TabPane>
             <TabPane
               className={clsx(classes.tabPane, (!desktop && !path) ? classes.hideTabPane : "")}
               icon={<LockIcon className={classes.lockIcon}/>}
@@ -203,26 +215,18 @@ const Settings: React.FC = () => {
             >
               <SecurityTab />
             </TabPane>
-            <TabPane
-              className={clsx(classes.tabPane, (!desktop && !path) ? classes.hideTabPane : "")}
-              title={t`Subscription Plan`}
-              tabKey="plan"
-              testId="tab-subscription"
-              icon={<SubscriptionPlanIcon className={classes.lockIcon} />}
-              iconRight={<CaretRightIcon/>}
-            >
-              <SubscriptionTab />
-            </TabPane>
-            <TabPane
-              className={clsx(classes.tabPane, (!desktop && !path) ? classes.hideTabPane : "")}
-              title={t`Display`}
-              tabKey="display"
-              testId="tab-display"
-              icon={<ProfileIcon className={classes.profileIcon} />}
-              iconRight={<CaretRightIcon/>}
-            >
-              <DisplayTab />
-            </TabPane>
+            {isBillingEnabled
+              ? <TabPane
+                className={clsx(classes.tabPane, (!desktop && !path) ? classes.hideTabPane : "")}
+                title={t`Subscription Plan`}
+                tabKey="plan"
+                testId="tab-subscription"
+                icon={<SubscriptionPlanIcon className={classes.lockIcon} />}
+                iconRight={<CaretRightIcon/>}
+              >
+                <SubscriptionTab />
+              </TabPane>
+              : null}
           </Tabs>
         </div>
       }

diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx
@@ -32,6 +32,7 @@ interface IBillingContext {
   openInvoice?: InvoiceResponse
   downloadInvoice: (invoiceId: string) => Promise<void>
   refreshInvoices: () => void
+  isBillingEnabled: boolean
 }
 
 const ProductMapping: {[key: string]: {
@@ -69,6 +70,7 @@ const BillingProvider = ({ children }: BillingContextProps) => {
   const [restrictedNotification, setRestrictedNotification] = useState<string | undefined>()
   const [unpaidInvoiceNotification, setUnpaidInvoiceNotification] = useState<string | undefined>()
   const [cardExpiringNotification, setCardExpiringNotification] = useState<string | undefined>()
+  const [isBillingEnabled, setIsBillingEnabled] = useState(false)
 
   const refreshInvoices = useCallback(() => {
     if (!currentSubscription) return
@@ -87,6 +89,14 @@ const BillingProvider = ({ children }: BillingContextProps) => {
     refreshInvoices()
   }, [refreshInvoices])
 
+  useEffect(() => {
+    if (!isLoggedIn) return
+
+    filesApiClient.getEligibility()
+      .then(res => setIsBillingEnabled(res.is_eligible))
+      .catch(console.error)
+  }, [filesApiClient, isLoggedIn])
+
   useEffect(() => {
     if (accountRestricted && !restrictedNotification) {
       const notif = addNotification({
@@ -251,7 +261,8 @@ const BillingProvider = ({ children }: BillingContextProps) => {
         isPendingInvoice,
         downloadInvoice,
         refreshInvoices,
-        openInvoice
+        openInvoice,
+        isBillingEnabled
       }}
     >
       {children}

diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2022-02-15 23:55+0000\n"
 "Last-Translator: Maxime Leroy <[email protected]>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -85,18 +84,13 @@ msgid "Adding you to the shared folder..."
 msgstr "Je vous ajoute au dossier partagé…"
 
 msgid "All crypto payments are final and ineligible for credits, exchanges or refunds. If you wish to change your plan, your funds will not be reimbursed."
-msgstr ""
-"Tous les paiements via crypto-monnaie sont définitifs et ne peuvent être "
-"crédités, échangés ou remboursés. Si vous souhaitez changer votre formule, "
-"vos fonds ne seront pas remboursés."
+msgstr "Tous les paiements via crypto-monnaie sont définitifs et ne peuvent être crédités, échangés ou remboursés. Si vous souhaitez changer votre formule, vos fonds ne seront pas remboursés."
 
 msgid "All invoices"
 msgstr "Toutes les factures"
 
 msgid "Allow lookup by sharing key, wallet address, username or ENS"
-msgstr ""
-"Autoriser la recherche par la clé partagée, l'adresse du portefeuille, le "
-"nom d'utilisateur, ou l'ENS"
+msgstr "Autoriser la recherche par la clé partagée, l'adresse du portefeuille, le nom d'utilisateur, ou l'ENS"
 
 msgid "Amount added to credit"
 msgstr "Montant ajouté à la balance"
@@ -317,7 +311,6 @@ msgstr "Appareil en attente de confirmation"
 msgid "Didn't receive the email ?"
 msgstr "Vous n’avez pas reçu de courriel ?"
 
-#, fuzzy
 msgid "Display"
 msgstr "Afficher"
 
@@ -385,8 +378,7 @@ msgid "Failed to migrate account, please try again."
 msgstr "Échec de la migration du compte, veuillez réessayer."
 
 msgid "Failed to update the subscription. Please try again later."
-msgstr ""
-"Échec de la mise à jour de la souscription. Veuillez réessayer plus tard."
+msgstr "Échec de la mise à jour de la souscription. Veuillez réessayer plus tard."
 
 msgid ""
 "Failed to validate signature.\n"
@@ -620,10 +612,7 @@ msgid "Older notifications"
 msgstr "Autre notifications"
 
 msgid "Once you proceed, your account is expected to make a payment within 60 minutes. If no payment is received , your plan will not change."
-msgstr ""
-"Une fois activé, il est attendu que votre compte émette un paiement dans les "
-"60 prochaines minutes. Si aucun paiement n'est reçu, votre formule ne "
-"changera pas."
+msgstr "Une fois activé, il est attendu que votre compte émette un paiement dans les 60 prochaines minutes. Si aucun paiement n'est reçu, votre formule ne changera pas."
 
 msgid "One sec, getting files ready…"
 msgstr "Les fichiers sont presque prêts…"
@@ -686,21 +675,16 @@ msgid "Payment method"
 msgstr "Méthode de paiement"
 
 msgid "Payments are final and non-refundable. If you wish to change your plan, any extra funds will be applied as credit towards future payments."
-msgstr ""
-"Les paiements sont finaux et non remboursables. Si vous souhaitez changer de "
-"formule, les prochains fonds seront crédités pour les futurs paiements."
+msgstr "Les paiements sont finaux et non remboursables. Si vous souhaitez changer de formule, les prochains fonds seront crédités pour les futurs paiements."
 
 msgid "Plan changed successfully"
 msgstr "Formule changée"
 
-#, fuzzy
 msgid "Plan price"
 msgstr "Prix de la formule"
 
 msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
-msgstr ""
-"Veuillez régler les factures non réglées suivantes pour ne pas perdre "
-"l'accès à votre compte"
+msgstr "Veuillez régler les factures non réglées suivantes pour ne pas perdre l'accès à votre compte"
 
 msgid "Please enter a file name"
 msgstr "Veuillez entrer un nom de fichier"
@@ -970,9 +954,7 @@ msgid "The link you typed in looks malformed. Please verify it."
 msgstr "Le lien que vous avez tapé semble malformé. Veuillez le vérifier."
 
 msgid "The transaction was declined. Please use a different card or try again."
-msgstr ""
-"La transaction a été refusée. Veuillez utiliser une autre carte, ou "
-"réessayer."
+msgstr "La transaction a été refusée. Veuillez utiliser une autre carte, ou réessayer."
 
 msgid "The username is too long"
 msgstr "Le nom d'utilisateur est trop long"

diff --git a/packages/storage-ui/package.json b/packages/storage-ui/package.json
@@ -6,7 +6,7 @@
     "@babel/core": "^7.12.10",
     "@babel/runtime": "^7.0.0",
     "@chainsafe/browser-storage-hooks": "^1.0.1",
-    "@chainsafe/files-api-client": "1.18.28",
+    "@chainsafe/files-api-client": "1.18.29",
     "@chainsafe/web3-context": "1.3.0",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/yarn.lock b/yarn.lock
@@ -1925,10 +1925,10 @@
   resolved "https://registry.yarnpkg.com/@chainsafe/browser-storage-hooks/-/browser-storage-hooks-1.0.1.tgz#26d32cde1999914db755a631e2643823c54959f7"
   integrity sha512-Q4b5gQAZnsRXKeADspd5isqfwwhhXjDk70y++YadufA6EZ3tf340oW0OVszp74KaGEw+CAYFGQR4X7bzpZ3x9Q==
 
-"@chainsafe/[email protected].28":
-  version "1.18.28"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.28.tgz#40d97262094d98235e7f06efa9933c6b8bdc3049"
-  integrity sha512-KCT3T7f0lb7thDd4RAa0pcIfx0iRl+53lctVflRVZ4UIcq/smjapbvLpB/4a+YwHHm/1VIWn7QUX5Ja8IbJ6PQ==
+"@chainsafe/[email protected].29":
+  version "1.18.29"
+  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.29.tgz#49d9970fe6d29b213e9841a49eaeda60314bec0b"
+  integrity sha512-kleqt3SZtobYzMflAvmfvmQKtswxyiEiKBTCalRKKG8+iTzkRyYVR3OKB961ftUl/RzxfiJdjnSEIh/frXRHOA==
   dependencies:
     "@redocly/openapi-cli" "^1.0.0-beta.58"
     "@redocly/openapi-core" "^1.0.0-beta.69"