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

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

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

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

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

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

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

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

@@ -1,150 +0,0 @@
-import {
-  BillingPeriod,
-  DiscountType,
-  Plan,
-  SubscriptionPreviewDiscount,
-  SubscriptionPreviewTaxDetails,
-  DiscountDurationType,
-} from '@stigg/js-client-sdk';
-import moment from 'moment';
-import merge from 'lodash/merge';
-import { DeepPartial } from '../../../types';
-import { currencyPriceFormatter } from '../../utils/currencyUtils';
-
-export type CheckoutLocalization = {
-  changePlan: string;
-  billingPeriodsTitle: string;
-  addAddonText: string;
-  addonBillingPeriodNotAvailableText: (params: { planBillingPeriod: BillingPeriod }) => string;
-  newPaymentMethodText: string;
-  newPaymentMethodCardTitle: string;
-  newPaymentMethodBillingAddressTitle: string;
-  summary: {
-    title: string;
-    planName: (params: { plan: { displayName: string } }) => string;
-    addCouponCodeText: string;
-    couponCodeTitle: string;
-    addonsSectionTitle: string;
-    discountsSectionTitle: string;
-    onlyPayAsYouGoText: string;
-    startsAtText: string;
-    proratedTotalDueText: string;
-    baseChargeText: string | ((params: { billingPeriod: BillingPeriod }) => string);
-    totalText: string;
-    totalDueText: string;
-    totalBillingPeriodText: (params: { billingPeriod: BillingPeriod }) => string;
-    discountText: (params: { discountDetails: SubscriptionPreviewDiscount; currency: string }) => string;
-    appliedCreditsTitle: string;
-    taxTitle: (params: { taxDetails: SubscriptionPreviewTaxDetails }) => string;
-    checkoutSuccessText: string;
-    payAsYouGoTooltipText: string;
-    changesWillApplyAtEndOfBillingPeriod: string | ((params: { billingPeriodEnd: Date }) => string);
-    creditsForUnusedTimeText: (params: { credits: string }) => string;
-  };
-  checkoutButton: {
-    nextText: string;
-    noChangesText: string;
-    updateText: string;
-    downgradeToFreeText: string;
-    upgradeText: string;
-  };
-  downgradeToFree: {
-    alertText: (params: { plan: Plan }) => string;
-    freePlanHeader: (params: { plan: Plan }) => string;
-    freePlanName: (params: { plan: Plan }) => string;
-    freePlanPriceText: (params: { plan: Plan }) => string;
-    paidPlanHeader: (params: { plan: Plan }) => string;
-    paidPlanName: (params: { plan: Plan }) => string;
-    paidPlanPriceText: (params: { plan: Plan; billingPeriod?: BillingPeriod }) => string;
-  };
-};
-
-export function getResolvedCheckoutLocalize(
-  localizeOverride?: DeepPartial<CheckoutLocalization>,
-): CheckoutLocalization {
-  const checkoutDefaultLocalization: CheckoutLocalization = {
-    changePlan: 'Change',
-    billingPeriodsTitle: 'Billing cycle',
-    addAddonText: 'Add',
-    addonBillingPeriodNotAvailableText: ({ planBillingPeriod }) =>
-      planBillingPeriod === BillingPeriod.Monthly
-        ? 'Exclusively available on annual plans'
-        : 'Exclusively available on monthly plans',
-    newPaymentMethodText: 'New payment method',
-    newPaymentMethodBillingAddressTitle: 'Billing address',
-    newPaymentMethodCardTitle: 'Payment method',
-    summary: {
-      title: 'Order summary',
-      planName: ({ plan }) => `${plan.displayName} plan`,
-      addCouponCodeText: 'Add promotion code',
-      couponCodeTitle: 'Promotion code',
-      addonsSectionTitle: 'Add-ons',
-      discountsSectionTitle: 'Discounts',
-      onlyPayAsYouGoText: 'Varies by usage',
-      startsAtText: 'Starts at ',
-      proratedTotalDueText: 'Prorated charge today',
-      baseChargeText: () => 'Base charge',
-      totalText: 'Total',
-      totalDueText: 'Total due today',
-      totalBillingPeriodText: ({ billingPeriod }) => `Billed ${billingPeriod.toLowerCase()}`,
-      appliedCreditsTitle: 'Applied credits',
-      creditsForUnusedTimeText: ({ credits }) =>
-        `Your account will be granted credits worth ${credits} for unused time, which will be automatically applied to future payments.`,
-      discountText: ({ discountDetails, currency }) => {
-        let discountText = '';
-        if (discountDetails.type === DiscountType.Percentage) {
-          discountText = `${discountDetails.value}% off`;
-        } else {
-          discountText = `${currencyPriceFormatter({ amount: discountDetails.value, currency })}`;
-        }
-
-        let discountTextPostfix = '';
-        switch (discountDetails.durationType) {
-          case DiscountDurationType.Once: {
-            discountTextPostfix = ' once';
-            break;
-          }
-          case DiscountDurationType.Repeating: {
-            const prefix = discountDetails.type === DiscountType.Fixed ? ' per month' : '';
-            discountTextPostfix = `${prefix} for ${discountDetails.durationInMonths} months`;
-
-            break;
-          }
-
-          case DiscountDurationType.Forever:
-          default: {
-            discountTextPostfix = '';
-          }
-        }
-
-        return `${discountText}${discountTextPostfix}`;
-      },
-      taxTitle: ({ taxDetails }) => `Tax (${taxDetails?.percentage}%)`,
-      changesWillApplyAtEndOfBillingPeriod: ({ billingPeriodEnd }) =>
-        `Your changes will take effect at the end of your current billing cycle on ${moment(billingPeriodEnd).format(
-          'MMMM D, YYYY',
-        )}.`,
-      checkoutSuccessText: 'Changes applied',
-      payAsYouGoTooltipText: 'Billed according to actual usage',
-    },
-    checkoutButton: {
-      nextText: 'Next',
-      noChangesText: 'No changes',
-      updateText: 'Update subscription',
-      downgradeToFreeText: 'Cancel subscription',
-      upgradeText: 'Subscribe',
-    },
-    downgradeToFree: {
-      alertText: () => `We’re sorry to see you cancel your paid subscription 😭`,
-      freePlanHeader: () => 'New plan',
-      freePlanName: ({ plan }) => `${plan.displayName}`,
-      freePlanPriceText: () => 'Free',
-      paidPlanHeader: () => 'Current plan',
-      paidPlanName: ({ plan }) => `${plan.displayName}`,
-      paidPlanPriceText: ({ billingPeriod }) =>
-        `Paid plan${billingPeriod ? `, billed ${billingPeriod.toLowerCase()}` : ''}`,
-    },
-  };
-
-  return merge(checkoutDefaultLocalization, localizeOverride);
-}

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

@@ -1,46 +0,0 @@
-import { CheckoutConfiguration } from '@stigg/js-client-sdk';
-import { StiggTheme } from '../../../theme/types';
-import { DeepPartial } from '../../../types';
-
-export type CheckoutTheme = {
-  primary: string;
-  textColor: string;
-  backgroundColor: string;
-  borderColor: string;
-  summaryBackgroundColor: string;
-  paymentInputBackgroundColor?: string;
-  paymentInputBorderColor?: string;
-  paymentInputBorderRadius?: string;
-};
-
-const defaultCheckoutTheme: CheckoutTheme = {
-  primary: 'rgb(50, 126, 238)',
-  textColor: 'rgb(0, 30, 108)',
-  backgroundColor: 'rgb(255, 255, 255)',
-  borderColor: 'rgb(235, 237, 243)',
-  summaryBackgroundColor: 'rgb(109, 121, 144)',
-};
-
-export function getResolvedCheckoutTheme(
-  globalTheme: StiggTheme,
-  themeOverride?: DeepPartial<CheckoutTheme>,
-  // all the remote colors override theme colors, no need to use them here
-  _remoteConfiguration?: CheckoutConfiguration | null,
-): CheckoutTheme {
-  const { palette: globalPalette } = globalTheme || {};
-
-  return {
-    primary: themeOverride?.primary || globalPalette?.primary || defaultCheckoutTheme.primary,
-    textColor: themeOverride?.textColor || globalPalette?.text.primary || defaultCheckoutTheme.textColor,
-    backgroundColor:
-      themeOverride?.backgroundColor || globalPalette?.backgroundPaper || defaultCheckoutTheme.backgroundColor,
-    borderColor: themeOverride?.borderColor || globalPalette?.outlinedBorder || defaultCheckoutTheme.borderColor,
-    summaryBackgroundColor:
-      themeOverride?.summaryBackgroundColor ||
-      globalPalette?.backgroundHighlight ||
-      defaultCheckoutTheme.summaryBackgroundColor,
-    paymentInputBackgroundColor: themeOverride?.paymentInputBackgroundColor,
-    paymentInputBorderColor: themeOverride?.paymentInputBorderColor,
-    paymentInputBorderRadius: themeOverride?.paymentInputBorderRadius,
-  };
-}

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

@@ -1,30 +0,0 @@
-import { FontVariant } from '../../../theme/types';
-
-// Checkout-specific typography with smaller font sizes than main theme
-export const defaultCheckoutTypography: {
-  h1: FontVariant;
-  h2: FontVariant;
-  h3: FontVariant;
-  body: FontVariant;
-} = {
-  h1: {
-    fontSize: '24px',
-    fontWeight: 'bold',
-    semanticElement: 'h1',
-  },
-  h2: {
-    fontSize: '16px',
-    fontWeight: 'normal',
-    semanticElement: 'h2',
-  },
-  h3: {
-    fontSize: '16px',
-    fontWeight: 'normal',
-    semanticElement: 'h3',
-  },
-  body: {
-    fontSize: '14px',
-    fontWeight: 'normal',
-    semanticElement: 'p',
-  },
-};

package/src/components/checkout/formatting.ts

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

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

@@ -1,92 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-import remove from 'lodash/remove';
-import { Addon, 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;
-  activeSubscription?: Subscription | null;
-  billingCountryCode?: string;
-};
-
-export function getAddonsStepInitialState({
-  activeSubscription,
-  plan,
-  billingCountryCode,
-}: GetAddonsStepInitialStateProps): AddonsStepState {
-  let addons: SubscriptionAddon[] = [];
-  const currency = plan?.pricePoints?.[0]?.currency || Currency.Usd;
-  const availableAddons = sortAddons(
-    filterAddons({
-      addons: plan?.compatibleAddons,
-      billingCountryCode,
-      currency,
-    }),
-  );
-
-  const activeSubscriptionAddons = filterSubscriptionAddons({
-    addons: activeSubscription?.addons,
-    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: SubscriptionAddon) => 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

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

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

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

@@ -1,48 +0,0 @@
-import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
-import { useEffect, useState } from 'react';
-import logger from '../../../services/logger';
-import { MockCheckoutStateCallback } from '../types';
-import { useStiggContext } from '../../../hooks/useStiggContext';
-
-type UseLoadCheckoutProps = {
-  planId: string;
-  resourceId?: string;
-  billingCountryCode?: string;
-  onMockCheckoutState?: MockCheckoutStateCallback;
-};
-
-export function useLoadCheckout({ planId, resourceId, billingCountryCode, onMockCheckoutState }: 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 Error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    if (onMockCheckoutState) {
-      setIsLoading(false);
-      setCheckout(onMockCheckoutState({ planId, resourceId, billingCountryCode }));
-      return;
-    }
-
-    if (stigg.isCustomerLoaded) {
-      setIsLoading(true);
-      void loadCheckout();
-    }
-  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode, onMockCheckoutState]);
-
-  return {
-    checkout,
-    isLoading,
-    showWatermark: stigg.getShowWatermark(),
-  };
-}

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

@@ -1,68 +0,0 @@
-import { BillingAddress, Customer } from '@stigg/js-client-sdk';
-
-import { useCheckoutContext } from '../CheckoutProvider';
-
-export type PaymentStepState = {
-  useNewPaymentMethod: boolean;
-  errorMessage?: string;
-  billingAddress?: BillingAddress;
-  taxPercentage?: number;
-};
-
-type GetPaymentStepInitialStateProps = {
-  customer?: Customer;
-  taxPercentage?: number;
-};
-
-export function getPaymentStepInitialState({
-  customer,
-  taxPercentage,
-}: GetPaymentStepInitialStateProps): PaymentStepState {
-  return {
-    useNewPaymentMethod: !customer?.paymentMethodDetails,
-    taxPercentage,
-  };
-}
-
-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 useSetBillingAddress() {
-  const [, setState] = useCheckoutContext();
-
-  return (billingAddress?: BillingAddress) =>
-    setState((draft) => {
-      draft.paymentStep.billingAddress = billingAddress;
-    });
-}
-
-function usePaymentState() {
-  const [{ paymentStep }] = useCheckoutContext();
-  return paymentStep;
-}
-
-export function usePaymentStepModel() {
-  const state = usePaymentState();
-
-  return {
-    ...state,
-    setUseNewPaymentMethod: useSetUseNewPaymentMethod(),
-    setErrorMessage: useSetErrorMessage(),
-    setBillingAddress: useSetBillingAddress(),
-  };
-}