chore(payment): add access check retry mechanism

Author: royschut

packages/common/src/controllers/AccountController.ts

@@ -334,7 +334,7 @@ export default class AccountController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    await this.reloadSubscriptions({ delay: 2000 });
+    await this.reloadSubscriptions({ retry: 10 });
 
     return response?.responseData;
   };
@@ -386,7 +386,7 @@ export default class AccountController {
     return !!responseData?.accessGranted;
   };
 
-  reloadSubscriptions = async ({ delay }: { delay: number } = { delay: 0 }): Promise<unknown> => {
+  reloadSubscriptions = async ({ delay, retry }: { delay?: number; retry?: number } = { delay: 0, retry: 0 }): Promise<unknown> => {
     useAccountStore.setState({ loading: true });
 
     const { getAccountInfo } = useAccountStore.getState();
@@ -395,10 +395,10 @@ export default class AccountController {
 
     // The subscription data takes a few seconds to load after it's purchased,
     // so here's a delay mechanism to give it time to process
-    if (delay > 0) {
+    if (delay && delay > 0) {
       return new Promise((resolve: (value?: unknown) => void) => {
         setTimeout(() => {
-          this.reloadSubscriptions().finally(resolve);
+          this.reloadSubscriptions({ retry }).finally(resolve);
         }, delay);
       });
     }
@@ -418,6 +418,12 @@ export default class AccountController {
 
     let pendingOffer: Offer | null = null;
 
+    if (!activeSubscription && !!retry && retry > 0) {
+      const retryDelay = 1500; // Any initial delay has already occured, so we can set this to a fixed value
+
+      return await this.reloadSubscriptions({ delay: retryDelay, retry: retry - 1 });
+    }
+
     // resolve and fetch the pending offer after upgrade/downgrade
     try {
       if (activeSubscription?.pendingSwitchId) {

packages/hooks-react/src/useCheckAccess.ts

@@ -31,7 +31,7 @@ const useCheckAccess = () => {
         const hasAccess = await accountController.checkEntitlements(offerId);
 
         if (hasAccess) {
-          await accountController.reloadSubscriptions({ delay: 2000 }); // Delay needed for backend processing (Cleeng API returns empty subscription, even after accessGranted from entitlements call
+          await accountController.reloadSubscriptions({ retry: 10 });
           callback?.(true);
         } else if (--iterations === 0) {
           window.clearInterval(intervalRef.current);

packages/hooks-react/src/useCheckout.ts

@@ -47,7 +47,7 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
     mutationKey: ['submitPaymentWithoutDetails'],
     mutationFn: checkoutController.paymentWithoutDetails,
     onSuccess: async () => {
-      await accountController.reloadSubscriptions({ delay: 1000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
       onSubmitPaymentWithoutDetailsSuccess();
     },
   });

packages/hooks-react/src/useOffers.ts

@@ -34,7 +34,7 @@ const useOffers = () => {
   const switchSubscription = useMutation({
     mutationKey: ['switchSubscription'],
     mutationFn: checkoutController.switchSubscription,
-    onSuccess: () => accountController.reloadSubscriptions({ delay: 7500 }), // @todo: Is there a better way to wait?
+    onSuccess: () => accountController.reloadSubscriptions({ delay: 3000, retry: 10 }), // A subscription switch usually takes at least 3 secs
   });
 
   useEffect(() => {

packages/ui-react/src/components/FinalizePayment/FinalizePayment.tsx

@@ -41,7 +41,7 @@ const FinalizePayment = () => {
 
     try {
       await checkoutController.finalizeAdyenPayment({ redirectResult: decodeURI(redirectResult) }, orderId);
-      await accountController.reloadSubscriptions({ delay: 2000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
 
       announce(t('checkout.payment_success'), 'success');
       navigate(paymentSuccessUrl);

packages/ui-react/src/containers/AdyenInitialPayment/AdyenInitialPayment.tsx

@@ -75,7 +75,7 @@ export default function AdyenInitialPayment({ setUpdatingOrder, type, paymentSuc
           handleAction(result.action);
         }
 
-        await accountController.reloadSubscriptions({ delay: 2000 });
+        await accountController.reloadSubscriptions({ retry: 10 });
         announce(t('account:checkout.payment_success'), 'success');
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {

packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx

@@ -43,7 +43,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
       setProcessing(true);
 
       await checkoutController.finalizeAdyenPaymentDetails({ redirectResult: decodeURI(redirectResult) }, paymentMethodId);
-      await accountController.reloadSubscriptions({ delay: 2000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
 
       setProcessing(false);
 
@@ -102,7 +102,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
           handleAction(result.action);
         }
 
-        await accountController.reloadSubscriptions({ delay: 2000 });
+        await accountController.reloadSubscriptions({ retry: 5 });
 
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {