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.`