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

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

@@ -1,170 +0,0 @@
-import keyBy from 'lodash/keyBy';
-
-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 compact from 'lodash/compact';
-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;
-    }
-  }
-
-  return hasAnnualPrices ? BillingPeriod.Annually : BillingPeriod.Monthly;
-}
-
-export function getPlanStepInitialState({
-  preferredBillingPeriod,
-  plan,
-  activeSubscription,
-  billingCountryCode,
-  preconfiguredBillableFeatures,
-}: getPlanStepInitialStateProps): PlanStepState {
-  const planBillingPeriod = resolveBillingPeriod({ plan, activeSubscription, preferredBillingPeriod });
-
-  // TODO: add logic to determine billing period according to available prices if proffered not sent
-  const billingPeriod = planBillingPeriod || preferredBillingPeriod || BillingPeriod.Annually;
-  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

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

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

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

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

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

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

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

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

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

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

@@ -1,29 +0,0 @@
-import styled from '@emotion/styled/macro';
-import { Button, buttonClasses, LinearProgress, linearProgressClasses } from '@mui/material';
-
-import { Icon } from '../../common/Icon';
-
-export const StyledProgress = styled(LinearProgress)(({ theme }) => ({
-  [`&.${linearProgressClasses.root}`]: {
-    borderRadius: theme.stigg.border.radius,
-    backgroundColor: theme.stigg.palette.outlinedBorder,
-  },
-  [`&.${linearProgressClasses.bar}`]: {
-    backgroundColor: 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 }>(({ theme, $disabled }) => ({
-  circle: {
-    stroke: $disabled ? theme.stigg.palette.text.disabled : theme.stigg.palette.primary,
-  },
-}));

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

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

package/src/components/checkout/promotionCode/AddPromotionCode.tsx

@@ -1,85 +0,0 @@
-import React, { useState } from 'react';
-
-import styled from '@emotion/styled/macro';
-import { CircularProgress, Grid } from '@mui/material';
-
-import { Icon } from '../../common/Icon';
-import { Typography } from '../../common/Typography';
-import { Button, InputField } from '../components';
-import { usePreviewSubscriptionAction } from '../hooks';
-import { usePromotionCodeModel } from '../hooks/useCouponModel';
-import { AddPromotionCodeButton } from './AddPromotionCodeButton';
-import { CheckoutLocalization } from '../textOverrides';
-
-const CouponCodeAddButton = styled(Button)`
-  padding: 4px 10px;
-  min-width: unset;
-  border-radius: ${({ theme }) => theme.stigg.border.radius};
-  display: flex;
-  align-items: center;
-`;
-
-export const AddPromotionCode = ({ checkoutLocalization }: { checkoutLocalization: CheckoutLocalization }) => {
-  const { setPromotionCode: persistPromotionCode } = usePromotionCodeModel();
-  const [showInput, setShowInput] = useState(false);
-  const [promotionCode, setPromotionCode] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [errorMessage, setErrorMessage] = React.useState('');
-  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
-
-  const handlePromotionCode = async () => {
-    setIsLoading(true);
-    setErrorMessage('');
-
-    const { subscriptionPreview, errorMessage } = await previewSubscriptionAction({ promotionCode });
-
-    if (!errorMessage && subscriptionPreview?.discount) {
-      persistPromotionCode(promotionCode.toUpperCase());
-      setShowInput(false);
-    } else if (!!errorMessage) {
-      setErrorMessage(errorMessage);
-    }
-    setIsLoading(false);
-  };
-
-  if (!showInput) {
-    return <AddPromotionCodeButton onAddClick={() => setShowInput(true)} checkoutLocalization={checkoutLocalization} />;
-  }
-
-  return (
-    <Grid>
-      <Typography variant="body1" color={errorMessage ? 'error' : 'primary.main'}>
-        {checkoutLocalization.couponCodeTitle}
-      </Typography>
-
-      <InputField
-        autoFocus
-        variant="outlined"
-        fullWidth
-        error={!!errorMessage}
-        value={promotionCode}
-        onChange={(e) => {
-          setPromotionCode(e.target.value);
-        }}
-        inputProps={{ maxLength: 20 }}
-        InputProps={{
-          endAdornment: (
-            <CouponCodeAddButton
-              variant="contained"
-              disableRipple={isLoading}
-              $isLoading={isLoading}
-              onClick={handlePromotionCode}
-            >
-              {isLoading ? <CircularProgress size={18} /> : <Icon style={{ display: 'flex' }} icon="ArrowForward" />}
-            </CouponCodeAddButton>
-          ),
-        }}
-      />
-      {!!errorMessage && (
-        <Typography variant="body1" color="error">
-          {errorMessage}
-        </Typography>
-      )}
-    </Grid>
-  );
-};

package/src/components/checkout/promotionCode/AddPromotionCodeButton.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled/macro';
-
-import PlusIcon from '../../../assets/plus-icon.svg';
-import { Typography } from '../../common/Typography';
-import { Button } from '../components';
-import { CheckoutLocalization } from '../textOverrides';
-
-const StyledPlusIcon = styled(PlusIcon)`
-  path {
-    stroke: ${({ theme }) => theme.stigg.palette.primary};
-  }
-`;
-
-export type AddPromotionCodeButtonProps = {
-  onAddClick: () => void;
-  checkoutLocalization: CheckoutLocalization;
-};
-
-export const AddPromotionCodeButton = ({ onAddClick, checkoutLocalization }: AddPromotionCodeButtonProps) => (
-  <Button
-    fullWidth
-    className="stigg-checkout-summary-add-coupon-code-button"
-    sx={{ textTransform: 'none', justifyContent: 'flex-start' }}
-    variant="text"
-    size="medium"
-    onClick={onAddClick}
-  >
-    <StyledPlusIcon className="stigg-checkout-summary-add-coupon-code-button-icon" />
-    <Typography
-      className="stigg-checkout-change-plan-button-text"
-      color="primary.main"
-      style={{ lineHeight: '24px' }}
-      variant="body1"
-    >
-      {checkoutLocalization.addCouponCodeText}
-    </Typography>
-  </Button>
-);