@stigg/react-sdk 4.3.0 → 4.4.0-beta.0

package/src/assets/outlined-checked-circle-disabled.svg

@@ -0,0 +1,6 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Stepper indicators">
+<circle id="Ellipse 5" cx="10.667" cy="10" r="9.25" fill="#B3BCD3" stroke="#B3BCD3" stroke-width="1.5"/>
+<path id="Shape" d="M5.66699 10.3636L9.30366 14L13.304 10L15.3042 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/outlined-checked-circle.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 16159">
+<circle id="Ellipse 5" cx="10" cy="10" r="9.25" fill="#327EEE" stroke="#327EEE" stroke-width="1.5"/>
+<path id="Shape" d="M5 10.3636L8.63667 14L12.637 10L14.6372 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/outlined-circle.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.333" cy="10" r="9" fill="white" stroke="#327EEE" stroke-width="2"/>
+</svg>

package/src/assets/payment-method.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_239_13697)">
+<path d="M22 0H2C0.89543 0 0 0.89543 0 2V14C0 15.1046 0.89543 16 2 16H22C23.1046 16 24 15.1046 24 14V2C24 0.89543 23.1046 0 22 0Z" fill="#C6C6C7"/>
+</g>
+<path opacity="0.3" d="M18.75 12.4286H16.5C16.0125 12.4286 15.75 12.2 15.75 11.6667C15.75 11.1334 16.0125 10.9048 16.5 10.9048H18.75C19.2375 10.9048 19.5 11.1334 19.5 11.6667C19.5 12.2 19.2375 12.4286 18.75 12.4286ZM14.25 12.4286H12C11.5125 12.4286 11.25 12.2 11.25 11.6667C11.25 11.1334 11.5125 10.9048 12 10.9048H14.25C14.7375 10.9048 15 11.1334 15 11.6667C15 12.2 14.7375 12.4286 14.25 12.4286ZM9.75 12.4286H7.5C7.0125 12.4286 6.75 12.2 6.75 11.6667C6.75 11.1334 7.0125 10.9048 7.5 10.9048H9.75C10.2375 10.9048 10.5 11.1334 10.5 11.6667C10.5 12.2 10.2375 12.4286 9.75 12.4286ZM5.25 12.4286H3C2.5125 12.4286 2.25 12.2 2.25 11.6667C2.25 11.1334 2.5125 10.9048 3 10.9048H5.25C5.7375 10.9048 6 11.1334 6 11.6667C6 12.2 5.7375 12.4286 5.25 12.4286Z" fill="black"/>
+<defs>
+<clipPath id="clip0_239_13697">
+<rect width="24" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/plus-icon.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="plus">
+<path id="Shape" d="M10 4.16666V15.8333" stroke="#327EEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Shape_2" d="M4.16699 10H15.8337" stroke="#327EEE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/assets/trash.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="trash-2">
+<path id="Shape" d="M3 6H5H21" stroke="#F88078" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Shape_2" d="M20 6C20 5.44772 19.5523 5 19 5C18.4477 5 18 5.44772 18 6H20ZM6 6C6 5.44772 5.55228 5 5 5C4.44772 5 4 5.44772 4 6H6ZM7 6C7 6.55228 7.44772 7 8 7C8.55228 7 9 6.55228 9 6H7ZM15 6C15 6.55228 15.4477 7 16 7C16.5523 7 17 6.55228 17 6H15ZM18 6V20H20V6H18ZM18 20C18 20.5523 17.5523 21 17 21V23C18.6569 23 20 21.6569 20 20H18ZM17 21H7V23H17V21ZM7 21C6.44772 21 6 20.5523 6 20H4C4 21.6569 5.34315 23 7 23V21ZM6 20V6H4V20H6ZM9 6V4H7V6H9ZM9 4C9 3.44772 9.44772 3 10 3V1C8.34315 1 7 2.34315 7 4H9ZM10 3H14V1H10V3ZM14 3C14.5523 3 15 3.44772 15 4H17C17 2.34315 15.6569 1 14 1V3ZM15 4V6H17V4H15Z" fill="#F88078"/>
+<path id="Shape_3" d="M10 11V17" stroke="#F88078" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Shape_4" d="M14 11V17" stroke="#F88078" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/src/components/checkout/Checkout.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { CheckoutProvider, CheckoutProviderProps } from './CheckoutProvider';
+import { CheckoutContainer, CheckoutContainerProps } from './CheckoutContainer';
+
+export type CheckoutProps = CheckoutProviderProps & CheckoutContainerProps;
+
+export const Checkout = ({
+  textOverrides,
+  theme,
+  resourceId,
+  planId,
+  preferredBillingPeriod,
+  billingCountryCode,
+  billableFeatures,
+  ...containerProps
+}: CheckoutProps) => {
+  return (
+    <CheckoutProvider
+      textOverrides={textOverrides}
+      theme={theme}
+      resourceId={resourceId}
+      planId={planId}
+      preferredBillingPeriod={preferredBillingPeriod}
+      billingCountryCode={billingCountryCode}
+      billableFeatures={billableFeatures}
+    >
+      <CheckoutContainer {...containerProps} />
+    </CheckoutProvider>
+  );
+};

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

@@ -0,0 +1,35 @@
+import styled from '@emotion/styled/macro';
+import Box from '@mui/material/Box';
+
+export const CheckoutLayout = styled.div`
+  margin: auto;
+  width: 100%;
+  max-width: 920px;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 16px 32px;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.stigg.palette.backgroundPaper};
+  border: ${({ theme }) => `1px solid ${theme.stigg.palette.outlinedBorder}`};
+
+  & * {
+    box-sizing: border-box;
+  }
+`;
+export const CheckoutContent = styled(Box)`
+  display: flex;
+  align-items: flex-start;
+  gap: 32px;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+
+export const CheckoutPanel = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  flex: 2;
+`;

package/src/components/checkout/CheckoutContainer.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Elements } from '@stripe/react-stripe-js';
+import { ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
+import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
+import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
+import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
+import { useProgressBarModel } from './hooks';
+import { PlanHeader } from './planHeader';
+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 { SurpriseStep } from './steps/surprise/SurpriseStep';
+
+type StepProps = {
+  allowChangePlan?: boolean;
+  content: React.ReactNode;
+};
+
+const getStepProps = (step: number): StepProps => {
+  switch (step) {
+    case 0:
+      return { allowChangePlan: true, content: <CheckoutPlanStep /> };
+    case 1:
+      return { content: <CheckoutAddonsStep /> };
+    case 2:
+      return { content: <PaymentStep /> };
+    default:
+      return { content: null };
+  }
+};
+
+export type CheckoutResult = { success: boolean; errorMessage?: string };
+
+export type OnCheckoutParams = { checkoutParams: ApplySubscription; checkoutAction: () => Promise<CheckoutResult> };
+
+export type OnCheckoutCompletedParams = { success: boolean; error?: string };
+
+export type CheckoutContainerProps = {
+  onCheckout?: (params: OnCheckoutParams) => Promise<CheckoutResult>;
+  onCheckoutCompleted: (params: OnCheckoutCompletedParams) => Promise<void>;
+  onChangePlan?: (params: { currentPlan: CheckoutStatePlan | undefined }) => void;
+};
+
+export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan }: CheckoutContainerProps) {
+  const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
+  const [{ stiggTheme, widgetState }] = useCheckoutContext();
+  const { progressBarState } = useProgressBarModel();
+  const { activeStep } = progressBarState;
+  const { isLoadingCheckoutData } = widgetState;
+
+  // uncomment for fun!
+  // if (activeStep > 2) {
+  //   return <SurpriseStep />;
+  // }
+
+  const { content, allowChangePlan } = getStepProps(activeStep);
+
+  const checkoutContent = (
+    <>
+      <PlanHeader allowChangePlan={allowChangePlan} onChangePlan={onChangePlan} />
+      {content}
+    </>
+  );
+
+  return (
+    <Elements
+      stripe={stripePromise}
+      options={{
+        clientSecret: setupIntentClientSecret,
+        appearance: {
+          theme: 'stripe',
+          variables: {
+            colorText: stiggTheme.palette.text.primary,
+            colorPrimaryText: stiggTheme.palette.text.primary,
+            colorTextPlaceholder: stiggTheme.palette.text.disabled,
+            fontFamily: stiggTheme.typography.fontFamily,
+          },
+        },
+      }}>
+      <CheckoutLayout className="stigg-checkout-layout">
+        <CheckoutProgressBar />
+        <CheckoutContent>
+          <CheckoutPanel>
+            {isLoadingCheckoutData && <ContentLoadingSkeleton />}
+            {!isLoadingCheckoutData && checkoutContent}
+          </CheckoutPanel>
+          {isLoadingCheckoutData && <CheckoutSummarySkeleton />}
+          {!isLoadingCheckoutData && (
+            <CheckoutSummary onCheckout={onCheckout} onCheckoutCompleted={onCheckoutCompleted} />
+          )}
+        </CheckoutContent>
+      </CheckoutLayout>
+    </Elements>
+  );
+}

package/src/components/checkout/CheckoutProvider.tsx

@@ -0,0 +1,149 @@
+import { produce } from 'immer';
+import React, { useCallback, useContext, 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 } from '../common/mapExternalTheme';
+import {
+  AddonsStepState,
+  getAddonsStepInitialState,
+  getPaymentStepInitialState,
+  getPlanStepInitialState,
+  getProgressBarInitialState,
+  PaymentStepState,
+  PlanStepState,
+  ProgressBarState,
+  useLoadCheckout,
+  WidgetState,
+} from './hooks';
+import { CheckoutLocalization, getResolvedCheckoutLocalize } from './textOverrides';
+import { CheckoutTheme, getResolvedCheckoutTheme } from './theme';
+import { StiggTheme } from '../../theme/types';
+
+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;
+}
+
+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);
+
+  const setState = useCallback(
+    (updater: (state: CheckoutContextState) => void) => innerSetState((old) => produce(old, (draft) => updater(draft))),
+    [innerSetState],
+  );
+
+  const [contextValue, setContextValue] = useMemo(() => [state, 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[];
+};
+
+export function CheckoutProvider({
+  children,
+  textOverrides,
+  theme,
+  resourceId,
+  planId,
+  preferredBillingPeriod,
+  billingCountryCode,
+  billableFeatures,
+}: {
+  children: React.ReactNode;
+} & CheckoutProviderProps) {
+  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode });
+  const configuration: CustomizedTheme | undefined = checkout?.configuration
+    ? mapCheckoutConfiguration(checkout.configuration)
+    : undefined;
+  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,
+      billingPeriod: planStep.billingPeriod,
+      activeSubscription: checkout?.activeSubscription,
+    });
+    const paymentStep = getPaymentStepInitialState({ customer: checkout?.customer });
+    const progressBar = getProgressBarInitialState({
+      availableAddons: isLoading ? undefined : addonsStep.availableAddons,
+    });
+
+    const initialState: CheckoutContextState = {
+      checkout,
+      checkoutLocalization,
+      stiggTheme: globalTheme,
+      theme: checkoutTheme,
+      progressBar,
+      planStep,
+      addonsStep,
+      paymentStep,
+      resourceId: checkout?.resource?.id,
+      widgetState: { readOnly: false, isLoadingCheckoutData: isLoading },
+    };
+
+    return initialState;
+  }, [
+    theme,
+    textOverrides,
+    preferredBillingPeriod,
+    billingCountryCode,
+    billableFeatures,
+    globalTheme,
+    checkout,
+    isLoading,
+  ]);
+
+  return (
+    <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>
+      <CheckoutContextProvider initialState={initialState}>{children}</CheckoutContextProvider>
+    </SdkThemeProvider>
+  );
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import styled from '@emotion/styled/macro';
+import { Button as MuiButton, ButtonProps, css } from '@mui/material';
+
+export type StyledButtonProps = { $isLoading?: boolean; $success?: boolean; $error?: boolean };
+
+const StyledButton = styled(MuiButton)<StyledButtonProps>`
+  border-radius: 10px;
+  text-transform: none;
+
+  ${({ theme, $isLoading, $success, $error }) => {
+    if ($isLoading) {
+      return css`
+        background-color: ${theme.stigg.palette.primaryDark};
+        cursor: no-drop;
+
+        &:hover {
+          background-color: ${theme.stigg.palette.primaryDark};
+        }
+      `;
+    }
+
+    if ($success) {
+      return css`
+        background-color: ${theme.stigg.palette.success};
+        cursor: 'default';
+
+        &:hover {
+          background-color: ${theme.stigg.palette.successDark};
+        }
+      `;
+    }
+
+    if ($error) {
+      return css`
+        background-color: ${theme.stigg.palette.error};
+
+        &:hover {
+          background-color: ${theme.stigg.palette.errorDark};
+        }
+      `;
+    }
+
+    return '';
+  }}
+`;
+
+export const Button = ({ variant = 'outlined', ...props }: ButtonProps & StyledButtonProps) => {
+  return <StyledButton variant={variant} {...props} />;
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Grid, Divider } from '@mui/material';
+import styled from '@emotion/styled/macro';
+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/InputField.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { OutlinedInputProps, TextField } from '@mui/material';
+
+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,
+  },
+}));

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

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled/macro';
+import { Grid } from '@mui/material';
+import ReactSkeleton from 'react-loading-skeleton';
+
+export const SkeletonsContainer = styled(Grid)<{ $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/index.ts

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

package/src/components/checkout/formatting.ts

@@ -0,0 +1,12 @@
+import { BillingPeriod } from '@stigg/js-client-sdk';
+
+export function formatBillingPeriod(billingPeriod: BillingPeriod) {
+  switch (billingPeriod) {
+    case BillingPeriod.Annually:
+      return 'Annual';
+    case BillingPeriod.Monthly:
+      return 'Monthly';
+    default:
+      return '';
+  }
+}

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

@@ -0,0 +1,8 @@
+export * from './useAddonsStepModel';
+export * from './useCheckoutModel';
+export * from './useLoadCheckout';
+export * from './usePlanStepModel';
+export * from './useProgressBarModel';
+export * from './useSubscriptionModel';
+export * from './usePreviewSubscription';
+export * from './usePaymentStepModel';

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

@@ -0,0 +1,96 @@
+import cloneDeep from 'lodash/cloneDeep';
+import remove from 'lodash/remove';
+import { Addon, BillingPeriod, Currency, Plan, Subscription, SubscriptionAddon } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import {
+  filterAddons,
+  filterSubscriptionAddons,
+  sortAddons,
+  sortSubscriptionAddons,
+} from '../steps/addons/addon.utils';
+
+export type AddonsStepState = {
+  addons: SubscriptionAddon[];
+  initialAddons?: SubscriptionAddon[];
+  availableAddons?: Addon[];
+};
+
+type getAddonsStepInitialStateProps = {
+  plan?: Plan;
+  billingPeriod: BillingPeriod;
+  activeSubscription?: Subscription | null;
+  billingCountryCode?: string;
+};
+
+export function getAddonsStepInitialState({
+  activeSubscription,
+  plan,
+  billingPeriod,
+  billingCountryCode,
+}: getAddonsStepInitialStateProps): AddonsStepState {
+  let addons: SubscriptionAddon[] = [];
+  const currency = plan?.pricePoints?.[0]?.currency || Currency.Usd;
+  const availableAddons = sortAddons(
+    filterAddons({
+      addons: plan?.compatibleAddons,
+      billingPeriod,
+      billingCountryCode,
+      currency,
+    }),
+  );
+
+  const activeSubscriptionAddons = filterSubscriptionAddons({
+    addons: activeSubscription?.addons,
+    billingPeriod,
+    billingCountryCode,
+    currency,
+  });
+
+  if (activeSubscriptionAddons?.length && availableAddons?.length) {
+    addons = sortSubscriptionAddons(
+      activeSubscriptionAddons.filter((addon) => availableAddons.some((planAddon) => planAddon.id === addon.addon.id)),
+    );
+  }
+
+  return { addons, initialAddons: cloneDeep(addons), availableAddons };
+}
+
+function useSetAddon() {
+  const [, setState] = useCheckoutContext();
+
+  return (addon: Addon, quantity: number) =>
+    setState((draft) => {
+      const addonToUpdate = draft.addonsStep.addons.find((currentAddon) => currentAddon.addon.id === addon.id);
+
+      if (addonToUpdate) {
+        addonToUpdate.quantity = quantity;
+      } else {
+        draft.addonsStep.addons.push({ addon, quantity });
+        draft.addonsStep.addons = sortSubscriptionAddons(draft.addonsStep.addons);
+      }
+    });
+}
+
+function useRemoveAddon() {
+  const [, setState] = useCheckoutContext();
+
+  return (addonId: string) =>
+    setState((draft) => {
+      remove(draft.addonsStep.addons, (addon) => addon.addon.id === addonId);
+    });
+}
+
+function useAddonsState() {
+  const [{ addonsStep }] = useCheckoutContext();
+  return addonsStep;
+}
+
+export function useAddonsStepModel() {
+  const state = useAddonsState();
+
+  return {
+    ...state,
+    setAddon: useSetAddon(),
+    removeAddon: useRemoveAddon(),
+  };
+}

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

@@ -0,0 +1,32 @@
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type WidgetState = {
+  readOnly?: boolean;
+  isLoadingCheckoutData?: boolean;
+};
+
+function useCheckoutState() {
+  const [{ checkout, widgetState, checkoutLocalization }] = useCheckoutContext();
+  return { checkoutState: checkout, widgetState, checkoutLocalization };
+}
+
+function useSetWidgetReadonly() {
+  const [, setState] = useCheckoutContext();
+
+  return (readOnly: boolean) =>
+    setState((draft) => {
+      draft.widgetState.readOnly = readOnly;
+    });
+}
+
+export function useCheckoutModel() {
+  const { checkoutState, widgetState, checkoutLocalization } = useCheckoutState();
+  const setWidgetReadOnly = useSetWidgetReadonly();
+
+  return {
+    checkoutState,
+    widgetState,
+    checkoutLocalization,
+    setWidgetReadOnly,
+  };
+}