remove buttons when adding/updating a card (#1902)

Co-authored-by: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
ChainSafe · Feb 2, 2022 · ed85d79 · ed85d79
1 parent cd39d76
commit ed85d79
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 41 deletions.
diff --git a/...s-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethodSelector.tsx b/...s-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/PaymentMethodSelector.tsx
@@ -86,7 +86,7 @@ interface IPaymentMethodProps {
 const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMethod }: IPaymentMethodProps) => {
   const classes = useStyles()
   const [paymentMethod, setPaymentMethod] = useState<"creditCard" | "crypto" | undefined>()
-  const [view, setView] = useState<"selectPaymentMethod" | "addCard">("selectPaymentMethod")
+  const [isCardFormOpen, setIsCardFormOpen] = useState(false)
   const { defaultCard } = useBilling()
 
   useEffect(() => {
@@ -110,10 +110,10 @@ const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMe
         component="p"
         className={classes.subHeading}
       >
-        {view === "addCard" && <Trans>This card will become your default payment method</Trans>}
+        {isCardFormOpen && <Trans>This card will become your default payment method</Trans>}
       </Typography>
       <Divider className={classes.divider} />
-      {view === "selectPaymentMethod" && <>
+      {!isCardFormOpen && <>
         <div className={classes.rowBox}>
           <RadioInput
             label={defaultCard ? `•••• •••• •••• ${defaultCard.last_four_digit}` : "Credit card"}
@@ -128,7 +128,7 @@ const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMe
             variant="body1"
             component="p"
             className={classes.textButton}
-            onClick={() => setView("addCard")}
+            onClick={() => setIsCardFormOpen(true)}
             data-cy={defaultCard ? "text-button-update-card" : "text-button-add-card"}
           >
             {defaultCard
@@ -149,17 +149,16 @@ const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMe
         />
       </>
       }
-      {view === "addCard" && <div className={classes.addCardWrapper}>
+      {isCardFormOpen && <div className={classes.addCardWrapper}>
         <AddCard
           submitText={t`Use this card`}
           footerClassName={classes.footer}
-          onCardAdd={() => setView("selectPaymentMethod")}
-          goBack={() => setView("selectPaymentMethod")}
+          onCardAdd={() => setIsCardFormOpen(false)}
+          goBack={() => setIsCardFormOpen(false)}
         />
       </div>
       }
-      <Divider className={classes.divider} />
-      <section className={classes.bottomSection}>
+      {!isCardFormOpen && <section className={classes.bottomSection}>
         <div className={classes.buttons}>
           <Button
             onClick={goBack}
@@ -170,14 +169,14 @@ const PaymentMethodSelector = ({ selectedProductPrice, goBack, onSelectPaymentMe
           </Button>
           <Button
             variant="primary"
-            disabled={!paymentMethod || view === "addCard"}
+            disabled={!paymentMethod}
             onClick={() => paymentMethod && onSelectPaymentMethod(paymentMethod)}
             testId="select-payment-method"
           >
             <Trans>Select payment method</Trans>
           </Button>
         </div>
-      </section>
+      </section>}
     </article>
   )
 }

diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/Common/AddCard.tsx
@@ -1,10 +1,11 @@
 import React, { FormEvent, useMemo, useState } from "react"
-import { Button, Grid, Typography, useToasts } from "@chainsafe/common-components"
+import { Button, Typography, useToasts } from "@chainsafe/common-components"
 import { createStyles, makeStyles, useTheme, useThemeSwitcher } from "@chainsafe/common-theme"
 import { CSFTheme } from "../../../../../Themes/types"
 import CustomButton from "../../../../Elements/CustomButton"
 import { t, Trans } from "@lingui/macro"
-import { useStripe,
+import {
+  useStripe,
   useElements,
   CardNumberElement,
   CardExpiryElement,
@@ -61,14 +62,14 @@ const useStyles = makeStyles(
         marginTop: constants.generalUnit * 2,
         color: palette.error.main
       },
-      backButton: {
-        flex: 1,
+      buttons: {
         display: "flex",
-        alignItems: "center"
-      },
-      linkButton: {
-        textDecoration: "underline",
-        cursor: "pointer"
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        "& > *": {
+          marginLeft: constants.generalUnit
+        }
       }
     })
   }
@@ -168,7 +169,8 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
                   color: theme.constants.addCard.placeholderColor
                 }
               }
-            } }}
+            }
+          }}
           onFocus={() => setFocusElement("number")}
           onBlur={() => setFocusElement(undefined)}
           onChange={() => setCardAddError(undefined)}
@@ -191,7 +193,8 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
                     color: theme.constants.addCard.placeholderColor
                   }
                 }
-              } }}
+              }
+            }}
           />
           <CardCvcElement
             id="iframe-card-cvc"
@@ -210,7 +213,8 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
                     color: theme.constants.addCard.placeholderColor
                   }
                 }
-              } }}
+              }
+            }}
           />
         </div>
         {cardAddError && <Typography
@@ -222,23 +226,15 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
           {cardAddError}
         </Typography>
         }
-        <Grid
-          item
-          flexDirection="row"
-          className={footerClassName}
-        >
-          <div className={classes.backButton}>
-            {goBack &&
-              <Typography
-                variant="body1"
-                component="p"
-                onClick={goBack}
-                className={classes.linkButton}
-              >
-                <Trans>Go  back</Trans>
-              </Typography>
-            }
-          </div>
+        <div className={clsx(classes.buttons, footerClassName)} >
+          {goBack &&
+            <Button
+              variant="text"
+              onClick={goBack}
+            >
+              <Trans>Go  back</Trans>
+            </Button>
+          }
           {onClose &&
             <CustomButton
               onClick={onClose}
@@ -262,7 +258,7 @@ const AddCard = ({ onClose, onCardAdd, footerClassName, submitText, goBack }: IA
           >
             {submitText}
           </Button>
-        </Grid>
+        </div>
       </div>
     </form>
   )