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

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,55 +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;
+    noChangesText: string;
     updateText: string;
     downgradeToFreeText: string;
     upgradeText: string;
   };
-  appliedCreditsTitle: string;
-  taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
-  downgradeToFreeAlertText: (params: { plan: Plan }) => string;
-  checkoutSuccessText: 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 promotion code',
-    couponCodeTitle: 'Promotion code',
-    addonsSectionTitle: 'Add-ons',
-    changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-      `Your changes will be applied at the end of your 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',
+      noChangesText: 'No changes',
       updateText: 'Update subscription',
       downgradeToFreeText: 'Cancel subscription',
       upgradeText: 'Subscribe',
     },
-    appliedCreditsTitle: 'Applied credits',
-    taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
-    downgradeToFreeAlertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
-    checkoutSuccessText: 'Payment successful',
+    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()}` : ''}`,
+    },
   };
 
   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>
   );

package/src/components/common/TiersSelectContainer.tsx

@@ -1,13 +1,15 @@
 import { PriceTierFragment } from '@stigg/js-client-sdk';
 import { MenuItem, OutlinedInput, Select, SelectChangeEvent } from '@mui/material';
-import { Typography } from '../common/Typography';
 import { map } from 'lodash';
 import React, { ReactNode } from 'react';
 import styled from '@emotion/styled/macro';
 import { getTierByQuantity } from '../utils/priceTierUtils';
+import { Typography } from './Typography';
 
 const TierSelect = styled(Select)`
   border-radius: 10px;
+  min-height: 42px;
+  min-width: 120px;
 
   &:hover .MuiOutlinedInput-notchedOutline {
     border-color: ${({ theme }) => theme.stigg.palette.outlinedBorder};
@@ -16,7 +18,7 @@ const TierSelect = styled(Select)`
 
 const TierInput = styled(OutlinedInput)`
   & .MuiInputBase-input {
-    padding: 7px 12px;
+    padding: 10px 12px;
   }
 
   &.Mui-focused .MuiOutlinedInput-notchedOutline {
@@ -27,13 +29,11 @@ const TierInput = styled(OutlinedInput)`
 export function TiersSelectContainer({
   componentId,
   tiers,
-  tierUnits,
   selectedTier,
   handleTierChange,
 }: {
   componentId: string;
   tiers?: PriceTierFragment[] | null;
-  tierUnits?: string;
   selectedTier?: PriceTierFragment;
   handleTierChange: (tier: PriceTierFragment) => void;
 }) {
@@ -57,12 +57,11 @@ export function TiersSelectContainer({
             PaperProps: {
               sx: { marginTop: '4px', borderRadius: '10px' },
             },
-          }}
-        >
+          }}>
           {map(tiers, (tier: PriceTierFragment) => (
             <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo.toString()}>
-              <Typography variant="body1" color="primary">
-                {tier.upTo} {tierUnits}
+              <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
+                {tier.upTo}
               </Typography>
             </MenuItem>
           ))}

package/src/components/common/Typography.tsx

@@ -4,7 +4,15 @@ import { FontWeight as StyledFontWeight, Text, TypeProps } from 'styled-typograp
 import { Theme, useTheme } from '@emotion/react';
 import { FontWeight } from '../../theme/types';
 
-type Colors = 'primary' | 'primary.main' | 'secondary' | 'disabled' | 'white' | 'warning' | 'error';
+type Colors =
+  | 'primary'
+  | 'primary.main'
+  | 'primary.main.light'
+  | 'secondary'
+  | 'disabled'
+  | 'white'
+  | 'warning'
+  | 'error';
 
 export type TypographyProps = {
   children: React.ReactNode;
@@ -25,6 +33,8 @@ function getColor(theme: Theme, $color: Colors) {
       return 'white';
     case 'primary.main':
       return theme.stigg.palette.primary;
+    case 'primary.main.light':
+      return theme.stigg.palette.primaryLight;
     case 'warning':
       return theme.stigg.palette.warning;
     case 'error':
@@ -111,8 +121,7 @@ export const Typography = forwardRef((props: TypographyProps, ref) => {
       level={level}
       color={overrideColor || getColor(theme, color)}
       fontWeight={fontWeight ?? (bold ? StyledFontWeight.Bold : getFontWeight(theme, variant))}
-      $span={span}
-    >
+      $span={span}>
       {children}
     </StyledText>
   );

package/src/components/common/customIcons.ts

@@ -17,3 +17,5 @@ export { default as OutlinedCheckedCircleDisabled } from '../../assets/outlined-
 export { default as ArrowForward } from '../../assets/arrow-forward.svg';
 export { default as Close } from '../../assets/close.svg';
 export { default as Check } from '../../assets/check.svg';
+export { default as PayAsYouGoCharge } from '../../assets/pay-as-you-go-charge.svg';
+export { default as Coupon } from '../../assets/coupon.svg';

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/customerPortal/paywall/CustomerPortalPaywall.style.ts

@@ -13,14 +13,15 @@ export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
   .stigg-paywall-layout {
     width: 100%;
   }
-  
+
   .stigg-paywall-plans-layout {
     flex-wrap: nowrap;
     width: 100%;
     overflow-x: auto;
     justify-content: unset;
-    padding: 0;
+    padding: 10px 0px 0px 0px;
   }
+
   .stigg-paywall-plans-layout .stigg-plan-offering-container:first-of-type {
     margin-left: auto;
   }
@@ -37,6 +38,6 @@ export const CustomerPortalPaywallLayout = styled(SectionContainer)<{
     `}
 
   .${STIGG_WATERMARK_CLASSNAME} {
-    display: none
+    display: none;
   }
 `;

package/src/components/paywall/PlanOfferingButton.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import { BillingPeriod, Customer, PriceTierFragment, PricingType, Subscription } from '@stigg/js-client-sdk';
+import { isFunction } from 'lodash';
+import ClipLoader from 'react-spinners/ClipLoader';
 import styled from '@emotion/styled/macro';
-import { css, Theme, useTheme } from '@emotion/react';
+import { css, useTheme } from '@emotion/react';
 import { PaywallPlan, SubscribeIntentionType } from './types';
 import { PaywallLocalization } from './paywallTextOverrides';
 import { flexLayoutMapper } from '../../theme/getResolvedTheme';
-import ClipLoader from 'react-spinners/ClipLoader';
 import { Typography } from '../common/Typography';
 import { getSubscriptionScheduleUpdateTexts } from '../utils/getSubscriptionScheduleUpdateTexts';
-import { isFunction } from 'lodash';
 import { compareSelectedTierToCurrentTier, PriceTierComparison } from '../utils/priceTierUtils';
 
 const LoadingIndicator = styled(ClipLoader)`
@@ -99,7 +99,7 @@ export function PlanOfferingButton({
   currentSubscription,
   selectedTierByFeature,
 }: PlanOfferingButtonProps) {
-  const theme = useTheme() as Theme;
+  const theme = useTheme();
   const [isLoading, setIsLoading] = useState(false);
   const {
     currentPlan,
@@ -187,8 +187,7 @@ export function PlanOfferingButton({
               onClick={() => {
                 setIsLoading(true);
                 Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
-              }}
-            >
+              }}>
               {buttonProps.title}
             </CancelScheduledUpdateButton>
           </ScheduledUpdateText>
@@ -202,8 +201,7 @@ export function PlanOfferingButton({
               onClick={() => {
                 setIsLoading(true);
                 Promise.resolve(onPlanSelected(buttonProps.intentionType)).finally(() => setIsLoading(false));
-              }}
-            >
+              }}>
               <ButtonText className="stigg-paywall-plan-button-text" variant="h6" color="primary.main">
                 {buttonProps.title}
               </ButtonText>