Pay Invoice

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

@@ -56,9 +56,10 @@ const useStyles = makeStyles(
 
 interface  IInvoiceProps {
   lineNumber?: number
+  payInvoice?: () => void
 }
 
-const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
+const InvoiceLines = ({ lineNumber, payInvoice }: IInvoiceProps) => {
   const classes = useStyles()
   const { invoices, downloadInvoice } = useBilling()
   const invoicesToShow = useMemo(() => {
@@ -116,7 +117,7 @@ const InvoiceLines = ({ lineNumber }: IInvoiceProps) => {
                 </Button>
               )}
               {(status === "open") && (
-                <Button onClick={() => console.log("Not implemented")}>
+                <Button onClick={payInvoice}>
                   <Trans>Pay invoice</Trans>
                 </Button>
               )}

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

@@ -3,7 +3,7 @@ import { createStyles, makeStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import CustomModal from "../../../../Elements/CustomModal"
 import { t, Trans } from "@lingui/macro"
-import AddCard from "./AddCard"
+import AddCard from "../Common/AddCard"
 import { Typography } from "@chainsafe/common-components"
 import { useBilling } from "../../../../../Contexts/BillingContext"
 

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

@@ -1,9 +1,11 @@
-import React from "react"
+import React, { useState } from "react"
 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"
+import PayInvoiceModal from "./PayInvoice/PayInvoiceModal"
+import { useBilling } from "../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(({ constants }: ITheme) =>
   createStyles({
@@ -20,6 +22,8 @@ const useStyles = makeStyles(({ constants }: ITheme) =>
 
 const BillingHistory = () => {
   const classes = useStyles()
+  const [isPayInvoiceModalVisible, setPayInvoiceModalVisible] = useState(false)
+  const { isPendingInvoice } = useBilling()
 
   return (
     <div className={classes.container}>
@@ -29,6 +33,9 @@ const BillingHistory = () => {
       >
         <Trans>Billing history</Trans>
       </Typography>
+      {isPendingInvoice && <Typography>
+        <Trans>Please complete payment of the following outstanding invoices in order to avoid account suspension</Trans>
+      </Typography>}
       <Typography
         variant="body1"
         component="p"
@@ -38,7 +45,15 @@ const BillingHistory = () => {
           <Trans>All invoices</Trans>
         </Link>
       </Typography>
-      <InvoiceLines lineNumber={3}/>
+      <InvoiceLines
+        lineNumber={3}
+        payInvoice={() => setPayInvoiceModalVisible(true)}
+      />
+      {
+        isPayInvoiceModalVisible && <PayInvoiceModal
+          onClose={() => setPayInvoiceModalVisible(false)}
+        />
+      }
     </div>
   )
 }

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

@@ -5,13 +5,13 @@ import { Modal } from "@chainsafe/common-components"
 import SelectPlan from "./SelectPlan"
 import PlanDetails from "./PlanDetails"
 import PaymentMethodSelector from "./PaymentMethodSelector"
-import ConfirmPlan from "./ConfirmPlan"
+import ConfirmPlan from "../Common/ConfirmPlan"
 import { useBilling } from "../../../../../Contexts/BillingContext"
 import { Product, ProductPrice, ProductPriceRecurringInterval } from "@chainsafe/files-api-client"
 import PlanSuccess from "./PlanSuccess"
 import DowngradeDetails from "./DowngradeDetails"
 import { PaymentMethod } from "../../../../../Contexts/BillingContext"
-import CryptoPayment from "./CryptoPayment"
+import CryptoPayment from "../Common/CryptoPayment"
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
     root: {

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

@@ -3,7 +3,7 @@ import { makeStyles, createStyles } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import { Button, Divider, RadioInput, Typography } from "@chainsafe/common-components"
 import { t, Trans } from "@lingui/macro"
-import AddCard from "../AddCard/AddCard"
+import AddCard from "../Common/AddCard"
 import { PaymentMethod, useBilling } from "../../../../../Contexts/BillingContext"
 import { ProductPrice } from "@chainsafe/files-api-client"
 
@@ -141,8 +141,7 @@ const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMe
           onChange={() => setPaymentMethod("crypto")}
           checked={paymentMethod === "crypto"}
           labelClassName={classes.radioLabel}
-          // TODO Revert once testing is finished
-          disabled={selectedProductPrice.recurring.interval !== "day"}
+          disabled={selectedProductPrice.recurring.interval !== "year"}
         />
       </>
       }

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

@@ -73,8 +73,7 @@ interface IPlanDetails {
 const PlanDetails = ({ plan, goToSelectPlan, onSelectPlanPrice }: IPlanDetails) => {
   const classes = useStyles()
   const monthlyPrice = plan.prices.find((price) => price.recurring.interval === "month")
-  // TODO Revert this to year when testing is complete
-  const yearlyPrice = plan.prices.find((price) => price.recurring.interval === "day")
+  const yearlyPrice = plan.prices.find((price) => price.recurring.interval === "year")
   const currentPlanStorage = formatBytes(Number(monthlyPrice?.metadata?.storage_size_bytes), 2)
 
   const [billingPeriod, setBillingPeriod] = useState<"monthly" | "yearly">(monthlyPrice ? "monthly" : "yearly")

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

@@ -150,7 +150,7 @@ interface ISelectPlan {
 
 const SelectPlan = ({ className, onSelectPlan, plans }: ISelectPlan) => {
   const classes = useStyles()
-  const { currentSubscription } = useBilling()
+  const { currentSubscription, isPendingInvoice } = useBilling()
   const { desktop } = useThemeSwitcher()
   const [tempSelectedPlan, setTempSelectedPlan] = useState<Product | undefined>()
 
@@ -259,7 +259,7 @@ const SelectPlan = ({ className, onSelectPlan, plans }: ISelectPlan) => {
             : (
               <div
                 className={clsx(classes.planBox, tempSelectedPlan?.id === plan.id && !isCurrentPlan && "active")}
-                onClick={() => isUpdateAllowed && !isCurrentPlan && setTempSelectedPlan(plan)}
+                onClick={() => !isPendingInvoice && isUpdateAllowed && !isCurrentPlan && setTempSelectedPlan(plan)}
                 key={`plan-${plan.id}`}
               >
                 <div className={classes.priceAndDescription}>

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/CryptoPayment.tsx → packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/CryptoPayment.tsx

@@ -238,8 +238,8 @@ const CryptoPayment = ({ planPrice }: ICryptoPayment) => {
   const debouncedSwitchCopiedDestinationAddress = debounce(() => setCopiedDestinationAddress(false), 3000)
   const debouncedSwitchCopiedAmount = debounce(() => setCopiedAmount(false), 3000)
   const pendingCryptoInvoice = useMemo(() =>
-    isPendingInvoice && invoices?.find((i) => i.payment_method === "crypto" && i.status === "open")
-  , [invoices, isPendingInvoice])
+    invoices?.find((i) => i.payment_method === "crypto" && i.status === "open")
+  , [invoices])
   const currencies = useMemo(() => cryptoPayment?.payment_methods.map(c => c.currency), [cryptoPayment])
   const [selectedCurrency, setSelectedCurrency] = useState<string | undefined>(undefined)
 

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

@@ -11,7 +11,7 @@ import { useFiles } from "../../../../Contexts/FilesContext"
 import { t, Trans } from "@lingui/macro"
 import clsx from "clsx"
 import { useBilling } from "../../../../Contexts/BillingContext"
-import ChangeProductModal from "./ChangePlan/ChangePlanModal"
+import ChangePlanModal from "./ChangePlan/ChangePlanModal"
 
 const useStyles = makeStyles(({ breakpoints, constants }: ITheme) =>
   createStyles({
@@ -58,7 +58,7 @@ interface ICurrentProduct {
   className?: string
 }
 
-const CurrentProduct = ({ className }: ICurrentProduct) => {
+const CurrentPlan = ({ className }: ICurrentProduct) => {
   const classes = useStyles()
   const { storageSummary } = useFiles()
   const { currentSubscription, isPendingInvoice } = useBilling()
@@ -115,7 +115,7 @@ const CurrentProduct = ({ className }: ICurrentProduct) => {
           </Button>
         </div>
         {
-          isChangeProductModalVisible && (<ChangeProductModal
+          isChangeProductModalVisible && (<ChangePlanModal
             onClose={() => setChangeProductModalVisible(false)}
           />)
         }
@@ -125,4 +125,4 @@ const CurrentProduct = ({ className }: ICurrentProduct) => {
   </section>)
 }
 
-export default CurrentProduct
+export default CurrentPlan

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
+import { CSFTheme } from "../../../../../Themes/types"
+import { Modal } from "@chainsafe/common-components"
+import CryptoPayment from "../Common/CryptoPayment"
+
+const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
+  createStyles({
+    root: {
+      "&:before": {
+        backgroundColor: constants.modalDefault.fadeBackground
+      }
+    },
+    inner: {
+      borderRadius: `${constants.generalUnit / 2}px`,
+      [breakpoints.up("sm")]: {
+        minWidth: 480
+      },
+      [breakpoints.down("sm")]: {
+        width: "100%"
+      }
+    }
+  })
+)
+
+interface IChangeProductModal {
+  onClose: () => void
+}
+
+const PayInvoiceModal = ({ onClose }: IChangeProductModal) => {
+  const classes = useStyles()
+  const { desktop } = useThemeSwitcher()
+
+  return (
+    <Modal
+      closePosition="right"
+      active={true}
+      maxWidth={desktop ? 800 : undefined}
+      width={desktop ? "max-content" : "100%"}
+      className={classes.root}
+      injectedClass={{
+        inner: classes.inner
+      }}
+      testId="pay-invoice"
+      onClose={onClose}
+    >
+      <CryptoPayment />
+    </Modal>
+  )
+}
+
+export default PayInvoiceModal

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

@@ -6,7 +6,7 @@ import { Trans } from "@lingui/macro"
 import BillingHistory from "./BillingHistory"
 import { Elements } from "@stripe/react-stripe-js"
 import { loadStripe } from "@stripe/stripe-js"
-import CurrentProduct from "./CurrentPlan"
+import CurrentPlan from "./CurrentPlan"
 import { useBilling } from "../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(({ breakpoints, constants }: ITheme) =>
@@ -43,7 +43,7 @@ const PlanView: React.FC = () => {
           <Trans>Payment and Subscriptions</Trans>
         </Typography>
         <Divider />
-        <CurrentProduct />
+        <CurrentPlan />
         <CurrentCard />
         <BillingHistory />
       </div>

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

@@ -667,6 +667,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Bitte geben Sie einen Dateinamen ein"
 

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

@@ -670,6 +670,9 @@ msgstr "Payment method"
 msgid "Plan changed successfully"
 msgstr "Plan changed successfully"
 
+msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+msgstr "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+
 msgid "Please enter a file name"
 msgstr "Please enter a file name"
 

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

@@ -671,6 +671,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Ingrese un nombre de archivo"
 

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

@@ -671,6 +671,9 @@ msgstr "Méthode de paiement"
 msgid "Plan changed successfully"
 msgstr "Formule changée"
 
+msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Veuillez entrer un nom de fichier"
 

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

@@ -667,6 +667,9 @@ msgstr ""
 msgid "Plan changed successfully"
 msgstr ""
 
+msgid "Please complete payment of the following outstanding invoices in order to avoid account suspension"
+msgstr ""
+
 msgid "Please enter a file name"
 msgstr "Skriv inn et filnavn"