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

package/package.json

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

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/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/stories/Checkout.stories.tsx

@@ -55,9 +55,8 @@ 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',
-  // disableEdge: false,
-  baseUri: 'https://api-staging.stigg.io',
-  apiKey: 'client-79584f52-7ef9-4c58-b9ac-5080acf492e4:71f2274c-100a-4fa4-8a43-48fa3b16c627',
+  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',
 };