@stigg/react-sdk 4.4.0-beta.4 → 4.4.0-beta.5

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

@@ -3,6 +3,9 @@ export declare const usePreviewSubscriptionAction: () => {
     previewSubscriptionAction: ({ promotionCode }?: {
         promotionCode?: string | null | undefined;
     }) => Promise<{
+        subscriptionPreview: null;
+        errorMessage?: undefined;
+    } | {
         subscriptionPreview: SubscriptionPreview | null;
         errorMessage: string | null;
     }>;

package/dist/components/checkout/steps/plan/CheckoutChargeList.d.ts

@@ -7,8 +7,9 @@ declare type CheckoutChargeListProps = {
     plan?: Plan;
     billingPeriod: BillingPeriod;
 };
-export declare function PlanCharge({ charge, setBillableFeature, billableFeature, onValidationChange, }: {
+export declare function PlanCharge({ charge, isValid, setBillableFeature, billableFeature, onValidationChange, }: {
     charge: Price;
+    isValid: boolean;
     billableFeature?: BillableFeatureInput;
     setBillableFeature: UsePlanStepModel['setBillableFeature'];
     onValidationChange: ({ featureId, isValid }: {

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

@@ -6750,7 +6750,7 @@ var usePreviewSubscriptionAction = function usePreviewSubscriptionAction() {
 
   var previewSubscriptionAction = React.useCallback( /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_temp) {
-      var _ref4, promotionCode, estimateAddons, subscriptionPreview, errorMessage, previewSubscriptionProps, _error$message, _ref6, errorMsg;
+      var _ref4, promotionCode, estimateAddons, subscriptionPreview, errorMessage, isValid, previewSubscriptionProps, _error$message, _ref7, errorMsg;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -6767,10 +6767,25 @@ var usePreviewSubscriptionAction = function usePreviewSubscriptionAction() {
               });
               subscriptionPreview = null;
               errorMessage = null;
-              _context.prev = 4;
+              isValid = !subscription.billableFeatures.some(function (_ref6) {
+                var quantity = _ref6.quantity;
+                return quantity === null;
+              });
+
+              if (isValid) {
+                _context.next = 7;
+                break;
+              }
+
+              return _context.abrupt("return", {
+                subscriptionPreview: subscriptionPreview
+              });
+
+            case 7:
+              _context.prev = 7;
 
               if (!(customer != null && customer.id && plan != null && plan.id)) {
-                _context.next = 10;
+                _context.next = 13;
                 break;
               }
 
@@ -6787,34 +6802,34 @@ var usePreviewSubscriptionAction = function usePreviewSubscriptionAction() {
                 billingAddress: subscription.billingAddress,
                 taxPercentage: subscription.taxPercentage
               }));
-              _context.next = 9;
+              _context.next = 12;
               return stigg.previewSubscription(previewSubscriptionProps);
 
-            case 9:
+            case 12:
               subscriptionPreview = _context.sent;
 
-            case 10:
-              _context.next = 16;
+            case 13:
+              _context.next = 19;
               break;
 
-            case 12:
-              _context.prev = 12;
-              _context.t0 = _context["catch"](4);
-              _ref6 = (_context.t0 == null ? void 0 : (_error$message = _context.t0.message) == null ? void 0 : _error$message.split('Error:')) || [], errorMsg = _ref6[1];
+            case 15:
+              _context.prev = 15;
+              _context.t0 = _context["catch"](7);
+              _ref7 = (_context.t0 == null ? void 0 : (_error$message = _context.t0.message) == null ? void 0 : _error$message.split('Error:')) || [], errorMsg = _ref7[1];
               errorMessage = errorMsg == null ? void 0 : errorMsg.trim();
 
-            case 16:
+            case 19:
               return _context.abrupt("return", {
                 subscriptionPreview: subscriptionPreview,
                 errorMessage: errorMessage
               });
 
-            case 17:
+            case 20:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 12]]);
+      }, _callee, null, [[7, 15]]);
     }));
 
     return function (_x) {
@@ -6839,7 +6854,7 @@ var usePreviewSubscription = function usePreviewSubscription() {
 
   React.useEffect(function () {
     var estimateSubscription = /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
         var _yield$previewSubscri, subscriptionPreview;
 
         return runtime_1.wrap(function _callee2$(_context2) {
@@ -6853,7 +6868,11 @@ var usePreviewSubscription = function usePreviewSubscription() {
               case 3:
                 _yield$previewSubscri = _context2.sent;
                 subscriptionPreview = _yield$previewSubscri.subscriptionPreview;
-                setSubscriptionPreview(subscriptionPreview);
+
+                if (subscriptionPreview) {
+                  setSubscriptionPreview(subscriptionPreview);
+                }
+
                 setIsFetchingSubscriptionPreview(false);
 
               case 7:
@@ -6865,7 +6884,7 @@ var usePreviewSubscription = function usePreviewSubscription() {
       }));
 
       return function estimateSubscription() {
-        return _ref7.apply(this, arguments);
+        return _ref8.apply(this, arguments);
       };
     }();
 
@@ -12539,29 +12558,15 @@ function PlanCharge(_ref) {
   var _charge$feature, _charge$feature2, _charge$feature3;
 
   var charge = _ref.charge,
+      isValid = _ref.isValid,
       setBillableFeature = _ref.setBillableFeature,
       billableFeature = _ref.billableFeature,
       onValidationChange = _ref.onValidationChange;
-
-  var _React$useState = React__default.useState(true),
-      isValid = _React$useState[0],
-      setIsValid = _React$useState[1];
-
   var featureId = (_charge$feature = charge.feature) == null ? void 0 : _charge$feature.featureId;
   var isBaseCharge = !featureId;
   var isPayAsYouGo = charge.pricingModel === Stigg.BillingModel.UsageBased;
   var displayName = isBaseCharge ? 'Base charge' : (_charge$feature2 = charge.feature) == null ? void 0 : _charge$feature2.displayName;
   var hasQuantityRestrictions = !!(charge != null && charge.minUnitQuantity || charge != null && charge.maxUnitQuantity);
-  React.useEffect(function () {
-    if (!featureId) {
-      return;
-    }
-
-    onValidationChange({
-      featureId: featureId,
-      isValid: isValid
-    });
-  }, [featureId, isValid, onValidationChange]);
 
   var handleQuantityChange = function handleQuantityChange(event) {
     var _event$target, _event$target2;
@@ -12570,14 +12575,20 @@ function PlanCharge(_ref) {
     var value = event != null && (_event$target = event.target) != null && _event$target.value ? Number(event == null ? void 0 : (_event$target2 = event.target) == null ? void 0 : _event$target2.value) : charge.minUnitQuantity;
 
     if (!value || value <= 0) {
-      setIsValid(false); // Reset the input value to null
+      onValidationChange({
+        featureId: featureId,
+        isValid: false
+      }); // Reset the input value to null
       // @ts-ignore
 
       setBillableFeature(featureId, null);
       return;
     }
 
-    setIsValid(true);
+    onValidationChange({
+      featureId: featureId,
+      isValid: true
+    });
     var quantity = getValidPriceQuantity(charge, value);
     setBillableFeature(featureId, quantity);
   };
@@ -12626,7 +12637,7 @@ function PlanCharge(_ref) {
           margin: '4px'
         }
       },
-      value: (billableFeature == null ? void 0 : billableFeature.quantity) || charge.minUnitQuantity,
+      value: (billableFeature == null ? void 0 : billableFeature.quantity) || charge.minUnitQuantity || '',
       onChange: handleQuantityChange
     });
   }
@@ -12664,7 +12675,12 @@ function CheckoutChargeList(_ref2) {
     return p.billingPeriod === billingPeriod;
   })) || []);
 
-  var _useState = React.useState({}),
+  var _useState = React.useState(planCharges == null ? void 0 : planCharges.reduce(function (acc, curr) {
+    var _curr$feature;
+
+    acc[((_curr$feature = curr.feature) == null ? void 0 : _curr$feature.featureId) || 'base-charge'] = true;
+    return acc;
+  }, {})),
       chargesValidation = _useState[0],
       setChargesValidation = _useState[1];
 
@@ -12675,7 +12691,7 @@ function CheckoutChargeList(_ref2) {
     setIsDisabled(isDisabled);
   }, [chargesValidation, setIsDisabled]);
   return React__default.createElement("div", null, planCharges == null ? void 0 : planCharges.map(function (charge) {
-    var _charge$feature5;
+    var _charge$feature5, _charge$feature6;
 
     var billableFeature = billableFeatures.find(function (x) {
       var _charge$feature4;
@@ -12687,6 +12703,7 @@ function CheckoutChargeList(_ref2) {
       charge: charge,
       setBillableFeature: setBillableFeature,
       billableFeature: billableFeature,
+      isValid: chargesValidation[((_charge$feature6 = charge.feature) == null ? void 0 : _charge$feature6.featureId) || 'base-charge'],
       onValidationChange: function onValidationChange(_ref3) {
         var featureId = _ref3.featureId,
             isValid = _ref3.isValid;