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

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';
@@ -60,31 +60,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 +102,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 +125,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> => {
@@ -188,11 +192,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,7 +217,7 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
 
         <StyledDivider className="stigg-checkout-summary-divider" />
 
-        {isFirstSubscription && (
+        {!disablePromotionCode && !isFreeDowngrade && (
           <>
             <PromotionCodeSection checkoutLocalization={checkoutLocalization} />
 
@@ -219,18 +225,18 @@ export const CheckoutSummary = ({ onCheckout, onCheckoutCompleted }: CheckoutCon
           </>
         )}
 
-        <AppliedCreditsLineItem
+        <DiscountLineItem
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
-          checkoutLocalization={checkoutLocalization}
         />
 
-        <DiscountLineItem
+        <TaxLineItem
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
+          checkoutLocalization={checkoutLocalization}
         />
 
-        <TaxLineItem
+        <AppliedCreditsLineItem
           subscriptionPreview={subscriptionPreview}
           isFetchingSubscriptionPreview={isFetchingSubscriptionPreview}
           checkoutLocalization={checkoutLocalization}
@@ -253,15 +259,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 +275,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 +295,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,12 +40,12 @@ 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 (
@@ -65,13 +57,13 @@ export const BilledPriceLineItem = ({ label, quantity, price }: { label: string;
           </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>

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,12 +19,14 @@ 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;
+  downgradeToFreeAlertText: (params: { plan: Plan }) => string;
+  checkoutSuccessText: string;
 };
 
 export function getResolvedCheckoutLocalize(
@@ -38,24 +39,26 @@ export function getResolvedCheckoutLocalize(
     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}%)`,
+    downgradeToFreeAlertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
+    checkoutSuccessText: 'Payment successful',
   };
 
   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>
         )}

package/src/components/paywall/paywallTextOverrides.ts

@@ -26,6 +26,8 @@ export type PaywallLocalization = {
   };
   price: {
     startingAtCaption: string;
+    billingPeriod?: (billingPeriod: BillingPeriod) => string;
+    pricePeriod: (billingPeriod: BillingPeriod) => string;
     custom: string;
     priceNotSet: string;
     free: PlanPriceText | ((currency?: PaywallCurrency) => PlanPriceText);
@@ -56,6 +58,7 @@ export function getResolvedPaywallLocalize(localizeOverride?: DeepPartial<Paywal
     },
     price: {
       startingAtCaption: 'Starts at',
+      pricePeriod: (billingPeriod: BillingPeriod) => (billingPeriod === BillingPeriod.Monthly ? '/ month' : '/ year'),
       free: currency => ({
         price: `${currency?.symbol}0`,
       }),

package/src/components/utils/getPaidPriceText.ts

@@ -8,6 +8,7 @@ import {
 import { currencyPriceFormatter } from './currencyUtils';
 import { PlanPriceText } from './getPlanPrice';
 import { calculateTierPrice, getPriceFeatureUnit } from './priceTierUtils';
+import { PaywallLocalization } from '../paywall';
 
 type GetPaidPriceTextParams = {
   planPrices: Price[];
@@ -16,6 +17,7 @@ type GetPaidPriceTextParams = {
   locale: string;
   shouldShowMonthlyPriceAmount: boolean;
   selectedTierByFeature: Record<string, PriceTierFragment>;
+  paywallLocale: PaywallLocalization;
 };
 
 export function getPaidPriceText({
@@ -25,6 +27,7 @@ export function getPaidPriceText({
   locale,
   shouldShowMonthlyPriceAmount,
   selectedTierByFeature,
+  paywallLocale,
 }: GetPaidPriceTextParams): PlanPriceText {
   const { amount, currency } = paywallCalculatedPrice || planPrices[0];
   const priceAmount = amount || 0;
@@ -35,7 +38,10 @@ export function getPaidPriceText({
 
   let tiers;
   let tierUnits;
-  let unit = shouldShowMonthlyPriceAmount ? '/ month' : '/ year';
+  const pricePeriod = paywallLocale.price.pricePeriod(
+    shouldShowMonthlyPriceAmount ? BillingPeriod.Monthly : BillingPeriod.Annually,
+  );
+  let unit = pricePeriod;
 
   for (const price of planPrices) {
     if (price.isTieredPrice) {
@@ -56,7 +62,7 @@ export function getPaidPriceText({
     const featureUnit = price.feature?.units || '';
 
     if (price.pricingModel === BillingModel.PerUnit && !price.isTieredPrice) {
-      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} / month` : `per ${featureUnit} / year`;
+      unit = shouldShowMonthlyPriceAmount ? `per ${featureUnit} ${pricePeriod}` : `per ${featureUnit} ${pricePeriod}`;
     } else if (price.pricingModel === BillingModel.UsageBased) {
       unit = `per ${featureUnit}`;
     }

package/src/components/utils/getPlanPrice.ts

@@ -50,7 +50,7 @@ export function getPlanPrice(
 
       return paywallLocale.price.paid
         ? paywallLocale.price.paid({ ...paidParams, plan })
-        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount });
+        : getPaidPriceText({ ...paidParams, locale, shouldShowMonthlyPriceAmount, paywallLocale });
     }
     default:
       return {

package/src/stories/Checkout.stories.tsx

@@ -46,7 +46,8 @@ const Template: ComponentStory<any> = (args) => (
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
-      billingInformation={{ taxPercentage: 27 }}
+      // disableSuccessAnimation
+      // billingInformation={{ taxPercentage: 27 }}
     />
   </Wrapper>
 );
@@ -55,8 +56,8 @@ export const DefaultCheckout = Template.bind({});
 DefaultCheckout.args = {
   ...defaultArgsWithCustomer,
   planId: 'plan-revvenu-essentials',
-  baseUri: 'http://localhost:4000',
-  apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
-  // baseUri: 'https://api-staging.stigg.io',
-  // apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
+  // baseUri: 'http://localhost:4000',
+  // apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
+  baseUri: 'https://api-staging.stigg.io',
+  apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
 };

package/src/theme/Theme.tsx

@@ -61,13 +61,22 @@ function createTypographyTheme(theme: StiggTheme): Partial<TypographyProps> {
   };
 }
 
+const createMuiPalette = (theme: StiggTheme) => {
+  return {
+    primary: {
+      main: theme.palette.primary,
+    },
+  };
+};
+
 export const SdkThemeProvider: React.FC<PropsWithChildren<SdkThemeProviderProps>> = ({ children, componentTheme }) => {
   const theme = useStiggTheme(componentTheme);
+  const muiPalette = createMuiPalette(theme);
 
   return (
     // We are using styled-components theme here only because we are using styled-typography
     // which depends on styled-components for the typography theming
-    <MuiThemeProvider theme={createTheme({ stigg: theme })}>
+    <MuiThemeProvider theme={createTheme({ palette: muiPalette, stigg: theme })}>
       <ThemeProvider theme={{ stigg: theme }}>
         <CustomCssGlobal customCss={theme.customCss}>
           <Fonts externalFontUrl={theme.typography.fontFamilyUrl} />

package/src/theme/getResolvedTheme.ts

@@ -21,6 +21,7 @@ export const getResolvedTheme = (customizedTheme?: CustomizedTheme): StiggTheme
     palette: {
       primary: primaryColor.hex(),
       primaryDark: primaryColor.darken(0.3).hex(),
+      primaryLight: primaryColor.lighten(0.6).hex(),
       backgroundPaper: '#FFFFFF',
       backgroundHighlight: '#F5F6F9',
       backgroundSection: primaryColor.alpha(0.1).toString(),