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

package/src/components/checkout/steps/plan/BillingPeriodPicker.style.tsx

@@ -30,8 +30,9 @@ export const BillingPeriodButton = styled.button<{
   background: ${({ theme, $isActive, $isOnlyBillingPeriod }) => {
     if ($isOnlyBillingPeriod) {
       return 'transparent';
-    } else if ($isActive) {
-      return theme.stigg.palette.backgroundSection;
+    }
+    if ($isActive) {
+      return theme.stigg.palette.primaryLight;
     }
     return 'transparent';
   }};

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

@@ -49,13 +49,16 @@ type BillingPeriodPickerProps = {
   checkoutLocalization: CheckoutLocalization;
 };
 
-export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPeriodPickerProps) => {
+export function BillingPeriodPicker({ plan, checkoutLocalization }: BillingPeriodPickerProps) {
   const [monthlyPrices, annualPrices] = partition(
     plan?.pricePoints,
     (price) => price.billingPeriod === BillingPeriod.Monthly,
   );
 
   const hasBothBillingPeriods = !!monthlyPrices?.length && !!annualPrices?.length;
+  if (!hasBothBillingPeriods) {
+    return null;
+  }
 
   return (
     <BillingPeriodPickerContainer>
@@ -64,21 +67,21 @@ export const BillingPeriodPicker = ({ plan, checkoutLocalization }: BillingPerio
       </Typography>
 
       <BillingPeriodOptions>
-        {!!annualPrices?.length && (
+        {!!monthlyPrices?.length && (
           <BillingPeriodOption
-            key={BillingPeriod.Annually}
-            billingPeriod={BillingPeriod.Annually}
+            key={BillingPeriod.Monthly}
+            billingPeriod={BillingPeriod.Monthly}
             isOnlyBillingPeriod={!hasBothBillingPeriods}
           />
         )}
-        {!!monthlyPrices?.length && (
+        {!!annualPrices?.length && (
           <BillingPeriodOption
-            key={BillingPeriod.Monthly}
-            billingPeriod={BillingPeriod.Monthly}
+            key={BillingPeriod.Annually}
+            billingPeriod={BillingPeriod.Annually}
             isOnlyBillingPeriod={!hasBothBillingPeriods}
           />
         )}
       </BillingPeriodOptions>
     </BillingPeriodPickerContainer>
   );
-};
+}

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

@@ -4,27 +4,73 @@ import Color from 'color';
 import React from 'react';
 import Lottie from 'react-lottie';
 import animationData from '../../../assets/lottie/checkout-success.json';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../textOverrides';
 
 export const ANIMATION_DURATION = 5000;
 
-const BACKGROUND_COLOR = Color('#0b2f7a').alpha(0.3).toString();
-
 const CheckoutSuccessContainer = styled(Box)`
+  @keyframes blurFade {
+    0% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0).toString()};
+      backdrop-filter: blur(0px);
+    }
+    100% {
+      background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+      backdrop-filter: blur(6.5px);
+    }
+  }
+
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: ${BACKGROUND_COLOR};
+  z-index: 5;
+  background-color: ${({ theme }) => Color(theme.stigg.palette.backgroundPaper).alpha(0.9).toString()};
+  animation: blurFade 2s ease-in forwards;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
   * rect {
     fill: transparent;
   }
+
+  & path {
+    stroke: ${({ theme }) => theme.stigg.palette.primary};
+  }
+`;
+
+const CheckoutSuccessText = styled(Typography)`
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    75% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  align-self: center;
+  animation: fadeIn 5s ease-in forwards;
 `;
 
-export function CheckoutSuccess() {
+export function CheckoutSuccess({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) {
   return (
-    <CheckoutSuccessContainer>
-      <Lottie width={350} isClickToPauseDisabled options={{ loop: false, autoplay: true, animationData }} />
+    <CheckoutSuccessContainer className="stigg-checkout-success-container">
+      <Lottie
+        width={350}
+        height="auto"
+        isClickToPauseDisabled
+        options={{ loop: false, autoplay: true, animationData }}
+      />
+      <CheckoutSuccessText variant="h1" color="primary.main">
+        {checkoutLocalization.summary.checkoutSuccessText}
+      </CheckoutSuccessText>
     </CheckoutSuccessContainer>
   );
 }

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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import partition from 'lodash/partition';
 import styled from '@emotion/styled/macro';
 import { Box, CircularProgress, Divider, Grid, Paper } from '@mui/material';
-import { BillingModel, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel } from '@stigg/js-client-sdk';
 import { PoweredByStigg } from '../../common/PoweredByStigg';
 import { Typography } from '../../common/Typography';
 import { useChargesSort } from '../../hooks/useChargeSort';
@@ -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,53 +44,58 @@ 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,
-  subscriptionPreview,
+  checkoutHasChanges,
+  isFreeDowngrade,
   checkoutLocalization,
-  isFirstSubscription,
+  isPlanUpdate,
 }: {
   isLastStep?: boolean;
-  isFirstSubscription?: boolean;
-  subscriptionPreview?: SubscriptionPreview | null;
+  checkoutHasChanges: boolean;
+  isFreeDowngrade: boolean;
   checkoutLocalization: CheckoutLocalization;
+  isPlanUpdate?: boolean;
 }) {
   if (!isLastStep) {
     return checkoutLocalization.checkoutButton.nextText;
   }
 
-  if (subscriptionPreview?.isPlanDowngrade) {
-    return checkoutLocalization.checkoutButton.downgradeText;
+  if (!checkoutHasChanges) {
+    return checkoutLocalization.checkoutButton.noChangesText;
+  }
+
+  if (isPlanUpdate) {
+    return checkoutLocalization.checkoutButton.updateText;
   }
 
-  if (!isFirstSubscription) {
-    return checkoutLocalization.checkoutButton.upgradeText;
+  if (isFreeDowngrade) {
+    return checkoutLocalization.checkoutButton.downgradeToFreeText;
   }
 
-  return checkoutLocalization.checkoutButton.purchaseText;
+  return checkoutLocalization.checkoutButton.upgradeText;
 }
 
 export const CheckoutSummary = ({
   onCheckout,
   onCheckoutCompleted,
   disablePromotionCode,
+  disableSuccessAnimation,
   isFreeDowngrade,
+  onMockCheckoutPreview,
 }: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
   const { setErrorMessage } = usePaymentStepModel();
@@ -103,9 +110,10 @@ 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,
     onCheckout,
     onCheckoutCompleted,
     onSuccess: () => {
@@ -140,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(
@@ -167,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}
             />
@@ -177,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(
@@ -194,6 +229,7 @@ export const CheckoutSummary = ({
 
               return (
                 <BilledPriceLineItem
+                  checkoutLocalization={checkoutLocalization}
                   key={addon?.addon?.id}
                   label={addon.addon.displayName}
                   quantity={addonQuantity}
@@ -204,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}
@@ -242,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>
@@ -257,12 +350,18 @@ export const CheckoutSummary = ({
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
+          billingPeriod={subscription.billingPeriod}
         />
 
         <Button
           $success={isCheckoutCompletedSuccessfully}
-          $error={isLastStep && !!subscriptionPreview?.isPlanDowngrade}
-          disabled={isLoading || isFetchingSubscriptionPreview || progressBar.progressBarState.isDisabled}
+          $error={isLastStep && isFreeDowngrade}
+          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"
@@ -277,7 +376,13 @@ export const CheckoutSummary = ({
             ) : isLoading || isFetchingSubscriptionPreview ? (
               <CircularProgress size={20} sx={{ color: 'white' }} />
             ) : (
-              resolveCheckoutButtonText({ isLastStep, subscriptionPreview, checkoutLocalization })
+              resolveCheckoutButtonText({
+                isLastStep,
+                checkoutHasChanges,
+                isFreeDowngrade,
+                checkoutLocalization,
+                isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
+              })
             )}
           </Typography>
         </Button>
@@ -287,7 +392,9 @@ export const CheckoutSummary = ({
         showWatermark
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-      {isCheckoutCompletedSuccessfully && <CheckoutSuccess />}
+      {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
+        <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
+      )}
     </Box>
   );
 };