fix(payments-next): Prevent from redirecting to error page after successfully redeeming coupon

Author: xlisachan

libs/payments/management/src/lib/churn-intervention.service.spec.ts

@@ -785,6 +785,46 @@ describe('ChurnInterventionService', () => {
         cmsChurnInterventionEntry: mockCmsChurnEntry,
       });
     });
+
+    it('returns redeemed true and does not increment redemption when coupon already applied', async () => {
+      jest
+        .spyOn(churnInterventionService, 'determineStaySubscribedEligibility')
+        .mockResolvedValue({
+          isEligible: true,
+          reason: 'eligible',
+          cmsChurnInterventionEntry: mockCmsChurnEntry,
+          cmsOfferingContent: null,
+        });
+      jest
+        .spyOn(accountCustomerManager, 'getAccountCustomerByUid')
+        .mockResolvedValue(mockAccountCustomer);
+      jest
+        .spyOn(subscriptionManager, 'retrieve')
+        .mockResolvedValue(mockSubscription);
+
+      jest.spyOn(subscriptionManager, 'hasCouponId').mockResolvedValue(true);
+
+      const result = await churnInterventionService.redeemChurnCoupon(
+        mockUid,
+        mockSubscription.id,
+        'stay_subscribed'
+      );
+
+      expect(result).toEqual({
+        redeemed: true,
+        reason: 'discount_already_applied',
+        updatedChurnInterventionEntryData: null,
+        cmsChurnInterventionEntry: mockCmsChurnEntry,
+      });
+
+      expect(
+        jest.spyOn(subscriptionManager, 'resubscribeWithCoupon')
+      ).not.toHaveBeenCalled();
+
+      expect(
+        jest.spyOn(churnInterventionManager, 'updateEntry')
+      ).not.toHaveBeenCalled();
+    });
   });
 
   describe('determineCancellationIntervention', () => {
@@ -1102,10 +1142,12 @@ describe('ChurnInterventionService', () => {
         .mockResolvedValue(StripeResponseFactory(mockSubscription));
 
       const result =
-        await churnInterventionService.determineCancelInterstitialOfferEligibility({
-          uid: mockUid,
-          subscriptionId: mockSubscription.id,
-        });
+        await churnInterventionService.determineCancelInterstitialOfferEligibility(
+          {
+            uid: mockUid,
+            subscriptionId: mockSubscription.id,
+          }
+        );
 
       expect(result).toEqual({
         isEligible: false,

libs/payments/management/src/lib/churn-intervention.service.ts

@@ -21,9 +21,7 @@ import { SubplatInterval, SubscriptionManager } from '@fxa/payments/customer';
 import { AccountCustomerManager } from '@fxa/payments/stripe';
 import { ProfileClient } from '@fxa/profile/client';
 import { NotifierService } from '@fxa/shared/notifier';
-import {
-  ChurnInterventionProductIdentifierMissingError,
-} from './churn-intervention.error';
+import { ChurnInterventionProductIdentifierMissingError } from './churn-intervention.error';
 
 @Injectable()
 export class ChurnInterventionService {
@@ -221,6 +219,25 @@ export class ChurnInterventionService {
           };
         }
 
+        const churnCouponId = cmsChurnInterventionEntry.stripeCouponId;
+        const couponAlreadyApplied = await this.subscriptionManager.hasCouponId(
+          subscriptionId,
+          churnCouponId
+        );
+
+        if (couponAlreadyApplied) {
+          this.statsd.increment('stay_subscribed_eligibility', {
+            eligibility: 'ineligible',
+            reason: 'discount_already_applied',
+          });
+          return {
+            isEligible: false,
+            reason: 'discount_already_applied',
+            cmsChurnInterventionEntry: null,
+            cmsOfferingContent: cmsContent,
+          };
+        }
+
         const redemptionCount =
           await this.churnInterventionManager.getRedemptionCountForUid(
             uid,
@@ -246,25 +263,6 @@ export class ChurnInterventionService {
           };
         }
 
-        const churnCouponId = cmsChurnInterventionEntry.stripeCouponId;
-        const couponAlreadyApplied = await this.subscriptionManager.hasCouponId(
-          subscriptionId,
-          churnCouponId
-        );
-
-        if (couponAlreadyApplied) {
-          this.statsd.increment('stay_subscribed_eligibility', {
-            eligibility: 'ineligible',
-            reason: 'discount_already_applied',
-          });
-          return {
-            isEligible: false,
-            reason: 'discount_already_applied',
-            cmsChurnInterventionEntry: null,
-            cmsOfferingContent: cmsContent,
-          };
-        }
-
         this.statsd.increment('stay_subscribed_eligibility', {
           eligibility: 'eligible',
         });
@@ -354,12 +352,29 @@ export class ChurnInterventionService {
         };
       }
 
+      const couponId =
+        eligibilityResult.cmsChurnInterventionEntry.stripeCouponId;
+
+      const couponAlreadyApplied = await this.subscriptionManager.hasCouponId(
+        subscriptionId,
+        couponId
+      );
+
+      if (couponAlreadyApplied) {
+        return {
+          redeemed: true,
+          reason: 'discount_already_applied',
+          updatedChurnInterventionEntryData: null,
+          cmsChurnInterventionEntry:
+            eligibilityResult.cmsChurnInterventionEntry,
+        };
+      }
+
       const updatedSubscription =
         await this.subscriptionManager.resubscribeWithCoupon({
           customerId: subscription.customer,
           subscriptionId,
-          stripeCouponId:
-            eligibilityResult.cmsChurnInterventionEntry.stripeCouponId,
+          stripeCouponId: couponId,
         });
       await this.customerChanged(uid);
 
@@ -537,7 +552,8 @@ export class ChurnInterventionService {
         await this.productConfigurationManager.getPageContentByPriceIds([
           stripePriceId,
         ]);
-      const { offering, purchaseDetails } = result.purchaseForPriceId(stripePriceId);
+      const { offering, purchaseDetails } =
+        result.purchaseForPriceId(stripePriceId);
       const offeringId = offering?.apiIdentifier;
       const { webIcon, productName } = purchaseDetails;
 
@@ -747,7 +763,7 @@ export class ChurnInterventionService {
           reason: 'customer_mismatch',
           cmsChurnInterventionEntry: null,
           cmsOfferingContent: null,
-        }
+        };
       }
 
       const subscriptionStatus =
@@ -809,6 +825,25 @@ export class ChurnInterventionService {
         };
       }
 
+      const churnCouponId = cmsChurnInterventionEntry.stripeCouponId;
+      const couponAlreadyApplied = await this.subscriptionManager.hasCouponId(
+        args.subscriptionId,
+        churnCouponId
+      );
+
+      if (couponAlreadyApplied) {
+        this.statsd.increment('cancel_intervention_decision', {
+          type: 'none',
+          reason: 'discount_already_applied',
+        });
+        return {
+          isEligible: false,
+          reason: 'discount_already_applied',
+          cmsChurnInterventionEntry,
+          cmsOfferingContent: cmsContent,
+        };
+      }
+
       const redemptionCount =
         await this.churnInterventionManager.getRedemptionCountForUid(
           args.uid,
@@ -834,25 +869,6 @@ export class ChurnInterventionService {
         };
       }
 
-      const churnCouponId = cmsChurnInterventionEntry.stripeCouponId;
-      const couponAlreadyApplied = await this.subscriptionManager.hasCouponId(
-        args.subscriptionId,
-        churnCouponId
-      );
-
-      if (couponAlreadyApplied) {
-        this.statsd.increment('cancel_intervention_decision', {
-          type: 'none',
-          reason: 'discount_already_applied',
-        });
-        return {
-          isEligible: false,
-          reason: 'discount_already_applied',
-          cmsChurnInterventionEntry,
-          cmsOfferingContent: cmsContent,
-        };
-      }
-
       this.statsd.increment('cancel_intervention_decision', {
         type: 'cancel_churn_intervention',
       });

libs/payments/ui/src/lib/client/components/ChurnCancel/index.tsx

@@ -8,14 +8,14 @@ import { Localized } from '@fluent/react';
 import * as Form from '@radix-ui/react-form';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useParams, useRouter, useSearchParams } from 'next/navigation';
+import { useParams, useSearchParams } from 'next/navigation';
 import { useState } from 'react';
 
 import { SubPlatPaymentMethodType } from '@fxa/payments/customer';
 import {
   getNextChargeChurnContent,
+  BaseButton,
   ButtonVariant,
-  SubmitButton,
 } from '@fxa/payments/ui';
 import { redeemChurnCouponAction } from '@fxa/payments/ui/actions';
 import spinner from '@fxa/shared/assets/images/spinner.svg';
@@ -72,7 +72,6 @@ export function ChurnCancel({
   cmsChurnInterventionEntry,
   cmsOfferingContent,
 }: ChurnCancelProps) {
-  const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [showResubscribeActionError, setResubscribeActionError] =
     useState(false);
@@ -104,7 +103,8 @@ export function ChurnCancel({
     nextInvoiceTotal: cancelContent.nextInvoiceTotal,
   });
 
-  async function churnCancelFlow() {
+  async function handleRedeemSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
     if (loading) return;
 
     setLoading(true);
@@ -177,30 +177,17 @@ export function ChurnCancel({
               <Link
                 className="border box-border flex font-bold font-header h-14 items-center justify-center rounded text-center py-2 px-5 bg-grey-10 border-grey-200 hover:bg-grey-50"
                 href={`/${locale}/subscriptions/landing`}
-                onClick={(e) => {
-                  e.preventDefault();
-                  setLoading(true);
-                  router.push(`/${locale}/subscriptions/landing`);
-                }}
               >
-                {loading ? (
-                  <Image
-                    src={spinner}
-                    alt=""
-                    className="absolute animate-spin h-8 w-8"
-                  />
-                ) : (
-                  <Localized id="churn-cancel-flow-button-back-to-subscriptions">
-                    <span>Back to subscriptions</span>
-                  </Localized>
-                )}
+                <Localized id="churn-cancel-flow-button-back-to-subscriptions">
+                  <span>Back to subscriptions</span>
+                </Localized>
               </Link>
             </div>
           </div>
         </div>
       ) : isOffer ? (
         <Form.Root
-          action={churnCancelFlow}
+          onSubmit={handleRedeemSubmit}
           className="max-w-[480px] p-10 text-grey-600 tablet:bg-white tablet:rounded-xl tablet:border tablet:border-grey-200 tablet:shadow-[0_0_16px_0_rgba(0,0,0,0.08)]"
         >
           <div className="flex flex-col items-center justify-center gap-4 text-center">
@@ -246,47 +233,44 @@ export function ChurnCancel({
             )}
 
             <Form.Submit asChild>
-              <SubmitButton
+              <BaseButton
                 className="flex font-bold h-14 items-center justify-center tablet:w-full"
                 variant={ButtonVariant.SubscriptionManagementSecondary}
+                type="submit"
                 disabled={loading}
               >
-                {typeof discountAmount === 'number' && discountAmount > 0 ? (
-                  <Localized
-                    id="churn-cancel-flow-button-stay-subscribed-and-save-discount"
-                    vars={{ discountPercent: discountAmount }}
-                  >
-                    <span>Stay subscribed and save {discountAmount}%</span>
-                  </Localized>
+                {loading ? (
+                  <Image
+                    src={spinner}
+                    alt=""
+                    className="absolute animate-spin h-8 w-8"
+                  />
                 ) : (
-                  <Localized id="churn-cancel-flow-button-stay-subscribed-and-save">
-                    <span>Stay subscribed and save</span>
-                  </Localized>
+                  <>
+                    {typeof discountAmount === 'number' &&
+                    discountAmount > 0 ? (
+                      <Localized
+                        id="churn-cancel-flow-button-stay-subscribed-and-save-discount"
+                        vars={{ discountPercent: discountAmount }}
+                      >
+                        <span>Stay subscribed and save {discountAmount}%</span>
+                      </Localized>
+                    ) : (
+                      <Localized id="churn-cancel-flow-button-stay-subscribed-and-save">
+                        <span>Stay subscribed and save</span>
+                      </Localized>
+                    )}
+                  </>
                 )}
-              </SubmitButton>
+              </BaseButton>
             </Form.Submit>
             <Link
               className="border box-border font-bold font-header h-14 items-center justify-center rounded text-center py-2 px-5 bg-grey-10 border-grey-200 hover:bg-grey-50 flex w-full"
               href={`/${locale}/subscriptions/${subscriptionId}/cancel`}
-              onClick={(e) => {
-                e.preventDefault();
-                setLoading(true);
-                router.push(
-                  `/${locale}/subscriptions/${subscriptionId}/cancel`
-                );
-              }}
             >
-              {loading ? (
-                <Image
-                  src={spinner}
-                  alt=""
-                  className="absolute animate-spin h-8 w-8"
-                />
-              ) : (
-                <Localized id="churn-cancel-flow-button-continue-to-cancel">
-                  <span>Continue to cancel</span>
-                </Localized>
-              )}
+              <Localized id="churn-cancel-flow-button-continue-to-cancel">
+                <span>Continue to cancel</span>
+              </Localized>
             </Link>
             <LinkExternal
               href={`/${locale}/${apiIdentifier}/${interval}/cancel/loyalty-discount/terms`}