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

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

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

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,193 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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,
-  },
-}));