@stigg/react-sdk 4.4.0-beta.9 → 4.4.0

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -10,10 +10,11 @@ import { useChargesSort } from '../../../hooks/useChargeSort';
 import { calculateUnitQuantityText } from '../../../paywall/utils/calculateUnitQuantityText';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { InputField } from '../../components';
-import { usePlanStepModel, useProgressBarModel } from '../../hooks';
+import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../hooks';
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
-import { getPriceFeatureUnit, getTierByQuantity } from '../../../utils/priceTierUtils';
+import { getTierByQuantity } from '../../../utils/priceTierUtils';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
+import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
 
 export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
 
@@ -31,6 +32,19 @@ const StyledPlanCharge = styled.div`
   margin-top: 16px;
 `;
 
+const getValidationText = (charge: Price, quantity?: number) => {
+  const { minUnitQuantity, maxUnitQuantity } = charge;
+  if (!quantity || quantity < (minUnitQuantity || 1)) {
+    return `Minimum ${minUnitQuantity || 1}`;
+  }
+
+  if (maxUnitQuantity && quantity > maxUnitQuantity) {
+    return `Maximum ${maxUnitQuantity}`;
+  }
+
+  return '';
+};
+
 export function PlanCharge({
   charge,
   isValid,
@@ -47,14 +61,22 @@ export function PlanCharge({
   const featureId = charge.feature?.featureId;
   const isBaseCharge = !featureId;
   const isPayAsYouGo = charge.pricingModel === BillingModel.UsageBased;
-  const displayName = isBaseCharge ? 'Base charge' : charge.feature?.displayName;
+  const displayName = isBaseCharge
+    ? 'Base charge'
+    : getFeatureDisplayNameText(charge.feature?.displayName || '', charge.feature?.units, charge.feature?.unitsPlural);
   const hasQuantityRestrictions = !!(charge?.minUnitQuantity || charge?.maxUnitQuantity);
 
   const handleQuantityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (isBaseCharge || !featureId) return;
 
-    const value = event?.target?.value ? Number(event?.target?.value) : charge.minUnitQuantity;
-    if (!value || value <= 0) {
+    const { minUnitQuantity, maxUnitQuantity } = charge;
+    const value = event?.target?.value ? Number(event?.target?.value) : null;
+    if (
+      !value ||
+      value <= 0 ||
+      (minUnitQuantity && value < minUnitQuantity) ||
+      (maxUnitQuantity && value > maxUnitQuantity)
+    ) {
       onValidationChange({ featureId, isValid: false });
       // Reset the input value to null
       // @ts-ignore
@@ -74,22 +96,22 @@ export function PlanCharge({
       amount: charge.amount!,
       currency: charge.currency,
       locale: 'en-us',
+      minimumFractionDigits: 2,
     });
 
     chargeRow = `${formattedAmount}`;
     if (isPayAsYouGo) {
       chargeRow += ' / unit';
     }
-  } else if (charge.isTieredPrice) {
+  } else if (charge.isTieredPrice && featureId) {
     const tier = getTierByQuantity(charge.tiers!, billableFeature!.quantity || 1);
     chargeRow = (
       <TiersSelectContainer
         componentId={`${featureId}-tiers`}
         tiers={charge.tiers}
-        tierUnits={getPriceFeatureUnit(charge)}
         selectedTier={tier}
         handleTierChange={(tier: PriceTierFragment) => {
-          setBillableFeature(featureId!, tier.upTo);
+          setBillableFeature(featureId, tier.upTo);
         }}
       />
     );
@@ -99,13 +121,10 @@ export function PlanCharge({
         sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
-        InputProps={
-          hasQuantityRestrictions ? { inputProps: { min: charge.minUnitQuantity, max: charge.maxUnitQuantity } } : {}
-        }
         error={!isValid}
-        helperText={!isValid ? 'Minimum 1' : undefined}
+        helperText={!isValid ? getValidationText(charge, billableFeature?.quantity) : undefined}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
-        value={billableFeature?.quantity ?? charge.minUnitQuantity ?? ''}
+        value={billableFeature?.quantity ?? ''}
         onChange={handleQuantityChange}
         onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
@@ -135,6 +154,7 @@ export function PlanCharge({
 export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListProps) {
   const { billableFeatures, setBillableFeature } = usePlanStepModel();
   const { setIsDisabled } = useProgressBarModel();
+  const { setIsValid } = useCheckoutModel();
   const planCharges = useChargesSort(plan?.pricePoints?.filter((p) => p.billingPeriod === billingPeriod) || []);
   const [chargesValidation, setChargesValidation] = useState(
     planCharges?.reduce<Record<string, boolean>>((acc, curr) => {
@@ -146,7 +166,8 @@ export function CheckoutChargeList({ plan, billingPeriod }: CheckoutChargeListPr
   useEffect(() => {
     const isDisabled = Object.values(chargesValidation).some((x) => !x);
     setIsDisabled(isDisabled);
-  }, [chargesValidation, setIsDisabled]);
+    setIsValid(!isDisabled);
+  }, [chargesValidation, setIsDisabled, setIsValid]);
 
   return (
     <div>

package/src/components/checkout/steps/plan/CheckoutPlanStep.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
+import { CheckoutContainerProps } from '../../CheckoutContainer';
 
 import { useCheckoutModel } from '../../hooks/useCheckoutModel';
 import { usePlanStepModel } from '../../hooks/usePlanStepModel';
+import { PlanHeader } from '../../planHeader';
 import { BillingPeriodPicker } from './BillingPeriodPicker';
 import { CheckoutChargeList } from './CheckoutChargeList';
 import { CheckoutPlanContainer } from './CheckoutPlanStep.style';
 
-export const CheckoutPlanStep = () => {
+export const CheckoutPlanStep = ({ onChangePlan }: Pick<CheckoutContainerProps, 'onChangePlan'>) => {
   const { checkoutState, checkoutLocalization } = useCheckoutModel();
   const { plan } = checkoutState || {};
   const { billingPeriod } = usePlanStepModel();
 
   return (
-    <CheckoutPlanContainer>
-      <BillingPeriodPicker plan={plan} checkoutLocalization={checkoutLocalization} />
-      <CheckoutChargeList plan={plan} billingPeriod={billingPeriod} />
-    </CheckoutPlanContainer>
+    <>
+      <PlanHeader allowChangePlan onChangePlan={onChangePlan} />
+      <CheckoutPlanContainer>
+        <BillingPeriodPicker plan={plan} checkoutLocalization={checkoutLocalization} />
+        <CheckoutChargeList plan={plan} billingPeriod={billingPeriod} />
+      </CheckoutPlanContainer>
+    </>
   );
 };

package/src/components/checkout/summary/CheckoutSuccess.tsx

@@ -69,7 +69,7 @@ export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization
         options={{ loop: false, autoplay: true, animationData }}
       />
       <CheckoutSuccessText variant="h1" color="primary.main">
-        {checkoutLocalization.checkoutSuccessText}
+        {checkoutLocalization.summary.checkoutSuccessText}
       </CheckoutSuccessText>
     </CheckoutSuccessContainer>
   );

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -23,6 +23,7 @@ import {
   AppliedCreditsLineItem,
   BilledPriceLineItem,
   DiscountLineItem,
+  FreeChargeLineItem,
   LineItemContainer,
   LineItemRow,
   TaxLineItem,
@@ -31,6 +32,7 @@ import { WithSkeleton } from './components/WithSkeleton';
 import { Icon } from '../../common/Icon';
 import { CheckoutLocalization } from '../textOverrides';
 import { CheckoutSuccess } from './CheckoutSuccess';
+import { getFeatureDisplayNameText } from '../../utils/getFeatureName';
 
 export const SummaryCard = styled(Paper)`
   border-radius: 10px;
@@ -42,29 +44,28 @@ SummaryCard.defaultProps = {
   elevation: 0,
 };
 
-const PlanName = styled(Typography)`
+const SummaryTitle = styled(Typography)`
   margin-bottom: 16px;
+  font-weight: 500;
 `;
 
 const StyledDivider = styled(Divider)`
   margin: 16px 0;
 `;
 
-const SubtotalText = styled(Typography)`
-  margin-top: 24px;
-`;
-
 const TotalDueText = styled(Typography)`
   margin-bottom: 8px;
 `;
 
 function resolveCheckoutButtonText({
   isLastStep,
+  checkoutHasChanges,
   isFreeDowngrade,
   checkoutLocalization,
   isPlanUpdate,
 }: {
   isLastStep?: boolean;
+  checkoutHasChanges: boolean;
   isFreeDowngrade: boolean;
   checkoutLocalization: CheckoutLocalization;
   isPlanUpdate?: boolean;
@@ -73,6 +74,10 @@ function resolveCheckoutButtonText({
     return checkoutLocalization.checkoutButton.nextText;
   }
 
+  if (!checkoutHasChanges) {
+    return checkoutLocalization.checkoutButton.noChangesText;
+  }
+
   if (isPlanUpdate) {
     return checkoutLocalization.checkoutButton.updateText;
   }
@@ -90,6 +95,7 @@ export const CheckoutSummary = ({
   disablePromotionCode,
   disableSuccessAnimation,
   isFreeDowngrade,
+  onMockCheckoutPreview,
 }: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
   const { setErrorMessage } = usePaymentStepModel();
@@ -104,7 +110,7 @@ export const CheckoutSummary = ({
   const [baseCharge] = baseCharges || [];
   const isLastStep = isFreeDowngrade || (progressBar.isCheckoutComplete && progressBar.isLastStep);
 
-  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
+  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
 
   const { handleSubmit, isLoading } = useSubmit({
     disableSuccessAnimation,
@@ -142,25 +148,47 @@ export const CheckoutSummary = ({
     }
   };
 
+  const checkoutHasChanges =
+    !!subscriptionPreview && (!!subscriptionPreview.proration || !!subscriptionPreview.hasScheduledUpdates);
+  const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade;
+  const showDiscountLine =
+    !!subscriptionPreview?.recurringSubscription &&
+    !!subscriptionPreview?.recurringSubscription?.discountDetails &&
+    !isFreeDowngrade;
+  const hasDiscounts = showPromotionCodeLine || showDiscountLine;
+
+  const hasPayAsYouGoCharges = usageCharges.some((price) => price.pricingModel === BillingModel.UsageBased);
+  const onlyPayAsYouGoCharges =
+    hasPayAsYouGoCharges &&
+    !baseCharge &&
+    usageCharges.every((price) => price.pricingModel === BillingModel.UsageBased);
+
+  const baseChargeLabel =
+    typeof checkoutLocalization.summary.baseChargeText === 'function'
+      ? checkoutLocalization.summary.baseChargeText({ billingPeriod: subscription.billingPeriod })
+      : checkoutLocalization.summary.baseChargeText;
+
   return (
     <Box flex={1}>
       <SummaryCard>
-        <PlanName variant="h6">{plan?.displayName}</PlanName>
+        <SummaryTitle variant="h6">{checkoutLocalization.summary.title}</SummaryTitle>
+
+        <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
+          <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+            {checkoutLocalization.summary.planName({ plan: plan! })}
+          </Typography>
+          <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
+        </Grid>
 
         {baseCharge && (
-          <LineItemContainer>
-            <LineItemRow>
-              <Typography variant="h6" color="primary">
-                {typeof checkoutLocalization.baseChargeText === 'function'
-                  ? checkoutLocalization.baseChargeText({ billingPeriod: subscription.billingPeriod })
-                  : checkoutLocalization.baseChargeText}
-              </Typography>
-              <Typography variant="body1" color="secondary">
-                {currencyPriceFormatter({ amount: baseCharge.amount!, currency: baseCharge.currency })}
-              </Typography>
-            </LineItemRow>
-          </LineItemContainer>
+          <BilledPriceLineItem
+            checkoutLocalization={checkoutLocalization}
+            label={baseChargeLabel}
+            quantity={1}
+            price={baseCharge}
+          />
         )}
+        {!baseCharge && isFreeDowngrade ? <FreeChargeLineItem label={baseChargeLabel} /> : null}
 
         {usageCharges.map((price) => {
           const priceBillableFeature = subscription.billableFeatures?.find(
@@ -169,8 +197,13 @@ export const CheckoutSummary = ({
 
           return (
             <BilledPriceLineItem
+              checkoutLocalization={checkoutLocalization}
               key={price.feature?.featureId}
-              label={price.feature?.displayName || ''}
+              label={getFeatureDisplayNameText(
+                price.feature?.displayName || '',
+                price.feature?.units,
+                price.feature?.unitsPlural,
+              )}
               quantity={priceBillableFeature?.quantity || 1}
               price={price}
             />
@@ -179,11 +212,11 @@ export const CheckoutSummary = ({
 
         {!!subscription.addons?.length && (
           <>
-            <Grid display="flex" flexDirection="row" alignItems="center" marginY={1}>
+            <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
               <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
-                {checkoutLocalization.addonsSectionTitle}
+                {checkoutLocalization.summary.addonsSectionTitle}
               </Typography>
-              <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1 }} />
+              <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
             </Grid>
             {subscription.addons.map((addon) => {
               const addonPrice = addon.addon.pricePoints?.find(
@@ -196,6 +229,7 @@ export const CheckoutSummary = ({
 
               return (
                 <BilledPriceLineItem
+                  checkoutLocalization={checkoutLocalization}
                   key={addon?.addon?.id}
                   label={addon.addon.displayName}
                   quantity={addonQuantity}
@@ -206,36 +240,93 @@ export const CheckoutSummary = ({
           </>
         )}
 
-        <LineItemRow>
-          <SubtotalText variant="h6">{checkoutLocalization.subTotalText}</SubtotalText>
-          <SubtotalText variant="h6">
-            <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
-              {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.subTotal })}
-            </WithSkeleton>
-          </SubtotalText>
-        </LineItemRow>
-
-        <StyledDivider className="stigg-checkout-summary-divider" />
+        {!hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
+        {hasDiscounts && (
+          <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
+            <Typography variant="body1" color="primary" style={{ paddingRight: '8px' }}>
+              {checkoutLocalization.summary.discountsSectionTitle}
+            </Typography>
+            <StyledDivider className="stigg-checkout-summary-divider" sx={{ flex: 1, margin: '0 !important' }} />
+          </Grid>
+        )}
 
-        {!disablePromotionCode && !isFreeDowngrade && (
-          <>
-            <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
+        {showPromotionCodeLine && (
+          <PromotionCodeSection
+            disabled={isLoading || isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+            onMockCheckoutPreview={onMockCheckoutPreview}
+          />
+        )}
 
-            <StyledDivider className="stigg-checkout-summary-divider" />
-          </>
+        {showDiscountLine && (
+          <DiscountLineItem
+            subscriptionPreview={subscriptionPreview!}
+            isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+          />
         )}
 
-        <DiscountLineItem
-          subscriptionPreview={subscriptionPreview}
-          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
-        />
+        {hasDiscounts && <StyledDivider className="stigg-checkout-summary-divider" />}
 
         <TaxLineItem
-          subscriptionPreview={subscriptionPreview}
+          tax={subscriptionPreview?.recurringSubscription?.tax}
+          taxDetails={subscriptionPreview?.recurringSubscription?.taxDetails}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
         />
 
+        {!isFreeDowngrade ? (
+          <>
+            <LineItemRow style={{ marginTop: 16 }}>
+              <Grid display="flex" flexDirection="column" container>
+                <Grid item display="flex" justifyContent="space-between">
+                  <Typography variant="h6">{checkoutLocalization.summary.totalText}</Typography>
+                  <Typography variant="h6">
+                    <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                      {onlyPayAsYouGoCharges ? checkoutLocalization.summary.onlyPayAsYouGoText : null}
+                      {!onlyPayAsYouGoCharges && hasPayAsYouGoCharges
+                        ? checkoutLocalization.summary.startsAtText
+                        : null}
+                      {!onlyPayAsYouGoCharges
+                        ? currencyPriceFormatter({
+                            amount: 0,
+                            ...subscriptionPreview?.recurringSubscription?.total,
+                            minimumFractionDigits: 2,
+                          })
+                        : null}
+                    </WithSkeleton>
+                  </Typography>
+                </Grid>
+                <Grid item>
+                  <Typography variant="body1" color="secondary">
+                    {checkoutLocalization.summary.totalBillingPeriodText({ billingPeriod: subscription.billingPeriod })}
+                  </Typography>
+                </Grid>
+              </Grid>
+            </LineItemRow>
+            <StyledDivider className="stigg-checkout-summary-divider" />
+          </>
+        ) : null}
+
+        {subscriptionPreview?.subTotal && subscriptionPreview?.subTotal.amount > 0 ? (
+          <LineItemContainer>
+            <LineItemRow>
+              <Typography variant="body1" color="secondary">
+                {checkoutLocalization.summary.proratedTotalDueText}
+              </Typography>
+              <Typography variant="body1" color="secondary">
+                <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
+                  {currencyPriceFormatter({
+                    amount: subscriptionPreview?.subTotal.amount + (subscriptionPreview?.tax?.amount || 0),
+                    currency: subscriptionPreview?.subTotal.currency,
+                    minimumFractionDigits: 2,
+                  })}
+                </WithSkeleton>
+              </Typography>
+            </LineItemRow>
+          </LineItemContainer>
+        ) : null}
+
         <AppliedCreditsLineItem
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
@@ -244,10 +335,10 @@ export const CheckoutSummary = ({
 
         <LineItemContainer>
           <LineItemRow>
-            <TotalDueText variant="h6">{checkoutLocalization.totalText}</TotalDueText>
+            <TotalDueText variant="h6">{checkoutLocalization.summary.totalDueText}</TotalDueText>
             <TotalDueText variant="h6">
               <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
-                {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.total })}
+                {currencyPriceFormatter({ amount: 0, ...subscriptionPreview?.total, minimumFractionDigits: 2 })}
               </WithSkeleton>
             </TotalDueText>
           </LineItemRow>
@@ -265,7 +356,12 @@ export const CheckoutSummary = ({
         <Button
           $success={isCheckoutCompletedSuccessfully}
           $error={isLastStep && isFreeDowngrade}
-          disabled={isLoading || isFetchingSubscriptionPreview || progressBar.progressBarState.isDisabled}
+          disabled={
+            isLoading ||
+            isFetchingSubscriptionPreview ||
+            progressBar.progressBarState.isDisabled ||
+            (isLastStep && !checkoutHasChanges)
+          }
           className="stigg-checkout-summary-cta-button"
           sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
           variant="contained"
@@ -282,6 +378,7 @@ export const CheckoutSummary = ({
             ) : (
               resolveCheckoutButtonText({
                 isLastStep,
+                checkoutHasChanges,
                 isFreeDowngrade,
                 checkoutLocalization,
                 isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,

package/src/components/checkout/summary/components/CheckoutCaptions.tsx

@@ -1,13 +1,14 @@
+/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import moment from 'moment';
-import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { CheckoutLocalization } from '../../textOverrides';
 import { WithSkeleton } from './WithSkeleton';
 
 export type CheckoutCaptionProps = {
-  subscriptionPreview?: SubscriptionPreview | null;
+  subscriptionPreview?: SubscriptionPreviewV2 | null;
   isFetchingSubscriptionPreview: boolean;
   activeSubscription?: Subscription | null;
   plan?: Plan;
@@ -15,9 +16,11 @@ export type CheckoutCaptionProps = {
   billingPeriod: BillingPeriod;
 };
 
-// TODO: move to localization
-
-const RemainingCreditsCaption = ({ subscriptionPreview, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
+const RemainingCreditsCaption = ({
+  subscriptionPreview,
+  isFetchingSubscriptionPreview,
+  checkoutLocalization,
+}: CheckoutCaptionProps) => {
   if (!subscriptionPreview?.proration?.netAmount?.amount || subscriptionPreview?.proration?.netAmount?.amount >= 0) {
     return null;
   }
@@ -27,12 +30,13 @@ const RemainingCreditsCaption = ({ subscriptionPreview, isFetchingSubscriptionPr
   const credits = currencyPriceFormatter({
     amount: positiveAmount,
     currency: subscriptionPreview.proration.netAmount.currency,
+    minimumFractionDigits: 2,
   });
 
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Your account will be granted credits worth ${credits} for unused time, which will be automatically applied to future payments.`}
+        {checkoutLocalization.summary.creditsForUnusedTimeText({ credits })}
       </WithSkeleton>
     </Typography>
   );
@@ -50,9 +54,9 @@ const ScheduledUpdatesCaption = ({
 
   const { currentBillingPeriodEnd } = activeSubscription;
   const changesWillApplyText =
-    typeof checkoutLocalization.changesWillApplyAtEndOfBillingPeriod === 'function'
-      ? checkoutLocalization.changesWillApplyAtEndOfBillingPeriod({ billingPeriodEnd: currentBillingPeriodEnd })
-      : checkoutLocalization.changesWillApplyAtEndOfBillingPeriod;
+    typeof checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod === 'function'
+      ? checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod({ billingPeriodEnd: currentBillingPeriodEnd })
+      : checkoutLocalization.summary.changesWillApplyAtEndOfBillingPeriod;
 
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
@@ -70,15 +74,18 @@ const NextBillingCaption = ({
   isFetchingSubscriptionPreview,
   billingPeriod,
 }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.subscription?.total) {
+  if (!subscriptionPreview?.recurringSubscription?.total) {
     return null;
   }
 
   const currentBillingPeriodEnd = subscriptionPreview.hasScheduledUpdates
     ? activeSubscription?.currentBillingPeriodEnd
     : subscriptionPreview?.billingPeriodRange.end;
-  const billingDate = moment(currentBillingPeriodEnd).format('MMM D, YYYY');
-  const total = currencyPriceFormatter(subscriptionPreview?.subscription.total);
+
+  const total = currencyPriceFormatter({
+    ...subscriptionPreview?.recurringSubscription.total,
+    minimumFractionDigits: 2,
+  });
 
   const hasUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel === BillingModel.UsageBased);
   const hasNonUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel !== BillingModel.UsageBased);
@@ -93,11 +100,27 @@ const NextBillingCaption = ({
       totalAmountText += '+';
     }
 
-    totalAmountText += ' applicable usage-based fees for this subscription ';
+    totalAmountText += ' applicable usage-based charges for this subscription ';
+  }
+
+  let nextBillingDate;
+  let billingPeriodText;
+
+  switch (billingPeriod) {
+    case BillingPeriod.Monthly:
+      billingPeriodText = 'month';
+      nextBillingDate = `the ${moment(currentBillingPeriodEnd).format('Do')}`;
+      break;
+    case BillingPeriod.Annually:
+      billingPeriodText = 'year';
+      nextBillingDate = moment(currentBillingPeriodEnd).format('MMMM Do');
+      break;
+    default: {
+      break;
+    }
   }
 
-  const billingPeriodText = billingPeriod === BillingPeriod.Monthly ? 'month' : 'year';
-  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${billingDate}, unless you cancel.`;
+  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, unless you cancel.`;
 
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>