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

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

@@ -1,32 +1,42 @@
+/* eslint-disable react/no-unused-prop-types */
 import React from 'react';
 import moment from 'moment';
-import { 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;
   checkoutLocalization: CheckoutLocalization;
+  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;
   }
 
-  const credits = currencyPriceFormatter(subscriptionPreview?.proration?.netAmount);
+  const positiveAmount = subscriptionPreview.proration.netAmount.amount * -1;
+
+  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 remaining credits, which are ${credits}, will be kept for you for future use.`}
+        {checkoutLocalization.summary.creditsForUnusedTimeText({ credits })}
       </WithSkeleton>
     </Typography>
   );
@@ -44,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 }}>
@@ -57,49 +67,65 @@ const ScheduledUpdatesCaption = ({
   );
 };
 
-const ChargeDueTodayCaption = ({ subscriptionPreview, plan, isFetchingSubscriptionPreview }: CheckoutCaptionProps) => {
-  if (!subscriptionPreview?.total || subscriptionPreview.total.amount <= 0) {
-    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) {
+  if (!subscriptionPreview?.recurringSubscription?.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 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);
+
+  let text = 'We will bill you ';
+  let totalAmountText = `${total} `;
+
+  if (hasUnitBasedPricing) {
+    if (!hasNonUnitBasedPricing) {
+      totalAmountText = 'for';
+    } else {
+      totalAmountText += '+';
+    }
+
+    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;
+    }
+  }
+
+  text += `${totalAmountText}for this subscription every ${billingPeriodText} on ${nextBillingDate}, 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 +138,6 @@ export function CheckoutCaptions(props: CheckoutCaptionProps) {
 
       <ScheduledUpdatesCaption {...props} />
 
-      <ChargeDueTodayCaption {...props} />
-
       <NextBillingCaption {...props} />
     </>
   );

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
 import { Grid } from '@mui/material';
-import { BillingPeriod, DiscountType, Price, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { BillingModel, BillingPeriod, Price, SubscriptionPreviewV2 } from '@stigg/js-client-sdk';
 import { Typography } from '../../../common/Typography';
 import { currencyPriceFormatter } from '../../../utils/currencyUtils';
 import { getTierByQuantity } from '../../../utils/priceTierUtils';
 import { WithSkeleton } from './WithSkeleton';
 import { Skeleton } from '../../components/Skeletons.style';
 import { CheckoutLocalization } from '../../textOverrides';
+import { Icon } from '../../../common/Icon';
+import { InformationTooltip } from '../../../common/InformationTooltip';
 
 export const LineItemContainer = styled.div`
   & + & {
@@ -30,15 +32,35 @@ export const getPriceString = ({ amount, price, quantity }: { amount: number; pr
     billingPeriodString = '12 months';
   }
 
-  const addonPriceFormat = currencyPriceFormatter({ amount, currency: price.currency });
+  const addonPriceFormat = currencyPriceFormatter({ amount, currency: price.currency, minimumFractionDigits: 2 });
 
   return `${quantity > 1 ? `${quantity} x ${addonPriceFormat} each` : addonPriceFormat}${
     billingPeriodString ? ` x ${billingPeriodString}` : ''
   }`;
 };
 
-export const BilledPriceLineItem = ({ label, quantity, price }: { label: string; quantity: number; price: Price }) => {
+const PayAsYouGoPriceTooltip = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
+  const title = <Typography variant="body1">{checkoutLocalization.summary.payAsYouGoTooltipText}</Typography>;
+  return (
+    <InformationTooltip placement="left" title={title}>
+      <Icon icon="PayAsYouGoCharge" style={{ display: 'flex' }} />
+    </InformationTooltip>
+  );
+};
+
+export const BilledPriceLineItem = ({
+  checkoutLocalization,
+  label,
+  quantity,
+  price,
+}: {
+  checkoutLocalization: CheckoutLocalization;
+  label: string;
+  quantity: number;
+  price: Price;
+}) => {
   const { billingPeriod } = price;
+  const isPayAsYouGo = price.pricingModel === BillingModel.UsageBased;
 
   let amount;
   if (price.isTieredPrice) {
@@ -52,7 +74,7 @@ export const BilledPriceLineItem = ({ label, quantity, price }: { label: string;
     <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) && (
@@ -61,9 +83,30 @@ export const BilledPriceLineItem = ({ label, quantity, price }: { label: string;
             </Typography>
           )}
         </Grid>
+        <Grid item display="flex" gap={1} alignItems="center">
+          {isPayAsYouGo && <PayAsYouGoPriceTooltip checkoutLocalization={checkoutLocalization} />}
+          <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
+            {currencyPriceFormatter({ amount: quantity * amount, currency: price.currency, minimumFractionDigits: 2 })}
+            {isPayAsYouGo && ' / unit'}
+          </Typography>
+        </Grid>
+      </LineItemRow>
+    </LineItemContainer>
+  );
+};
+
+export const FreeChargeLineItem = ({ label }: { label: string }) => {
+  return (
+    <LineItemContainer>
+      <LineItemRow style={{ alignItems: 'flex-end' }}>
         <Grid item>
+          <Typography variant="body1" color="secondary">
+            {label}
+          </Typography>
+        </Grid>
+        <Grid item display="flex" gap={1} alignItems="center">
           <Typography variant="body1" color="secondary" style={{ wordBreak: 'break-word' }}>
-            {currencyPriceFormatter({ amount: quantity * amount, currency: price.currency })}
+            Free
           </Typography>
         </Grid>
       </LineItemRow>
@@ -74,33 +117,35 @@ export const BilledPriceLineItem = ({ label, quantity, price }: { label: string;
 export const DiscountLineItem = ({
   subscriptionPreview,
   isFetchingSubscriptionPreview,
+  checkoutLocalization,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
+  subscriptionPreview: SubscriptionPreviewV2;
   isFetchingSubscriptionPreview: boolean;
+  checkoutLocalization: CheckoutLocalization;
 }) => {
-  const { subTotal, discount } = subscriptionPreview || {};
-  if (!subTotal || !discount) {
+  const { discount, discountDetails } = subscriptionPreview.recurringSubscription || {};
+  if (!discount || !discountDetails) {
     return null;
   }
 
-  let discountAmount: number;
-  if (discount.type === DiscountType.Percentage) {
-    discountAmount = -1 * Math.abs((discount.value / 100) * subTotal.amount);
-  } else {
-    discountAmount = -1 * Math.abs(discount.value);
-  }
-
   return (
     <LineItemContainer>
       <LineItemRow>
         <Typography variant="body1" color="secondary">
-          {`Discount${discount.type === DiscountType.Percentage ? ` (${discount.value}% off)` : ''}`}
+          {checkoutLocalization.summary.discountText({
+            discountDetails,
+            currency: subscriptionPreview.total.currency,
+          })}
         </Typography>
         <Typography variant="body1" color="secondary">
           {isFetchingSubscriptionPreview ? (
             <Skeleton width={50} height={16} />
           ) : (
-            currencyPriceFormatter({ amount: discountAmount, currency: subTotal.currency })
+            currencyPriceFormatter({
+              amount: discount.amount,
+              currency: discount.currency,
+              minimumFractionDigits: 2,
+            })
           )}
         </Typography>
       </LineItemRow>
@@ -113,12 +158,13 @@ export const AppliedCreditsLineItem = ({
   isFetchingSubscriptionPreview,
   checkoutLocalization,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
+  subscriptionPreview: SubscriptionPreviewV2 | null;
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
 }) => {
   const { credits } = subscriptionPreview || {};
-  if (!credits || credits.used.amount <= 0) {
+
+  if (!credits || !credits.used || credits.used.amount <= 0) {
     return null;
   }
 
@@ -126,11 +172,15 @@ export const AppliedCreditsLineItem = ({
     <LineItemContainer>
       <LineItemRow>
         <Typography variant="body1" color="secondary">
-          {checkoutLocalization.appliedCreditsTitle}
+          {checkoutLocalization.summary.appliedCreditsTitle}
         </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,
+              minimumFractionDigits: 2,
+            })}
           </WithSkeleton>
         </Typography>
       </LineItemRow>
@@ -139,16 +189,15 @@ export const AppliedCreditsLineItem = ({
 };
 
 export const TaxLineItem = ({
-  subscriptionPreview,
+  tax,
+  taxDetails,
   isFetchingSubscriptionPreview,
   checkoutLocalization,
 }: {
-  subscriptionPreview: SubscriptionPreview | null;
   isFetchingSubscriptionPreview: boolean;
   checkoutLocalization: CheckoutLocalization;
-}) => {
-  const { tax, taxDetails } = subscriptionPreview || {};
-  if (!taxDetails || !tax) {
+} & Pick<SubscriptionPreviewV2, 'tax' | 'taxDetails'>) => {
+  if (!taxDetails || !tax || tax?.amount <= 0) {
     return null;
   }
 
@@ -156,11 +205,11 @@ export const TaxLineItem = ({
     <LineItemContainer>
       <LineItemRow>
         <Typography variant="body1" color="secondary">
-          {checkoutLocalization.taxTitle({ taxDetails })}
+          {checkoutLocalization.summary.taxTitle({ taxDetails })}
         </Typography>
         <Typography variant="body1" color="secondary">
           <WithSkeleton isLoading={isFetchingSubscriptionPreview}>
-            {currencyPriceFormatter({ amount: tax?.amount, currency: tax?.currency })}
+            {currencyPriceFormatter({ amount: tax?.amount, currency: tax?.currency, minimumFractionDigits: 2 })}
           </WithSkeleton>
         </Typography>
       </LineItemRow>

package/src/components/checkout/textOverrides.ts

@@ -1,7 +1,15 @@
-import { BillingPeriod, Plan, SubscriptionPreviewTaxDetails } from '@stigg/js-client-sdk';
+import {
+  BillingPeriod,
+  DiscountType,
+  Plan,
+  SubscriptionPreviewDiscount,
+  SubscriptionPreviewTaxDetails,
+  DiscountDurationType,
+} from '@stigg/js-client-sdk';
 import moment from 'moment';
 import merge from 'lodash/merge';
 import { DeepPartial } from '../../types';
+import { currencyPriceFormatter } from '../utils/currencyUtils';
 
 export type CheckoutLocalization = {
   changePlan: string;
@@ -10,53 +18,127 @@ export type CheckoutLocalization = {
   newPaymentMethodText: string;
   newPaymentMethodCardTitle: string;
   newPaymentMethodBillingAddressTitle: string;
-  baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
-  totalText: string;
-  subTotalText: string;
-  addCouponCodeText: string;
-  couponCodeTitle: string;
-  addonsSectionTitle: string;
-  changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
+  summary: {
+    title: string;
+    planName: (params: { plan: Plan }) => string;
+    addCouponCodeText: string;
+    couponCodeTitle: string;
+    addonsSectionTitle: string;
+    discountsSectionTitle: string;
+    onlyPayAsYouGoText: string;
+    startsAtText: string;
+    proratedTotalDueText: string;
+    baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
+    totalText: string;
+    totalDueText: string;
+    totalBillingPeriodText: (params: { billingPeriod: BillingPeriod }) => string;
+    discountText: (params: { discountDetails: SubscriptionPreviewDiscount; currency: string }) => string;
+    appliedCreditsTitle: string;
+    taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
+    checkoutSuccessText: string;
+    payAsYouGoTooltipText: string;
+    changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
+    creditsForUnusedTimeText: (params: { credits: string }) => string;
+  };
   checkoutButton: {
     nextText: string;
-    downgradeText: string;
+    noChangesText: string;
+    updateText: string;
+    downgradeToFreeText: string;
     upgradeText: string;
-    purchaseText: string;
   };
-  appliedCreditsTitle: string;
-  taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
-  downgradeToFreeAlertText: (params: { plan: Plan }) => 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;
+  };
 };
 
 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: () => 'Base charge',
-    totalText: 'Total due today',
-    subTotalText: 'Subtotal',
-    addCouponCodeText: 'Add coupon code',
-    couponCodeTitle: 'Coupon code',
-    addonsSectionTitle: 'Add-ons',
-    changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-      `Your changes will apply on the end of your current billing cycle on ${moment(billingPeriodEnd).format(
-        'MMM D, YYYY',
-      )}.`,
+    summary: {
+      title: 'Order summary',
+      planName: ({ plan }) => `${plan.displayName} plan`,
+      addCouponCodeText: 'Add promotion code',
+      couponCodeTitle: 'Promotion code',
+      addonsSectionTitle: 'Add-ons',
+      discountsSectionTitle: 'Discounts',
+      onlyPayAsYouGoText: 'Varies by usage',
+      startsAtText: 'Starts at ',
+      proratedTotalDueText: 'Prorated charge today',
+      baseChargeText: () => 'Base charge',
+      totalText: 'Total',
+      totalDueText: 'Total due today',
+      totalBillingPeriodText: ({ billingPeriod }) => `Billed ${billingPeriod.toLowerCase()}`,
+      appliedCreditsTitle: 'Applied credits',
+      creditsForUnusedTimeText: ({ credits }) =>
+        `Your account will be granted credits worth ${credits} for unused time, which will be automatically applied to future payments.`,
+      discountText: ({ discountDetails, currency }) => {
+        let discountText = '';
+        if (discountDetails.type === DiscountType.Percentage) {
+          discountText = `${discountDetails.value}% off`;
+        } else {
+          discountText = `${currencyPriceFormatter({ amount: discountDetails.value, currency })}`;
+        }
+
+        let discountTextPostfix = '';
+        switch (discountDetails.durationType) {
+          case DiscountDurationType.Once: {
+            discountTextPostfix = ' once';
+            break;
+          }
+          case DiscountDurationType.Repeating: {
+            const prefix = discountDetails.type === DiscountType.Fixed ? ' per month' : '';
+            discountTextPostfix = `${prefix} for ${discountDetails.durationInMonths} months`;
+
+            break;
+          }
+
+          case DiscountDurationType.Forever:
+          default: {
+            discountTextPostfix = '';
+          }
+        }
+
+        return `${discountText}${discountTextPostfix}`;
+      },
+      taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
+      changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
+        `Your changes will take effect at the end of your current billing cycle on ${moment(billingPeriodEnd).format(
+          'MMMM D, YYYY',
+        )}.`,
+      checkoutSuccessText: 'Changes applied',
+      payAsYouGoTooltipText: 'Billed according to actual usage',
+    },
     checkoutButton: {
       nextText: 'Next',
-      downgradeText: 'Downgrade',
-      upgradeText: 'Upgrade',
-      purchaseText: 'Purchase',
+      noChangesText: 'No changes',
+      updateText: 'Update subscription',
+      downgradeToFreeText: 'Cancel subscription',
+      upgradeText: 'Subscribe',
+    },
+    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()}` : ''}`,
     },
-    appliedCreditsTitle: 'Applied credits',
-    taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
-    downgradeToFreeAlertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
   };
 
   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

@@ -1,4 +1,10 @@
-import { SubscriptionBillingInfo } from '@stigg/js-client-sdk';
+import {
+  GetCheckoutState,
+  GetCheckoutStateResults,
+  PreviewSubscription,
+  SubscriptionBillingInfo,
+  SubscriptionPreviewV2,
+} from '@stigg/js-client-sdk';
 
 export type BillingInformation = {
   taxDetails?: TaxDetailsInput;
@@ -7,3 +13,11 @@ export type BillingInformation = {
 export type TaxDetailsInput = {
   taxPercentage?: SubscriptionBillingInfo['taxPercentage'];
 };
+
+export type MockCheckoutPreviewCallback = (params: PreviewSubscription) => SubscriptionPreviewV2;
+export type MockCheckoutStateCallback = (params: GetCheckoutState) => GetCheckoutStateResults;
+
+export type CheckoutMockProps = {
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+  onMockCheckoutState?: MockCheckoutStateCallback;
+};

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>
   );