@stigg/react-sdk 5.22.1 → 5.23.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.22.1",
+  "version": "5.23.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/Checkout.tsx

@@ -15,6 +15,7 @@ export const Checkout = ({
   billableFeatures,
   billingInformation,
   onMockCheckoutState,
+  skipCheckoutSteps,
   ...containerProps
 }: CheckoutProps) => {
   return (
@@ -27,7 +28,8 @@ export const Checkout = ({
       billingCountryCode={billingCountryCode}
       billableFeatures={billableFeatures}
       billingInformation={billingInformation}
-      onMockCheckoutState={onMockCheckoutState}>
+      onMockCheckoutState={onMockCheckoutState}
+      skipCheckoutSteps={skipCheckoutSteps}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutProvider.tsx

@@ -21,6 +21,7 @@ import { CheckoutTheme, getResolvedCheckoutTheme } from './configurations/theme'
 import { StiggTheme } from '../../theme/types';
 import { BillingInformation, MockCheckoutStateCallback } from './types';
 import { defaultCheckoutTypography } from './configurations/typography';
+import { CheckoutSteps } from './configurations/steps';
 
 export interface CheckoutContextState {
   checkout?: GetCheckoutStateResults | null;
@@ -82,6 +83,7 @@ export type CheckoutProviderProps = {
   billableFeatures?: BillableFeature[];
   billingInformation?: BillingInformation;
   onMockCheckoutState?: MockCheckoutStateCallback;
+  skipCheckoutSteps?: CheckoutSteps[];
 };
 
 export function CheckoutProvider({
@@ -95,6 +97,7 @@ export function CheckoutProvider({
   billingCountryCode,
   billingInformation,
   onMockCheckoutState,
+  skipCheckoutSteps,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
@@ -124,7 +127,13 @@ export function CheckoutProvider({
       taxPercentage: billingInformation?.taxDetails?.taxPercentage,
     });
     const progressBar = getProgressBarInitialState({
-      availableAddons: isLoading ? undefined : addonsStep.availableAddons,
+      isLoading,
+      skipCheckoutSteps: skipCheckoutSteps ?? [],
+      plan: checkout?.plan,
+      availableAddons: addonsStep.availableAddons,
+      availableCharges: planStep.billableFeatures,
+      preferredBillingPeriod,
+      preconfiguredBillableFeatures: billableFeatures ?? [],
     });
 
     const initialState: CheckoutContextState = {
@@ -142,7 +151,14 @@ export function CheckoutProvider({
 
     return initialState;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading, billingInformation?.taxDetails?.taxPercentage]);
+  }, [
+    preferredBillingPeriod,
+    billingCountryCode,
+    checkout,
+    isLoading,
+    skipCheckoutSteps,
+    billingInformation?.taxDetails?.taxPercentage,
+  ]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

package/src/components/checkout/configurations/steps.ts

@@ -0,0 +1 @@
+export type CheckoutSteps = 'PLAN' | 'ADDONS';

package/src/components/checkout/hooks/usePlanStepModel.ts

@@ -5,6 +5,7 @@ import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg
 import { useCheckoutContext } from '../CheckoutProvider';
 import { getTierByQuantity, hasTierWithUnitPrice } from '../../utils/priceTierUtils';
 import { getValidPriceQuantity } from '../../utils/priceUtils';
+import { hasAnnualPrices, hasMonthlyPrices } from '../../utils/planPrices';
 
 export type PlanStepState = {
   billingPeriod: BillingPeriod;
@@ -95,11 +96,11 @@ function resolveBillingPeriod({
   activeSubscription?: Subscription | null;
   preferredBillingPeriod?: BillingPeriod;
 }) {
-  const hasMonthlyPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Monthly);
-  const hasAnnualPrices = plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
+  const hasMonthlyPlan = hasMonthlyPrices(plan);
+  const hasAnnualPlan = hasAnnualPrices(plan);
 
   if (preferredBillingPeriod) {
-    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPrices, hasAnnualPrices);
+    const billingPeriod = getBillingPeriod(preferredBillingPeriod, hasMonthlyPlan, hasAnnualPlan);
     if (billingPeriod) {
       return billingPeriod;
     }
@@ -111,17 +112,13 @@ function resolveBillingPeriod({
   }
 
   if (activeSubscription?.prices && activeSubscription?.prices.length > 0) {
-    const billingPeriod = getBillingPeriod(
-      activeSubscription?.prices[0].billingPeriod,
-      hasMonthlyPrices,
-      hasAnnualPrices,
-    );
+    const billingPeriod = getBillingPeriod(activeSubscription?.prices[0].billingPeriod, hasMonthlyPlan, hasAnnualPlan);
     if (billingPeriod) {
       return billingPeriod;
     }
   }
 
-  return hasAnnualPrices ? BillingPeriod.Annually : BillingPeriod.Monthly;
+  return hasAnnualPlan ? BillingPeriod.Annually : BillingPeriod.Monthly;
 }
 
 export function getPlanStepInitialState({

package/src/components/checkout/hooks/useProgressBarModel.ts

@@ -1,5 +1,8 @@
-import { Addon } from '@stigg/js-client-sdk';
+import { BillableFeatureInput } from '@stigg/api-client-js/src/generated/sdk';
+import { Addon, BillableFeature, BillingPeriod, CheckoutStatePlan } from '@stigg/js-client-sdk';
 import { useCheckoutContext } from '../CheckoutProvider';
+import { CheckoutSteps } from '../configurations/steps';
+import { hasMultipleBillingPeriods } from '../../utils/planPrices';
 
 export enum CheckoutStepKey {
   PLAN = 'PLAN',
@@ -32,12 +35,68 @@ const INITIAL_STATE: ProgressBarState = {
   isDisabled: false,
 };
 
-export function getProgressBarInitialState({ availableAddons }: { availableAddons?: Addon[] }) {
-  if (availableAddons?.length === 0) {
-    return { ...INITIAL_STATE, steps: CHECKOUT_STEPS.filter((step) => step.key !== CheckoutStepKey.ADDONS) };
+type GetProgressBarInitialStateProps = {
+  isLoading: boolean;
+  skipCheckoutSteps: CheckoutSteps[];
+  plan?: CheckoutStatePlan;
+  availableAddons?: Addon[];
+  availableCharges: BillableFeatureInput[];
+  preferredBillingPeriod?: BillingPeriod;
+  preconfiguredBillableFeatures: BillableFeature[];
+};
+
+const canSkipPlanStep = (
+  plan: CheckoutStatePlan,
+  availableCharges: BillableFeatureInput[],
+  preconfiguredBillableFeatures: BillableFeature[],
+  preferredBillingPeriod?: BillingPeriod,
+) => {
+  // if multiple billing periods are available, a preferred billing period must be selected
+  if (hasMultipleBillingPeriods(plan) && !preferredBillingPeriod) {
+    return false;
+  }
+
+  const availableChargesIds = availableCharges.map((charge) => charge.featureId);
+  const preconfiguredChargesIds = preconfiguredBillableFeatures.map((charge) => charge.featureId);
+
+  // if there are available charges, they must be preconfigured
+  if (
+    availableChargesIds.length !== preconfiguredChargesIds.length ||
+    !availableChargesIds.every((charge) => preconfiguredChargesIds.includes(charge))
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export function getProgressBarInitialState({
+  isLoading,
+  skipCheckoutSteps,
+  plan,
+  availableAddons,
+  availableCharges,
+  preferredBillingPeriod,
+  preconfiguredBillableFeatures,
+}: GetProgressBarInitialStateProps) {
+  if (isLoading || !plan) {
+    return INITIAL_STATE;
+  }
+
+  const stepsToFilter: CheckoutStepKey[] = [];
+
+  if (
+    skipCheckoutSteps.includes('PLAN') &&
+    canSkipPlanStep(plan, availableCharges, preconfiguredBillableFeatures, preferredBillingPeriod)
+  ) {
+    stepsToFilter.push(CheckoutStepKey.PLAN);
+  }
+
+  if (availableAddons?.length === 0 || skipCheckoutSteps.includes('ADDONS')) {
+    stepsToFilter.push(CheckoutStepKey.ADDONS);
   }
 
-  return INITIAL_STATE;
+  return { ...INITIAL_STATE, steps: CHECKOUT_STEPS.filter((step) => !stepsToFilter.includes(step.key)) };
 }
 
 function useProgressBarState() {

package/src/components/checkout/progressBar/CheckoutProgressBar.tsx

@@ -15,8 +15,12 @@ export const CheckoutProgressBar = () => {
   const { activeStep, completedSteps, steps } = progressBarState || {};
   const progress = ((activeStep + 1) * 100) / steps.length;
 
+  if (progressBarState.steps.length === 1) {
+    return null;
+  }
+
   return (
-    <Box sx={{ width: '100%', mb: 3 }}>
+    <Box className="stigg-checkout-progress-container" sx={{ width: '100%', mb: 3 }}>
       <StyledProgress variant="determinate" value={progress} $disabled={readOnly} />
       <Grid container display="flex">
         {steps.map(({ key, label }, index) => {

package/src/components/checkout/steps/payment/PaymentMethods.style.ts

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import Grid from '@mui/material/Grid';
 
@@ -11,9 +12,15 @@ export const PaymentMethodContainer = styled(Grid, { shouldForwardProp: (prop) =
   opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
 `;
 
-export const NewPaymentMethodContainer = styled(PaymentMethodContainer)`
+export const NewPaymentMethodContainer = styled(PaymentMethodContainer)<{ $hideBorders?: boolean }>`
   flex-direction: column;
   align-items: unset;
+  ${({ $hideBorders }) =>
+    $hideBorders &&
+    css`
+      border: none;
+      padding: 0;
+    `}
 `;
 
 export const PaymentMethodLayoutContainer = styled(Grid)`

package/src/components/checkout/steps/payment/PaymentMethods.tsx

@@ -5,7 +5,6 @@ import Grid from '@mui/material/Grid';
 import Radio from '@mui/material/Radio';
 import { Customer } from '@stigg/js-client-sdk';
 
-import { Icon, Icons } from '../../../common/Icon';
 import { Typography } from '../../../common/Typography';
 import {
   NewPaymentMethodContainer,
@@ -19,7 +18,6 @@ import { CheckoutContainerProps } from '../../CheckoutContainer';
 
 export type PaymentMethodLayoutProps = {
   checked: boolean;
-  icon: Icons;
   text: React.ReactNode;
   subtitle?: React.ReactNode;
   readOnly?: boolean;
@@ -31,13 +29,13 @@ export type PaymentMethodProps = Pick<Customer, 'paymentMethodDetails'> &
 export type NewPaymentMethodProps = Pick<PaymentMethodLayoutProps, 'checked' | 'readOnly'> & {
   onSelect: () => void;
   checkoutLocalization: CheckoutLocalization;
+  hasExistingPaymentMethod: boolean;
 } & Pick<CheckoutContainerProps, 'onBillingAddressChange' | 'collectPhoneNumber'>;
 
-function PaymentMethodLayout({ checked, icon, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
+function PaymentMethodLayout({ checked, text, subtitle, readOnly }: PaymentMethodLayoutProps) {
   return (
     <PaymentMethodLayoutContainer>
       <Radio checked={checked} disabled={readOnly} />
-      <Icon icon={icon} style={{ display: 'flex' }} />
       <PaymentMethodTextContainer container>
         <Grid item>{text}</Grid>
         {subtitle && <Grid item>{subtitle}</Grid>}
@@ -57,7 +55,6 @@ export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly,
       <PaymentMethodLayout
         checked={checked}
         readOnly={readOnly}
-        icon="PaymentMethod"
         text={<Typography variant="h6">{`Card ending in ${last4Digits}`}</Typography>}
         subtitle={
           !!expirationMonth &&
@@ -73,6 +70,7 @@ export function ExistingPaymentMethod({ checked, paymentMethodDetails, readOnly,
 }
 
 export function NewPaymentMethod({
+  hasExistingPaymentMethod,
   checked,
   onSelect,
   readOnly,
@@ -81,13 +79,14 @@ export function NewPaymentMethod({
   collectPhoneNumber,
 }: NewPaymentMethodProps) {
   return (
-    <NewPaymentMethodContainer item onClick={onSelect} $disabled={readOnly}>
-      <PaymentMethodLayout
-        checked={checked}
-        readOnly={readOnly}
-        icon="PaymentMethod"
-        text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
-      />
+    <NewPaymentMethodContainer item $hideBorders={!hasExistingPaymentMethod} onClick={onSelect} $disabled={readOnly}>
+      {hasExistingPaymentMethod && (
+        <PaymentMethodLayout
+          checked={checked}
+          readOnly={readOnly}
+          text={<Typography variant="h6">{checkoutLocalization.newPaymentMethodText}</Typography>}
+        />
+      )}
       <Collapse in={checked}>
         <StripePaymentForm onBillingAddressChange={onBillingAddressChange} collectPhoneNumber={collectPhoneNumber} />
       </Collapse>

package/src/components/checkout/steps/payment/PaymentStep.tsx

@@ -44,6 +44,7 @@ export function PaymentStep({
         onSelect={() => handleOnSelect(false)}
       />
       <NewPaymentMethod
+        hasExistingPaymentMethod={!!customer?.paymentMethodDetails}
         readOnly={readOnly}
         checked={useNewPaymentMethod}
         checkoutLocalization={checkoutLocalization}

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

@@ -181,7 +181,12 @@ export const CheckoutSummary = ({
       <SummaryCard>
         <SummaryTitle variant="h3">{checkoutLocalization.summary.title}</SummaryTitle>
 
-        <Grid display="flex" flexDirection="row" alignItems="center" marginY={2}>
+        <Grid
+          className="stigg-checkout-summary-plan-title-container"
+          display="flex"
+          flexDirection="row"
+          alignItems="center"
+          marginY={2}>
           <Typography variant="h6" color="primary" style={{ paddingRight: '8px' }}>
             {checkoutLocalization.summary.planName({ plan: plan! })}
           </Typography>
@@ -198,25 +203,27 @@ export const CheckoutSummary = ({
         )}
         {!baseCharge && isFreeDowngrade ? <FreeChargeLineItem label={baseChargeLabel} /> : null}
 
-        {usageCharges.map((price) => {
-          const priceBillableFeature = subscription.billableFeatures?.find(
-            (billableFeature) => billableFeature.featureId === price.feature?.featureId,
-          );
-
-          return (
-            <BilledPriceLineItem
-              checkoutLocalization={checkoutLocalization}
-              key={price.feature?.featureId}
-              label={getFeatureDisplayNameText(
-                price.feature?.displayName || '',
-                price.feature?.units,
-                price.feature?.unitsPlural,
-              )}
-              quantity={priceBillableFeature?.quantity || 1}
-              price={price}
-            />
-          );
-        })}
+        <Grid item className="stigg-checkout-summary-usage-charges-container">
+          {usageCharges.map((price) => {
+            const priceBillableFeature = subscription.billableFeatures?.find(
+              (billableFeature) => billableFeature.featureId === price.feature?.featureId,
+            );
+
+            return (
+              <BilledPriceLineItem
+                checkoutLocalization={checkoutLocalization}
+                key={price.feature?.featureId}
+                label={getFeatureDisplayNameText(
+                  price.feature?.displayName || '',
+                  price.feature?.units,
+                  price.feature?.unitsPlural,
+                )}
+                quantity={priceBillableFeature?.quantity || 1}
+                price={price}
+              />
+            );
+          })}
+        </Grid>
 
         {!!subscription.addons?.length && (
           <>

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

@@ -98,7 +98,7 @@ export const BilledPriceLineItem = ({
   }
 
   return (
-    <LineItemContainer>
+    <LineItemContainer className="stigg-checkout-summary-base-charges-container">
       <LineItemRow style={{ alignItems: 'flex-start' }}>
         <Grid item display="flex" gap={0.5} style={{ whiteSpace: 'nowrap' }}>
           {title}

package/src/components/common/VolumeBulkSelect.tsx

@@ -7,6 +7,7 @@ import { map } from 'lodash';
 import React from 'react';
 import { Typography } from './Typography';
 import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { formatNumber } from '../utils/formatNumber';
 
 const TierSelect = styled(Select)`
   border-radius: 10px;
@@ -62,7 +63,7 @@ export function VolumeBulkSelect({
       {map(tiers, (tier: PriceTierFragment) => (
         <MenuItem className="stigg-price-tier-menu-item-text" key={tier.upTo} value={tier.upTo?.toString()}>
           <Typography variant="body1" color="primary" style={{ lineHeight: 'unset' }}>
-            {tier.upTo} {tierUnits}
+            {formatNumber(tier.upTo)} {tierUnits}
           </Typography>
         </MenuItem>
       ))}

package/src/components/paywall/EntitlementRow.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled/macro';
 import { EntitlementResetPeriod } from '@stigg/js-client-sdk';
 import CheckUrl from '../../assets/check-stigg.svg';
 import { calculateUnitQuantityText } from './utils/calculateUnitQuantityText';
+import { formatNumber } from '../utils/formatNumber';
 import { Typography } from '../common/Typography';
 
 const EntitlementName = styled(Typography)`
@@ -29,12 +30,6 @@ const EntitlementCheckIcon = styled(CheckUrl)`
   }
 `;
 
-function formatUsageNumber(usageLimit: number) {
-  return usageLimit.toLocaleString('en-US', {
-    maximumFractionDigits: 0,
-  });
-}
-
 type EntitlementRowProps = {
   hasUnlimitedUsage?: boolean | null;
   isCustom?: boolean | null;
@@ -100,7 +95,7 @@ function getEntitlementDisplay({
 
   if (usageLimit) {
     const featureUnits = usageLimit === 1 ? feature?.units : feature?.unitsPlural;
-    return `${formatUsageNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
+    return `${formatNumber(usageLimit)} ${featureUnits} ${resetPeriodSuffix}`;
   }
 
   if (unitBasedEntitlement) {

package/src/components/utils/formatNumber.ts

@@ -0,0 +1,5 @@
+export function formatNumber(usageLimit: number | null | undefined) {
+  return usageLimit?.toLocaleString('en-US', {
+    maximumFractionDigits: 0,
+  });
+}

package/src/components/utils/planPrices.ts

@@ -0,0 +1,10 @@
+import { Plan } from '@stigg/js-client-sdk';
+import { BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
+
+export const hasMonthlyPrices = (plan?: Plan) =>
+  !!plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Monthly);
+
+export const hasAnnualPrices = (plan?: Plan) =>
+  !!plan?.pricePoints.some((pricePoint) => pricePoint.billingPeriod === BillingPeriod.Annually);
+
+export const hasMultipleBillingPeriods = (plan?: Plan) => hasMonthlyPrices(plan) && hasAnnualPrices(plan);

package/src/stories/Checkout.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled/macro';
+import { BillingPeriod } from '@stigg/js-client-sdk';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Checkout } from '../components/checkout';
 import { StiggProvider } from '../components/StiggProvider';
@@ -23,6 +24,16 @@ export default {
       </StiggProvider>
     ),
   ],
+  argTypes: {
+    billingPeriod: {
+      options: [BillingPeriod.Monthly, BillingPeriod.Annually, null],
+      control: { type: 'radio' },
+    },
+    skipSteps: {
+      options: ['PLAN', 'ADDONS'],
+      control: { type: 'check' },
+    },
+  },
   parameters: {
     controls: {
       exclude: [
@@ -32,6 +43,8 @@ export default {
         'onBillingAddressChange',
         'onMockCheckoutState',
         'onMockCheckoutPreview',
+        'preferredBillingPeriod',
+        'skipCheckoutSteps',
       ],
     },
   },
@@ -45,7 +58,7 @@ const Template: ComponentStory<any> = (args) => (
   <Wrapper>
     <Checkout
       planId={args.planId}
-      preferredBillingPeriod={args.preferredBillingPeriod}
+      preferredBillingPeriod={args.billingPeriod}
       billingCountryCode={args.billingCountryCode}
       resourceId={args.resourceId}
       onCheckoutCompleted={(results) => {
@@ -62,10 +75,11 @@ const Template: ComponentStory<any> = (args) => (
         const { success, errorMessage, results } = await checkoutAction(checkoutParams);
         return { success, errorMessage, results };
       }}
-      billableFeatures={[{ featureId: 'feature-seat', quantity: 30 }]}
+      billableFeatures={args.billableFeatures || []}
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
+      skipCheckoutSteps={args.skipSteps}
       onMockCheckoutState={
         args.useMockData
           ? (params) => {
@@ -74,6 +88,7 @@ const Template: ComponentStory<any> = (args) => (
             }
           : undefined
       }
+      disablePromotionCode={args.disablePromotionCode}
       onMockCheckoutPreview={
         args.useMockData
           ? (params) => {

package/src/stories/mocks/checkout/mockCheckoutState.ts

@@ -184,6 +184,7 @@ function mockPlan(planRefId: string): CheckoutStatePlan {
     compatibleAddons: [additionalStorageAddons],
     entitlements: [],
     inheritedEntitlements: [],
+    compatiblePackageGroups: [],
   };
 }