@stigg/react-sdk 4.4.0-beta.1 → 4.4.0-beta.11

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';
@@ -44,6 +44,7 @@ SummaryCard.defaultProps = {
 
 const PlanName = styled(Typography)`
   margin-bottom: 16px;
+  font-weight: 500;
 `;
 
 const StyledDivider = styled(Divider)`
@@ -60,31 +61,37 @@ const TotalDueText = styled(Typography)`
 
 function resolveCheckoutButtonText({
   isLastStep,
-  subscriptionPreview,
+  isFreeDowngrade,
   checkoutLocalization,
-  isFirstSubscription,
+  isPlanUpdate,
 }: {
   isLastStep?: boolean;
-  isFirstSubscription?: boolean;
-  subscriptionPreview?: SubscriptionPreview | null;
+  isFreeDowngrade: boolean;
   checkoutLocalization: CheckoutLocalization;
+  isPlanUpdate?: boolean;
 }) {
   if (!isLastStep) {
     return checkoutLocalization.checkoutButton.nextText;
   }
 
-  if (subscriptionPreview?.isPlanDowngrade) {
-    return checkoutLocalization.checkoutButton.downgradeText;
+  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 }: CheckoutContainerProps) => {
+export const CheckoutSummary = ({
+  onCheckout,
+  onCheckoutCompleted,
+  disablePromotionCode,
+  disableSuccessAnimation,
+  isFreeDowngrade,
+}: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
   const { setErrorMessage } = usePaymentStepModel();
   const progressBar = useProgressBarModel();
@@ -96,12 +103,12 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
   );
   const [baseCharges, usageCharges] = partition(planPrices, (price) => price.pricingModel === BillingModel.FlatFee);
   const [baseCharge] = baseCharges || [];
-  const isFirstSubscription = !activeSubscription?.id;
-  const isLastStep = progressBar.isCheckoutComplete && progressBar.isLastStep;
+  const isLastStep = isFreeDowngrade || (progressBar.isCheckoutComplete && progressBar.isLastStep);
 
   const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
 
   const { handleSubmit, isLoading } = useSubmit({
+    disableSuccessAnimation,
     onCheckout,
     onCheckoutCompleted,
     onSuccess: () => {
@@ -119,11 +126,9 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
     if (errorMessage) {
       setErrorMessage(errorMessage);
       setIsCheckoutCompletedSuccessfully(false);
-      return;
+    } else {
+      setErrorMessage(undefined);
     }
-
-    setErrorMessage(undefined);
-    setIsCheckoutCompletedSuccessfully(true);
   };
 
   const onCheckoutClick = async (e: any): Promise<void> => {
@@ -138,6 +143,14 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
     }
   };
 
+  const showPromotionCodeLine = !disablePromotionCode && !isFreeDowngrade;
+  const showDiscountLine = !!subscriptionPreview?.subTotal && !!subscriptionPreview?.discount && !isFreeDowngrade;
+  const showTaxLine =
+    !!subscriptionPreview?.taxDetails && !!subscriptionPreview?.tax && subscriptionPreview?.tax.amount > 0;
+  const showAppliedCreditsLine = !!subscriptionPreview?.credits && subscriptionPreview?.credits.used.amount > 0;
+
+  const showAdditionalDivider = showPromotionCodeLine || showDiscountLine || showTaxLine || showAppliedCreditsLine;
+
   return (
     <Box flex={1}>
       <SummaryCard>
@@ -146,7 +159,7 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
         {baseCharge && (
           <LineItemContainer>
             <LineItemRow>
-              <Typography variant="h6" color="primary">
+              <Typography variant="body1" color="secondary">
                 {typeof checkoutLocalization.baseChargeText === 'function'
                   ? checkoutLocalization.baseChargeText({ billingPeriod: subscription.billingPeriod })
                   : checkoutLocalization.baseChargeText}
@@ -188,11 +201,13 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
 
               if (!addonPrice) return null;
 
+              const addonQuantity = addon.quantity && addon.quantity > 0 ? addon.quantity : 1;
+
               return (
                 <BilledPriceLineItem
                   key={addon?.addon?.id}
                   label={addon.addon.displayName}
-                  quantity={addon.quantity}
+                  quantity={addonQuantity}
                   price={addonPrice}
                 />
               );
@@ -211,30 +226,32 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
 
         <StyledDivider className="stigg-checkout-summary-divider" />
 
-        {isFirstSubscription && (
-          <>
-            <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
+        {showPromotionCodeLine && <PromotionCodeSection checkoutLocalization={checkoutLocalization} />}
 
-            <StyledDivider className="stigg-checkout-summary-divider" />
-          </>
+        {showDiscountLine && (
+          <DiscountLineItem
+            subscriptionPreview={subscriptionPreview!}
+            isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          />
         )}
 
-        <AppliedCreditsLineItem
-          subscriptionPreview={subscriptionPreview}
-          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
-          checkoutLocalization={checkoutLocalization}
-        />
+        {showTaxLine && (
+          <TaxLineItem
+            subscriptionPreview={subscriptionPreview!}
+            isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+          />
+        )}
 
-        <DiscountLineItem
-          subscriptionPreview={subscriptionPreview}
-          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
-        />
+        {showAppliedCreditsLine && (
+          <AppliedCreditsLineItem
+            subscriptionPreview={subscriptionPreview!}
+            isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+            checkoutLocalization={checkoutLocalization}
+          />
+        )}
 
-        <TaxLineItem
-          subscriptionPreview={subscriptionPreview}
-          isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
-          checkoutLocalization={checkoutLocalization}
-        />
+        {showAdditionalDivider && <StyledDivider className="stigg-checkout-summary-divider" />}
 
         <LineItemContainer>
           <LineItemRow>
@@ -253,15 +270,15 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
+          billingPeriod={subscription.billingPeriod}
         />
 
         <Button
-          disableRipple={isLoading}
-          $isLoading={isLoading}
           $success={isCheckoutCompletedSuccessfully}
-          $error={isLastStep && subscriptionPreview?.isPlanDowngrade}
+          $error={isLastStep && isFreeDowngrade}
+          disabled={isLoading || isFetchingSubscriptionPreview || progressBar.progressBarState.isDisabled}
           className="stigg-checkout-summary-cta-button"
-          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px' }}
+          sx={{ textTransform: 'none', borderRadius: '10px', marginTop: '24px', height: '36px' }}
           variant="contained"
           size="medium"
           onClick={(e: any) => {
@@ -269,11 +286,18 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
           }}
           fullWidth>
           <Typography className="stigg-checkout-summary-cta-button-text" color="white" style={{ display: 'flex' }}>
-            {isCheckoutCompletedSuccessfully && <Icon icon="Check" style={{ display: 'contents' }} />}
-            {isLoading && <CircularProgress size={20} sx={{ color: 'white' }} />}
-            {!isLoading &&
-              !isCheckoutCompletedSuccessfully &&
-              resolveCheckoutButtonText({ isLastStep, subscriptionPreview, checkoutLocalization })}
+            {isCheckoutCompletedSuccessfully ? (
+              <Icon icon="Check" style={{ display: 'contents' }} />
+            ) : isLoading || isFetchingSubscriptionPreview ? (
+              <CircularProgress size={20} sx={{ color: 'white' }} />
+            ) : (
+              resolveCheckoutButtonText({
+                isLastStep,
+                isFreeDowngrade,
+                checkoutLocalization,
+                isPlanUpdate: !!activeSubscription && activeSubscription?.plan.id === plan?.id,
+              })
+            )}
           </Typography>
         </Button>
       </SummaryCard>
@@ -282,7 +306,9 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
         showWatermark
         style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
       />
-      {isCheckoutCompletedSuccessfully && <CheckoutSuccess />}
+      {!disableSuccessAnimation && isCheckoutCompletedSuccessfully && (
+        <CheckoutSuccess checkoutLocalization={checkoutLocalization} />
+      )}
     </Box>
   );
 };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import moment from 'moment';
-import { Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, Plan, Subscription, SubscriptionPreview } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { CheckoutLocalization } from '../../textOverrides';
@@ -12,6 +12,7 @@ export type CheckoutCaptionProps = {
   activeSubscription?: Subscription | null;
   plan?: Plan;
   checkoutLocalization: CheckoutLocalization;
+  billingPeriod: BillingPeriod;
 };
 
 // TODO: move to localization
@@ -21,12 +22,17 @@ const RemainingCreditsCaption = ({ subscriptionPreview, isFetchingSubscriptionPr
     return null;
   }
 
-  const credits = currencyPriceFormatter(subscriptionPreview?.proration?.netAmount);
+  const positiveAmount = subscriptionPreview.proration.netAmount.amount * -1;
+
+  const credits = currencyPriceFormatter({
+    amount: positiveAmount,
+    currency: subscriptionPreview.proration.netAmount.currency,
+  });
 
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Your remaining credits, which are ${credits}, will be kept for you for future use.`}
+        {`Your account will be granted credits worth ${credits} for unused time, which will be automatically applied to future payments.`}
       </WithSkeleton>
     </Typography>
   );
@@ -57,49 +63,46 @@ const ScheduledUpdatesCaption = ({
   );
 };
 
-const ChargeDueTodayCaption = ({ subscriptionPreview, plan, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.total) {
-    return null;
-  }
-
-  const total = currencyPriceFormatter(subscriptionPreview?.total);
-  const usedCredits = !!subscriptionPreview.credits?.used;
-
-  return (
-    <Typography variant="caption" style={{ marginTop: 14 }}>
-      <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Today we’ll charge you ${total} (incl. taxes) for your new ${plan?.displayName} plan${
-          usedCredits ? ' minus credits left from your existing plan.' : ''
-        } `}
-      </WithSkeleton>
-    </Typography>
-  );
-};
-
 const NextBillingCaption = ({
   subscriptionPreview,
   activeSubscription,
   plan,
   isFetchingSubscriptionPreview,
+  billingPeriod,
 }: CheckoutCaptionProps) => {
   if (!subscriptionPreview?.subscription?.total) {
     return null;
   }
 
-  const isUpdatingSubscription = activeSubscription?.plan?.id && plan?.id && activeSubscription.plan.id === plan.id;
-  const isScheduledPlanDowngrade = subscriptionPreview.isPlanDowngrade && subscriptionPreview.hasScheduledUpdates;
   const currentBillingPeriodEnd = subscriptionPreview.hasScheduledUpdates
     ? activeSubscription?.currentBillingPeriodEnd
     : subscriptionPreview?.billingPeriodRange.end;
   const billingDate = moment(currentBillingPeriodEnd).format('MMM D, YYYY');
   const total = currencyPriceFormatter(subscriptionPreview?.subscription.total);
 
+  const hasUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel === BillingModel.UsageBased);
+  const hasNonUnitBasedPricing = plan?.pricePoints.some((price) => price.pricingModel !== BillingModel.UsageBased);
+
+  let text = 'We will bill you ';
+  let totalAmountText = `${total} `;
+
+  if (hasUnitBasedPricing) {
+    if (!hasNonUnitBasedPricing) {
+      totalAmountText = 'for';
+    } else {
+      totalAmountText += '+';
+    }
+
+    totalAmountText += ' applicable usage-based fees for this subscription ';
+  }
+
+  const billingPeriodText = billingPeriod === BillingPeriod.Monthly ? 'month' : 'year';
+  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${billingDate}, unless you cancel.`;
+
   return (
     <Typography variant="caption" style={{ marginTop: 14 }}>
       <WithSkeleton isLoading={isFetchingSubscriptionPreview} width="100%">
-        {`Your${isUpdatingSubscription ? '' : ' new'} ${plan?.displayName} plan will ${
-          isScheduledPlanDowngrade ? 'start' : 'renew'
-        } on ${billingDate} for ${total} (incl. taxes) unless you cancel it.`}
+        {text}
       </WithSkeleton>
     </Typography>
   );
@@ -112,8 +115,6 @@ export function CheckoutCaptions(props: CheckoutCaptionProps) {
 
       <ScheduledUpdatesCaption {...props} />
 
-      <ChargeDueTodayCaption {...props} />
-
       <NextBillingCaption {...props} />
     </>
   );

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

@@ -21,24 +21,16 @@ export const LineItemRow = styled.div`
   justify-content: space-between;
 `;
 
-export const getPriceString = ({
-  amountPerMonth,
-  price,
-  quantity,
-}: {
-  amountPerMonth: number;
-  price: Price;
-  quantity: number;
-}) => {
+export const getPriceString = ({ amount, price, quantity }: { amount: number; price: Price; quantity: number }) => {
   const { billingPeriod } = price;
   let billingPeriodString = null;
 
   if (billingPeriod === BillingPeriod.Annually) {
-    amountPerMonth /= 12;
+    amount /= 12;
     billingPeriodString = '12 months';
   }
 
-  const addonPriceFormat = currencyPriceFormatter({ amount: amountPerMonth, currency: price.currency });
+  const addonPriceFormat = currencyPriceFormatter({ amount, currency: price.currency });
 
   return `${quantity > 1 ? `${quantity} x ${addonPriceFormat} each` : addonPriceFormat}${
     billingPeriodString ? ` x ${billingPeriodString}` : ''
@@ -48,30 +40,30 @@ export const getPriceString = ({
 export const BilledPriceLineItem = ({ label, quantity, price }: { label: string; quantity: number; price: Price }) => {
   const { billingPeriod } = price;
 
-  let amountPerMonth;
+  let amount;
   if (price.isTieredPrice) {
     const tier = getTierByQuantity(price.tiers!, quantity);
-    amountPerMonth = tier!.unitPrice.amount!;
+    amount = tier!.unitPrice.amount!;
   } else {
-    amountPerMonth = price.amount!;
+    amount = price.amount!;
   }
 
   return (
     <LineItemContainer>
       <LineItemRow style={{ alignItems: 'flex-end' }}>
         <Grid item>
-          <Typography variant="h6" color="primary">
+          <Typography variant="body1" color="secondary">
             {label}
           </Typography>
           {(quantity > 1 || billingPeriod === BillingPeriod.Annually) && (
             <Typography variant="body1" color="secondary">
-              {getPriceString({ amountPerMonth, price, quantity })}
+              {getPriceString({ amount, price, quantity })}
             </Typography>
           )}
         </Grid>
         <Grid item>
           <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
-            {currencyPriceFormatter({ amount: quantity * amountPerMonth, currency: price.currency })}
+            {currencyPriceFormatter({ amount: quantity * amount, currency: price.currency })}
           </Typography>
         </Grid>
       </LineItemRow>
@@ -83,13 +75,11 @@ export const DiscountLineItem = ({
   subscriptionPreview,
   isFetchingSubscriptionPreview,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
+  subscriptionPreview: SubscriptionPreview;
   isFetchingSubscriptionPreview: boolean;
 }) => {
-  const { subTotal, discount } = subscriptionPreview || {};
-  if (!subTotal || !discount) {
-    return null;
-  }
+  const { subTotal } = subscriptionPreview;
+  const discount = subscriptionPreview.discount!;
 
   let discountAmount: number;
   if (discount.type === DiscountType.Percentage) {
@@ -121,14 +111,11 @@ export const AppliedCreditsLineItem = ({
   isFetchingSubscriptionPreview,
   checkoutLocalization,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
+  subscriptionPreview: SubscriptionPreview;
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
 }) => {
-  const { credits } = subscriptionPreview || {};
-  if (!credits || credits.used.amount <= 0) {
-    return null;
-  }
+  const { credits } = subscriptionPreview;
 
   return (
     <LineItemContainer>
@@ -138,7 +125,7 @@ export const AppliedCreditsLineItem = ({
         </Typography>
         <Typography variant="body1" color="secondary">
           <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
-            {currencyPriceFormatter({ amount: -1 * credits.used.amount, currency: credits.used.currency })}
+            {currencyPriceFormatter({ amount: -1 * credits!.used.amount, currency: credits!.used.currency })}
           </WithSkeleton>
         </Typography>
       </LineItemRow>
@@ -151,14 +138,12 @@ export const TaxLineItem = ({
   isFetchingSubscriptionPreview,
   checkoutLocalization,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
+  subscriptionPreview: SubscriptionPreview;
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
 }) => {
-  const { tax, taxDetails } = subscriptionPreview || {};
-  if (!taxDetails || !tax) {
-    return null;
-  }
+  const tax = subscriptionPreview.tax!;
+  const taxDetails = subscriptionPreview.taxDetails!;
 
   return (
     <LineItemContainer>

package/src/components/checkout/textOverrides.ts

@@ -1,8 +1,7 @@
-import { BillingPeriod, SubscriptionPreviewTaxDetails } from '@stigg/js-client-sdk';
+import { BillingPeriod, Plan, SubscriptionPreviewTaxDetails } from '@stigg/js-client-sdk';
 import moment from 'moment';
 import merge from 'lodash/merge';
 import { DeepPartial } from '../../types';
-import { formatBillingPeriod } from './formatting';
 
 export type CheckoutLocalization = {
   changePlan: string;
@@ -20,42 +19,63 @@ export type CheckoutLocalization = {
   changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
   checkoutButton: {
     nextText: string;
-    downgradeText: string;
+    updateText: string;
+    downgradeToFreeText: string;
     upgradeText: string;
-    purchaseText: string;
   };
   appliedCreditsTitle: string;
   taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
+  downgradeToFree: {
+    alertText: (params: { plan: Plan }) => string;
+    freePlanHeader: (params: { plan: Plan }) => string;
+    freePlanName: (params: { plan: Plan }) => string;
+    freePlanPriceText: (params: { plan: Plan }) => string;
+    paidPlanHeader: (params: { plan: Plan }) => string;
+    paidPlanName: (params: { plan: Plan }) => string;
+    paidPlanPriceText: (params: { plan: Plan; billingPeriod?: BillingPeriod }) => string;
+  };
+  checkoutSuccessText: string;
 };
 
 export function getResolvedCheckoutLocalize(
   localizeOverride?: DeepPartial<CheckoutLocalization>,
 ): CheckoutLocalization {
   const checkoutDefaultLocalization: CheckoutLocalization = {
-    changePlan: 'Change plan',
+    changePlan: 'Change',
     billingPeriodsTitle: 'Billing cycle',
     addAddonText: 'Add',
     newPaymentMethodText: 'New payment method',
     newPaymentMethodBillingAddressTitle: 'Billing address',
     newPaymentMethodCardTitle: 'Payment method',
-    baseChargeText: ({ billingPeriod }) => `${formatBillingPeriod(billingPeriod)} charge`,
+    baseChargeText: () => 'Base charge',
     totalText: 'Total due today',
     subTotalText: 'Subtotal',
-    addCouponCodeText: 'Add coupon code',
-    couponCodeTitle: 'Coupon code',
+    addCouponCodeText: 'Add promotion code',
+    couponCodeTitle: 'Promotion code',
     addonsSectionTitle: 'Add-ons',
     changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
+      `Your changes will be applied at the end of your billing cycle on ${moment(billingPeriodEnd).format(
         'MMM D, YYYY',
       )}.`,
     checkoutButton: {
       nextText: 'Next',
-      downgradeText: 'Downgrade',
-      upgradeText: 'Upgrade',
-      purchaseText: 'Purchase',
+      updateText: 'Update subscription',
+      downgradeToFreeText: 'Cancel subscription',
+      upgradeText: 'Subscribe',
     },
     appliedCreditsTitle: 'Applied credits',
-    taxTitle: ({ taxDetails }) => `${taxDetails.displayName} (${taxDetails?.percentage}%)`,
+    taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
+    downgradeToFree: {
+      alertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
+      freePlanHeader: () => 'New plan',
+      freePlanName: ({ plan }) => `${plan.displayName}`,
+      freePlanPriceText: () => 'Free',
+      paidPlanHeader: () => 'Current plan',
+      paidPlanName: ({ plan }) => `${plan.displayName}`,
+      paidPlanPriceText: ({ billingPeriod }) =>
+        `Paid plan${billingPeriod ? `, billed ${billingPeriod.toLowerCase()}` : ''}`,
+    },
+    checkoutSuccessText: 'Changes applied',
   };
 
   return merge(checkoutDefaultLocalization, localizeOverride);

package/src/components/checkout/theme.ts

@@ -7,7 +7,6 @@ export type CheckoutTheme = {
   textColor: string;
   backgroundColor: string;
   borderColor: string;
-  selectionColor: string;
   summaryBackgroundColor: string;
 };
 
@@ -16,7 +15,6 @@ const defaultCheckoutTheme: CheckoutTheme = {
   textColor: 'rgb(0, 30, 108)',
   backgroundColor: 'rgb(255, 255, 255)',
   borderColor: 'rgb(235, 237, 243)',
-  selectionColor: 'rgb(229, 242, 255)',
   summaryBackgroundColor: 'rgb(109, 121, 144)',
 };
 
@@ -33,8 +31,6 @@ export function getResolvedCheckoutTheme(
     backgroundColor:
       themeOverride?.backgroundColor || globalPalette?.backgroundPaper || defaultCheckoutTheme.backgroundColor,
     borderColor: themeOverride?.borderColor || globalPalette?.outlinedBorder || defaultCheckoutTheme.borderColor,
-    selectionColor:
-      themeOverride?.selectionColor || globalPalette?.backgroundSection || defaultCheckoutTheme.selectionColor,
     summaryBackgroundColor:
       themeOverride?.summaryBackgroundColor ||
       globalPalette?.backgroundHighlight ||

package/src/components/checkout/types.ts

@@ -0,0 +1,9 @@
+import { SubscriptionBillingInfo } from '@stigg/js-client-sdk';
+
+export type BillingInformation = {
+  taxDetails?: TaxDetailsInput;
+};
+
+export type TaxDetailsInput = {
+  taxPercentage?: SubscriptionBillingInfo['taxPercentage'];
+};

package/src/components/common/Icon.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import styled from '@emotion/styled/macro';
-import { CSSProperties } from 'react';
-import { css, Theme, useTheme } from '@emotion/react';
+import React, { CSSProperties } from 'react';
+import { css, useTheme } from '@emotion/react';
 import { getIconColor, IconColor } from './iconColor';
 import * as customIcons from './customIcons';
 
@@ -45,7 +44,7 @@ export type IconProps = {
 
 export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgStrokeColor }: IconProps) {
   const IconComponent = (customIcons as any)[icon];
-  const theme = useTheme() as Theme;
+  const theme = useTheme();
 
   return (
     <IconWrapper
@@ -53,8 +52,7 @@ export function Icon({ icon, className, style, svgPathColor, svgRectColor, svgSt
       style={style}
       $pathColor={getIconColor(svgPathColor, theme)}
       $rectColor={getIconColor(svgRectColor, theme)}
-      $strokeColor={getIconColor(svgStrokeColor, theme)}
-    >
+      $strokeColor={getIconColor(svgStrokeColor, theme)}>
       <IconComponent />
     </IconWrapper>
   );

package/src/components/common/mapExternalTheme.ts

@@ -123,8 +123,7 @@ export function mapCheckoutConfiguration(configuration: CheckoutConfiguration):
       text: {
         primary: palette?.textColor || undefined,
       },
-      backgroundHighlight: palette?.selectionColor || undefined,
-      backgroundSection: palette?.summaryBackgroundColor || undefined,
+      backgroundHighlight: palette?.summaryBackgroundColor || undefined,
     },
     typography: mapTypography(typography),
   };

package/src/components/paywall/PlanPrice.tsx

@@ -28,14 +28,21 @@ type PriceBillingPeriodProps = {
   billingPeriod: BillingPeriod;
   hasMonthlyPrice: boolean;
   hasAnnuallyPrice: boolean;
+  paywallLocale: PaywallLocalization;
 };
 
-function PriceBillingPeriod({ plan, billingPeriod, hasMonthlyPrice, hasAnnuallyPrice }: PriceBillingPeriodProps) {
+function PriceBillingPeriod({
+  plan,
+  billingPeriod,
+  hasMonthlyPrice,
+  hasAnnuallyPrice,
+  paywallLocale,
+}: PriceBillingPeriodProps) {
   const hasPrice = plan.pricePoints.find(pricePoint => pricePoint.billingPeriod === billingPeriod);
 
   let content = EMPTY_CHAR;
   if (hasPrice && hasMonthlyPrice && hasAnnuallyPrice) {
-    content = `, billed ${billingPeriod.toLowerCase()}`;
+    content = paywallLocale.price.billingPeriod?.(billingPeriod) || `, billed ${billingPeriod.toLowerCase()}`;
   }
 
   return (
@@ -133,6 +140,7 @@ export const PlanPrice = ({
               billingPeriod={billingPeriod}
               hasAnnuallyPrice={hasAnnuallyPrice}
               hasMonthlyPrice={hasMonthlyPrice}
+              paywallLocale={paywallLocale}
             />
           </Typography>
         )}