@stigg/react-sdk 4.4.0-beta.11 → 4.4.0-beta.12

package/dist/stories/mocks/checkout/consts.d.ts

@@ -0,0 +1,11 @@
+export declare const BASE_FEE_MONTHLY = 200;
+export declare const BASE_FEE_YEARLY = 175;
+export declare const TIERS: number[];
+export declare const TIERS_PRICE_MONTHLY: number[];
+export declare const TIERS_PRICE_YEARLY: number[];
+export declare const PER_UNIT_PRICE_MONTHLY = 12;
+export declare const PER_UNIT_PRICE_YEARLY = 10;
+export declare const ADDON_PRICE_MONTHLY = 50;
+export declare const ADDON_PRICE_YEARLY = 35;
+export declare const STRIPE_MOCK_ACCOUNT_ID = "acct_1NnHoQG6EyqgvTaj";
+export declare const STRIPE_MOCK_ACCOUNT_PK = "pk_test_51NnHoQG6EyqgvTajznajopWC01AozNtq7zgySeQ1qx4PH9TAXvMj0TnbZvYT3yOt46jbQAcCDs1EU2QKcfG8eEoO00tlW0Jp3r";

package/dist/stories/mocks/checkout/mockCheckoutPreview.d.ts

@@ -0,0 +1,2 @@
+import { PreviewSubscription, SubscriptionPreview } from '../../../../../js-client-sdk';
+export declare function mockPreviewSubscription(input: PreviewSubscription): SubscriptionPreview;

package/dist/stories/mocks/checkout/mockCheckoutState.d.ts

@@ -0,0 +1,2 @@
+import { GetCheckoutState, GetCheckoutStateResults } from '../../../../../js-client-sdk';
+export declare function mockCheckoutState(params: GetCheckoutState): GetCheckoutStateResults;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-beta.11",
+  "version": "4.4.0-beta.12",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/Checkout.tsx

@@ -13,6 +13,7 @@ export const Checkout = ({
   billingCountryCode,
   billableFeatures,
   billingInformation,
+  onMockCheckoutState,
   ...containerProps
 }: CheckoutProps) => {
   return (
@@ -24,7 +25,8 @@ export const Checkout = ({
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
       billableFeatures={billableFeatures}
-      billingInformation={billingInformation}>
+      billingInformation={billingInformation}
+      onMockCheckoutState={onMockCheckoutState}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutContainer.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { ApplySubscription, BillingAddress, CheckoutStatePlan, PricingType } from '@stigg/js-client-sdk';
+import {
+  PricingType,
+  BillingAddress,
+  ApplySubscription,
+  CheckoutStatePlan,
+  PreviewSubscription,
+  SubscriptionPreview,
+} from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
@@ -19,6 +26,9 @@ type StepProps = {
   content: React.ReactNode;
 };
 
+type StripeClientSecret = { clientSecret: string };
+type StripeManualMode = { mode: 'setup' | 'payment' | 'subscription'; currency: string };
+
 const getStepProps = (
   currentStep: CheckoutStep,
   { onBillingAddressChange }: Pick<CheckoutContainerProps, 'onBillingAddressChange'>,
@@ -41,6 +51,8 @@ export type OnCheckoutParams = { checkoutParams: ApplySubscription; checkoutActi
 
 export type OnCheckoutCompletedParams = { success: boolean; error?: string };
 
+export type OnMockCheckoutPreviewCallback = (params: PreviewSubscription) => SubscriptionPreview;
+
 export type CheckoutContainerProps = {
   onCheckout?: (params: OnCheckoutParams) => Promise<CheckoutResult>;
   onCheckoutCompleted: (params: OnCheckoutCompletedParams) => Promise<void>;
@@ -48,6 +60,7 @@ export type CheckoutContainerProps = {
   onBillingAddressChange?: (params: { billingAddress: BillingAddress }) => Promise<void>;
   disablePromotionCode?: boolean;
   disableSuccessAnimation?: boolean;
+  onMockCheckoutPreview?: OnMockCheckoutPreviewCallback;
 };
 
 export function CheckoutContainer({
@@ -57,6 +70,7 @@ export function CheckoutContainer({
   onBillingAddressChange,
   disablePromotionCode,
   disableSuccessAnimation,
+  onMockCheckoutPreview,
 }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
@@ -93,11 +107,15 @@ export function CheckoutContainer({
     </>
   );
 
+  const stripeElementsMode: StripeClientSecret | StripeManualMode = setupIntentClientSecret
+    ? { clientSecret: setupIntentClientSecret }
+    : { mode: 'setup', currency: 'usd' };
+
   return (
     <Elements
       stripe={stripePromise}
       options={{
-        clientSecret: setupIntentClientSecret,
+        ...stripeElementsMode,
         appearance: {
           theme: 'stripe',
           variables: {
@@ -121,6 +139,7 @@ export function CheckoutContainer({
               onCheckout={onCheckout}
               onCheckoutCompleted={onCheckoutCompleted}
               isFreeDowngrade={isFreeDowngrade}
+              onMockCheckoutPreview={onMockCheckoutPreview}
             />
           )}
         </CheckoutContent>

package/src/components/checkout/CheckoutProvider.tsx

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
+import { BillableFeature, BillingPeriod, GetCheckoutState, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 import { CustomizedTheme, SdkThemeProvider, useStiggTheme } from '../../theme/Theme';
 import { DeepPartial } from '../../types';
 import { mapCheckoutConfiguration } from '../common/mapExternalTheme';
@@ -71,6 +71,8 @@ const CheckoutContextProvider: React.FC<{ children: React.ReactNode; initialStat
   return <CheckoutContext.Provider value={[contextValue, setContextValue]}>{children}</CheckoutContext.Provider>;
 };
 
+export type MockCheckoutStateCallback = (params: GetCheckoutState) => GetCheckoutStateResults;
+
 export type CheckoutProviderProps = {
   textOverrides?: DeepPartial<CheckoutLocalization>;
   theme?: DeepPartial<CheckoutTheme>;
@@ -80,6 +82,7 @@ export type CheckoutProviderProps = {
   billingCountryCode?: string;
   billableFeatures?: BillableFeature[];
   billingInformation?: BillingInformation;
+  onMockCheckoutState?: MockCheckoutStateCallback;
 };
 
 export function CheckoutProvider({
@@ -92,10 +95,11 @@ export function CheckoutProvider({
   planId,
   billingCountryCode,
   billingInformation,
+  onMockCheckoutState,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
-  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode });
+  const { checkout, isLoading } = useLoadCheckout({ resourceId, planId, billingCountryCode, onMockCheckoutState });
   const configuration: CustomizedTheme | undefined = checkout?.configuration
     ? mapCheckoutConfiguration(checkout.configuration)
     : undefined;

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

@@ -2,14 +2,16 @@ import { GetCheckoutStateResults } from '@stigg/js-client-sdk';
 import { useEffect, useState } from 'react';
 import logger from '../../../services/logger';
 import { useStiggContext } from '../../StiggProvider';
+import { MockCheckoutStateCallback } from '../CheckoutProvider';
 
 type UseLoadCheckoutProps = {
   planId: string;
   resourceId?: string;
   billingCountryCode?: string;
+  onMockCheckoutState?: MockCheckoutStateCallback;
 };
 
-export function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseLoadCheckoutProps) {
+export function useLoadCheckout({ planId, resourceId, billingCountryCode, onMockCheckoutState }: UseLoadCheckoutProps) {
   const { stigg } = useStiggContext();
   const [isLoading, setIsLoading] = useState(true);
   const [checkout, setCheckout] = useState<GetCheckoutStateResults | null>();
@@ -26,11 +28,17 @@ export function useLoadCheckout({ planId, resourceId, billingCountryCode }: UseL
       }
     };
 
+    if (onMockCheckoutState) {
+      setIsLoading(false);
+      setCheckout(onMockCheckoutState({ planId, resourceId, billingCountryCode }));
+      return;
+    }
+
     if (stigg.isCustomerLoaded) {
       setIsLoading(true);
       void loadCheckout();
     }
-  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode]);
+  }, [stigg, stigg.isCustomerLoaded, resourceId, planId, billingCountryCode, onMockCheckoutState]);
 
   return {
     checkout,

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

@@ -5,6 +5,7 @@ import { useStiggContext } from '../../StiggProvider';
 import { useCheckoutContext } from '../CheckoutProvider';
 import { useCheckoutModel } from './useCheckoutModel';
 import { SubscriptionState, useSubscriptionModel } from './useSubscriptionModel';
+import { OnMockCheckoutPreviewCallback } from '../CheckoutContainer';
 
 function mapBillingInformation({
   billingAddress,
@@ -25,12 +26,17 @@ function mapBillingInformation({
   };
 }
 
+type UsePreviewSubscriptionProps = {
+  onMockCheckoutPreview?: OnMockCheckoutPreviewCallback;
+};
+
 export type PreviewSubscriptionProps = {
   customerId?: string;
   planId?: string;
   resourceId?: string;
   stigg: StiggClient;
-} & SubscriptionState;
+} & SubscriptionState &
+  UsePreviewSubscriptionProps;
 
 const previewSubscription = async ({
   stigg,
@@ -44,6 +50,7 @@ const previewSubscription = async ({
   billingPeriod,
   billingAddress,
   taxPercentage,
+  onMockCheckoutPreview,
 }: PreviewSubscriptionProps) => {
   const estimateAddons = addons.map(({ addon, quantity }) => ({ addonId: addon.id, quantity }));
   let subscriptionPreview: SubscriptionPreview | null = null;
@@ -63,7 +70,9 @@ const previewSubscription = async ({
         ...mapBillingInformation({ billingAddress, taxPercentage }),
       };
 
-      subscriptionPreview = await stigg.previewSubscription(previewSubscriptionProps);
+      subscriptionPreview = onMockCheckoutPreview
+        ? onMockCheckoutPreview(previewSubscriptionProps)
+        : await stigg.previewSubscription(previewSubscriptionProps);
     }
   } catch (error) {
     const [, errorMsg] = (error as any)?.message?.split('Error:') || [];
@@ -74,7 +83,7 @@ const previewSubscription = async ({
   return { subscriptionPreview, errorMessage };
 };
 
-export const usePreviewSubscriptionAction = () => {
+export const usePreviewSubscriptionAction = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
   const { stigg } = useStiggContext();
   const subscription = useSubscriptionModel();
   const [{ resourceId }] = useCheckoutContext();
@@ -99,6 +108,7 @@ export const usePreviewSubscriptionAction = () => {
         billingAddress: subscription.billingAddress,
         taxPercentage: subscription.taxPercentage,
         promotionCode: promotionCode ?? subscription.promotionCode,
+        onMockCheckoutPreview,
       });
     },
     [
@@ -122,11 +132,11 @@ export const usePreviewSubscriptionAction = () => {
 
 const SUBSCRIPTION_PREVIEW_DEBOUNCE_TIME = 500;
 
-export const usePreviewSubscription = () => {
+export const usePreviewSubscription = ({ onMockCheckoutPreview }: UsePreviewSubscriptionProps = {}) => {
   const [subscriptionPreview, setSubscriptionPreview] = useState<SubscriptionPreview | null>(null);
   const [isFetchingSubscriptionPreview, setIsFetchingSubscriptionPreview] = useState(false);
 
-  const { previewSubscriptionAction } = usePreviewSubscriptionAction();
+  const { previewSubscriptionAction } = usePreviewSubscriptionAction({ onMockCheckoutPreview });
 
   useEffect(() => {
     const estimateSubscription = async () => {

package/src/components/checkout/summary/CheckoutSummary.tsx

@@ -91,6 +91,7 @@ export const CheckoutSummary = ({
   disablePromotionCode,
   disableSuccessAnimation,
   isFreeDowngrade,
+  onMockCheckoutPreview,
 }: CheckoutContainerProps & { isFreeDowngrade: boolean }) => {
   const [isCheckoutCompletedSuccessfully, setIsCheckoutCompletedSuccessfully] = useState(false);
   const { setErrorMessage } = usePaymentStepModel();
@@ -105,7 +106,7 @@ export const CheckoutSummary = ({
   const [baseCharge] = baseCharges || [];
   const isLastStep = isFreeDowngrade || (progressBar.isCheckoutComplete && progressBar.isLastStep);
 
-  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription();
+  const { subscriptionPreview, isFetchingSubscriptionPreview } = usePreviewSubscription({ onMockCheckoutPreview });
 
   const { handleSubmit, isLoading } = useSubmit({
     disableSuccessAnimation,

package/src/stories/Checkout.stories.tsx

@@ -4,6 +4,8 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Checkout } from '../components/checkout';
 import { StiggProvider } from '../components/StiggProvider';
 import { defaultArgsWithCustomer } from './baseArgs';
+import { mockCheckoutState } from './mocks/checkout/mockCheckoutState';
+import { mockPreviewSubscription } from './mocks/checkout/mockCheckoutPreview';
 
 export default {
   title: 'Stigg React SDK/Checkout',
@@ -21,6 +23,18 @@ export default {
       </StiggProvider>
     ),
   ],
+  parameters: {
+    controls: {
+      exclude: [
+        'onCheckout',
+        'onCheckoutCompleted',
+        'onChangePlan',
+        'onBillingAddressChange',
+        'onMockCheckoutState',
+        'onMockCheckoutPreview',
+      ],
+    },
+  },
 } as ComponentMeta<typeof Checkout>;
 
 const Wrapper = styled.div`
@@ -43,11 +57,26 @@ const Template: ComponentStory<any> = (args) => (
         const { success, errorMessage } = await checkoutAction();
         return { success, errorMessage };
       }}
+      billableFeatures={[{ featureId: 'feature-seat', quantity: 30 }]}
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
-      // disableSuccessAnimation
-      // billingInformation={{ taxPercentage: 27 }}
+      onMockCheckoutState={
+        args.useMockData
+          ? (params) => {
+              console.log('mocking checkout state', params);
+              return mockCheckoutState(params);
+            }
+          : undefined
+      }
+      onMockCheckoutPreview={
+        args.useMockData
+          ? (params) => {
+              console.log('mocking checkout preview');
+              return mockPreviewSubscription(params);
+            }
+          : undefined
+      }
     />
   </Wrapper>
 );
@@ -56,8 +85,5 @@ export const DefaultCheckout = Template.bind({});
 DefaultCheckout.args = {
   ...defaultArgsWithCustomer,
   planId: 'plan-revvenu-essentials',
-  // baseUri: 'http://localhost:4000',
-  // apiKey: 'client-72b058a6-0f22-4c86-adce-bf266d12e12e:9f356ceb-c94c-42a4-9572-10b12824da81',
-  baseUri: 'https://api-staging.stigg.io',
-  apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
+  useMockData: false,
 };

package/src/stories/mocks/checkout/consts.ts

@@ -0,0 +1,15 @@
+export const BASE_FEE_MONTHLY = 200;
+export const BASE_FEE_YEARLY = 175;
+export const TIERS = [1000, 10000, 50000];
+export const TIERS_PRICE_MONTHLY = [10, 90, 480];
+export const TIERS_PRICE_YEARLY = [8, 75, 350];
+
+export const PER_UNIT_PRICE_MONTHLY = 12;
+export const PER_UNIT_PRICE_YEARLY = 10;
+
+export const ADDON_PRICE_MONTHLY = 50;
+export const ADDON_PRICE_YEARLY = 35;
+
+export const STRIPE_MOCK_ACCOUNT_ID = 'acct_1NnHoQG6EyqgvTaj';
+export const STRIPE_MOCK_ACCOUNT_PK =
+  'pk_test_51NnHoQG6EyqgvTajznajopWC01AozNtq7zgySeQ1qx4PH9TAXvMj0TnbZvYT3yOt46jbQAcCDs1EU2QKcfG8eEoO00tlW0Jp3r';

package/src/stories/mocks/checkout/mockCheckoutPreview.ts

@@ -0,0 +1,121 @@
+import moment from 'moment';
+import {
+  BillingPeriod,
+  BillingModel,
+  Currency,
+  BillableFeature,
+  DateRange,
+  Money,
+  Plan,
+  PreviewSubscription,
+  SubscriptionEstimationAddon,
+  SubscriptionPreview,
+} from '../../../../../js-client-sdk';
+import { mockCheckoutState } from './mockCheckoutState';
+
+const mockBillingPeriod = (period?: BillingPeriod): DateRange => {
+  return {
+    start: moment().toDate(),
+    end: moment()
+      .add(1, period === BillingPeriod.Monthly ? 'month' : 'year')
+      .toDate(),
+  };
+};
+
+const defaultPreviewSubscription = (): SubscriptionPreview => {
+  const defaultCost: Money = {
+    amount: 0,
+    currency: Currency.Usd,
+  };
+
+  return {
+    subTotal: defaultCost,
+    total: defaultCost,
+    totalExcludingTax: defaultCost,
+    billingPeriodRange: mockBillingPeriod(),
+  };
+};
+
+const flatFeeCost = (plan: Plan, billingPeriod: BillingPeriod | undefined) => {
+  const filteredPrice = plan.pricePoints?.find(
+    (price) => price.billingPeriod === billingPeriod && price.pricingModel === BillingModel.FlatFee,
+  );
+
+  return filteredPrice?.amount || 0;
+};
+
+const addonCost = (plan: Plan, billingPeriod: BillingPeriod, addonId: string, quantity: number) => {
+  const addon = plan.compatibleAddons?.find((addon) => addon.id === addonId);
+
+  const price = addon?.pricePoints.find((price) => price.billingPeriod === billingPeriod);
+
+  return (price?.amount || 0) * quantity;
+};
+
+const billableFeatureCost = (plan: Plan, billingPeriod: BillingPeriod, featureId: string, quantity: number) => {
+  const price = plan.pricePoints.find(
+    (price) => price.feature?.featureId === featureId && price.billingPeriod === billingPeriod,
+  );
+
+  if (!price) return 0;
+
+  const { tiers } = price;
+
+  if (tiers) {
+    const quantityTier = tiers.find((tier) => tier.upTo >= quantity);
+    const priceTier = quantityTier || tiers[tiers.length - 1];
+    return quantity * priceTier.unitPrice.amount;
+  }
+
+  return (price?.amount || 0) * quantity;
+};
+
+const mockTotalPrice = (
+  plan: Plan,
+  billingPeriod: BillingPeriod,
+  addons: SubscriptionEstimationAddon[],
+  features: BillableFeature[],
+) => {
+  const currency = plan.pricePoints?.[0].currency || Currency.Usd;
+
+  const totalFlatFeeCost = flatFeeCost(plan, billingPeriod);
+  const totalFeaturesCost = features.reduce(
+    (total, feature) => total + billableFeatureCost(plan, billingPeriod, feature.featureId, feature.quantity || 0),
+    0,
+  );
+  const totalAddonsCost = addons.reduce(
+    (total, addon) => total + addonCost(plan, billingPeriod, addon.addonId, addon.quantity || 0),
+    0,
+  );
+
+  const cost: Money = {
+    amount: totalFlatFeeCost + totalFeaturesCost + totalAddonsCost,
+    currency: currency || Currency.Usd,
+  };
+
+  return {
+    subTotal: cost,
+    total: cost,
+    totalExcludingTax: cost,
+  };
+};
+
+export function mockPreviewSubscription(input: PreviewSubscription): SubscriptionPreview {
+  const { planId, billingPeriod = BillingPeriod.Monthly, billableFeatures: features = [], addons = [] } = input;
+  const data = mockCheckoutState({ planId });
+
+  if (!data || !data.plan) {
+    return defaultPreviewSubscription();
+  }
+
+  const total = mockTotalPrice(data.plan, billingPeriod, addons, features);
+
+  if (!total) {
+    return defaultPreviewSubscription();
+  }
+
+  return {
+    ...total,
+    billingPeriodRange: mockBillingPeriod(billingPeriod),
+  };
+}