Billing notifications

packages/files-ui/src/App.tsx

@@ -135,21 +135,21 @@ const App = () => {
                     enableLogging={directAuthNetwork !== "mainnet"}
                     network={directAuthNetwork}
                   >
-                    <NotificationsProvider>
-                      <UserProvider>
-                        <FilesProvider>
-                          <BillingProvider>
-                            <Router>
+                    <Router>
+                      <NotificationsProvider>
+                        <UserProvider>
+                          <FilesProvider>
+                            <BillingProvider>
                               <PosthogProvider>
                                 <AppWrapper>
                                   <FilesRoutes />
                                 </AppWrapper>
                               </PosthogProvider>
-                            </Router>
-                          </BillingProvider>
-                        </FilesProvider>
-                      </UserProvider>
-                    </NotificationsProvider>
+                            </BillingProvider>
+                          </FilesProvider>
+                        </UserProvider>
+                      </NotificationsProvider>
+                    </Router>
                   </ThresholdKeyProvider>
                 </FilesApiProvider>
               </Web3Provider>

packages/files-ui/src/Components/Elements/InvoiceLines.tsx

@@ -1,10 +1,11 @@
-import React, { useMemo } from "react"
+import React, { useCallback, useMemo } from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../Themes/types"
-import { Typography, Loading } from "@chainsafe/common-components"
+import { Typography, Loading, Button } from "@chainsafe/common-components"
 import { Trans } from "@lingui/macro"
 import dayjs from "dayjs"
 import { useBilling } from "../../Contexts/BillingContext"
+import { useFilesApi } from "../../Contexts/FilesApiContext"
 
 const useStyles = makeStyles(
   ({ constants, breakpoints, palette, typography }: CSFTheme) =>
@@ -61,6 +62,7 @@ interface  IInvoiceProps {
 const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
   const classes = useStyles()
   const { invoices } = useBilling()
+  const { filesApiClient } = useFilesApi()
   const invoicesToShow = useMemo(() => {
     if (!invoices) return
 
@@ -69,6 +71,18 @@ const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
       : invoices
   }, [invoices, lineNumber])
 
+  const downloadInvoice = useCallback(async (invoiceId: string) => {
+    try {
+      const result = await filesApiClient.downloadInvoice(invoiceId)
+      const link = document.createElement("a")
+      link.href = URL.createObjectURL(result.data)
+      link.download = "Chainsafe Files Invoice"
+      link.click()
+    } catch (error) {
+      console.error(error)
+    }
+  }, [filesApiClient])
+
   return (
     <>
       {!invoicesToShow && (
@@ -92,7 +106,7 @@ const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
         </div>
       )}
       {!!invoicesToShow?.length && (
-        invoicesToShow.map(({ paid_on, amount, currency, uuid }) =>
+        invoicesToShow.map(({ amount, currency, uuid, period_start, status }) =>
           <section
             className={classes.setOption}
             key={uuid}
@@ -108,11 +122,18 @@ const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
                 variant="body2"
                 className="receiptDate"
               >
-                {dayjs(paid_on).format("MMM D, YYYY")}
-              </Typography>
-              <Typography>
-                {uuid}
+                {dayjs.unix(period_start).format("MMM D, YYYY")}
               </Typography>
+              {(status === "paid") && (
+                <Button onClick={() => downloadInvoice(uuid)}>
+                  Download
+                </Button>
+              )}
+              {(status === "open") && (
+                <Button onClick={() => console.log("Not implemented")}>
+                  Pay invoice
+                </Button>
+              )}
             </div>
           </section>
         )

packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx

@@ -92,7 +92,7 @@ const NotificationList = ({ notifications }: INotificationListProps) => {
               className={classes.notificationTime}
               component="p"
             >
-              {dayjs(n.createdAt).fromNow()}
+              {dayjs.unix(n.createdAt).fromNow()}
             </Typography>
           </div>
         ))}

packages/files-ui/src/Contexts/BillingContext.tsx

@@ -6,6 +6,10 @@ import { useCallback } from "react"
 import { t } from "@lingui/macro"
 import { PaymentMethod as StripePaymentMethod } from "@stripe/stripe-js"
 import { useFiles } from "./FilesContext"
+import { useNotifications } from "./NotificationsContext"
+import dayjs from "dayjs"
+import { useHistory } from "@chainsafe/common-components"
+import { ROUTE_LINKS } from "../Components/FilesRoutes"
 
 export type PaymentMethod = "crypto" | "creditCard"
 
@@ -49,32 +53,86 @@ const BillingContext = React.createContext<IBillingContext | undefined>(
 )
 
 const BillingProvider = ({ children }: BillingContextProps) => {
-  const { filesApiClient, isLoggedIn } = useFilesApi()
+  const { filesApiClient, isLoggedIn, accountRestricted } = useFilesApi()
+  const { redirect } = useHistory()
+  const { addNotification, removeNotification } = useNotifications()
   const { refreshBuckets } = useFiles()
   const [currentSubscription, setCurrentSubscription] = useState<CurrentSubscription | undefined>()
   const [defaultCard, setDefaultCard] = useState<Card | undefined>(undefined)
   const [invoices, setInvoices] = useState<InvoiceResponse[] | undefined>()
+  const [restrictedNotification, setRestrictedNotification] = useState<string | undefined>()
+  const [unpaidInvoiceNotification, setUnpaidInvoiceNotification] = useState<string | undefined>()
+  const [cardExpiringNotification, setCardExpiringNotification] = useState<string | undefined>()
 
   useEffect(() => {
     if (!currentSubscription) return
 
     filesApiClient.getAllInvoices(currentSubscription.id)
       .then(({ invoices }) => {
-        setInvoices(invoices)
-      })
-      .catch((e: any) => {
+        setInvoices(invoices
+          .filter(i => i.status !== "void")
+          .sort((a, b) => b.period_start - a.period_start))
+      }).catch((e: any) => {
         console.error(e)
         setInvoices([])
       })
   }, [currentSubscription, filesApiClient])
 
+  useEffect(() => {
+    if (accountRestricted && !restrictedNotification) {
+      const notif = addNotification({
+        createdAt: dayjs().unix(),
+        title: t`Account is restricted`,
+        onClick: () => redirect(ROUTE_LINKS.SettingsPath("plan"))
+      })
+      setRestrictedNotification(notif)
+    } else if (accountRestricted === false && restrictedNotification) {
+      removeNotification(restrictedNotification)
+      setRestrictedNotification(undefined)
+    }
+  }, [accountRestricted, addNotification, redirect, removeNotification, restrictedNotification])
+
+  useEffect(() => {
+    const outstandingInvoice = invoices?.find(i => i.status === "open")
+    if (outstandingInvoice && !unpaidInvoiceNotification) {
+      const notif = addNotification({
+        createdAt: outstandingInvoice.period_start,
+        title: t`Invoice outstanding`,
+        onClick: () => redirect(ROUTE_LINKS.SettingsPath("plan"))
+      })
+      setUnpaidInvoiceNotification(notif)
+    } else if (!outstandingInvoice && unpaidInvoiceNotification) {
+      removeNotification(unpaidInvoiceNotification)
+      setUnpaidInvoiceNotification(undefined)
+    }
+  }, [addNotification, invoices, redirect, removeNotification, unpaidInvoiceNotification])
+
+  useEffect(() => {
+    if (defaultCard && currentSubscription) {
+      if (!cardExpiringNotification && currentSubscription.expiry_date >
+        dayjs(`${defaultCard.exp_year}-${defaultCard.exp_month}-01`, "YYYY-MM-DD").endOf("month").unix()) {
+        const notif = addNotification({
+          createdAt: dayjs().unix(),
+          title: t`Credit Card is expiring soon`,
+          onClick: () => redirect(ROUTE_LINKS.SettingsPath("plan"))
+        })
+        setCardExpiringNotification(notif)
+      } else if (cardExpiringNotification && currentSubscription?.expiry_date <=
+        dayjs(`${defaultCard?.exp_year}-${defaultCard?.exp_month}-01`, "YYYY-MM-DD").endOf("month").unix()) {
+        removeNotification(cardExpiringNotification)
+        setCardExpiringNotification(undefined)
+      }
+    }
+  }, [addNotification, cardExpiringNotification, currentSubscription, defaultCard, redirect, removeNotification])
+
   const refreshDefaultCard = useCallback(() => {
-    filesApiClient.getDefaultCard().then((card) => {
-      setDefaultCard(card)
-    }).catch((err) => {
-      console.error(err)
-      setDefaultCard(undefined)
-    })
+    filesApiClient.getDefaultCard()
+      .then((card) => {
+        setDefaultCard(card)
+      }).catch((err) => {
+        console.error(err)
+        setDefaultCard(undefined)
+      })
   }, [filesApiClient])
 
   const deleteCard = useCallback((card: Card) =>

packages/files-ui/src/locales/de/messages.po

@@ -49,6 +49,9 @@ msgstr ""
 msgid "Account"
 msgstr "Konto"
 
+msgid "Account is restricted"
+msgstr ""
+
 msgid "Active links"
 msgstr ""
 
@@ -250,6 +253,9 @@ msgstr ""
 msgid "Create your public username in <0>Settings</0>!"
 msgstr ""
 
+msgid "Credit Card is expiring soon"
+msgstr ""
+
 msgid "Credit card saved"
 msgstr ""
 
@@ -472,6 +478,9 @@ msgstr "Infos"
 msgid "Insufficient balance"
 msgstr ""
 
+msgid "Invoice outstanding"
+msgstr ""
+
 msgid "I’m done saving my backup secret phrase"
 msgstr "Ich bin fertig mit dem Speichern meines Sixherungsgeheimsatzes"
 

packages/files-ui/src/locales/en/messages.po

@@ -49,6 +49,9 @@ msgstr "Access your billing history in settings or view your"
 msgid "Account"
 msgstr "Account"
 
+msgid "Account is restricted"
+msgstr "Account is restricted"
+
 msgid "Active links"
 msgstr "Active links"
 
@@ -250,6 +253,9 @@ msgstr "Create link"
 msgid "Create your public username in <0>Settings</0>!"
 msgstr "Create your public username in <0>Settings</0>!"
 
+msgid "Credit Card is expiring soon"
+msgstr "Credit Card is expiring soon"
+
 msgid "Credit card saved"
 msgstr "Credit card saved"
 
@@ -475,6 +481,9 @@ msgstr "Info"
 msgid "Insufficient balance"
 msgstr "Insufficient balance"
 
+msgid "Invoice outstanding"
+msgstr "Invoice outstanding"
+
 msgid "I’m done saving my backup secret phrase"
 msgstr "I’m done saving my backup secret phrase"
 

packages/files-ui/src/locales/es/messages.po

@@ -50,6 +50,9 @@ msgstr ""
 msgid "Account"
 msgstr "Cuenta"
 
+msgid "Account is restricted"
+msgstr ""
+
 msgid "Active links"
 msgstr ""
 
@@ -251,6 +254,9 @@ msgstr ""
 msgid "Create your public username in <0>Settings</0>!"
 msgstr ""
 
+msgid "Credit Card is expiring soon"
+msgstr ""
+
 msgid "Credit card saved"
 msgstr ""
 
@@ -476,6 +482,9 @@ msgstr "Info"
 msgid "Insufficient balance"
 msgstr ""
 
+msgid "Invoice outstanding"
+msgstr ""
+
 msgid "I’m done saving my backup secret phrase"
 msgstr ""
 

packages/files-ui/src/locales/fr/messages.po

@@ -50,6 +50,9 @@ msgstr ""
 msgid "Account"
 msgstr "Compte"
 
+msgid "Account is restricted"
+msgstr ""
+
 msgid "Active links"
 msgstr "Liens actifs"
 
@@ -251,6 +254,9 @@ msgstr "Créer un lien"
 msgid "Create your public username in <0>Settings</0>!"
 msgstr "Créez votre nom d'utilisateur public dans <0>Paramètres</0> !"
 
+msgid "Credit Card is expiring soon"
+msgstr ""
+
 msgid "Credit card saved"
 msgstr "Carte de crédit enregistrée"
 
@@ -476,6 +482,9 @@ msgstr "Infos"
 msgid "Insufficient balance"
 msgstr ""
 
+msgid "Invoice outstanding"
+msgstr ""
+
 msgid "I’m done saving my backup secret phrase"
 msgstr "Phrase de sauvegarde secrète enregistrée"
 

packages/files-ui/src/locales/no/messages.po

@@ -49,6 +49,9 @@ msgstr ""
 msgid "Account"
 msgstr "Konto"
 
+msgid "Account is restricted"
+msgstr ""
+
 msgid "Active links"
 msgstr ""
 
@@ -250,6 +253,9 @@ msgstr ""
 msgid "Create your public username in <0>Settings</0>!"
 msgstr ""
 
+msgid "Credit Card is expiring soon"
+msgstr ""
+
 msgid "Credit card saved"
 msgstr ""
 
@@ -472,6 +478,9 @@ msgstr "Info"
 msgid "Insufficient balance"
 msgstr ""
 
+msgid "Invoice outstanding"
+msgstr ""
+
 msgid "I’m done saving my backup secret phrase"
 msgstr ""