From e1701e77c2a9e7edd8760a031237e1a870626db8 Mon Sep 17 00:00:00 2001 From: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Date: Wed, 16 Feb 2022 16:25:26 +0200 Subject: [PATCH] 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 <33178835+Tbaut@users.noreply.github.com> * early return vs ternary * lingui extract Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: GitHub Actions --- packages/common-components/src/Tabs/Tabs.tsx | 5 ++- .../cypress/tests/subscription-plan-spec.ts | 6 ++- packages/files-ui/package.json | 4 +- .../src/Components/Modules/Settings/index.tsx | 44 ++++++++++--------- .../files-ui/src/Contexts/BillingContext.tsx | 13 +++++- packages/files-ui/src/locales/fr/messages.po | 34 ++++---------- packages/storage-ui/package.json | 2 +- yarn.lock | 8 ++-- 8 files changed, 59 insertions(+), 57 deletions(-) diff --git a/packages/common-components/src/Tabs/Tabs.tsx b/packages/common-components/src/Tabs/Tabs.tsx index 16b3abb065..2aa8949468 100644 --- 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 { className?: string - children: React.ReactElement> | React.ReactElement>[] + children: React.ReactElement> | Array> | null> activeKey?: TabKey onTabSelect: (key: TabKey) => void injectedClass?: TabInjectedClasses @@ -59,7 +59,7 @@ export interface ITabsProps { const Tabs = ({ className, children, activeKey, injectedClass, onTabSelect }: ITabsProps) => { const classes = useStyles() const selectedChild = Array.isArray(children) - ? children.find((child) => activeKey === child.props.tabKey) + ? children.find((child) => activeKey === child?.props?.tabKey) : children return ( @@ -67,6 +67,7 @@ const Tabs = ({ className, children, activeKey, injectedClass, onTabSe
    {Array.isArray(children) ? children.map((elem, index) => { + if (!elem) return null return (
  • { - + 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 index c0bac4e425..d9fb71e7b7 100644 --- 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 index 33955e9892..595152d8a4 100644 --- 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) => 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 = () => { > + } + iconRight={} + > + + } @@ -203,26 +215,18 @@ const Settings: React.FC = () => { > - } - iconRight={} - > - - - } - iconRight={} - > - - + {isBillingEnabled + ? } + iconRight={} + > + + + : null} } diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 9c8bce10d8..4eb509f984 100644 --- 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 refreshInvoices: () => void + isBillingEnabled: boolean } const ProductMapping: {[key: string]: { @@ -69,6 +70,7 @@ const BillingProvider = ({ children }: BillingContextProps) => { const [restrictedNotification, setRestrictedNotification] = useState() const [unpaidInvoiceNotification, setUnpaidInvoiceNotification] = useState() const [cardExpiringNotification, setCardExpiringNotification] = useState() + 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 index a90c2e3cb1..462cfc7d84 100644 --- 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 \n" -"Language-Team: French \n" +"Language-Team: French \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 index aec8b41ad2..0246fb4fd5 100644 --- 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 index b5491a6136..0510f8035e 100644 --- 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/files-api-client@1.18.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/files-api-client@1.18.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"