From e24e6ac7a511f8c491cd339ec23d98fef847dfcc Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Mon, 23 May 2022 17:49:42 +0200 Subject: [PATCH 1/5] notification --- .../Notifications/NotificationsDropdown.tsx | 1 + .../src/Components/Layouts/AppHeader.tsx | 21 ++++++++++++++++--- .../files-ui/src/Contexts/BillingContext.tsx | 21 ++++++++++++++++++- .../src/Contexts/NotificationsContext.tsx | 16 ++++++++------ 4 files changed, 49 insertions(+), 10 deletions(-) diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx index 61485236f7..fd36185ef9 100644 --- a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx +++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx @@ -77,6 +77,7 @@ export interface Notification { title: string createdAt: number onClick?: () => void + dismissOnClick?: boolean } const NotificationsDropdown = () => { diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx index 1acca783a0..8917ea255d 100644 --- a/packages/files-ui/src/Components/Layouts/AppHeader.tsx +++ b/packages/files-ui/src/Components/Layouts/AppHeader.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useState } from "react" import { createStyles, makeStyles, useThemeSwitcher } from "@chainsafe/common-theme" import clsx from "clsx" -import { Link, Typography, ChainsafeFilesLogo, HamburgerMenu, Button, SearchIcon } from "@chainsafe/common-components" +import { Link, Typography, ChainsafeFilesLogo, HamburgerMenu, Button, SearchIcon, useHistory } from "@chainsafe/common-components" import { ROUTE_LINKS } from "../FilesRoutes" import SearchModule from "../Modules/SearchModule" import { Trans } from "@lingui/macro" @@ -10,6 +10,7 @@ import { CSFTheme } from "../../Themes/types" import { useFilesApi } from "../../Contexts/FilesApiContext" import BetaModal from "../Elements/BetaModal" import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown" +import { useBilling } from "../../Contexts/BillingContext" const useStyles = makeStyles( ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => { @@ -140,11 +141,13 @@ interface IAppHeader { const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { const { desktop } = useThemeSwitcher() + const { isBillingEnabled } = useBilling() const classes = useStyles() const { isLoggedIn, secured } = useFilesApi() const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey() const [searchActive, setSearchActive] = useState(false) const [isBetaModalOpen, setIsBetaModalOpen] = useState(false) + const { redirect } = useHistory() const onReportBugClick = useCallback(() => { window.open(ROUTE_LINKS.DiscordInvite, "_blank") @@ -154,6 +157,10 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => { setIsBetaModalOpen(true) }, []) + const onUpgradeClick = useCallback(() => { + redirect(ROUTE_LINKS.SettingsPath("plan")) + }, [redirect]) + return (
{ > Report a bug - + } + {isBillingEnabled && }
diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 253e962a7e..642d58decd 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -68,16 +68,21 @@ const BillingProvider = ({ children }: BillingContextProps) => { const { filesApiClient, isLoggedIn, accountRestricted } = useFilesApi() const { redirect } = useHistory() const { addNotification, removeNotification } = useNotifications() - const { refreshBuckets } = useFiles() + const { refreshBuckets, storageSummary } = useFiles() const [currentSubscription, setCurrentSubscription] = useState() const [defaultCard, setDefaultCard] = useState(undefined) const [invoices, setInvoices] = useState() const isPendingInvoice = useMemo(() => currentSubscription?.status === "pending_update", [currentSubscription]) const openInvoice = useMemo(() => invoices?.find((i) => i.status === "open"), [invoices]) const [restrictedNotification, setRestrictedNotification] = useState() + const [upgradeNotification, setUpgradeNotification] = useState() const [unpaidInvoiceNotification, setUnpaidInvoiceNotification] = useState() const [cardExpiringNotification, setCardExpiringNotification] = useState() const [isBillingEnabled, setIsBillingEnabled] = useState(false) + const shouldProposeUpgrade = useMemo(() => storageSummary + ? storageSummary.used_storage > storageSummary.total_storage * 0.005 + : false + , [storageSummary]) const refreshInvoices = useCallback(() => { if (!currentSubscription) return @@ -118,6 +123,20 @@ const BillingProvider = ({ children }: BillingContextProps) => { } }, [accountRestricted, addNotification, redirect, removeNotification, restrictedNotification]) + useEffect(() => { + if (shouldProposeUpgrade && !upgradeNotification) { + const notif = addNotification({ + createdAt: dayjs().unix(), + title: t`Space running low. Upgrade here.`, + onClick: () => { + redirect(ROUTE_LINKS.SettingsPath("plan")) + }, + dismissOnClick: true + }) + setUpgradeNotification(notif) + } + }, [addNotification, redirect, shouldProposeUpgrade, upgradeNotification]) + useEffect(() => { if (!!openInvoice && !unpaidInvoiceNotification) { const notif = addNotification({ diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx index dd3b9ea73c..6c501816ca 100644 --- a/packages/files-ui/src/Contexts/NotificationsContext.tsx +++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx @@ -17,18 +17,22 @@ const NotificationsContext = React.createContext { const [notifications, setNotifications] = useState([]) + const removeNotification = useCallback((id: string) => { + setNotifications(notifications.filter((notification) => notification.id !== id)) + }, [notifications]) + const addNotification = useCallback((notification: Omit) => { const id = uuidv4() setNotifications([...notifications, { + ...notification, id, - ...notification + onClick: () => { + notification.dismissOnClick && removeNotification(id) + notification.onClick && notification.onClick() + } }]) return id - }, [notifications]) - - const removeNotification = useCallback((id: string) => { - setNotifications(notifications.filter((notification) => notification.id !== id)) - }, [notifications]) + }, [notifications, removeNotification]) return ( Date: Mon, 23 May 2022 17:51:57 +0200 Subject: [PATCH 2/5] 75% --- packages/files-ui/src/Contexts/BillingContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 642d58decd..76441ec251 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -80,7 +80,7 @@ const BillingProvider = ({ children }: BillingContextProps) => { const [cardExpiringNotification, setCardExpiringNotification] = useState() const [isBillingEnabled, setIsBillingEnabled] = useState(false) const shouldProposeUpgrade = useMemo(() => storageSummary - ? storageSummary.used_storage > storageSummary.total_storage * 0.005 + ? storageSummary.used_storage > storageSummary.total_storage * 0.75 : false , [storageSummary]) From e5d43d82d75ec3e3d0abe04ab76795321919afb5 Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Mon, 23 May 2022 15:58:45 +0000 Subject: [PATCH 3/5] lingui extract --- packages/files-ui/src/locales/de/messages.po | 6 ++++++ packages/files-ui/src/locales/en/messages.po | 6 ++++++ packages/files-ui/src/locales/es/messages.po | 6 ++++++ packages/files-ui/src/locales/fr/messages.po | 6 ++++++ packages/files-ui/src/locales/no/messages.po | 6 ++++++ 5 files changed, 30 insertions(+) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index b270d56250..4695f103df 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -901,6 +901,9 @@ msgstr "Es ist etwas schief gelaufen. Wir konnten Ihre Datei nicht hochladen" msgid "Sort By:" msgstr "" +msgid "Space running low. Upgrade here." +msgstr "" + msgid "Start Upload" msgstr "Hochladen starten" @@ -1036,6 +1039,9 @@ msgstr "" msgid "Update your credit card" msgstr "" +msgid "Upgrade" +msgstr "" + msgid "Upload" msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 5042749363..4c99fdbabc 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -904,6 +904,9 @@ msgstr "Something went wrong. We couldn't upload your file" msgid "Sort By:" msgstr "Sort By:" +msgid "Space running low. Upgrade here." +msgstr "Space running low. Upgrade here." + msgid "Start Upload" msgstr "Start Upload" @@ -1039,6 +1042,9 @@ msgstr "Update credit card" msgid "Update your credit card" msgstr "Update your credit card" +msgid "Upgrade" +msgstr "Upgrade" + msgid "Upload" msgstr "Upload" diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index bfcff03fbe..3820346482 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -905,6 +905,9 @@ msgstr "Algo salió mal. No pudimos subir tu archivo" msgid "Sort By:" msgstr "" +msgid "Space running low. Upgrade here." +msgstr "" + msgid "Start Upload" msgstr "Iniciar la subida" @@ -1040,6 +1043,9 @@ msgstr "" msgid "Update your credit card" msgstr "" +msgid "Upgrade" +msgstr "" + msgid "Upload" msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index 425c01f3b4..d9b265d1a8 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -905,6 +905,9 @@ msgstr "Un problème est survenu. Nous n’avons pas pu téléverser votre fichi msgid "Sort By:" msgstr "Trier par :" +msgid "Space running low. Upgrade here." +msgstr "" + msgid "Start Upload" msgstr "Démarrer le téléversement" @@ -1040,6 +1043,9 @@ msgstr "Mettre à jour la carte de crédit" msgid "Update your credit card" msgstr "Mettre à jour votre carte de crédit" +msgid "Upgrade" +msgstr "" + msgid "Upload" msgstr "Téléverser" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 2c27ff8884..273a70a045 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -901,6 +901,9 @@ msgstr "" msgid "Sort By:" msgstr "" +msgid "Space running low. Upgrade here." +msgstr "" + msgid "Start Upload" msgstr "" @@ -1036,6 +1039,9 @@ msgstr "" msgid "Update your credit card" msgstr "" +msgid "Upgrade" +msgstr "" + msgid "Upload" msgstr "" From 10d15b7348a895e445ed7e34823e2345840c6d9b Mon Sep 17 00:00:00 2001 From: Thibaut Sardan Date: Wed, 25 May 2022 14:52:59 +0200 Subject: [PATCH 4/5] redirect to form when not beta tester yet --- packages/files-ui/src/Contexts/BillingContext.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx index 76441ec251..48e80de930 100644 --- a/packages/files-ui/src/Contexts/BillingContext.tsx +++ b/packages/files-ui/src/Contexts/BillingContext.tsx @@ -127,15 +127,19 @@ const BillingProvider = ({ children }: BillingContextProps) => { if (shouldProposeUpgrade && !upgradeNotification) { const notif = addNotification({ createdAt: dayjs().unix(), - title: t`Space running low. Upgrade here.`, + title: isBillingEnabled + ? t`Space running low. Upgrade here.` + : t`Space running low. Join the beta to upgrade.`, onClick: () => { - redirect(ROUTE_LINKS.SettingsPath("plan")) + isBillingEnabled + ? redirect(ROUTE_LINKS.SettingsPath("plan")) + : window.open(ROUTE_LINKS.SubscriptionWhitelistForm, "_blank") }, dismissOnClick: true }) setUpgradeNotification(notif) } - }, [addNotification, redirect, shouldProposeUpgrade, upgradeNotification]) + }, [addNotification, isBillingEnabled, redirect, shouldProposeUpgrade, upgradeNotification]) useEffect(() => { if (!!openInvoice && !unpaidInvoiceNotification) { From 3bce2475f28da397010721608b9372fb9d4f972e Mon Sep 17 00:00:00 2001 From: GitHub Actions Date: Thu, 26 May 2022 09:38:26 +0000 Subject: [PATCH 5/5] lingui extract --- packages/files-ui/src/locales/de/messages.po | 3 +++ packages/files-ui/src/locales/en/messages.po | 3 +++ packages/files-ui/src/locales/es/messages.po | 3 +++ packages/files-ui/src/locales/fr/messages.po | 3 +++ packages/files-ui/src/locales/no/messages.po | 3 +++ 5 files changed, 15 insertions(+) diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po index 4695f103df..e351625e9e 100644 --- a/packages/files-ui/src/locales/de/messages.po +++ b/packages/files-ui/src/locales/de/messages.po @@ -901,6 +901,9 @@ msgstr "Es ist etwas schief gelaufen. Wir konnten Ihre Datei nicht hochladen" msgid "Sort By:" msgstr "" +msgid "Space running low. Join the beta to upgrade." +msgstr "" + msgid "Space running low. Upgrade here." msgstr "" diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po index 4c99fdbabc..be90ffe58c 100644 --- a/packages/files-ui/src/locales/en/messages.po +++ b/packages/files-ui/src/locales/en/messages.po @@ -904,6 +904,9 @@ msgstr "Something went wrong. We couldn't upload your file" msgid "Sort By:" msgstr "Sort By:" +msgid "Space running low. Join the beta to upgrade." +msgstr "Space running low. Join the beta to upgrade." + msgid "Space running low. Upgrade here." msgstr "Space running low. Upgrade here." diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po index 3820346482..a9a3615529 100644 --- a/packages/files-ui/src/locales/es/messages.po +++ b/packages/files-ui/src/locales/es/messages.po @@ -905,6 +905,9 @@ msgstr "Algo salió mal. No pudimos subir tu archivo" msgid "Sort By:" msgstr "" +msgid "Space running low. Join the beta to upgrade." +msgstr "" + msgid "Space running low. Upgrade here." msgstr "" diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po index d9b265d1a8..ba7e233c27 100644 --- a/packages/files-ui/src/locales/fr/messages.po +++ b/packages/files-ui/src/locales/fr/messages.po @@ -905,6 +905,9 @@ msgstr "Un problème est survenu. Nous n’avons pas pu téléverser votre fichi msgid "Sort By:" msgstr "Trier par :" +msgid "Space running low. Join the beta to upgrade." +msgstr "" + msgid "Space running low. Upgrade here." msgstr "" diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po index 273a70a045..317c79c06d 100644 --- a/packages/files-ui/src/locales/no/messages.po +++ b/packages/files-ui/src/locales/no/messages.po @@ -901,6 +901,9 @@ msgstr "" msgid "Sort By:" msgstr "" +msgid "Space running low. Join the beta to upgrade." +msgstr "" + msgid "Space running low. Upgrade here." msgstr ""