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

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

@@ -0,0 +1,28 @@
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type PromotionCodeState = {
+  promotionCode?: string;
+};
+
+function usePromotionCodeState() {
+  const [{ promotionCode }] = useCheckoutContext();
+  return promotionCode;
+}
+
+function useSetPromotionCode() {
+  const [, setState] = useCheckoutContext();
+
+  return (promotionCode: string) =>
+    setState(draft => {
+      draft.promotionCode = promotionCode;
+    });
+}
+
+export function usePromotionCodeModel() {
+  const promotionCode = usePromotionCodeState();
+
+  return {
+    promotionCode,
+    setPromotionCode: useSetPromotionCode(),
+  };
+}

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

@@ -0,0 +1,39 @@
+import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
+import { useEffect, useState } from 'react';
+import logger from '../../../services/logger';
+import { useStiggContext } from '../../StiggProvider';
+
+type UseLoadCheckoutProps = {
+  planId: string;
+  resourceId?: string;
+  billingCountryCode?: string;
+};
+
+export function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseLoadCheckoutProps) {
+  const { stigg } = useStiggContext();
+  const [isLoading, setIsLoading] = useState(true);
+  const [checkout, setCheckout] = useState<GetCheckoutStateResults | null>();
+
+  useEffect(() => {
+    const loadCheckout = async () => {
+      try {
+        const checkout = await stigg.getCheckoutState({ planId, resourceId, billingCountryCode });
+        setCheckout(checkout);
+      } catch (err) {
+        logger.error(`Failed to load checkout ${(err as any)?.message}`, err as any);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    if (stigg.isCustomerLoaded) {
+      setIsLoading(true);
+      void loadCheckout();
+    }
+  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode]);
+
+  return {
+    checkout,
+    isLoading,
+  };
+}

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

@@ -0,0 +1,49 @@
+import { Customer } from '@stigg/js-client-sdk';
+
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export type PaymentStepState = {
+  useNewPaymentMethod: boolean;
+  errorMessage?: string;
+};
+
+type GetPaymentStepInitialStateProps = {
+  customer?: Customer;
+};
+
+export function getPaymentStepInitialState({ customer }: GetPaymentStepInitialStateProps): PaymentStepState {
+  return { useNewPaymentMethod: !customer?.paymentMethodDetails };
+}
+
+function useSetUseNewPaymentMethod() {
+  const [, setState] = useCheckoutContext();
+
+  return (useNewPaymentMethod: boolean) =>
+    setState((draft) => {
+      draft.paymentStep.useNewPaymentMethod = useNewPaymentMethod;
+    });
+}
+
+function useSetErrorMessage() {
+  const [, setState] = useCheckoutContext();
+
+  return (errorMessage?: string) =>
+    setState((draft) => {
+      draft.paymentStep.errorMessage = errorMessage;
+    });
+}
+
+function usePaymentState() {
+  const [{ paymentStep }] = useCheckoutContext();
+  return paymentStep;
+}
+
+export function usePaymentStepModel() {
+  const state = usePaymentState();
+
+  return {
+    ...state,
+    setUseNewPaymentMethod: useSetUseNewPaymentMethod(),
+    setErrorMessage: useSetErrorMessage(),
+  };
+}

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

@@ -0,0 +1,169 @@
+import keyBy from 'lodash/keyBy';
+import compact from 'lodash/compact';
+import { BillableFeatureInput, BillingPeriod } from '@stigg/api-client-js/src/generated/sdk';
+import { BillableFeature, BillingModel, Plan, Price, Subscription } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { getTierByQuantity } from '../../utils/priceTierUtils';
+import { getValidPriceQuantity } from '../../utils/priceUtils';
+
+export type PlanStepState = {
+  billingPeriod: BillingPeriod;
+  billableFeatures: BillableFeatureInput[];
+  billingCountryCode?: string;
+};
+
+type GetPlanStepInitialStateProps = {
+  preferredBillingPeriod?: BillingPeriod;
+  plan?: Plan;
+  activeSubscription?: Subscription | null;
+  billingCountryCode?: string;
+  preconfiguredBillableFeatures: BillableFeature[];
+};
+
+const isInAdvanceCommitmentCharge = ({ pricingModel }: Price) => {
+  return pricingModel === BillingModel.PerUnit;
+};
+
+function getBillableFeatures(
+  preconfiguredBillableFeatures: BillableFeature[],
+  planPrices?: Price[],
+  activeSubscription?: Subscription | null,
+): BillableFeature[] {
+  if (!planPrices) return [];
+
+  const preconfBillableFeaturesByFeatureId = keyBy(preconfiguredBillableFeatures, 'featureId');
+
+  const quantityByFeatureId = keyBy(
+    compact(
+      activeSubscription?.prices?.map((charge) => {
+        const { feature } = charge;
+        if (!feature || !isInAdvanceCommitmentCharge(charge)) {
+          return null;
+        }
+
+        return {
+          featureId: feature.featureId,
+          quantity: feature.unitQuantity || null,
+        };
+      }),
+    ),
+    'featureId',
+  );
+
+  return compact(
+    planPrices?.map((price) => {
+      const featureId = price.feature?.featureId;
+      if (!featureId || !isInAdvanceCommitmentCharge(price)) {
+        return null;
+      }
+
+      let quantity;
+      const preconfiguredQuantity =
+        preconfBillableFeaturesByFeatureId[featureId]?.quantity || quantityByFeatureId[featureId]?.quantity;
+
+      quantity = getValidPriceQuantity(price, preconfiguredQuantity || 1);
+
+      if (price.isTieredPrice) {
+        const tier = getTierByQuantity(price.tiers!, quantity);
+        quantity = tier!.upTo;
+      }
+
+      return {
+        featureId,
+        quantity,
+      };
+    }),
+  );
+}
+
+function resolveBillingPeriod({
+  plan,
+  activeSubscription,
+  preferredBillingPeriod,
+}: {
+  plan?: Plan;
+  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 isUpdate = activeSubscription?.plan?.id === plan?.id;
+  if (isUpdate) {
+    return activeSubscription?.price?.billingPeriod || BillingPeriod.Monthly;
+  }
+
+  if (preferredBillingPeriod) {
+    if (preferredBillingPeriod === BillingPeriod.Monthly && hasMonthlyPrices) {
+      return BillingPeriod.Monthly;
+    }
+    if (preferredBillingPeriod === BillingPeriod.Annually && hasAnnualPrices) {
+      return BillingPeriod.Annually;
+    }
+  }
+
+  if (activeSubscription?.price?.billingPeriod) {
+    return activeSubscription?.price?.billingPeriod;
+  }
+
+  return hasAnnualPrices ? BillingPeriod.Annually : BillingPeriod.Monthly;
+}
+
+export function getPlanStepInitialState({
+  preferredBillingPeriod,
+  plan,
+  activeSubscription,
+  billingCountryCode,
+  preconfiguredBillableFeatures,
+}: GetPlanStepInitialStateProps): PlanStepState {
+  const billingPeriod = resolveBillingPeriod({ plan, activeSubscription, preferredBillingPeriod });
+  const planPrices = plan?.pricePoints.filter((pricePoint) => pricePoint.billingPeriod === billingPeriod);
+  const billableFeatures = getBillableFeatures(preconfiguredBillableFeatures, planPrices, activeSubscription);
+
+  return {
+    billingPeriod,
+    billableFeatures,
+    billingCountryCode,
+  };
+}
+
+function usePlanState() {
+  const [{ planStep }] = useCheckoutContext();
+  return planStep;
+}
+
+function useSetBillableFeature() {
+  const [, setState] = useCheckoutContext();
+
+  return (featureId: string, quantity: number) =>
+    setState((draft) => {
+      const billableFeature = draft.planStep.billableFeatures.find(
+        (billableFeature) => billableFeature.featureId === featureId,
+      );
+
+      if (billableFeature) {
+        billableFeature.quantity = quantity;
+      } else {
+        draft.planStep.billableFeatures.push({ featureId, quantity });
+      }
+    });
+}
+
+function useSetBillingPeriod() {
+  const [, setState] = useCheckoutContext();
+
+  return (billingPeriod: BillingPeriod) =>
+    setState((draft) => {
+      draft.planStep.billingPeriod = billingPeriod;
+    });
+}
+
+export function usePlanStepModel() {
+  const state = usePlanState();
+
+  return {
+    ...state,
+    setBillingPeriod: useSetBillingPeriod(),
+    setBillableFeature: useSetBillableFeature(),
+  };
+}

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

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useState } from 'react';
+import { PreviewSubscription, SubscriptionPreview } from '@stigg/js-client-sdk';
+import { useStiggContext } from '../../StiggProvider';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { useCheckoutModel } from './useCheckoutModel';
+import { useSubscriptionModel } from './useSubscriptionModel';
+
+export const usePreviewSubscriptionAction = () => {
+  const { stigg } = useStiggContext();
+  const subscription = useSubscriptionModel();
+  const [{ resourceId, planStep }] = useCheckoutContext();
+  const { checkoutState } = useCheckoutModel();
+  const { plan, activeSubscription, customer } = checkoutState || {};
+
+  const previewSubscriptionAction = useCallback(
+    async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
+      const estimateAddons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
+      let subscriptionPreview: SubscriptionPreview | null = null;
+      let errorMessage: string | null = null;
+
+      try {
+        if (customer?.id && plan?.id) {
+          const previewSubscriptionProps: PreviewSubscription = {
+            customerId: customer.id,
+            planId: plan?.id,
+            billableFeatures: subscription.billableFeatures,
+            addons: estimateAddons,
+            billingPeriod: subscription.billingPeriod,
+            promotionCode: promotionCode ?? subscription.promotionCode,
+            resourceId,
+            billingCountryCode: planStep.billingCountryCode,
+            // TODO: Add billing information
+            // billingInformation, // TaxId / Tax percentage
+          };
+          subscriptionPreview = await stigg.previewSubscription(previewSubscriptionProps);
+        }
+      } catch (error) {
+        const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
+
+        errorMessage = errorMsg?.trim();
+      }
+
+      return { subscriptionPreview, errorMessage };
+    },
+    [
+      activeSubscription,
+      customer,
+      plan,
+      resourceId,
+      stigg,
+      subscription.addons,
+      subscription.billingPeriod,
+      subscription.billableFeatures,
+      subscription.promotionCode,
+      planStep.billingCountryCode,
+    ],
+  );
+
+  return { previewSubscriptionAction };
+};
+
+export const usePreviewSubscription = () => {
+  const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreview | null>(null);
+  const [isFetchingSubscriptionPreview, setIsFetchingSubscriptionPreview] = useState(false);
+
+  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
+
+  useEffect(() => {
+    const estimateSubscription = async () => {
+      setIsFetchingSubscriptionPreview(true);
+
+      const { subscriptionPreview } = await previewSubscriptionAction();
+      setSubscriptionPreview(subscriptionPreview);
+
+      setIsFetchingSubscriptionPreview(false);
+    };
+
+    void estimateSubscription();
+  }, [previewSubscriptionAction]);
+
+  return { subscriptionPreview, isFetchingSubscriptionPreview };
+};

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

@@ -0,0 +1,89 @@
+import { Addon } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+
+export enum CheckoutStepKey {
+  PLAN = 'PLAN',
+  ADDONS = 'ADDONS',
+  PAYMENT = 'PAYMENT',
+}
+
+export type CheckoutStep = {
+  key: CheckoutStepKey;
+  label: string;
+};
+
+const CHECKOUT_STEPS: CheckoutStep[] = [
+  { key: CheckoutStepKey.PLAN, label: 'Plan' },
+  { key: CheckoutStepKey.ADDONS, label: 'Add-ons' },
+  { key: CheckoutStepKey.PAYMENT, label: 'Payment details' },
+];
+
+export type ProgressBarState = {
+  activeStep: number;
+  completedSteps: number[];
+  steps: CheckoutStep[];
+};
+
+const INITIAL_STATE: ProgressBarState = {
+  activeStep: 0,
+  completedSteps: [],
+  steps: CHECKOUT_STEPS,
+};
+
+export function getProgressBarInitialState({ availableAddons }: { availableAddons?: Addon[] }) {
+  if (availableAddons?.length === 0) {
+    return { ...INITIAL_STATE, steps: CHECKOUT_STEPS.filter((step) => step.key !== CheckoutStepKey.ADDONS) };
+  }
+
+  return INITIAL_STATE;
+}
+
+function useProgressBarState() {
+  const [{ progressBar }] = useCheckoutContext();
+  return progressBar;
+}
+
+function useSetActiveStep() {
+  const [, setState] = useCheckoutContext();
+  return (stepNumber: number) =>
+    setState(({ progressBar }) => {
+      progressBar.activeStep = stepNumber;
+    });
+}
+function useMarkStepAsCompleted() {
+  const [, setState] = useCheckoutContext();
+  return (stepNumber: number) =>
+    setState(({ progressBar }) => {
+      progressBar.completedSteps.push(stepNumber);
+    });
+}
+
+function isCheckoutComplete(progressBar: ProgressBarState) {
+  return progressBar.completedSteps.length >= progressBar.steps.length - 1;
+}
+
+function useGoNext() {
+  const [, setState] = useCheckoutContext();
+  return () =>
+    setState(({ progressBar }) => {
+      if (!progressBar.completedSteps.includes(progressBar.activeStep)) {
+        progressBar.completedSteps.push(progressBar.activeStep);
+      }
+
+      if (progressBar.activeStep < progressBar.steps.length - 1) {
+        progressBar.activeStep += 1;
+      }
+    });
+}
+
+export function useProgressBarModel() {
+  const progressBarState = useProgressBarState();
+  return {
+    progressBarState,
+    isLastStep: progressBarState.activeStep === progressBarState.steps.length - 1,
+    isCheckoutComplete: isCheckoutComplete(progressBarState),
+    setActiveStep: useSetActiveStep(),
+    markStepAsCompleted: useMarkStepAsCompleted(),
+    goNext: useGoNext(),
+  };
+}

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

@@ -0,0 +1,16 @@
+import { useCheckoutContext } from '../CheckoutProvider';
+import { AddonsStepState } from './useAddonsStepModel';
+import { PromotionCodeState } from './useCouponModel';
+import { PlanStepState } from './usePlanStepModel';
+
+export type SubscriptionState = PlanStepState & PromotionCodeState & Pick<AddonsStepState, 'addons'>;
+
+export function useSubscriptionModel(): SubscriptionState {
+  const [{ planStep, addonsStep, promotionCode }] = useCheckoutContext();
+
+  return {
+    ...planStep,
+    addons: addonsStep.addons,
+    promotionCode,
+  };
+}

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

@@ -0,0 +1,26 @@
+import { ApplySubscription } from '@stigg/js-client-sdk';
+import { useCheckoutContext } from '../CheckoutProvider';
+import { useCheckoutModel } from './useCheckoutModel';
+import { useSubscriptionModel } from './useSubscriptionModel';
+
+export function useSubscriptionState(): ApplySubscription | undefined {
+  const subscription = useSubscriptionModel();
+  const [{ resourceId }] = useCheckoutContext();
+  const { checkoutState } = useCheckoutModel();
+  const { plan } = checkoutState || {};
+  const addons = subscription.addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
+
+  if (!plan?.id) {
+    return;
+  }
+
+  return {
+    resourceId,
+    planId: plan.id,
+    billingPeriod: subscription.billingPeriod,
+    billableFeatures: subscription.billableFeatures,
+    addons,
+    promotionCode: subscription.promotionCode,
+    billingCountryCode: subscription.billingCountryCode,
+  };
+}

package/src/components/checkout/index.ts

@@ -0,0 +1,3 @@
+export { CheckoutTheme } from './theme';
+export { Checkout, CheckoutProps } from './Checkout';
+export { CheckoutLocalization } from './textOverrides';

package/src/components/checkout/planHeader/PlanHeader.style.tsx

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled/macro';
+import { Box } from '@mui/material';
+
+import ArrowRightIcon from '../../../assets/arrow-right.svg';
+
+export const PlanPathContainer = styled(Box)`
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+`;
+
+export const StyledArrowRightIcon = styled(ArrowRightIcon)`
+  path {
+    stroke: ${({ theme }) => theme.stigg.palette.text.secondary};
+  }
+`;
+
+export const PlanHeaderContainer = styled(Box)`
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+`;

package/src/components/checkout/planHeader/PlanHeader.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { Button, Divider } from '@mui/material';
+
+import { Typography } from '../../common/Typography';
+import { useCheckoutModel } from '../hooks/useCheckoutModel';
+import { PlanHeaderContainer, PlanPathContainer, StyledArrowRightIcon } from './PlanHeader.style';
+import { CheckoutContainerProps } from '../CheckoutContainer';
+
+type PlanHeaderProps = {
+  allowChangePlan?: boolean;
+} & Pick<CheckoutContainerProps, 'onChangePlan'>;
+
+export function PlanHeader({ allowChangePlan = false, onChangePlan }: PlanHeaderProps) {
+  const { checkoutState, checkoutLocalization } = useCheckoutModel();
+  const { plan, activeSubscription } = checkoutState || {};
+  const isPlanChanged = plan?.id !== activeSubscription?.plan.id;
+
+  return (
+    <>
+      <PlanHeaderContainer>
+        <PlanPathContainer>
+          {activeSubscription && isPlanChanged && (
+            <>
+              <Typography variant="h6" color="secondary">
+                {activeSubscription.plan.displayName}
+              </Typography>
+              <StyledArrowRightIcon />
+            </>
+          )}
+
+          <Typography variant="h3" bold>
+            {plan?.displayName}
+          </Typography>
+        </PlanPathContainer>
+
+        {allowChangePlan && onChangePlan && (
+          <Button
+            className="stigg-checkout-change-plan-button"
+            sx={{ textTransform: 'none' }}
+            variant="text"
+            size="medium"
+            onClick={() => {
+              onChangePlan({ currentPlan: plan });
+            }}>
+            <Typography
+              className="stigg-checkout-change-plan-button-text"
+              color="primary.main"
+              style={{ lineHeight: '24px' }}
+              variant="body1">
+              {checkoutLocalization.changePlan}
+            </Typography>
+          </Button>
+        )}
+      </PlanHeaderContainer>
+      <Divider className="stigg-checkout-plan-header-divider" />
+    </>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './PlanHeader';

package/src/components/checkout/progressBar/CheckoutProgressBar.style.ts

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled/macro';
+import { Button, buttonClasses, LinearProgress, linearProgressClasses } from '@mui/material';
+import Color from 'color';
+
+import { Icon } from '../../common/Icon';
+
+export const StyledProgress = styled(LinearProgress)<{ $disabled?: boolean }>(({ theme, $disabled }) => ({
+  [`&.${linearProgressClasses.root}`]: {
+    borderRadius: theme.stigg.border.radius,
+    backgroundColor: theme.stigg.palette.outlinedBorder,
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    backgroundColor: $disabled
+      ? Color(theme.stigg.palette.outlinedBorder).darken(0.2).hex()
+      : theme.stigg.palette.primary,
+  },
+}));
+
+export const StyledStepButton = styled(Button)(() => ({
+  [`&.${buttonClasses.root}`]: {
+    textTransform: 'none',
+    lineHeight: 'inherit',
+    justifyContent: 'flex-start',
+    padding: '8px 4px',
+  },
+}));
+
+export const StyledIcon = styled(Icon)<{ $disabled?: boolean; $shouldStroke?: boolean }>(
+  ({ theme, $disabled, $shouldStroke = true }) => ({
+    circle: {
+      stroke: $shouldStroke ? ($disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary) : undefined,
+    },
+  }),
+);

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Box, StepIcon, Grid } from '@mui/material';
+import { useCheckoutModel, useProgressBarModel } from '../hooks';
+import { Typography } from '../../common/Typography';
+import { StyledProgress, StyledStepButton, StyledIcon } from './CheckoutProgressBar.style';
+import { Icons } from '../../common/Icon';
+import { Skeleton } from '../components/Skeletons.style';
+
+export const CheckoutProgressBar = () => {
+  const { progressBarState, setActiveStep } = useProgressBarModel();
+  const { widgetState } = useCheckoutModel();
+  const { readOnly, isLoadingCheckoutData } = widgetState;
+  const { activeStep, completedSteps, steps } = progressBarState || {};
+  const progress = ((activeStep + 1) * 100) / steps.length;
+
+  return (
+    <Box sx={{ width: '100%', my: 3 }}>
+      <StyledProgress variant="determinate" value={progress} $disabled={readOnly} />
+      <Grid container display="flex">
+        {steps.map(({ key, label }, index) => {
+          const isCompleted = completedSteps.includes(index);
+          const isDisabled = readOnly || (index > activeStep && !isCompleted && !completedSteps.includes(index - 1));
+          const checkedIcon: Icons = isDisabled ? 'OutlinedCheckedCircleDisabled' : 'OutlinedCheckedCircle';
+
+          return (
+            <Grid key={key} item display="flex" flexDirection="row" flex={1} justifyContent="flex-start">
+              {isLoadingCheckoutData && <Skeleton width={120} height={20} style={{ marginTop: 8 }} />}
+              {!isLoadingCheckoutData && (
+                <StyledStepButton onClick={() => setActiveStep(index)} fullWidth disabled={isDisabled}>
+                  <Grid item display="flex" flexDirection="row" alignItems="center" gap={1}>
+                    <StepIcon
+                      icon={
+                        isCompleted ? (
+                          <StyledIcon icon={checkedIcon} $shouldStroke={!isDisabled} />
+                        ) : (
+                          <StyledIcon icon="OutlinedCircle" $disabled={isDisabled} />
+                        )
+                      }
+                    />
+
+                    <Typography variant="h6" color={isDisabled ? 'disabled' : 'primary.main'}>
+                      {label}
+                    </Typography>
+                  </Grid>
+                </StyledStepButton>
+              )}
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Box>
+  );
+};