Clear error message when the charge got rejected

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

@@ -12,7 +12,7 @@ import PlanSuccess from "./PlanSuccess"
 import DowngradeDetails from "./DowngradeDetails"
 import { PaymentMethod } from "../../../../../Contexts/BillingContext"
 import CryptoPayment from "../Common/CryptoPayment"
-import { t } from "@lingui/macro"
+import { formatSubscriptionError } from "../utils/formatSubscriptionError"
 
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
@@ -97,11 +97,8 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => {
           setSlide("planSuccess")
         })
         .catch((e) => {
-          if (e.error.code === 400 && e.error.message.includes("declined")) {
-            setSubscriptionErrorMessage(t`The transaction was declined. Please use a different card or try again.`)
-          } else {
-            setSubscriptionErrorMessage(t`Failed to update the subscription. Please try again later.`)
-          }
+          const errorMessage = formatSubscriptionError(e)
+          setSubscriptionErrorMessage(errorMessage)
         })
         .finally(() => setIsLoadingChangeSubscription(false))
     }
@@ -185,8 +182,14 @@ const ChangeProductModal = ({ onClose }: IChangeProductModal) => {
       <ConfirmPlan
         plan={selectedPlan}
         planPrice={selectedPrice}
-        goToSelectPlan={() => setSlide("select")}
-        goToPaymentMethod={() => setSlide("paymentMethod")}
+        goToSelectPlan={() => {
+          setSubscriptionErrorMessage(undefined)
+          setSlide("select")}
+        }
+        goToPaymentMethod={() => {
+          setSubscriptionErrorMessage(undefined)
+          setSlide("paymentMethod")
+        }}
         loadingChangeSubscription={isLoadingChangeSubscription}
         onChangeSubscription={selectedPaymentMethod === "creditCard" ? handleChangeSubscription : () => setSlide("cryptoPayment")}
         subscriptionErrorMessage={subscriptionErrorMessage}

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

@@ -6,7 +6,7 @@ import CryptoPayment from "../Common/CryptoPayment"
 import { useBilling } from "../../../../../Contexts/BillingContext"
 import { useFilesApi } from "../../../../../Contexts/FilesApiContext"
 import ConfirmPlan from "../Common/ConfirmPlan"
-import { t } from "@lingui/macro"
+import { formatSubscriptionError } from "../utils/formatSubscriptionError"
 
 const useStyles = makeStyles(({ constants, breakpoints }: CSFTheme) =>
   createStyles({
@@ -48,12 +48,9 @@ const PayInvoiceModal = ({ onClose, invoiceId }: IChangeProductModal) => {
       setPayingInvoice(true)
       setErrorMessage(undefined)
       filesApiClient.payInvoice(invoiceToPay.uuid).then(refreshInvoices)
-    } catch (error) {
-      if ((error as any).error.code === 400 && (error as any).error.message.includes("declined")) {
-        setErrorMessage(t`The transaction was declined. Please use a different card or try again.`)
-      } else {
-        setErrorMessage(t`Failed to update the subscription. Please try again later.`)
-      }
+    } catch (error: any) {
+      const errorMessage = formatSubscriptionError(error)
+      setErrorMessage(errorMessage)
     } finally {
       setPayingInvoice(false)
     }

packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/utils/formatSubscriptionError.ts

@@ -0,0 +1,6 @@
+import { t } from "@lingui/macro"
+
+export const formatSubscriptionError = (e: any): string =>
+  e.error.code === 400 && e.error.message.includes("declined")
+    ? t`The transaction was declined. Please use a different card or try again.`
+    : t`Failed to update the subscription. Please try again later.`