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

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

@@ -0,0 +1,150 @@
+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: Plan }) => 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

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

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

@@ -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,92 @@
+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

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

@@ -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,48 @@
+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

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