Merge pull request #20364 from mozilla/PAY-3641

feat(payments-next): Display free trial information on processing page

Author: xlisachan

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx

@@ -81,7 +81,11 @@ export default async function CheckoutLayout({
 
           <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
-              invoice={cart.latestInvoicePreview ?? cart.upcomingInvoicePreview}
+              invoice={
+                cart.trialEndDate || cart.freeTrialEligibility
+                  ? cart.upcomingInvoicePreview
+                  : (cart.latestInvoicePreview ?? cart.upcomingInvoicePreview)
+              }
               offeringPrice={cart.offeringPrice}
               purchaseDetails={purchaseDetails}
               priceInterval={
@@ -108,14 +112,11 @@ export default async function CheckoutLayout({
               locale={locale}
               showPrices={
                 cart.state === CartState.START ||
+                cart.state === CartState.PROCESSING ||
                 cart.state === CartState.SUCCESS
               }
               freeTrialEligibility={cart.freeTrialEligibility}
-              firstChargeTax={
-                (cart.upcomingInvoicePreview.subsequentTax ?? cart.upcomingInvoicePreview.taxAmounts)
-                  .filter((tax) => !tax.inclusive)
-                  .reduce((sum, tax) => sum + tax.amount, 0)
-              }
+              firstChargeAmount={cart.upcomingInvoicePreview.totalAmount}
               interval={cart.interval}
               cartState={cart.state}
               trialStartDate={cart.trialStartDate}

apps/payments/next/app/[locale]/[offeringId]/[interval]/upgrade/[cartId]/(mainLayout)/layout.tsx

@@ -89,6 +89,7 @@ export default async function UpgradeSuccessLayout({
               locale={locale}
               showPrices={
                 cart.state === CartState.START ||
+                cart.state === CartState.PROCESSING ||
                 cart.state === CartState.SUCCESS
               }
             />

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

@@ -6,7 +6,7 @@
 
 import { Localized } from '@fluent/react';
 import Image from 'next/image';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { InvoicePreview } from '@fxa/payments/customer';
 import alertCircle from '@fxa/shared/assets/images/alert-black-circle.svg';
 import infoLogo from '@fxa/shared/assets/images/info.svg';
@@ -32,7 +32,7 @@ type PurchaseDetailsProps = {
   freeTrialEligibility?: {
     trialLengthDays: number;
   } | null;
-  firstChargeTax?: number;
+  firstChargeAmount?: number;
   interval?: string;
   cartState?: string;
   trialStartDate?: number;
@@ -49,13 +49,44 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
     locale,
     showPrices,
     freeTrialEligibility,
-    firstChargeTax,
+    firstChargeAmount,
     interval,
     cartState,
     trialStartDate,
     trialEndDate,
   } = props;
   const { details, productName, subtitle, webIcon } = purchaseDetails;
+
+  // Cache props from START as server re-renders during PROCESSING which
+  // may return different data as Stripe state changes
+  const [stableInvoice, setStableInvoice] = useState(invoice);
+  const [stableTotalPrice, setStableTotalPrice] = useState(totalPrice);
+  const [stableFreeTrialEligibility, setStableFreeTrialEligibility] =
+    useState(freeTrialEligibility);
+  const [stableTrialStartDate, setStableTrialStartDate] =
+    useState(trialStartDate);
+  const [stableTrialEndDate, setStableTrialEndDate] = useState(trialEndDate);
+  useEffect(() => {
+    const isFreeTrial =
+      !!stableTrialEndDate ||
+      (!!stableFreeTrialEligibility &&
+        stableFreeTrialEligibility.trialLengthDays > 0);
+    if (cartState === 'start' || (cartState === 'success' && !isFreeTrial)) {
+      setStableInvoice(invoice);
+      setStableTotalPrice(totalPrice);
+      setStableFreeTrialEligibility(freeTrialEligibility);
+      setStableTrialStartDate(trialStartDate);
+      setStableTrialEndDate(trialEndDate);
+    }
+  }, [
+    cartState,
+    invoice,
+    totalPrice,
+    freeTrialEligibility,
+    trialStartDate,
+    trialEndDate,
+  ]);
+
   const {
     amountDue,
     creditApplied,
@@ -69,27 +100,28 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
     taxAmounts,
     totalAmount,
     unusedAmountTotal,
-  } = invoice;
+  } = stableInvoice;
   const exclusiveTaxRates = taxAmounts.filter(
     (taxAmount) => !taxAmount.inclusive
   );
   const freeTrial =
-    !!trialEndDate ||
-    (!!freeTrialEligibility && freeTrialEligibility.trialLengthDays > 0);
+    !!stableTrialEndDate ||
+    (!!stableFreeTrialEligibility &&
+      stableFreeTrialEligibility.trialLengthDays > 0);
   const trialDayLength =
-    trialStartDate && trialEndDate
-      ? Math.round((trialEndDate - trialStartDate) / 86400)
-      : freeTrialEligibility?.trialLengthDays;
+    stableTrialStartDate && stableTrialEndDate
+      ? Math.round((stableTrialEndDate - stableTrialStartDate) / 86400)
+      : stableFreeTrialEligibility?.trialLengthDays;
   const formattedTrialEndDate = freeTrial
     ? getLocalizedDateString(
-        trialEndDate ??
+        stableTrialEndDate ??
           Math.floor((Date.now() + (trialDayLength ?? 0) * 86400000) / 1000),
         false,
         locale
       )
     : '';
   const formattedFirstCharge = getLocalizedCurrencyString(
-    offeringPrice + (firstChargeTax ?? 0),
+    firstChargeAmount ?? offeringPrice,
     currency,
     locale
   );
@@ -367,9 +399,9 @@ export function PurchaseDetails(props: PurchaseDetailsProps) {
               >
                 {freeTrial
                   ? getLocalizedCurrencyString(0, currency, locale)
-                  : !!unusedAmountTotal
+                  : !!unusedAmountTotal || !!creditApplied
                     ? getLocalizedCurrencyString(amountDue, currency, locale)
-                    : totalPrice}
+                    : stableTotalPrice}
               </p>
             </div>