@stigg/react-sdk 4.4.0-beta.1 → 4.4.0-beta.3

package/package.json

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

package/src/components/checkout/Checkout.tsx

@@ -22,8 +22,7 @@ export const Checkout = ({
       planId={planId}
       preferredBillingPeriod={preferredBillingPeriod}
       billingCountryCode={billingCountryCode}
-      billableFeatures={billableFeatures}
-    >
+      billableFeatures={billableFeatures}>
       <CheckoutContainer {...containerProps} />
     </CheckoutProvider>
   );

package/src/components/checkout/CheckoutContainer.tsx

@@ -4,7 +4,7 @@ import { ApplySubscription, CheckoutStatePlan } from '@stigg/js-client-sdk';
 import { CheckoutContent, CheckoutLayout, CheckoutPanel } from './CheckoutContainer.style';
 import { CheckoutProgressBar } from './progressBar/CheckoutProgressBar';
 import { CheckoutSummary, CheckoutSummarySkeleton } from './summary';
-import { useProgressBarModel } from './hooks';
+import { CheckoutStep, CheckoutStepKey, useProgressBarModel } from './hooks';
 import { PlanHeader } from './planHeader';
 import { CheckoutAddonsStep } from './steps/addons';
 import { PaymentStep } from './steps/payment';
@@ -20,13 +20,13 @@ type StepProps = {
   content: React.ReactNode;
 };
 
-const getStepProps = (step: number): StepProps => {
-  switch (step) {
-    case 0:
+const getStepProps = (currentStep: CheckoutStep): StepProps => {
+  switch (currentStep.key) {
+    case CheckoutStepKey.PLAN:
       return { allowChangePlan: true, content: <CheckoutPlanStep /> };
-    case 1:
+    case CheckoutStepKey.ADDONS:
       return { content: <CheckoutAddonsStep /> };
-    case 2:
+    case CheckoutStepKey.PAYMENT:
       return { content: <PaymentStep /> };
     default:
       return { content: null };
@@ -48,8 +48,8 @@ export type CheckoutContainerProps = {
 export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePlan }: CheckoutContainerProps) {
   const { stripePromise, setupIntentClientSecret } = useStripeIntegration();
   const [{ stiggTheme, widgetState }] = useCheckoutContext();
-  const { progressBarState } = useProgressBarModel();
-  const { activeStep } = progressBarState;
+  const { currentStep } = useProgressBarModel();
+
   const { isLoadingCheckoutData } = widgetState;
 
   // uncomment for fun!
@@ -57,7 +57,7 @@ export function CheckoutContainer({ onCheckout, onCheckoutCompleted, onChangePla
   //   return <SurpriseStep />;
   // }
 
-  const { content, allowChangePlan } = getStepProps(activeStep);
+  const { content, allowChangePlan } = getStepProps(currentStep);
 
   const checkoutContent = (
     <>

package/src/components/checkout/CheckoutProvider.tsx

@@ -1,5 +1,5 @@
 import { produce } from 'immer';
-import React, { useCallback, useContext, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { BillableFeature, BillingPeriod, GetCheckoutStateResults } from '@stigg/js-client-sdk';
 
@@ -58,12 +58,16 @@ const CheckoutContextProvider: React.FC<{ children: React.ReactNode; initialStat
 }) => {
   const [state, innerSetState] = useState(initialState);
 
+  useEffect(() => {
+    innerSetState(initialState);
+  }, [initialState]);
+
   const setState = useCallback(
     (updater: (state: CheckoutContextState) => void) => innerSetState((old) => produce(old, (draft) => updater(draft))),
     [innerSetState],
   );
 
-  const [contextValue, setContextValue] = useMemo(() => [state, setState], [state]);
+  const [contextValue, setContextValue] = useMemo(() => [state, setState], [setState, state]);
 
   return <CheckoutContext.Provider value={[contextValue, setContextValue]}>{children}</CheckoutContext.Provider>;
 };
@@ -82,11 +86,11 @@ export function CheckoutProvider({
   children,
   textOverrides,
   theme,
+  preferredBillingPeriod,
+  billableFeatures,
   resourceId,
   planId,
-  preferredBillingPeriod,
   billingCountryCode,
-  billableFeatures,
 }: {
   children: React.ReactNode;
 } & CheckoutProviderProps) {
@@ -130,16 +134,8 @@ export function CheckoutProvider({
     };
 
     return initialState;
-  }, [
-    theme,
-    textOverrides,
-    preferredBillingPeriod,
-    billingCountryCode,
-    billableFeatures,
-    globalTheme,
-    checkout,
-    isLoading,
-  ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading]);
 
   return (
     <SdkThemeProvider key={checkout?.plan.id} componentTheme={configuration}>

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

@@ -10,7 +10,7 @@ export const usePreviewSubscriptionAction = () => {
   const subscription = useSubscriptionModel();
   const [{ resourceId, planStep }] = useCheckoutContext();
   const { checkoutState } = useCheckoutModel();
-  const { plan, activeSubscription, customer } = checkoutState || {};
+  const { plan, customer } = checkoutState || {};
 
   const previewSubscriptionAction = useCallback(
     async ({ promotionCode }: { promotionCode?: string | null } = {}) => {
@@ -43,7 +43,6 @@ export const usePreviewSubscriptionAction = () => {
       return { subscriptionPreview, errorMessage };
     },
     [
-      activeSubscription,
       customer,
       plan,
       resourceId,

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

@@ -78,7 +78,10 @@ function useGoNext() {
 
 export function useProgressBarModel() {
   const progressBarState = useProgressBarState();
+  const currentStep = progressBarState.steps[progressBarState.activeStep];
+
   return {
+    currentStep,
     progressBarState,
     isLastStep: progressBarState.activeStep === progressBarState.steps.length - 1,
     isCheckoutComplete: isCheckoutComplete(progressBarState),

package/src/components/checkout/index.ts

@@ -1,3 +1,4 @@
 export { CheckoutTheme } from './theme';
 export { Checkout, CheckoutProps } from './Checkout';
+export { OnCheckoutCompletedParams, OnCheckoutParams, CheckoutResult } from './CheckoutContainer';
 export { CheckoutLocalization } from './textOverrides';

package/src/stories/Checkout.stories.tsx

@@ -46,7 +46,7 @@ const Template: ComponentStory<any> = (args) => (
       onChangePlan={({ currentPlan }) => {
         console.log('plan changed clicked!', { currentPlan });
       }}
-      billingInformation={{ taxPercentage: 27 }}
+      // billingInformation={{ taxPercentage: 27 }}
     />
   </Wrapper>
 );