Current card: billing (#1463)

* plan page ready * plans data * plans page * ready and responsive * lingui extract * use npm regisry * pull from npm * use new api client * lingui extract * update api client * lingui extract * initial stab * lingui extract * create barebones gaming app * lingui extract * update readme * lingui extract * Apply suggestions from code review Co-authored-by: Ryan Noble <ryanjnoble@gmail.com> * lingui extract * rename * merge latest gaming * lingui extract * wire up basic products list and Product info * lingui extract * improve text formatting * remove unused imports * remove unused imports * remove billing from files for now * fix navigation and remove settings * lingui extract * lingui extract * format bytes * removed conflicts * lingui extract * reshuffle files * modal added * card inputs * UI ready * billing add card * lingui extract * xs sizes * formatter * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * paths on back to settings * messages * resolve reviews * current card added * add card modal updates * login and new api client * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx * Update packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentCard.tsx Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> * icon credit card * Cherry pick cypress retry from dev Co-authored-by: GitHub Actions <actions@github.com> Co-authored-by: Thibaut Sardan <github@thib.top> Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com> Co-authored-by: Michael Yankelev <myankelev@gmail.com> Co-authored-by: Michael Yankelev <12774278+FSM1@users.noreply.github.com> Co-authored-by: Ryan Noble <ryanjnoble@gmail.com> Co-authored-by: Andrew Snaith <andrew@chainsafe.io>
ChainSafe · Tbaut · Dec 13, 2021 · Aug 18, 2021 · Aug 20, 2021 · Aug 24, 2021
commit 67b94460ddbaf59ba37a692016cd9cade958b444
diff --git a/packages/common-components/src/Icons/icons/CreditCard.icon.tsx b/packages/common-components/src/Icons/icons/CreditCard.icon.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as CreditCardSvg } from "../svgs/credit-card.svg"
+
+export { CreditCardSvg }
+
+export default createSvgIcon(<CreditCardSvg />)
diff --git a/packages/common-components/src/Icons/index.ts b/packages/common-components/src/Icons/index.ts
@@ -14,6 +14,7 @@ export { default as CheckCircleIcon, CheckCircleSvg } from "./icons/CheckCircle.
 export { default as CloseIcon, CloseSvg } from "./icons/Close.icon"
 export { default as CloseCircleIcon, CloseCirceSvg } from "./icons/CloseCircle.icon"
 export { default as CopyIcon, CopySvg } from "./icons/Copy.icon"
+export { default as CreditCardIcon, CreditCardSvg } from "./icons/CreditCard.icon"
 export { default as CrossIcon, CrossSvg } from "./icons/Cross.icon"
 export { default as CrossOutlinedIcon, CrossOutlinedSvg } from "./icons/CrossOutlined.icon"
 export { default as DatabaseIcon, DatabaseSvg } from "./icons/Database.icon"

diff --git a/packages/common-components/src/Icons/svgs/credit-card.svg b/packages/common-components/src/Icons/svgs/credit-card.svg
diff --git 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.0",
+    "@chainsafe/files-api-client": "1.18.1",
     "@chainsafe/web3-context": "1.1.4",
     "@lingui/core": "^3.7.2",
     "@lingui/react": "^3.7.2",

diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/AddCardModal.tsx
@@ -1,16 +1,13 @@
 import { Button, Grid, TextInput, Typography, useToaster } from "@chainsafe/common-components"
 import { createStyles, makeStyles } from "@chainsafe/common-theme"
-import React, { useState } from "react"
+import React, { useState, useCallback } from "react"
 import { CSFTheme } from "../../../../Themes/types"
 import CustomModal from "../../../Elements/CustomModal"
 import CustomButton from "../../../Elements/CustomButton"
 import { t, Trans } from "@lingui/macro"
 import CardInputs from "../../../Elements/CardInputs"
 import { getCardNumberError, getCVCError, getExpiryDateError } from "../../../Elements/CardInputs/utils/validator"
-import axios, { AxiosResponse } from "axios"
-import qs from "qs"
-import { useFilesApi } from "../../../../Contexts/FilesApiContext"
-import { useCallback } from "react"
+import { useBilling } from "../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(
   ({ breakpoints, constants, typography, zIndex }: CSFTheme) => {
@@ -78,7 +75,7 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) =>
   const [cardName, setCardName] = useState("")
   const [error, setError] = useState("")
   const [loading, setLoading] = useState(false)
-  const { filesApiClient } = useFilesApi()
+  const { addCard, getCardTokenFromStripe } = useBilling()
   const { addToastMessage } = useToaster()
 
   const onCloseModal = useCallback(() => {
@@ -104,22 +101,9 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) =>
 
     setLoading(true)
     // get token from stripe
-    axios({
-      method: "post",
-      url: "https://api.stripe.com/v1/tokens",
-      headers: {
-        "Authorization": `Bearer ${process.env.REACT_APP_STRIPE_PK}`,
-        "Content-Type": "application/x-www-form-urlencoded"
-      },
-      data : qs.stringify({
-        "card[number]": cardInputs.cardNumber,
-        "card[exp_month]": cardInputs.cardExpiry.split("/")[0].trim(),
-        "card[exp_year]": cardInputs.cardExpiry.split("/")[1].trim(),
-        "card[cvc]": cardInputs.cardCvc
-      })
-    }).then((resp: AxiosResponse<{ card: {id: string}}>) => {
+    getCardTokenFromStripe(cardInputs).then((resp) => {
       // send stripe token to API
-      filesApiClient.addCard({ token: resp.data.card.id })
+      addCard(resp.data.id)
         .then(() => {
           onCloseModal()
           addToastMessage({
@@ -134,7 +118,7 @@ const CreateFolderModal = ({ isModalOpen, onClose }: ICreateFolderModalProps) =>
       setError(t`Card details could not be validated`)
       setLoading(false)
     })
-  }, [addToastMessage, cardInputs, cardName, filesApiClient, onCloseModal])
+  }, [addToastMessage, cardInputs, cardName, onCloseModal, getCardTokenFromStripe, addCard])
 
   return (
     <CustomModal

diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/CurrentCard.tsx
@@ -0,0 +1,59 @@
+import React from "react"
+import { Typography, CreditCardIcon } from "@chainsafe/common-components"
+import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme"
+import { Trans } from "@lingui/macro"
+import { useBilling } from "../../../../Contexts/BillingContext"
+
+const useStyles = makeStyles(({ constants, palette }: ITheme) =>
+  createStyles({
+    container: {
+      margin: `${constants.generalUnit * 3}px ${constants.generalUnit * 4}px`
+    },
+    noCard: {
+      margin: `${constants.generalUnit * 2}px 0`
+    },
+    cardDetailsContainer: {
+      display: "flex",
+      margin: `${constants.generalUnit * 2}px 0`
+    },
+    creditCardIcon: {
+      marginRight: constants.generalUnit,
+      fill: palette.additional["gray"][9]
+    }
+  })
+)
+
+const CurrentCard: React.FC = () => {
+  const classes = useStyles()
+  const { defaultCard } = useBilling()
+
+  return (
+    <div className={classes.container}>
+      <div>
+        <Typography
+          variant="h4"
+          component="h4"
+        >
+          <Trans>Credit card on file</Trans>
+        </Typography>
+      </div>
+      {defaultCard
+        ? <div className={classes.cardDetailsContainer}>
+          <CreditCardIcon className={classes.creditCardIcon} />
+          <Typography>
+           •••• •••• •••• {defaultCard.last_four_digit}
+          </Typography>
+        </div>
+        : <Typography
+          component="p"
+          variant="body1"
+          className={classes.noCard}
+        >
+          <Trans>No Card</Trans>
+        </Typography>
+      }
+    </div>
+  )
+}
+
+export default CurrentCard
diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionPlan/index.tsx
@@ -1,31 +1,38 @@
 import React, { useState } from "react"
 import CurrentProduct from "./CurrentProduct"
+import CurrentCard from "./CurrentCard"
 import AddCardModal from "./AddCardModal"
 import { Button } from "@chainsafe/common-components"
 import { makeStyles, createStyles, ITheme } from "@chainsafe/common-theme"
 import { Trans } from "@lingui/macro"
+import { useBilling } from "../../../../Contexts/BillingContext"
 
 const useStyles = makeStyles(({ constants }: ITheme) =>
   createStyles({
     root: {
       marginBottom: constants.generalUnit * 16
     },
     container: {
-      margin: constants.generalUnit * 4
+      margin: `0 ${constants.generalUnit * 4}px`
     }
   })
 )
 
 const PlanView: React.FC = () => {
   const classes = useStyles()
   const [isAddCardModalOpen, setIsAddCardModalOpen ] = useState(false)
+  const { defaultCard } = useBilling()
 
   return (
     <div className={classes.root}>
       <CurrentProduct />
+      <CurrentCard />
       <div className={classes.container}>
         <Button onClick={() => setIsAddCardModalOpen(true)}>
-          <Trans>Add Card</Trans>
+          {defaultCard
+            ? <Trans>Update Card</Trans>
+            : <Trans>Add Card</Trans>
+          }
         </Button>
       </div>
       <AddCardModal

diff --git a/packages/files-ui/src/Contexts/BillingContext.tsx b/packages/files-ui/src/Contexts/BillingContext.tsx
@@ -1,17 +1,25 @@
 import * as React from "react"
-// import { useFilesApi } from "./FilesApiContext"
+import { useFilesApi } from "./FilesApiContext"
 import axios, { AxiosResponse } from "axios"
+import { useEffect, useState } from "react"
+import { Card } from "@chainsafe/files-api-client"
+import { useCallback } from "react"
+import qs from "qs"
 
 type BillingContextProps = {
   children: React.ReactNode | React.ReactNode[]
 }
 
 interface IBillingContext {
+  defaultCard: Card | undefined
   addCard(cardToken: string): Promise<void>
   getCardTokenFromStripe(
-    card: ICard,
-    stripePk: string,
-  ): Promise<AxiosResponse<IStripeResponse>>
+    cardInputs: {
+      cardNumber: string
+      cardExpiry: string
+      cardCvc: string
+    }
+  ): Promise<AxiosResponse<{ id: string}>>
 }
 
 const BillingContext = React.createContext<IBillingContext | undefined>(
@@ -20,51 +28,56 @@ const BillingContext = React.createContext<IBillingContext | undefined>(
 
 const STRIPE_API = "https://api.stripe.com/v1/tokens"
 
-interface ICard {
-  cardNumber: string
-  cardExpiry: string
-  cardCvc: string
-}
-
-interface IStripeResponse {
-  id: string
-}
-
 const BillingProvider = ({ children }: BillingContextProps) => {
-  // const { filesApiClient } = useFilesApi()
+  const { filesApiClient, isLoggedIn } = useFilesApi()
+  const [defaultCard, setDefaultCard] = useState<Card | undefined>(undefined)
 
-  const addCard = async (
-  //cardToken: string
-  ) => {
-    try {
-      // await filesApiClient.addCard({ token: cardToken })
-      return Promise.resolve()
-    } catch (error) {
-      return Promise.reject("There was an error adding card.")
-    }
-  }
-
-  const getCardTokenFromStripe = (
-    data: ICard,
-    stripePk: string
-  ): Promise<AxiosResponse<IStripeResponse>> => {
-    const cardExpiryMonth = data.cardExpiry.split("/")[0]?.trim()
-    const cardExpiryYear = data.cardExpiry.split("/")[1]?.trim()
+  const refreshDefaultCard = useCallback(() => {
+    filesApiClient.getDefaultCard().then((card) => {
+      setDefaultCard(card)
+    }).catch((err) => {
+      console.error(err)
+      setDefaultCard(undefined)
+    })
+  }, [filesApiClient])
 
-    // eslint-disable-next-line max-len
-    const dataString = `card[number]=${data.cardNumber}&card[exp_month]=${cardExpiryMonth}&card[exp_year]=${cardExpiryYear}&card[cvc]=${data.cardCvc}`
+  useEffect(() => {
+    if (isLoggedIn) {
+      refreshDefaultCard()
+    }
+  }, [refreshDefaultCard, isLoggedIn])
 
-    return axios.post<IStripeResponse>(STRIPE_API, dataString, {
+  const getCardTokenFromStripe = useCallback((
+    cardInputs: {
+      cardNumber: string
+      cardExpiry: string
+      cardCvc: string
+    }
+  ): Promise<AxiosResponse<{ id: string}>> => {
+    return axios({
+      method: "post",
+      url: STRIPE_API,
       headers: {
-        Authorization: `Bearer ${stripePk}`,
+        "Authorization": `Bearer ${process.env.REACT_APP_STRIPE_PK}`,
         "Content-Type": "application/x-www-form-urlencoded"
-      }
+      },
+      data : qs.stringify({
+        "card[number]": cardInputs.cardNumber,
+        "card[exp_month]": cardInputs.cardExpiry.split("/")[0].trim(),
+        "card[exp_year]": cardInputs.cardExpiry.split("/")[1].trim(),
+        "card[cvc]": cardInputs.cardCvc
+      })
     })
-  }
+  }, [])
+
+  const addCard = useCallback((cardToken: string) => {
+    return filesApiClient.addCard({ token: cardToken }).then(refreshDefaultCard)
+  }, [filesApiClient, refreshDefaultCard])
 
   return (
     <BillingContext.Provider
       value={{
+        defaultCard,
         addCard,
         getCardTokenFromStripe
       }}

diff --git a/yarn.lock b/yarn.lock
@@ -1667,10 +1667,10 @@
   resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.17.9.tgz#8c608db1a07dc8bbdb10a1cd21fad00d091deed3"
   integrity sha512-5XUs/KlNfAIVbqKCxtVEbUyWneTn0/kp70blbyCqVwaX1X3e7D2aXX0gy7zR5kMM7yjGsZE7vwA/0oVCaemfig==
 
-"@chainsafe/files-api-client@1.18.0":
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.0.tgz#7df265c411126f6ee8b51a87d984e20463a715ee"
-  integrity sha512-97QHs2EOnhhioDlJk9xR9Q1Vv+dlXBA9oiVD4bLTEPW3uOmJjEi52lfaSyOSt1b9wINNFf0nx9wZb1FCWk8AgA==
+"@chainsafe/files-api-client@1.18.1":
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/@chainsafe/files-api-client/-/files-api-client-1.18.1.tgz#bcfdff988743d4684079dca10c4d86f86f93b822"
+  integrity sha512-FqNZdiBMo5GoHeQgya5u8AdjLhPqBR8iKYxrhp0oWxbb2FJdrExZTmLQT5y2e7vlSvdiY5aJT//4VioK138xmQ==
 
 "@chainsafe/web3-context@1.1.4":
   version "1.1.4"