Show receipts in the settings

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

@@ -0,0 +1,124 @@
+import React, { useMemo } from "react"
+import { makeStyles, createStyles } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../Themes/types"
+import { Typography, Loading } from "@chainsafe/common-components"
+import { Trans } from "@lingui/macro"
+import dayjs from "dayjs"
+import { useBilling } from "../../Contexts/BillingContext"
+
+const useStyles = makeStyles(
+  ({ constants, breakpoints, palette, typography }: CSFTheme) =>
+    createStyles({
+      heading: {
+        marginBottom: constants.generalUnit * 4,
+        [breakpoints.down("md")]: {
+          marginBottom: constants.generalUnit * 2
+        }
+      },
+      loader: {
+        marginTop: constants.generalUnit
+      },
+      centered: {
+        textAlign: "center"
+      },
+      root: {
+        [breakpoints.down("md")]: {
+          padding: `0 ${constants.generalUnit}px`
+        }
+      },
+      setOption: {
+        width: "100%",
+        backgroundColor: palette.additional["gray"][4],
+        color: palette.additional["gray"][9],
+        padding: constants.generalUnit * 1.5,
+        borderRadius: 16,
+        marginTop: constants.generalUnit * 1.5,
+        "& > div": {
+          display: "flex",
+          alignItems: "center",
+          "& > span": {
+            display: "block",
+            lineHeight: "16px",
+            fontWeight: typography.fontWeight.regular,
+            "&.receiptDate": {
+              marginLeft: constants.generalUnit,
+              marginRight: constants.generalUnit,
+              flex: "1 1 0"
+            }
+          }
+        }
+      },
+      price: {
+        fontWeight: "bold !important" as "bold"
+      }
+    })
+)
+
+interface  IInvoiceProps {
+  lineNumber?: number
+}
+
+const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
+  const classes = useStyles()
+  const { invoices } = useBilling()
+  const invoicesToShow = useMemo(() => {
+    if (!invoices) return
+
+    return lineNumber
+      ? invoices.slice(0, lineNumber)
+      : invoices
+  }, [invoices, lineNumber])
+
+  return (
+    <>
+      {!invoicesToShow && (
+        <div className={classes.centered}>
+          <Loading
+            className={classes.loader}
+            type="initial"
+            size={32}
+          />
+        </div>
+      )}
+      {invoicesToShow && !invoicesToShow.length && (
+        <div className={classes.centered}>
+          <Typography
+            className={classes.heading}
+            variant="h4"
+            component="p"
+          >
+            <Trans>No invoice found</Trans>
+          </Typography>
+        </div>
+      )}
+      {!!invoicesToShow?.length && (
+        invoicesToShow.map(({ paid_on, amount, currency, uuid }) =>
+          <section
+            className={classes.setOption}
+            key={uuid}
+          >
+            <div>
+              <Typography
+                variant="body1"
+                className={classes.price}
+              >
+                {amount} {currency}
+              </Typography>
+              <Typography
+                variant="body2"
+                className="receiptDate"
+              >
+                {dayjs(paid_on).format("MMM D, YYYY")}
+              </Typography>
+              <Typography>
+                {uuid}
+              </Typography>
+            </div>
+          </section>
+        )
+      )}
+    </>
+  )
+}
+
+export default InvoiceLines

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/BillingHistory.tsx

@@ -3,6 +3,7 @@ import { Typography, Link } from "@chainsafe/common-components"
 import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme"
 import { Trans } from "@lingui/macro"
 import { ROUTE_LINKS } from "../../../FilesRoutes"
+import InvoiceLines from "../../../Elements/InvoiceLines"
 
 const useStyles = makeStyles(({ constants }: ITheme) =>
   createStyles({
@@ -11,8 +12,8 @@ const useStyles = makeStyles(({ constants }: ITheme) =>
       margin: `${constants.generalUnit * 1.5}px 0`
     },
     link: {
-      display: "inline-block",
-      margin: `${constants.generalUnit * 2}px 0`
+      textAlign: "right",
+      marginBottom: constants.generalUnit
     }
   })
 )
@@ -29,16 +30,15 @@ const BillingHistory = () => {
         <Trans>Billing history</Trans>
       </Typography>
       <Typography
-        variant="h5"
-        component="h5"
+        variant="body1"
+        component="p"
+        className={classes.link}
       >
-        <Link
-          className={classes.link}
-          to={ROUTE_LINKS.BillingHistory}
-        >
-          <Trans>View invoices</Trans>
+        <Link to={ROUTE_LINKS.BillingHistory}>
+          <Trans>All invoices</Trans>
         </Link>
       </Typography>
+      <InvoiceLines lineNumber={3}/>
     </div>
   )
 }

packages/files-ui/src/Components/Pages/BillingHistory.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useState } from "react"
+import React from "react"
 import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../Themes/types"
-import { useFilesApi } from "../../Contexts/FilesApiContext"
-import { InvoiceResponse } from "@chainsafe/files-api-client"
-import { Table, TableHead, TableHeadCell, TableBody, TableRow, TableCell, Typography, Loading } from "@chainsafe/common-components"
+import { Typography } from "@chainsafe/common-components"
 import { Trans } from "@lingui/macro"
-import dayjs from "dayjs"
+import InvoiceLines from "../Elements/InvoiceLines"
 
 const useStyles = makeStyles(
   ({ constants, breakpoints }: CSFTheme) =>
@@ -32,31 +30,6 @@ const useStyles = makeStyles(
 
 const BillingHistory = () => {
   const classes = useStyles()
-  const { filesApiClient } = useFilesApi()
-  const [invoices, setInvoices] = useState<InvoiceResponse[]>([])
-  const [subscriptionId, setSubscriptionId] = useState("")
-  const [isLoading, setIsLoading] = useState(true)
-
-  useEffect(() => {
-    filesApiClient.getCurrentSubscription()
-      .then((subscription) => {
-        setSubscriptionId(subscription.id)
-      })
-      .catch((e) => {
-        console.error(e)
-        setIsLoading(false)
-      })
-  }, [filesApiClient])
-
-  useEffect(() => {
-    if(!subscriptionId) return
-    filesApiClient.getAllInvoices(subscriptionId)
-      .then(({ invoices }) => {
-        setInvoices(invoices)
-      })
-      .catch(console.error)
-      .finally(() => setIsLoading(false))
-  }, [filesApiClient, subscriptionId])
 
   return (
     <div className={classes.root}>
@@ -67,56 +40,7 @@ const BillingHistory = () => {
       >
         <Trans>Billing history</Trans>
       </Typography>
-      {isLoading && (
-        <div className={classes.centered}>
-          <Loading
-            className={classes.loader}
-            type="initial"
-            size={32}
-          />
-        </div>
-      )}
-      {!invoices.length && !isLoading && (
-        <div className={classes.centered}>
-          <Typography
-            className={classes.heading}
-            variant="h4"
-            component="p"
-          >
-            <Trans>No invoice found</Trans>
-          </Typography>
-        </div>
-      )}
-      {!!invoices.length && (
-        <Table
-          fullWidth={true}
-          dense={true}
-        >
-          <TableHead>
-            <TableRow
-              type="grid"
-            >
-              <TableHeadCell align="left"><Trans>Date</Trans></TableHeadCell>
-              <TableHeadCell align="left"><Trans>Amount</Trans></TableHeadCell>
-              <TableHeadCell align="left"><Trans>Method</Trans></TableHeadCell>
-              <TableHeadCell align="left"><Trans>Receipt</Trans></TableHeadCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {invoices.map(({ paid_on, amount, payment_method, currency, uuid }, index) =>
-              <TableRow
-                type="grid"
-                key={index}
-              >
-                <TableCell align="left">{dayjs(paid_on).format("ddd D MMMM h:mm a")}</TableCell>
-                <TableCell align="left">{amount} {currency}</TableCell>
-                <TableCell align="left">{payment_method}</TableCell>
-                <TableCell align="left">{uuid}</TableCell>
-              </TableRow>)}
-          </TableBody>
-        </Table>
-      )}
-
+      <InvoiceLines />
     </div>
   )
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { useFilesApi } from "./FilesApiContext"
 import { ReactNode, useEffect, useState } from "react"
-import { Card, CurrentSubscription, Product } from "@chainsafe/files-api-client"
+import { Card, CurrentSubscription, InvoiceResponse, Product } from "@chainsafe/files-api-client"
 import { useCallback } from "react"
 import { t } from "@lingui/macro"
 import { PaymentMethod } from "@stripe/stripe-js"
@@ -20,6 +20,7 @@ interface IBillingContext {
   getAvailablePlans: () => Promise<Product[]>
   deleteCard: (card: Card) => Promise<void>
   updateDefaultCard: (id: PaymentMethod["id"]) => Promise<void>
+  invoices?: InvoiceResponse[]
   cancelCurrentSubscription: () => Promise<void>
 }
 
@@ -50,6 +51,20 @@ const BillingProvider = ({ children }: BillingContextProps) => {
   const { refreshBuckets } = useFiles()
   const [currentSubscription, setCurrentSubscription] = useState<CurrentSubscription | undefined>()
   const [defaultCard, setDefaultCard] = useState<Card | undefined>(undefined)
+  const [invoices, setInvoices] = useState<InvoiceResponse[] | undefined>()
+
+  useEffect(() => {
+    if (!currentSubscription) return
+
+    filesApiClient.getAllInvoices(currentSubscription.id)
+      .then(({ invoices }) => {
+        setInvoices(invoices)
+      })
+      .catch((e: any) => {
+        console.error(e)
+        setInvoices([])
+      })
+  }, [currentSubscription, filesApiClient])
 
   const refreshDefaultCard = useCallback(() => {
     filesApiClient.getDefaultCard().then((card) => {
@@ -152,6 +167,7 @@ const BillingProvider = ({ children }: BillingContextProps) => {
         getAvailablePlans,
         deleteCard,
         updateDefaultCard,
+        invoices,
         cancelCurrentSubscription
       }}
     >

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

@@ -79,10 +79,10 @@ msgstr ""
 msgid "Adding you to the shared folder..."
 msgstr ""
 
-msgid "Allow lookup by sharing key, wallet address or username"
+msgid "All invoices"
 msgstr ""
 
-msgid "Amount"
+msgid "Allow lookup by sharing key, wallet address or username"
 msgstr ""
 
 msgid "An error occurred:"
@@ -262,9 +262,6 @@ msgstr ""
 msgid "Data restored successfully"
 msgstr ""
 
-msgid "Date"
-msgstr ""
-
 msgid "Date Uploaded"
 msgstr ""
 
@@ -502,9 +499,6 @@ msgstr ""
 msgid "Manage Shared Folder"
 msgstr ""
 
-msgid "Method"
-msgstr ""
-
 msgid "Monthly billing"
 msgstr ""
 
@@ -667,9 +661,6 @@ msgstr "Profileinstellungen"
 msgid "Profile updated"
 msgstr "Profil aktualisiert"
 
-msgid "Receipt"
-msgstr ""
-
 msgid "Recover"
 msgstr "Wiederherstellen"
 
@@ -1021,9 +1012,6 @@ msgstr ""
 msgid "View folder"
 msgstr "Ordner anzeigen"
 
-msgid "View invoices"
-msgstr ""
-
 msgid "Wallet address"
 msgstr ""