handled payement update failure reasons

src/pages/gallery/index.tsx

@@ -176,7 +176,11 @@ export default function Gallery() {
             setFiles(files);
             setCollections(collections);
             await initDerivativeState(collections, files);
-            await checkSubscriptionPurchase(setDialogMessage, router);
+            await checkSubscriptionPurchase(
+                setDialogMessage,
+                router,
+                setLoading
+            );
             await syncWithRemote(true);
             setIsFirstLoad(false);
             setJustSignedUp(false);

src/utils/billingUtil.ts

@@ -12,6 +12,19 @@ import { CustomError } from './common/errorUtil';
 
 const STRIPE = 'stripe';
 
+enum FAILURE_REASON {
+    AUTHENTICATION_FAILED = 'authentication_failed',
+    REQUIRE_PAYMENT_METHOD = 'requires_payment_method',
+    STRIPE_ERROR = 'stripe_error',
+    CANCELED = 'canceled',
+    SERVER_ERROR = 'server_error',
+}
+
+enum RESPONSE_STATUS {
+    success = 'success',
+    fail = 'fail',
+}
+
 export function convertBytesToGBs(bytes, precision?): string {
     return (bytes / (1024 * 1024 * 1024)).toFixed(precision ?? 2);
 }
@@ -91,41 +104,14 @@ export async function updateSubscription(
     closePlanSelectorModal: () => null
 ) {
     try {
+        setLoading(true);
         await billingService.updateSubscription(plan.stripeID);
     } catch (err) {
-        // switch (err?.message) {
-        // case PAYMENT_INTENT_STATUS.REQUIRE_PAYMENT_METHOD:
-        //     setDialogMessage({
-        //         title: constants.UPDATE_PAYMENT_METHOD,
-        //         content: constants.UPDATE_PAYMENT_METHOD_MESSAGE,
-        //         staticBackdrop: true,
-        //         proceed: {
-        //             text: constants.UPDATE_PAYMENT_METHOD,
-        //             variant: 'success',
-        //             action: updatePaymentMethod.bind(
-        //                 null,
-
-        //                 setDialogMessage,
-        //                 setLoading
-        //             ),
-        //         },
-        //         close: { text: constants.CANCEL },
-        //     });
-        //     break;
-        // case CustomError.SUBSCRIPTION_VERIFICATION_ERROR:
-        //     setDialogMessage({
-        //         title: constants.ERROR,
-        //         content: constants.SUBSCRIPTION_VERIFICATION_FAILED,
-        //         close: { variant: 'danger' },
-        //     });
-        //     break;
-        // default:
         setDialogMessage({
             title: constants.ERROR,
             content: constants.SUBSCRIPTION_UPDATE_FAILED,
             close: { variant: 'danger' },
         });
-        // }
     } finally {
         setLoading(false);
         closePlanSelectorModal();
@@ -196,24 +182,75 @@ export async function updatePaymentMethod(
             close: { variant: 'danger' },
         });
     } finally {
-        setLoading(true);
+        setLoading(false);
     }
 }
 
 export async function checkSubscriptionPurchase(
     setDialogMessage: SetDialogMessage,
-    router: NextRouter
+    router: NextRouter,
+    setLoading: SetLoading
 ) {
     try {
         const urlParams = new URLSearchParams(window.location.search);
         const sessionId = urlParams.get('session_id');
-        if (sessionId === '-1') {
+        const status = urlParams.get('status');
+        const reason = urlParams.get('reason');
+        if (status === RESPONSE_STATUS.fail) {
+            switch (reason) {
+                case FAILURE_REASON.CANCELED:
                     setDialogMessage({
                         title: constants.MESSAGE,
                         content: constants.SUBSCRIPTION_PURCHASE_CANCELLED,
                         close: { variant: 'danger' },
                     });
-        } else if (sessionId) {
+                    break;
+                case FAILURE_REASON.REQUIRE_PAYMENT_METHOD:
+                    setDialogMessage({
+                        title: constants.UPDATE_PAYMENT_METHOD,
+                        content: constants.UPDATE_PAYMENT_METHOD_MESSAGE,
+                        staticBackdrop: true,
+                        proceed: {
+                            text: constants.UPDATE_PAYMENT_METHOD,
+                            variant: 'success',
+                            action: updatePaymentMethod.bind(
+                                null,
+
+                                setDialogMessage,
+                                setLoading
+                            ),
+                        },
+                        close: { text: constants.CANCEL },
+                    });
+                    break;
+
+                case FAILURE_REASON.AUTHENTICATION_FAILED:
+                    setDialogMessage({
+                        title: constants.UPDATE_PAYMENT_METHOD,
+                        content: constants.STRIPE_AUTHENTICATION_FAILED,
+                        staticBackdrop: true,
+                        proceed: {
+                            text: constants.UPDATE_PAYMENT_METHOD,
+                            variant: 'success',
+                            action: updatePaymentMethod.bind(
+                                null,
+
+                                setDialogMessage,
+                                setLoading
+                            ),
+                        },
+                        close: { text: constants.CANCEL },
+                    });
+                    break;
+
+                default:
+                    setDialogMessage({
+                        title: constants.ERROR,
+                        content: constants.SUBSCRIPTION_PURCHASE_FAILED,
+                        close: { variant: 'danger' },
+                    });
+            }
+        } else if (status === RESPONSE_STATUS.success) {
             try {
                 const subscription = await billingService.verifySubscription(
                     sessionId