merge upstream

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

@@ -287,9 +287,9 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) =>
       </section>
       <section className={classes.bottomSection}>
         {desktop && (
-          <Link
+          <a
             className={classes.link}
-            to={ROUTE_LINKS.ProductPlans}
+            href={ROUTE_LINKS.ProductPlans}
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -300,7 +300,7 @@ const SelectPlan = ({ onClose, className, onSelectPlan, plans }: ISelectPlan) =>
               <Trans>Not sure what to pick? Learn more about our plans</Trans>
             </Typography>
             <ExternalSvg />
-          </Link>
+          </a>
         )}
         <div className={classes.buttons}>
           <Button

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
-import { Typography, CreditCardIcon, Button } from "@chainsafe/common-components"
+import { Typography, CreditCardIcon, Button, Dialog } from "@chainsafe/common-components"
 import { makeStyles, ITheme, createStyles } from "@chainsafe/common-theme"
-import { Trans } from "@lingui/macro"
+import { t, Trans } from "@lingui/macro"
 import { useBilling } from "../../../../Contexts/BillingContext"
 import AddCardModal from "./AddCard/AddCardModal"
 
@@ -21,14 +21,36 @@ const useStyles = makeStyles(({ constants, palette }: ITheme) =>
     creditCardIcon: {
       marginRight: constants.generalUnit,
       fill: palette.additional["gray"][9]
+    },
+    linkButton: {
+      textDecoration: "underline",
+      cursor: "pointer",
+      margin:  `0 ${constants.generalUnit * 2}px`
+    },
+    confirmDeletionDialog: {
+      top: "50%"
     }
   })
 )
 
 const CurrentCard: React.FC = () => {
   const classes = useStyles()
   const [isAddCardModalOpen, setIsAddCardModalOpen ] = useState(false)
-  const { defaultCard } = useBilling()
+  const { defaultCard, deleteCard, refreshDefaultCard } = useBilling()
+  const [isDeleteCardModalOpen, setIsDeleteCardModalOpen] = useState(false)
+  const [isDeleteCardLoading, setIsDeleteCardLoading] = useState(false)
+
+  const onRemoveCard = () =>  {
+    if (!defaultCard) return
+    setIsDeleteCardLoading(true)
+    deleteCard(defaultCard)
+      .then(refreshDefaultCard)
+      .catch(console.error)
+      .finally(() => {
+        setIsDeleteCardModalOpen(false)
+        setIsDeleteCardLoading(false)
+      })
+  }
 
   return (
     <>
@@ -44,8 +66,19 @@ const CurrentCard: React.FC = () => {
         {defaultCard
           ? <div className={classes.cardDetailsContainer}>
             <CreditCardIcon className={classes.creditCardIcon} />
-            <Typography>
-           •••• •••• •••• {defaultCard.last_four_digit}
+            <Typography
+              variant="body1"
+              component="p"
+            >
+              •••• •••• •••• {defaultCard.last_four_digit}
+            </Typography>
+            <Typography
+              variant="body1"
+              component="p"
+              className={classes.linkButton}
+              onClick={() => setIsDeleteCardModalOpen(true)}
+            >
+              <Trans>Remove</Trans>
             </Typography>
           </div>
           : <Typography
@@ -67,6 +100,17 @@ const CurrentCard: React.FC = () => {
         isModalOpen={isAddCardModalOpen}
         onClose={() => setIsAddCardModalOpen(false)}
       />
+      <Dialog
+        active={isDeleteCardModalOpen}
+        reject={() => setIsDeleteCardModalOpen(false)}
+        accept={onRemoveCard}
+        requestMessage={t`Are you sure? This will delete your default payment method.`}
+        rejectText={t`Cancel`}
+        acceptText={t`Confirm`}
+        acceptButtonProps={{ loading: isDeleteCardLoading, disabled: isDeleteCardLoading }}
+        rejectButtonProps={{ disabled: isDeleteCardLoading }}
+        injectedClass={{ inner: classes.confirmDeletionDialog }}
+      />
     </>
   )
 }

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

@@ -88,6 +88,9 @@ msgstr ""
 msgid "Approve"
 msgstr "Genehmigen"
 
+msgid "Are you sure? This will delete your default payment method."
+msgstr ""
+
 msgid "Back"
 msgstr ""
 
@@ -691,6 +694,9 @@ msgstr "Ablehnen"
 msgid "Reject all"
 msgstr "Alle ablehnen"
 
+msgid "Remove"
+msgstr ""
+
 msgid "Rename"
 msgstr "Umbenennen"
 

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

@@ -88,6 +88,9 @@ msgstr "Anyone with the link can:"
 msgid "Approve"
 msgstr "Approve"
 
+msgid "Are you sure? This will delete your default payment method."
+msgstr "Are you sure? This will delete your default payment method."
+
 msgid "Back"
 msgstr "Back"
 
@@ -694,6 +697,9 @@ msgstr "Reject"
 msgid "Reject all"
 msgstr "Reject all"
 
+msgid "Remove"
+msgstr "Remove"
+
 msgid "Rename"
 msgstr "Rename"
 

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

@@ -89,6 +89,9 @@ msgstr ""
 msgid "Approve"
 msgstr "Aprobar"
 
+msgid "Are you sure? This will delete your default payment method."
+msgstr ""
+
 msgid "Back"
 msgstr ""
 
@@ -695,6 +698,9 @@ msgstr "Rechazar"
 msgid "Reject all"
 msgstr "Rechazar todo"
 
+msgid "Remove"
+msgstr ""
+
 msgid "Rename"
 msgstr "Renombrar"
 

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

@@ -89,6 +89,9 @@ msgstr "Toute personne ayant le lien peut le faire :"
 msgid "Approve"
 msgstr "Accepter"
 
+msgid "Are you sure? This will delete your default payment method."
+msgstr ""
+
 msgid "Back"
 msgstr ""
 
@@ -695,6 +698,9 @@ msgstr "Refuser"
 msgid "Reject all"
 msgstr "Refuser tous"
 
+msgid "Remove"
+msgstr ""
+
 msgid "Rename"
 msgstr "Renommer"
 

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

@@ -88,6 +88,9 @@ msgstr ""
 msgid "Approve"
 msgstr "Godkjenn"
 
+msgid "Are you sure? This will delete your default payment method."
+msgstr ""
+
 msgid "Back"
 msgstr ""
 
@@ -691,6 +694,9 @@ msgstr "Avslå"
 msgid "Reject all"
 msgstr "Avslå alle"
 
+msgid "Remove"
+msgstr ""
+
 msgid "Rename"
 msgstr "Gi nytt navn"