@stigg/react-sdk 7.7.1-beta.1 → 7.8.0

package/src/components/checkout/CheckoutContainer.tsx

@@ -0,0 +1,193 @@
+import React, { useMemo } from 'react';
+import { Elements } from '@stripe/react-stripe-js';
+import { PricingType } from '@stigg/js-client-sdk';
+import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
+import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
+import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
+import { CheckoutStep, useCheckoutModel, useProgressBarModel } from './hooks';
+import { CheckoutStepKey } from './types';
+import { CheckoutAddonsStep } from './steps/addons';
+import { PaymentStep } from './steps/payment';
+import { useStripeIntegration } from './steps/payment/stripe';
+import { CheckoutPlanStep } from './steps/plan';
+import { useCheckoutContext } from './CheckoutProvider';
+import { ContentLoadingSkeleton } from './components';
+import { DowngradeToFreePlan } from './components/DowngradeToFreeContainer';
+import {
+  MockCheckoutPreviewCallback,
+  OnBillableFeatureChangeCallback,
+  OnAddonChangeCallback,
+  OnCheckoutCallback,
+  OnCheckoutCompletedCallback,
+  OnChangePlanCallback,
+  OnBillingAddressChangeCallback,
+} from './types';
+
+type StepProps = {
+  content: React.ReactNode;
+};
+
+type StripeClientSecret = { clientSecret: string };
+type StripeManualMode = { mode: 'setup' | 'payment' | 'subscription'; currency: string };
+
+const getStepProps = (
+  currentStep: CheckoutStep,
+  {
+    onBillingAddressChange,
+    onChangePlan,
+    onBillableFeatureChange,
+    onAddonChange,
+    collectPhoneNumber,
+    onCheckout,
+    onCheckoutCompleted,
+  }: Pick<
+    CheckoutContainerProps,
+    | 'onBillingAddressChange'
+    | 'onChangePlan'
+    | 'onBillableFeatureChange'
+    | 'onAddonChange'
+    | 'collectPhoneNumber'
+    | 'onCheckout'
+    | 'onCheckoutCompleted'
+  >,
+): StepProps => {
+  switch (currentStep.key) {
+    case CheckoutStepKey.PLAN:
+      return {
+        content: <CheckoutPlanStep onChangePlan={onChangePlan} onBillableFeatureChange={onBillableFeatureChange} />,
+      };
+    case CheckoutStepKey.ADDONS:
+      return { content: <CheckoutAddonsStep onAddonChange={onAddonChange} /> };
+    case CheckoutStepKey.PAYMENT:
+      return {
+        content: (
+          <PaymentStep
+            onBillingAddressChange={onBillingAddressChange}
+            collectPhoneNumber={collectPhoneNumber}
+            onCheckout={onCheckout}
+            onCheckoutCompleted={onCheckoutCompleted}
+          />
+        ),
+      };
+    default:
+      return { content: null };
+  }
+};
+
+export type CheckoutContainerProps = {
+  onCheckout?: OnCheckoutCallback;
+  onCheckoutCompleted: OnCheckoutCompletedCallback;
+  onChangePlan?: OnChangePlanCallback;
+  onBillingAddressChange?: OnBillingAddressChangeCallback;
+  onBillableFeatureChange?: OnBillableFeatureChangeCallback;
+  onAddonChange?: OnAddonChangeCallback;
+  disablePromotionCode?: boolean;
+  disableSuccessAnimation?: boolean;
+  collectPhoneNumber?: boolean;
+  onMockCheckoutPreview?: MockCheckoutPreviewCallback;
+};
+
+export function CheckoutContainer({
+  onCheckout,
+  onCheckoutCompleted,
+  onChangePlan,
+  onBillingAddressChange,
+  onBillableFeatureChange,
+  onAddonChange,
+  collectPhoneNumber,
+  disablePromotionCode,
+  disableSuccessAnimation,
+  onMockCheckoutPreview,
+}: CheckoutContainerProps) {
+  const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
+  const [{ stiggTheme, widgetState, theme, showWatermark }] = useCheckoutContext();
+  const { currentStep } = useProgressBarModel();
+
+  const { isLoadingCheckoutData } = widgetState;
+
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan, activeSubscription } = checkoutState || {};
+  const isFreeDowngrade =
+    !!plan &&
+    plan.pricingType === PricingType.Free &&
+    !!activeSubscription &&
+    activeSubscription.pricingType !== PricingType.Free;
+
+  const { content } = getStepProps(currentStep, {
+    onBillingAddressChange,
+    onChangePlan,
+    onBillableFeatureChange,
+    onAddonChange,
+    collectPhoneNumber,
+    onCheckout,
+    onCheckoutCompleted,
+  });
+
+  const checkoutContent = (
+    <>
+      {isFreeDowngrade ? (
+        <DowngradeToFreePlan
+          freePlan={plan}
+          activeSubscription={activeSubscription}
+          allowChangePlan
+          checkoutLocalization={checkoutLocalization}
+          onChangePlan={onChangePlan}
+        />
+      ) : (
+        <>{content}</>
+      )}
+    </>
+  );
+
+  const stripeElementsMode: StripeClientSecret | StripeManualMode = useMemo(
+    () => (setupIntentClientSecret ? { clientSecret: setupIntentClientSecret } : { mode: 'setup', currency: 'usd' }),
+    [setupIntentClientSecret],
+  );
+
+  return (
+    <Elements
+      key={setupIntentClientSecret}
+      stripe={stripePromise}
+      options={{
+        ...stripeElementsMode,
+        appearance: {
+          theme: 'stripe',
+          variables: {
+            colorText: stiggTheme.palette.text.primary,
+            colorPrimaryText: stiggTheme.palette.text.primary,
+            colorTextPlaceholder: stiggTheme.palette.text.disabled,
+            fontFamily: stiggTheme.typography.fontFamily,
+            colorBackground: theme?.paymentInputBackgroundColor,
+            borderRadius: theme?.paymentInputBorderRadius,
+          },
+          rules: theme?.paymentInputBorderColor
+            ? {
+                '.Input': {
+                  borderColor: theme?.paymentInputBorderColor,
+                },
+              }
+            : undefined,
+        },
+      }}>
+      <CheckoutLayout className="stigg-checkout-layout">
+        {!isFreeDowngrade && <CheckoutProgressBar />}
+        <CheckoutContent>
+          <CheckoutPanel>{isLoadingCheckoutData ? <ContentLoadingSkeleton /> : checkoutContent}</CheckoutPanel>
+          {isLoadingCheckoutData ? (
+            <CheckoutSummarySkeleton showWatermark={showWatermark} />
+          ) : (
+            <CheckoutSummary
+              disablePromotionCode={disablePromotionCode}
+              disableSuccessAnimation={disableSuccessAnimation}
+              onCheckout={onCheckout}
+              onCheckoutCompleted={onCheckoutCompleted}
+              isFreeDowngrade={isFreeDowngrade}
+              onMockCheckoutPreview={onMockCheckoutPreview}
+              showWatermark={showWatermark}
+            />
+          )}
+        </CheckoutContent>
+      </CheckoutLayout>
+    </Elements>
+  );
+}

package/src/components/checkout/CheckoutProvider.tsx

@@ -0,0 +1,181 @@
+import { produce } from 'immer';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
+import { CustomizedTheme, SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
+import { DeepPartial } from '../../types';
+import { mapCheckoutConfiguration, mapTypography } from '../common/mapExternalTheme';
+import {
+  AddonsStepState,
+  getAddonsStepInitialState,
+  getPaymentStepInitialState,
+  getPlanStepInitialState,
+  getProgressBarInitialState,
+  PaymentStepState,
+  PlanStepState,
+  ProgressBarState,
+  useLoadCheckout,
+  WidgetState,
+} from './hooks';
+import { CheckoutLocalization, getResolvedCheckoutLocalize } from './configurations/textOverrides';
+import { CheckoutTheme, getResolvedCheckoutTheme } from './configurations/theme';
+import { StiggTheme } from '../../theme/types';
+import { BillingInformation, MockCheckoutStateCallback, OnBeforeStepChangeCallback } from './types';
+import { defaultCheckoutTypography } from './configurations/typography';
+import { CheckoutSteps } from './configurations/steps';
+
+export interface CheckoutContextState {
+  checkout?: GetCheckoutStateResults | null;
+  checkoutLocalization: CheckoutLocalization;
+  stiggTheme: StiggTheme;
+  theme: CheckoutTheme;
+  resourceId?: string;
+  promotionCode?: string;
+  progressBar: ProgressBarState;
+  planStep: PlanStepState;
+  addonsStep: AddonsStepState;
+  paymentStep: PaymentStepState;
+  widgetState: WidgetState;
+  showWatermark: boolean;
+  checkoutSuccess: boolean;
+  onBeforeStepChange?: OnBeforeStepChangeCallback;
+}
+
+export const CheckoutContext = React.createContext<
+  [CheckoutContextState, (updater: (state: CheckoutContextState) => void) => void] | null
+>(null);
+
+CheckoutContext.displayName = 'CheckoutContext';
+
+export const useCheckoutContext = () => {
+  const ctx = useContext(CheckoutContext);
+  if (!ctx) {
+    throw new Error(
+      'Could not find Checkout context; You need to wrap your checkout components in an <CheckoutProvider> component.',
+    );
+  }
+  return ctx;
+};
+
+const CheckoutContextProvider: React.FC<{ children: React.ReactNode; initialState: CheckoutContextState }> = ({
+  children,
+  initialState,
+}) => {
+  const [state, innerSetState] = useState(initialState);
+
+  useEffect(() => {
+    innerSetState(initialState);
+  }, [initialState]);
+
+  const setState = useCallback(
+    (updater: (state: CheckoutContextState) => void) => innerSetState((old) => produce(old, (draft) => updater(draft))),
+    [innerSetState],
+  );
+
+  const [contextValue, setContextValue] = useMemo(() => [state, setState], [setState, state]);
+
+  return <CheckoutContext.Provider value={[contextValue, setContextValue]}>{children}</CheckoutContext.Provider>;
+};
+
+export type CheckoutProviderProps = {
+  textOverrides?: DeepPartial<CheckoutLocalization>;
+  theme?: DeepPartial<CheckoutTheme>;
+  resourceId?: string;
+  planId: string;
+  preferredBillingPeriod?: BillingPeriod;
+  billingCountryCode?: string;
+  billableFeatures?: BillableFeature[];
+  billingInformation?: BillingInformation;
+  onMockCheckoutState?: MockCheckoutStateCallback;
+  skipCheckoutSteps?: CheckoutSteps[];
+  onBeforeStepChange?: OnBeforeStepChangeCallback;
+};
+
+export function CheckoutProvider({
+  children,
+  textOverrides,
+  theme,
+  preferredBillingPeriod,
+  billableFeatures,
+  resourceId,
+  planId,
+  billingCountryCode,
+  billingInformation,
+  onMockCheckoutState,
+  skipCheckoutSteps,
+  onBeforeStepChange,
+}: {
+  children: React.ReactNode;
+} & CheckoutProviderProps) {
+  const { checkout, isLoading, showWatermark } = useLoadCheckout({
+    resourceId,
+    planId,
+    billingCountryCode,
+    onMockCheckoutState,
+  });
+  const configuration: CustomizedTheme = checkout?.configuration
+    ? mapCheckoutConfiguration(checkout.configuration)
+    : { typography: mapTypography(null, defaultCheckoutTypography) };
+  const globalTheme: StiggTheme = useStiggTheme(configuration);
+
+  const initialState = useMemo(() => {
+    const checkoutTheme = getResolvedCheckoutTheme(globalTheme, theme, checkout?.configuration);
+    const checkoutLocalization = getResolvedCheckoutLocalize(textOverrides);
+    const planStep = getPlanStepInitialState({
+      preferredBillingPeriod,
+      plan: checkout?.plan,
+      activeSubscription: checkout?.activeSubscription,
+      billingCountryCode,
+      preconfiguredBillableFeatures: billableFeatures ?? [],
+    });
+    const addonsStep = getAddonsStepInitialState({
+      plan: checkout?.plan,
+      activeSubscription: checkout?.activeSubscription,
+    });
+    const paymentStep = getPaymentStepInitialState({
+      customer: checkout?.customer,
+      taxPercentage: billingInformation?.taxDetails?.taxPercentage,
+    });
+    const progressBar = getProgressBarInitialState({
+      isLoading,
+      skipCheckoutSteps: skipCheckoutSteps ?? [],
+      plan: checkout?.plan,
+      availableAddons: addonsStep.availableAddons,
+      availableCharges: planStep.billableFeatures,
+      preferredBillingPeriod,
+      preconfiguredBillableFeatures: billableFeatures ?? [],
+    });
+
+    const initialState: CheckoutContextState = {
+      checkout,
+      checkoutLocalization,
+      stiggTheme: globalTheme,
+      theme: checkoutTheme,
+      progressBar,
+      planStep,
+      addonsStep,
+      paymentStep,
+      resourceId: checkout?.resource?.id,
+      widgetState: { readOnly: false, isValid: true, isLoadingCheckoutData: isLoading },
+      showWatermark,
+      checkoutSuccess: false,
+      onBeforeStepChange,
+    };
+
+    return initialState;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    preferredBillingPeriod,
+    billingCountryCode,
+    checkout,
+    isLoading,
+    skipCheckoutSteps,
+    billingInformation?.taxDetails?.taxPercentage,
+    onBeforeStepChange,
+  ]);
+
+  return (
+    <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>
+      <CheckoutContextProvider initialState={initialState}>{children}</CheckoutContextProvider>
+    </SdkThemeProvider>
+  );
+}

package/src/components/checkout/components/Button.tsx

@@ -0,0 +1,35 @@
+import styled from '@utils/style';
+import MuiButton, { ButtonProps } from '@mui/material/Button';
+
+export type StyledButtonProps = { $success?: boolean; $error?: boolean };
+
+const StyledButton = styled(MuiButton, { shouldForwardProp: (prop) => !prop.startsWith('$') })<StyledButtonProps>`
+  border-radius: 10px;
+  text-transform: none;
+
+  background-color: ${({ theme, $success, $error }) => {
+    if ($success) {
+      return theme.stigg.palette.success;
+    }
+    if ($error) {
+      return theme.stigg.palette.error;
+    }
+    return '';
+  }};
+
+  &:hover {
+    background-color: ${({ theme, $success, $error }) => {
+      if ($success) {
+        return theme.stigg.palette.successDark;
+      }
+      if ($error) {
+        return theme.stigg.palette.errorDark;
+      }
+      return '';
+    }};
+  }
+`;
+
+export const Button = ({ variant = 'outlined', ...props }: ButtonProps & StyledButtonProps) => {
+  return <StyledButton variant={variant} {...props} />;
+};

package/src/components/checkout/components/ChangePlanButton.tsx

@@ -0,0 +1,30 @@
+import Button, { ButtonProps } from '@mui/material/Button';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+
+export const ChangePlanButton = ({
+  onClick,
+  checkoutLocalization,
+  size,
+}: {
+  onClick: () => void;
+  checkoutLocalization: CheckoutLocalization;
+  size: ButtonProps['size'];
+}) => {
+  return (
+    <Button
+      className="stigg-checkout-change-plan-button"
+      sx={{ textTransform: 'none' }}
+      variant="text"
+      size={size}
+      onClick={onClick}>
+      <Typography
+        className="stigg-checkout-change-plan-button-text"
+        color="primary.main"
+        variant="h3"
+        style={{ lineHeight: '24px' }}>
+        {checkoutLocalization.changePlan}
+      </Typography>
+    </Button>
+  );
+};

package/src/components/checkout/components/ContentLoadingSkeleton.tsx

@@ -0,0 +1,41 @@
+import Divider from '@mui/material/Divider';
+import Grid from '@mui/material/Grid';
+import styled from '@utils/style';
+import { FlexedSkeleton, FlexedSkeletonContainer, Skeleton, SkeletonsContainer } from './Skeletons.style';
+
+const ContentContainer = styled(Grid)`
+  display: flex;
+  flex-direction: column;
+`;
+
+export function ContentLoadingSkeleton() {
+  return (
+    <ContentContainer container>
+      <SkeletonsContainer item $gap={48}>
+        <Skeleton width={120} height={20} />
+        <Skeleton width={120} height={20} />
+      </SkeletonsContainer>
+
+      <Divider className="stigg-checkout-plan-header-divider" sx={{ marginY: 2 }} />
+
+      <ContentContainer item>
+        <Skeleton width={120} height={20} />
+
+        <FlexedSkeletonContainer $gap={16} marginTop={3}>
+          <Skeleton height={20} />
+          <Skeleton height={20} />
+        </FlexedSkeletonContainer>
+
+        <SkeletonsContainer $gap={130} marginTop={3}>
+          <FlexedSkeleton flex={1}>
+            <Skeleton height={20} />
+          </FlexedSkeleton>
+
+          <FlexedSkeleton flex={3}>
+            <Skeleton height={20} />
+          </FlexedSkeleton>
+        </SkeletonsContainer>
+      </ContentContainer>
+    </ContentContainer>
+  );
+}

package/src/components/checkout/components/DowngradeToFreeContainer.tsx

@@ -0,0 +1,115 @@
+import styled from '@utils/style';
+import Box from '@mui/material/Box';
+import Alert from '@mui/material/Alert';
+import { CheckoutStatePlan, Subscription } from '@stigg/js-client-sdk';
+import { StyledArrowRightIcon } from './StyledArrow';
+import { Typography } from '../../common/Typography';
+import { CheckoutLocalization } from '../configurations/textOverrides';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+import { ChangePlanButton } from './ChangePlanButton';
+
+const DowngradeToFreePlansContainer = styled(Box)`
+  display: flex;
+`;
+
+const DowngradeToFreeAlert = styled(Alert)`
+  margin-bottom: 16px;
+`;
+
+export const DowngradeToFreePlanBox = styled(Box)`
+  padding: 16px;
+  border-radius: 10px;
+  width: 100%;
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
+`;
+
+export const DowngradeToFreeContent = ({
+  headerText,
+  planName,
+  priceText,
+}: {
+  headerText: string;
+  planName: string;
+  priceText: string;
+}) => {
+  return (
+    <DowngradeToFreePlanBox className="stigg-checkout-downgrade-to-free-container">
+      <Typography
+        className="stigg-checkout-downgrade-to-free-text-header"
+        style={{ opacity: 0.8 }}
+        variant="caption"
+        color="disabled">
+        {headerText}
+      </Typography>
+      <Typography className="stigg-checkout-downgrade-to-free-plan-name" bold variant="h3" color="primary">
+        {planName}
+      </Typography>
+      <Typography className="stigg-checkout-downgrade-to-free-price-text" color="secondary">
+        {priceText}
+      </Typography>
+    </DowngradeToFreePlanBox>
+  );
+};
+
+type DowngradeToFreePlanProps = {
+  checkoutLocalization: CheckoutLocalization;
+  activeSubscription: Subscription;
+  freePlan: CheckoutStatePlan;
+  allowChangePlan?: boolean;
+} & Pick<CheckoutContainerProps, 'onChangePlan'>;
+
+export const DowngradeToFreePlan = ({
+  checkoutLocalization,
+  activeSubscription,
+  freePlan,
+  allowChangePlan = false,
+  onChangePlan,
+}: DowngradeToFreePlanProps) => {
+  let alertAction;
+  if (allowChangePlan && onChangePlan) {
+    alertAction = (
+      <ChangePlanButton
+        onClick={() => {
+          onChangePlan({ currentPlan: freePlan });
+        }}
+        checkoutLocalization={checkoutLocalization}
+        size="small"
+      />
+    );
+  }
+
+  const paidBillingPeriod =
+    activeSubscription.prices.length > 0 ? activeSubscription.prices[0].billingPeriod : undefined;
+
+  return (
+    <>
+      <DowngradeToFreeAlert action={alertAction} className="stigg-checkout-downgrade-to-free-alert" severity="info">
+        <Typography as="span" color="secondary">
+          {checkoutLocalization.downgradeToFree.alertText({ plan: activeSubscription.plan })}
+        </Typography>
+      </DowngradeToFreeAlert>
+
+      <DowngradeToFreePlansContainer className="stigg-checkout-downgrade-to-free-plans-container">
+        <DowngradeToFreeContent
+          headerText={checkoutLocalization.downgradeToFree.paidPlanHeader({ plan: activeSubscription.plan })}
+          planName={checkoutLocalization.downgradeToFree.paidPlanName({ plan: activeSubscription.plan })}
+          priceText={checkoutLocalization.downgradeToFree.paidPlanPriceText({
+            plan: activeSubscription.plan,
+            billingPeriod: paidBillingPeriod,
+          })}
+        />
+
+        <StyledArrowRightIcon
+          className="stigg-checkout-downgrade-to-free-arrow"
+          style={{ margin: 'auto 16px', minWidth: '16px' }}
+        />
+
+        <DowngradeToFreeContent
+          headerText={checkoutLocalization.downgradeToFree.freePlanHeader({ plan: freePlan })}
+          planName={checkoutLocalization.downgradeToFree.freePlanName({ plan: freePlan })}
+          priceText={checkoutLocalization.downgradeToFree.freePlanPriceText({ plan: freePlan })}
+        />
+      </DowngradeToFreePlansContainer>
+    </>
+  );
+};

package/src/components/checkout/components/InputField.tsx

@@ -0,0 +1,26 @@
+import styled from '@utils/style';
+import { OutlinedInputProps } from '@mui/material/OutlinedInput';
+import TextField from '@mui/material/TextField';
+
+export const InputField = styled(TextField)<OutlinedInputProps>(({ theme }) => ({
+  '& .MuiOutlinedInput-root': {
+    height: '42px',
+    borderRadius: theme.stigg.border.radius,
+    fieldset: {
+      borderColor: theme.stigg.palette.outlinedBorder,
+    },
+    '&:not(.Mui-focused):hover fieldset': {
+      borderColor: theme.stigg.palette.outlinedRestingBorder,
+    },
+  },
+  '& .MuiInputBase-input': {
+    padding: '8px 12px',
+    borderRadius: theme.stigg.border.radius,
+    fontFamily: theme.stigg.typography.fontFamily,
+    color: theme.stigg.palette.text.primary,
+    ...theme.stigg.typography.body,
+  },
+  '& .Mui-error': {
+    fontFamily: theme.stigg.typography.fontFamily,
+  },
+}));

package/src/components/checkout/components/Skeletons.style.ts

@@ -0,0 +1,30 @@
+import styled from '@utils/style';
+import Grid from '@mui/material/Grid';
+import ReactSkeleton from 'react-loading-skeleton';
+
+export const SkeletonsContainer = styled(Grid, { shouldForwardProp: (prop) => !prop.startsWith('$') })<{
+  $gap: number;
+  $flexDirection?: 'row' | 'column';
+}>`
+  display: flex;
+  flex-direction: ${({ $flexDirection }) => $flexDirection || 'row'};
+  gap: ${({ $gap }) => $gap}px;
+`;
+
+export const FlexedSkeletonContainer = styled(SkeletonsContainer)`
+  span {
+    display: flex;
+    flex: 1;
+  }
+`;
+
+export const FlexedSkeleton = styled(Grid)<{ flex: number }>`
+  span {
+    display: flex;
+    flex: ${({ flex }) => flex};
+  }
+`;
+
+export const Skeleton = styled(ReactSkeleton)`
+  border-radius: 4px;
+`;

package/src/components/checkout/components/StyledArrow.tsx

@@ -0,0 +1,9 @@
+import styled from '@utils/style';
+
+import ArrowRightIcon from '../../../assets/arrow-right.svg';
+
+export const StyledArrowRightIcon = styled(ArrowRightIcon)`
+  path {
+    stroke: ${({ theme }) => theme.stigg.palette.text.secondary};
+  }
+`;

package/src/components/checkout/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './InputField';
+export * from './ContentLoadingSkeleton';

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

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