feat(payments-next): Add t&cs for free trials

xlisachan · xlisachan · commit 0cb4f5f08d2d · 2026-03-26T18:47:05.000-04:00
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx
@@ -74,7 +74,9 @@ export default async function CheckoutLayout({
             <SignedIn email={session.user.email} />
           </section>
         )}
-        <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr]">
+        <div
+          className={`mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr] ${session?.user?.email ? 'mt-12 tablet:mt-0' : ''}`}
+        >
           <SubscriptionTitle cart={cart} l10n={l10n} />
 
           <div className="mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:row-start-1 tablet:row-span-3">
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx
@@ -231,7 +231,7 @@ export default async function Checkout({
             className={clsx(
               'font-semibold text-grey-600 text-lg mt-10 mb-5',
               !session?.user?.email &&
-              'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
+                'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
             )}
             data-testid="header-prefix"
           >
@@ -256,7 +256,7 @@ export default async function Checkout({
           className={clsx(
             'font-semibold text-grey-600 text-start',
             !session?.user?.email &&
-            'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
+              'cursor-not-allowed relative focus:border-blue-400 focus:outline-none focus:shadow-input-blue-focus after:absolute after:content-[""] after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:opacity-50 after:z-10 select-none'
           )}
         >
           {l10n.getString(
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx
@@ -56,7 +56,9 @@ export default async function UpgradeSuccessLayout({
             <SignedIn email={session.user.email} />
           </section>
         )}
-        <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr]">
+        <div
+          className={`mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr] ${session?.user?.email ? 'mt-12 tablet:mt-0' : ''}`}
+        >
           <SubscriptionTitle cart={cart} l10n={l10n} />
           <div className="mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:row-start-1 tablet:row-span-3">
             <PurchaseDetails
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/layout.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(startLayout)/layout.tsx
@@ -66,7 +66,9 @@ export default async function UpgradeLayout({
             <SignedIn email={session.user.email} />
           </section>
         )}
-        <div className="mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr]">
+        <div
+          className={`mx-7 tablet:grid tablet:grid-cols-[minmax(min-content,500px)_minmax(20rem,1fr)] tablet:grid-rows-[min-content] tablet:gap-x-8 tablet:mb-auto desktop:grid-cols-[600px_1fr] ${session?.user?.email ? 'mt-12 tablet:mt-0' : ''}`}
+        >
           <SubscriptionTitle cart={cart} l10n={l10n} />
 
           <div className="mb-6 tablet:mt-6 tablet:min-w-[18rem] tablet:max-w-xs tablet:col-start-2 tablet:row-start-1 tablet:row-span-3">
diff --git a/libs/payments/cart/src/lib/cart.service.spec.ts b/libs/payments/cart/src/lib/cart.service.spec.ts
@@ -60,6 +60,7 @@ import {
   ProfileClient,
 } from '@fxa/profile/client';
 import {
+  FreeTrialFactory,
   MockStrapiClientConfigProvider,
   ProductConfigurationManager,
   StrapiClient,
@@ -383,9 +384,7 @@ describe('CartService', () => {
       jest
         .spyOn(subscriptionManager, 'retrieve')
         .mockResolvedValue(mockSubscription);
-      jest
-        .spyOn(subscriptionManager, 'cancel')
-        .mockRejectedValue(stripeError);
+      jest.spyOn(subscriptionManager, 'cancel').mockRejectedValue(stripeError);
       jest
         .spyOn(paymentIntentManager, 'retrieve')
         .mockResolvedValue(mockPaymentIntent);
@@ -1722,6 +1721,9 @@ describe('CartService', () => {
       jest
         .spyOn(invoiceManager, 'preview')
         .mockResolvedValue(mockLatestInvoicePreview);
+      jest
+        .spyOn(checkoutService, 'getFreeTrialEligibility')
+        .mockResolvedValue(null);
     });
 
     it('returns cart and upcomingInvoicePreview', async () => {
@@ -1754,6 +1756,7 @@ describe('CartService', () => {
         },
         metricsOptedOut: false,
         hasActiveSubscriptions: true,
+        freeTrialEligibility: null,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
@@ -1816,6 +1819,7 @@ describe('CartService', () => {
           customerSessionClientSecret: mockCustomerSession.client_secret,
         },
         hasActiveSubscriptions: true,
+        freeTrialEligibility: null,
       });
       expect(
         'latestInvoicePreview' in result && result.latestInvoicePreview
@@ -1884,6 +1888,7 @@ describe('CartService', () => {
           customerSessionClientSecret: mockCustomerSession.client_secret,
         },
         hasActiveSubscriptions: true,
+        freeTrialEligibility: null,
       });
       expect(
         'latestInvoicePreview' in result && result.latestInvoicePreview
@@ -1934,6 +1939,7 @@ describe('CartService', () => {
         upcomingInvoicePreview: mockInvoicePreview,
         metricsOptedOut: false,
         hasActiveSubscriptions: false,
+        freeTrialEligibility: null,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
@@ -2006,6 +2012,7 @@ describe('CartService', () => {
           unitAmount: mockFromPrice.unit_amount,
         },
         hasActiveSubscriptions: true,
+        freeTrialEligibility: null,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
@@ -2312,6 +2319,60 @@ describe('CartService', () => {
         );
       });
     });
+
+    it('includes freeTrialEligibility when cart has uid and eligibility is CREATE', async () => {
+      const mockFreeTrial = FreeTrialFactory({ trialLengthDays: 7 });
+      const mockCart = ResultCartFactory({
+        uid: faker.string.uuid(),
+        state: CartState.START,
+        stripeSubscriptionId: null,
+        eligibilityStatus: CartEligibilityStatus.CREATE,
+      });
+      const mockInvoicePreview = InvoicePreviewFactory();
+
+      jest.spyOn(cartManager, 'fetchCartById').mockResolvedValue(mockCart);
+      jest.spyOn(eligibilityService, 'checkEligibility').mockResolvedValue({
+        subscriptionEligibilityResult: EligibilityStatus.CREATE,
+      });
+      jest
+        .spyOn(invoiceManager, 'previewUpcoming')
+        .mockResolvedValue(mockInvoicePreview);
+      jest
+        .spyOn(checkoutService, 'getFreeTrialEligibility')
+        .mockResolvedValue(mockFreeTrial);
+
+      const result = await cartService.getCart(mockCart.id);
+      expect(result.freeTrialEligibility).toEqual(mockFreeTrial);
+      expect(checkoutService.getFreeTrialEligibility).toHaveBeenCalledWith({
+        uid: mockCart.uid,
+        offeringConfigId: mockCart.offeringConfigId,
+        countryCode: mockCart.taxAddress?.countryCode,
+        interval: mockCart.interval,
+        eligibilityStatus: EligibilityStatus.CREATE,
+      });
+    });
+
+    it('sets freeTrialEligibility to null when cart has no uid', async () => {
+      const mockCart = ResultCartFactory({
+        uid: undefined,
+        stripeCustomerId: null,
+        stripeSubscriptionId: null,
+        eligibilityStatus: CartEligibilityStatus.CREATE,
+      });
+      const mockInvoicePreview = InvoicePreviewFactory();
+
+      jest.spyOn(cartManager, 'fetchCartById').mockResolvedValue(mockCart);
+      jest.spyOn(eligibilityService, 'checkEligibility').mockResolvedValue({
+        subscriptionEligibilityResult: EligibilityStatus.CREATE,
+      });
+      jest
+        .spyOn(invoiceManager, 'previewUpcoming')
+        .mockResolvedValue(mockInvoicePreview);
+
+      const result = await cartService.getCart(mockCart.id);
+      expect(result.freeTrialEligibility).toBeNull();
+      expect(checkoutService.getFreeTrialEligibility).not.toHaveBeenCalled();
+    });
   });
 
   describe('metricsOptedOut', () => {
diff --git a/libs/payments/cart/src/lib/cart.service.ts b/libs/payments/cart/src/lib/cart.service.ts
@@ -288,7 +288,7 @@ export class CartService {
             } catch (e) {
               if (
                 e.code === 'resource_missing' ||
-                  e.message?.startsWith('No such subscription')
+                e.message?.startsWith('No such subscription')
               ) {
                 this.log.log(
                   'cartService.wrapWithCartCatch.subscriptionNotFound',
@@ -299,9 +299,7 @@ export class CartService {
                     interval: cart.interval,
                   }
                 );
-                this.statsd.increment(
-                  'subscription_deletion_failed_not_found'
-                );
+                this.statsd.increment('subscription_deletion_failed_not_found');
               } else {
                 throw new CartSubscriptionDeletionFailedError(
                   cartId,
@@ -888,6 +886,17 @@ export class CartService {
     ]);
     const cartEligibilityStatus =
       handleEligibilityStatusMap[eligibility.subscriptionEligibilityResult];
+
+    const freeTrialEligibility = cart.uid
+      ? await this.checkoutService.getFreeTrialEligibility({
+          uid: cart.uid,
+          offeringConfigId: cart.offeringConfigId,
+          countryCode: cart.taxAddress.countryCode || '',
+          interval: cart.interval as SubplatInterval,
+          eligibilityStatus: eligibility.subscriptionEligibilityResult,
+        })
+      : null;
+
     const { unitAmountForCurrency: offeringPrice } =
       await this.priceManager.retrievePricingForCurrency(
         price.id,
@@ -1008,6 +1017,7 @@ export class CartService {
         latestInvoicePreview,
         paymentInfo,
         hasActiveSubscriptions: !!subscriptions?.length,
+        freeTrialEligibility,
       };
     }
 
@@ -1059,6 +1069,7 @@ export class CartService {
           : undefined,
       fromPrice: 'fromPrice' in eligibility ? fromPrice : undefined,
       hasActiveSubscriptions: !!subscriptions?.length,
+      freeTrialEligibility,
     };
   }
 
diff --git a/libs/payments/cart/src/lib/cart.types.ts b/libs/payments/cart/src/lib/cart.types.ts
@@ -9,6 +9,7 @@ import {
   CartErrorReasonId,
   CartState,
 } from '@fxa/shared/db/mysql/account';
+import type { FreeTrial } from '@fxa/shared/cms';
 import Stripe from 'stripe';
 
 export type FinishCart = {
@@ -78,6 +79,7 @@ export type BaseCartDTO = Omit<ResultCart, 'state'> & {
   fromPrice?: FromPrice;
   taxAddress: TaxAddress;
   currency: string;
+  freeTrialEligibility?: FreeTrial | null;
 };
 
 export type StartCartDTO = BaseCartDTO & {
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutCheckbox/en.ftl b/libs/payments/ui/src/lib/client/components/CheckoutCheckbox/en.ftl
@@ -1,5 +1,7 @@
 ## Component - Payment Consent Checkbox
 
 next-payment-confirm-with-legal-links-static-3 = I authorize { -brand-mozilla } to charge my payment method for the amount shown, according to <termsOfServiceLink>Terms of Service</termsOfServiceLink> and <privacyNoticeLink>Privacy Notice</privacyNoticeLink>, until I cancel my subscription.
-
+## $endDate (Date) - The end date of the free trial
+checkbox-payment-required-no-charge = A payment method is required to start your free trial. You will not be charged until { $endDate }.
+checkbox-confirm-free-trial-with-legal-links = I authorize { -brand-mozilla } to charge my payment method for the amount shown after the free trial ends on { $endDate }, according to the <termsOfServiceLink>Terms of Service</termsOfServiceLink> and <privacyNoticeLink>Privacy Notice</privacyNoticeLink>, until I cancel my subscription.
 next-payment-confirm-checkbox-error = You need to complete this before moving forward
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutCheckbox/index.tsx b/libs/payments/ui/src/lib/client/components/CheckoutCheckbox/index.tsx
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx
diff --git a/libs/payments/ui/src/lib/client/components/PaymentSection/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentSection/index.tsx
