diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx index 880b15c74c..a967fc62be 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/ChangePlan/ChangePlanModal.tsx +++ b/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) => { 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} diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx index 8aa309914e..bf35e8bb66 100644 --- a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/PayInvoice/PayInvoiceModal.tsx +++ b/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) } diff --git a/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/utils/formatSubscriptionError.ts b/packages/files-ui/src/Components/Modules/Settings/SubscriptionTab/utils/formatSubscriptionError.ts new file mode 100644 index 0000000000..904921634d --- /dev/null +++ b/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.` \ No newline at end of file