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

package/dist/components/checkout/CheckoutProvider.d.ts

@@ -29,6 +29,6 @@ export declare type CheckoutProviderProps = {
     billingCountryCode?: string;
     billableFeatures?: BillableFeature[];
 };
-export declare function CheckoutProvider({ children, textOverrides, theme, resourceId, planId, preferredBillingPeriod, billingCountryCode, billableFeatures, }: {
+export declare function CheckoutProvider({ children, textOverrides, theme, preferredBillingPeriod, billableFeatures, resourceId, planId, billingCountryCode, }: {
     children: React.ReactNode;
 } & CheckoutProviderProps): JSX.Element;

package/dist/components/checkout/hooks/useProgressBarModel.d.ts

@@ -17,6 +17,7 @@ export declare function getProgressBarInitialState({ availableAddons }: {
     availableAddons?: Addon[];
 }): ProgressBarState;
 export declare function useProgressBarModel(): {
+    currentStep: CheckoutStep;
     progressBarState: ProgressBarState;
     isLastStep: boolean;
     isCheckoutComplete: boolean;

package/dist/components/checkout/index.d.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/dist/components/customerPortal/subscriptionOverview/subscriptionView/SubscriptionView.style.d.ts

@@ -2,5 +2,5 @@
 /// <reference types="@emotion/styled/macro" />
 export declare const SubscriptionViewLayout: import("@emotion/styled/macro").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-    as?: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
+    as?: "symbol" | "object" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/react-sdk.cjs.development.js

@@ -6665,7 +6665,9 @@ function useGoNext() {
 
 function useProgressBarModel() {
   var progressBarState = useProgressBarState();
+  var currentStep = progressBarState.steps[progressBarState.activeStep];
   return {
+    currentStep: currentStep,
     progressBarState: progressBarState,
     isLastStep: progressBarState.activeStep === progressBarState.steps.length - 1,
     isCheckoutComplete: isCheckoutComplete(progressBarState),
@@ -6704,7 +6706,6 @@ var usePreviewSubscriptionAction = function usePreviewSubscriptionAction() {
 
   var _ref = checkoutState || {},
       plan = _ref.plan,
-      activeSubscription = _ref.activeSubscription,
       customer = _ref.customer;
 
   var previewSubscriptionAction = React.useCallback( /*#__PURE__*/function () {
@@ -6776,7 +6777,7 @@ var usePreviewSubscriptionAction = function usePreviewSubscriptionAction() {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [activeSubscription, customer, plan, resourceId, stigg, subscription.addons, subscription.billingPeriod, subscription.billableFeatures, subscription.promotionCode, planStep.billingCountryCode]);
+  }(), [customer, plan, resourceId, stigg, subscription.addons, subscription.billingPeriod, subscription.billableFeatures, subscription.promotionCode, planStep.billingCountryCode]);
   return {
     previewSubscriptionAction: previewSubscriptionAction
   };
@@ -6968,6 +6969,9 @@ var CheckoutContextProvider = function CheckoutContextProvider(_ref) {
       state = _useState[0],
       innerSetState = _useState[1];
 
+  React.useEffect(function () {
+    innerSetState(initialState);
+  }, [initialState]);
   var setState = React.useCallback(function (updater) {
     return innerSetState(function (old) {
       return immer.produce(old, function (draft) {
@@ -6978,7 +6982,7 @@ var CheckoutContextProvider = function CheckoutContextProvider(_ref) {
 
   var _useMemo = React.useMemo(function () {
     return [state, setState];
-  }, [state]),
+  }, [setState, state]),
       contextValue = _useMemo[0],
       setContextValue = _useMemo[1];
 
@@ -6991,11 +6995,11 @@ function CheckoutProvider(_ref2) {
   var children = _ref2.children,
       textOverrides = _ref2.textOverrides,
       theme = _ref2.theme,
+      preferredBillingPeriod = _ref2.preferredBillingPeriod,
+      billableFeatures = _ref2.billableFeatures,
       resourceId = _ref2.resourceId,
       planId = _ref2.planId,
-      preferredBillingPeriod = _ref2.preferredBillingPeriod,
-      billingCountryCode = _ref2.billingCountryCode,
-      billableFeatures = _ref2.billableFeatures;
+      billingCountryCode = _ref2.billingCountryCode;
 
   var _useLoadCheckout = useLoadCheckout({
     resourceId: resourceId,
@@ -7045,8 +7049,8 @@ function CheckoutProvider(_ref2) {
         isLoadingCheckoutData: isLoading
       }
     };
-    return initialState;
-  }, [theme, textOverrides, preferredBillingPeriod, billingCountryCode, billableFeatures, globalTheme, checkout, isLoading]);
+    return initialState; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredBillingPeriod, billingCountryCode, checkout, isLoading]);
   return React__default.createElement(SdkThemeProvider, {
     key: checkout == null ? void 0 : checkout.plan.id,
     componentTheme: configuration
@@ -12516,20 +12520,20 @@ var CheckoutPlanStep = function CheckoutPlanStep() {
   }));
 };
 
-var getStepProps = function getStepProps(step) {
-  switch (step) {
-    case 0:
+var getStepProps = function getStepProps(currentStep) {
+  switch (currentStep.key) {
+    case CheckoutStepKey.PLAN:
       return {
         allowChangePlan: true,
         content: React__default.createElement(CheckoutPlanStep, null)
       };
 
-    case 1:
+    case CheckoutStepKey.ADDONS:
       return {
         content: React__default.createElement(CheckoutAddonsStep, null)
       };
 
-    case 2:
+    case CheckoutStepKey.PAYMENT:
       return {
         content: React__default.createElement(PaymentStep, null)
       };
@@ -12556,15 +12560,14 @@ function CheckoutContainer(_ref) {
       widgetState = _useCheckoutContext$.widgetState;
 
   var _useProgressBarModel = useProgressBarModel(),
-      progressBarState = _useProgressBarModel.progressBarState;
+      currentStep = _useProgressBarModel.currentStep;
 
-  var activeStep = progressBarState.activeStep;
   var isLoadingCheckoutData = widgetState.isLoadingCheckoutData; // uncomment for fun!
   // if (activeStep > 2) {
   //   return <SurpriseStep />;
   // }
 
-  var _getStepProps = getStepProps(activeStep),
+  var _getStepProps = getStepProps(currentStep),
       content = _getStepProps.content,
       allowChangePlan = _getStepProps.allowChangePlan;