@bunnyapp/components 1.5.0-beta.11.3 → 1.5.0-beta.13

package/dist/cjs/index.js

@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.5.0-beta.11.1';
+var PACKAGE_VERSION = '1.5.0-beta.12';
 var createRequestHeaders = function (token) {
     var headers = createClientDevHeaders({ token: token });
     // Add the components version header
@@ -480,7 +480,7 @@ var InvoiceQuoteView = function (_a) {
                                 color: secondaryColor,
                             }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
                             return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
-                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
                     minWidth: '750px',
                 } }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] })))] })));
 };
@@ -20855,14 +20855,14 @@ function Signup(_a) {
 
 var SubscriptionsContext = react.createContext({});
 
-var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        addonSubscriptions {\n          id\n          priceList { id }\n          plan { id }\n        }\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList {\n          id\n          periodMonths\n          name\n          plan {\n            id\n            addon\n            addonPlans { id }\n          }\n        }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        account { id }\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n        chargeReport {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n            code\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n        currentCharges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n            code\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        addonSubscriptions {\n          id\n          priceList { id }\n          plan { id }\n        }\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList {\n          id\n          periodMonths\n          name\n          plan {\n            id\n            addon\n            addonPlans { id }\n          }\n        }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        account { id }\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var response, combinedSubscriptions;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: SUBSCRIPTIONS_QUERY,
@@ -20870,8 +20870,9 @@ var getSubscriptions = function (_a) {
                         apiHost: apiHost,
                     })];
                 case 1:
-                    response = _c.sent();
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes];
+                    response = _d.sent();
+                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: common.sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
             }
         });
     });
@@ -21079,12 +21080,12 @@ var QuoteCheckout = function (_a) {
                                 removeCoupon(couponCode);
                             }
                         });
-                    } }, { children: "Remove coupon(s)" })))] }))) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+                    } }, { children: "Remove coupon(s)" })))] }))) : (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsxRuntime.jsx(antd.Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-6 ".concat(isMobile ? 'bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-w-full bunny-flex-col bunny-gap-6 ".concat(isMobile ? 'bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
             ? setMaxHeight
                 ? { maxHeight: '60vh' }
                 : {}
@@ -21227,8 +21228,7 @@ var createQuoteParams = function (quote, subscriptionQuantity, editedSubscriptio
 var canShowChangeQuantities = function (_a) {
     var subscriptions = _a.subscriptions;
     return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        var _a;
-        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.some(function (charge) {
+        return subscription.charges.some(function (charge) {
             return canShowQuantitiesInput(charge, subscription);
         });
     });
@@ -21307,10 +21307,6 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
         ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals))
         : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
 };
-// Create an id using the charge id and the subscription id
-var getUpdatingChargeQuantityId = function (charge, subscription) {
-    return "".concat(charge.priceListChargeId, "-").concat(subscription.id);
-};
 
 var QUOTE_CHARGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n        quote {\n          ...QuoteFields\n        }\n      }\n      id\n    }\n  }\n}\n\n");
 var quoteChargeCreate = function (_a) {
@@ -21377,9 +21373,6 @@ var useQuoteChangeUpdate = function () {
                 case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", apiHost, token, { charges: charges, id: quoteChangeId })];
                 case 1:
                     response = _a.sent();
-                    if (response.errors) {
-                        throw new Error(response.errors[0].message);
-                    }
                     return [2 /*return*/, response];
             }
         });
@@ -21415,7 +21408,7 @@ var formatDateForApi = function (date) {
     return date.format('YYYY-MM-DD');
 };
 var QuantityInput = function (_a) {
-    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId, setErrorUpdatingQuantity = _a.setErrorUpdatingQuantity;
+    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
@@ -21430,8 +21423,7 @@ var QuantityInput = function (_a) {
     var quantityDisabled = 
     // If we are editing a quote, we disable the quantity input
     // If we don't have a editedSubscription, we disable the quantity input
-    (updatingChargeQuantityId &&
-        updatingChargeQuantityId !== getUpdatingChargeQuantityId(charge, subscription)) ||
+    (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
         // If the subscription is not self-service, we disable the quantity input
         !charge.selfServiceQuantity;
     var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? '' : editedSubscription.quantity;
@@ -21457,8 +21449,8 @@ var QuantityInput = function (_a) {
         },
     }).mutate;
     var createQuote = reactQuery.useMutation({
-        mutationFn: function (subscriptionId) {
-            return createSubscriptionQuote([subscriptionId], apiHost, token);
+        mutationFn: function (subscriptionIds) {
+            return createSubscriptionQuote(subscriptionIds, apiHost, token);
         },
         onSuccess: function (subscriptionUpdateData) {
             var _a, _b;
@@ -21498,10 +21490,6 @@ var QuantityInput = function (_a) {
                     token: token,
                 }),
             });
-            setErrorUpdatingQuantity(false);
-        },
-        onError: function () {
-            setErrorUpdatingQuantity(true);
         },
     });
     // Handlers
@@ -21518,18 +21506,12 @@ var QuantityInput = function (_a) {
             quantity: quantity,
             subscription: subscription,
         });
-        if (quantity === charge.quantity) {
-            setEditingQuoteData(undefined);
-            showErrorNotification('New quantity cannot be the same as current');
+        if (quantity !== undefined && quantity !== charge.quantity) {
+            setUpdatingChargeQuantityId(charge.id);
         }
         else {
-            if (quantity !== undefined && quantity !== charge.quantity) {
-                if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
-                    showErrorNotification('Charge ID is not found');
-                    return;
-                }
-                setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge, subscription));
-            }
+            setUpdatingChargeQuantityId(undefined);
+            setEditingQuoteData(undefined);
         }
     };
     var handleSubscriptionUpdate = function (editedSubscription) {
@@ -21537,17 +21519,31 @@ var QuantityInput = function (_a) {
             return;
         // If we are not editing a quote, we create a new one
         if (!editingQuote) {
-            createQuote.mutate(editedSubscription.subscription.id);
+            var subscriptionIds = [];
+            var charge_1 = subscriptions[editedSubscription.subscriptionIndex].charges[editedSubscription.chargeIndex];
+            if (isQuantityLowerThanOriginal(charge_1.quantity)) {
+                // If the quantity is lower than the original, we remove the quote
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+                return;
+            }
+            subscriptionIds.push(editedSubscription.subscription.id);
+            createQuote.mutate(subscriptionIds);
         }
         else {
             // If we are editing a quote, we update the quote change
             var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
-            if (quoteChange && charges.length > 0) {
+            if (quoteChange && charges.length > 0 && charges[0].quantity > 0) {
                 updateQuote.mutate({
                     charges: charges,
                     quoteChangeId: quoteChange.id,
                 });
             }
+            else {
+                // Reset the editing quote data and the updating charge quantity ID to their initial states
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+            }
         }
     };
     // Initial subscription quantity if is on mobile
@@ -21576,8 +21572,13 @@ var QuantityInput = function (_a) {
             handleSubscriptionUpdate(editedSubscription);
         }, 1000);
         return function () { return clearTimeout(debounce); };
+        // eslint-disable-next-line
     }, [editedSubscription]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: function (e) {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onBlur: function () {
+                if (typeof value === 'number' && value < charge.quantity) {
+                    showErrorNotification('New value is less than the original quantity. This is not allowed');
+                }
+            }, onChange: function (e) {
                 onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
             }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
 };
@@ -21585,11 +21586,11 @@ var QuantityInput = function (_a) {
 var Text$b = antd.Typography.Text;
 var QuantityChangeGridRow = function (_a) {
     var _b;
-    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId, setErrorUpdatingQuantity = _a.setErrorUpdatingQuantity;
+    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     if (!canShowQuantitiesInput(subscriptionCharge, subscription))
         return null;
     var brandColor = react.useContext(BrandContext).brandColor;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium  bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium  bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$b, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 
 var QuantityChangeGridTitle = function (_a) {
@@ -21598,10 +21599,11 @@ var QuantityChangeGridTitle = function (_a) {
 };
 
 var QuoteChangeSummarySection = function (_a) {
-    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, errorUpdatingQuantity = _a.errorUpdatingQuantity;
+    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData;
     var apiHost = react.useContext(BunnyContext).apiHost;
     var isMobile = common.useIsMobile();
     var token = useToken();
+    // const apiHost = getApiHost();
     var showSuccessNotification = common.useSuccessNotification();
     var trialUpgradeMutation = reactQuery.useMutation({
         mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token, apiHost: apiHost }); },
@@ -21612,7 +21614,7 @@ var QuoteChangeSummarySection = function (_a) {
     });
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [editingQuote && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-mb-8" }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2" }, { children: "TOTAL" })), jsxRuntime.jsx("div", __assign({ className: "bunny-text-right ".concat(isMobile ? 'bunny-text-2xl' : 'bunny-text-xl') }, { children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') }))] }))), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-end ".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
                         ? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
-                        : openCheckout, disabled: !editingQuoteData || !editingQuote || errorUpdatingQuantity, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' })) }))] })));
+                        : openCheckout, disabled: !editingQuoteData || !editingQuote, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' })) }))] })));
 };
 
 var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
@@ -21620,7 +21622,6 @@ var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change wi
 var QuantityChangeDrawerDesktop = function (_a) {
     var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     var _b = react.useState(open), openLocal = _b[0], setOpenLocal = _b[1];
-    var _c = react.useState(false), errorUpdatingQuantity = _c[0], setErrorUpdatingQuantity = _c[1];
     var isMobile = common.useIsMobile();
     react.useEffect(function () {
         var timeoutId;
@@ -21656,17 +21657,17 @@ var QuantityChangeDrawerDesktop = function (_a) {
                     rowGap: '0.25rem',
                     columnGap: '1rem',
                 } }, { children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsxRuntime.jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full" }), subscriptions.map(function (subscription, index) {
-                        var _a, _b;
+                        var _a;
                         var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
-                        return (jsxRuntime.jsx("div", __assign({ className: "bunny-contents" }, { children: (_b = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _b === void 0 ? void 0 : _b.map(function (charge, chargeIndex) {
+                        return (jsxRuntime.jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
                                 var _a;
                                 if ((isTrial && !charge.trial) ||
                                     (!isTrial && charge.trial) ||
                                     ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
                                     return null;
-                                return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
+                                return (jsxRuntime.jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }, chargeIndex));
                             }) }), index));
-                    })] })), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData, errorUpdatingQuantity: errorUpdatingQuantity })] })));
+                    })] })), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
 };
 
 var QuantityDrawerContainer = function (_a) {
@@ -22256,7 +22257,7 @@ var ADDON_CARD_COLUMNS = [
     },
 ];
 var SubscriptionCardDesktop = function (_a) {
-    var _b, _c;
+    var _b;
     var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription, isAddon = _a.isAddon;
     var shadow = react.useContext(SubscriptionsContext).shadow;
     // Derived state
@@ -22269,21 +22270,21 @@ var SubscriptionCardDesktop = function (_a) {
                 } }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
                     gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(' '),
                     rowGap: '0.75rem',
-                } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), (_c = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _c === void 0 ? void 0 : _c.map(function (charge, chargeIndex) {
+                } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
                         if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                             return null;
                         return (jsxRuntime.jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, subscription: subscription }, chargeIndex));
                     })] }))] })));
 };
 var SubscriptionCardDesktopRow = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
     // Context
     var apiHost = react.useContext(BunnyContext).apiHost;
     var token = useToken();
     // Derived state
     var isRamp = charge.isRamp;
-    var prevCharge = (_b = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _b === void 0 ? void 0 : _b[chargeIndex - 1];
+    var prevCharge = subscription.charges[chargeIndex - 1];
     var isFirstRampRow = chargeIndex === 0 || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) !== charge.priceListChargeId;
     var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
     // Queries
@@ -22303,15 +22304,15 @@ var SubscriptionCardDesktopRow = function (_a) {
     var isDiscount = charge.kind === common.QuoteChangeKind.DISCOUNT;
     var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
         !isDiscount &&
-        (!isTrial || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial)) &&
-        (isTrial || !(prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial));
+        (!isTrial || prevCharge.trial) &&
+        (isTrial || !prevCharge.trial);
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? '1/-1' : '1' }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? 'bunny-pl-4' : '') }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === common.ChargeType.USAGE
                         ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
                         : charge.isAmendment
-                            ? "+".concat((_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString())
-                            : (_d = charge.quantity) === null || _d === void 0 ? void 0 : _d.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
+                            ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
+                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
 function AddonSubscriptionsCards(_a) {
@@ -22352,7 +22353,7 @@ var CHARGE_COLUMNS = [
     },
 ];
 var SubscriptionCard = function (_a) {
-    var _b, _c;
+    var _b;
     var subscription = _a.subscription;
     var darkMode = react.useContext(BunnyContext).darkMode;
     // Derived state
@@ -22367,7 +22368,7 @@ var SubscriptionCard = function (_a) {
                         gridTemplateColumns: "1fr auto auto auto",
                         rowGap: '0.75rem',
                         backgroundColor: backgroundColor,
-                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), (_c = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _c === void 0 ? void 0 : _c.map(function (charge, chargeIndex) {
+                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
                             if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                                 return null;
                             var isRamp = charge.isRamp;
@@ -24011,12 +24012,12 @@ var PlanPicker = function (_a) {
                 upgradingSubscription: upgradingSubscription,
             });
         },
-        enabled: !areSubscriptionsLoading && Boolean(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id),
+        enabled: isInPreviewMode || (!areSubscriptionsLoading && Boolean(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)),
     }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
     if (!priceListChangeOptions) {
         return null;
     }
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (jsxRuntime.jsx(ErrorView, { message: "There are no plans available" })) : (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (jsxRuntime.jsx(ErrorView, { message: "There are no plans available" })) : (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions })) }));
 };
 
 var Text$1 = antd.Typography.Text;
@@ -24028,8 +24029,14 @@ var PreviewModeAdvisary = function (_a) {
 };
 
 var UpgradeWrapper = function (_a) {
-    var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors, upgradingSubscription = _a.upgradingSubscription;
-    return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: { upgradingSubscription: upgradingSubscription, setUpgradingSubscription: function () { }, isInPreviewMode: false } }, { children: jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(Upgrade, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors }) }) })));
+    var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors, upgradingSubscription = _a.upgradingSubscription, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, className = _a.className;
+    return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
+            upgradingSubscription: upgradingSubscription,
+            setUpgradingSubscription: function () { },
+            isInPreviewMode: isInPreviewMode,
+            productId: productId,
+            className: className,
+        } }, { children: jsxRuntime.jsx(QuoteProvider, { children: jsxRuntime.jsx(Upgrade, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors }) }) })));
 };
 var Upgrade = function (_a) {
     var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
@@ -24110,7 +24117,7 @@ var Subscriptions = function (_a) {
     // Context
     var token = useToken();
     var apiHost = react.useContext(BunnyContext).apiHost;
-    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired, upgradingSubscription = _b.upgradingSubscription;
+    var _b = react.useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired, upgradingSubscription = _b.upgradingSubscription, productId = _b.productId;
     // Local state
     var _c = react.useState(true), hideExpiredState = _c[0], setHideExpiredState = _c[1];
     var _d = react.useState(false), expiredSwitchVisible = _d[0], setExpiredSwitchVisible = _d[1];
@@ -24169,7 +24176,7 @@ var Subscriptions = function (_a) {
             ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.CANCELED;
     });
     react.useEffect(function () {
-        if (allSubscriptionsExpired && subscriptions && subscriptions.length > 0) {
+        if (allSubscriptionsExpired && subscriptions.length > 0) {
             setHideExpiredState(false);
         }
         else {
@@ -24177,7 +24184,7 @@ var Subscriptions = function (_a) {
         }
     }, [allSubscriptionsExpired, subscriptions, isChangingPlan]);
     react.useEffect(function () {
-        if (hasExpiredOrCanceledSubscriptions && subscriptions && subscriptions.length > 0) {
+        if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0) {
             setExpiredSwitchVisible(true);
         }
         else {
@@ -24185,11 +24192,11 @@ var Subscriptions = function (_a) {
         }
     }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
     if (isChangingPlan || isInPreviewMode) {
-        return (jsxRuntime.jsx(UpgradeWrapper, { onChangePlanCancel: function () {
+        return (jsxRuntime.jsx(UpgradeWrapper, { isInPreviewMode: isInPreviewMode, productId: productId !== null && productId !== void 0 ? productId : undefined, onChangePlanCancel: function () {
                 setIsChangingPlan(false);
-            }, handlePortalErrors: handlePortalErrors, upgradingSubscription: upgradingSubscription }));
+            }, handlePortalErrors: handlePortalErrors, upgradingSubscription: upgradingSubscription, className: className }));
     }
-    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState })) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [], subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] }) }))), jsxRuntime.jsx(QuantityDrawerContainer, { subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [], quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState })) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityDrawerContainer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;

package/dist/cjs/src/components/PaymentForm/hooks/useHasActiveSubscription.d.ts

@@ -1,5 +1,5 @@
 declare function useHasActiveSubscription({ token, apiHost, }: {
     token: string;
     apiHost: string;
-}): boolean | undefined;
+}): any;
 export default useHasActiveSubscription;

package/dist/cjs/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,7 +1,10 @@
 import { Subscription } from '@bunnyapp/common';
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, isInPreviewMode, productId, className, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: ((error: any) => void) | undefined;
     upgradingSubscription?: Subscription | undefined;
+    isInPreviewMode: boolean;
+    productId: string | undefined;
+    className?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default UpgradeWrapper;

package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts

@@ -1,13 +1,13 @@
 import { Quote, Subscription, SubscriptionCharge } from '@bunnyapp/common';
-declare const QuantityChangeGridRow: ({ chargeIndex, editingQuote, subscriptionIndex, setEditingQuoteData, subscription, subscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }: {
+declare const QuantityChangeGridRow: ({ chargeIndex, editingQuote, subscriptions, subscriptionIndex, setEditingQuoteData, subscription, subscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, }: {
     chargeIndex: number;
     editingQuote?: Quote | undefined;
+    subscriptions: Subscription[];
     subscriptionIndex: number;
     setEditingQuoteData: (value: any) => void;
     subscription: Subscription;
     subscriptionCharge: SubscriptionCharge;
     setUpdatingChargeQuantityId: (updatingChargeQuantityId: string | undefined) => void;
     updatingChargeQuantityId: string | undefined;
-    setErrorUpdatingQuantity: (errorUpdatingQuantity: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default QuantityChangeGridRow;

package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts

@@ -6,7 +6,7 @@ export type EditingSubscriptionType = {
     subscription: Subscription;
     subscriptionIndex: number;
 };
-declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuoteData, subscription, subscriptionIndex, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }: {
+declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuoteData, subscription, subscriptionIndex, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }: {
     charge: SubscriptionCharge;
     chargeIndex: number;
     editingQuote?: Quote | undefined;
@@ -16,8 +16,8 @@ declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuo
     } | undefined) => void;
     subscription: Subscription;
     subscriptionIndex: number;
+    subscriptions: Subscription[];
     setUpdatingChargeQuantityId: (updatingChargeQuantityId: string | undefined) => void;
     updatingChargeQuantityId: string | undefined;
-    setErrorUpdatingQuantity: (errorUpdatingQuantity: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default QuantityInput;

package/dist/cjs/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts

@@ -1,10 +1,9 @@
 import { Quote } from '@bunnyapp/common';
 import { EditingQuoteDataType } from '../SubscriptionsListContainer';
-declare const QuoteChangeSummarySection: ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }: {
+declare const QuoteChangeSummarySection: ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, }: {
     editingQuote?: Quote | undefined;
     editingQuoteData?: EditingQuoteDataType | undefined;
     openCheckout: () => void;
     setEditingQuoteData: (editingQuoteData: EditingQuoteDataType | undefined) => void;
-    errorUpdatingQuantity: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default QuoteChangeSummarySection;

package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts

@@ -25,4 +25,3 @@ export declare const isDiscount: (kind?: QuoteChangeKind) => boolean;
 export declare const hasPriceTiers: (charge: SubscriptionCharge) => boolean;
 export declare const hasMultiplePriceTiers: (charge: SubscriptionCharge) => boolean;
 export declare const getApplicablePriceTier: (charge: SubscriptionCharge, currencyId: string, priceDecimals: number) => string;
-export declare const getUpdatingChargeQuantityId: (charge: SubscriptionCharge, subscription: Subscription) => string;

package/dist/cjs/src/graphql/QuoteRequests.d.ts

@@ -8,7 +8,7 @@ export declare const useCreateSubscriptionQuote: () => (subscriptionIds: string[
 export declare const useQuoteChangeUpdate: () => (charges: {
     id: string;
     quantity: number;
-}[], quoteChangeId: string, apiHost: string, token?: string) => Promise<any>;
+}[], quoteChangeId: string, apiHost: string, token?: string) => Promise<unknown>;
 export declare const useQuoteDelete: () => (quoteId: string, apiHost: string, token?: string) => Promise<unknown>;
 export declare const quoteSubscriptionAddon: ({ subscriptionId, priceListId, apiHost, token, }: {
     subscriptionId: string;

package/dist/cjs/src/graphql/queries/getSubscriptions.d.ts

@@ -1,7 +1,6 @@
-import { Subscription } from '@bunnyapp/common';
 declare const getSubscriptions: ({ apiHost, isInPreviewMode, token, }: {
     apiHost: string;
     isInPreviewMode?: boolean | undefined;
     token?: string | undefined;
-}) => Promise<Subscription[]>;
+}) => Promise<any>;
 export default getSubscriptions;

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { Markup } from 'interweave';
 import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined, InfoCircleOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, request as request$1, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, SubscriptionState, QuoteChangeKind, getAccount, PricingModel, BillingPeriod, MODAL_MAX_HEIGHT, DataInterval, ChargeType, StringUtils, PERIOD_LABELS, PricingStyle, SLATE_100 } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, request as request$1, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, SubscriptionState, QuoteChangeKind, getAccount, PricingModel, BillingPeriod, MODAL_MAX_HEIGHT, DataInterval, ChargeType, StringUtils, PERIOD_LABELS, PricingStyle, SLATE_100 } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
@@ -143,7 +143,7 @@ var BrandContext = createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.5.0-beta.11.1';
+var PACKAGE_VERSION = '1.5.0-beta.12';
 var createRequestHeaders = function (token) {
     var headers = createClientDevHeaders({ token: token });
     // Add the components version header
@@ -469,7 +469,7 @@ var InvoiceQuoteView = function (_a) {
                                 color: secondaryColor,
                             }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
                             return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
-                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
                     minWidth: '750px',
                 } }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] })))] })));
 };
@@ -20844,14 +20844,14 @@ function Signup(_a) {
 
 var SubscriptionsContext = createContext({});
 
-var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        addonSubscriptions {\n          id\n          priceList { id }\n          plan { id }\n        }\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList {\n          id\n          periodMonths\n          name\n          plan {\n            id\n            addon\n            addonPlans { id }\n          }\n        }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        account { id }\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n        chargeReport {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n            code\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n        currentCharges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n            code\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        addonSubscriptions {\n          id\n          priceList { id }\n          plan { id }\n        }\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList {\n          id\n          periodMonths\n          name\n          plan {\n            id\n            addon\n            addonPlans { id }\n          }\n        }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        account { id }\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
+        var response, combinedSubscriptions;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
                         isInPreviewMode: isInPreviewMode,
                         query: SUBSCRIPTIONS_QUERY,
@@ -20859,8 +20859,9 @@ var getSubscriptions = function (_a) {
                         apiHost: apiHost,
                     })];
                 case 1:
-                    response = _c.sent();
-                    return [2 /*return*/, (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes];
+                    response = _d.sent();
+                    combinedSubscriptions = (_c = (_b = response === null || response === void 0 ? void 0 : response.subscriptions) === null || _b === void 0 ? void 0 : _b.nodes) === null || _c === void 0 ? void 0 : _c.map(function (subscription) { return (__assign(__assign({}, subscription), { charges: sortSubscriptionCharges(subscription.charges) })); });
+                    return [2 /*return*/, combinedSubscriptions];
             }
         });
     });
@@ -21068,12 +21069,12 @@ var QuoteCheckout = function (_a) {
                                 removeCoupon(couponCode);
                             }
                         });
-                    } }, { children: "Remove coupon(s)" })))] }))) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
+                    } }, { children: "Remove coupon(s)" })))] }))) : (jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(isMobile ? 'bunny-shadow-padding-x' : '') }, { children: [jsx(Button, __assign({ onClick: handleCheckoutNoPayment, type: "primary" }, { children: isSaving ? 'Processing...' : 'Complete order' })), jsx("div", __assign({ className: "bunny-text-xs bunny-text-slate-500" }, { children: "No payment is required" }))] })) }))) }));
 };
 var PaymentFormWrapper = function (_a) {
     var children = _a.children, setMaxHeight = _a.setMaxHeight, className = _a.className;
     var isMobile = useIsMobile();
-    return (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-6 ".concat(isMobile ? 'bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
+    return (jsx("div", __assign({ className: "bunny-flex bunny-w-full bunny-flex-col bunny-gap-6 ".concat(isMobile ? 'bunny-shadow-padding-xb' : '', " ").concat(className), style: __assign({}, (isMobile
             ? setMaxHeight
                 ? { maxHeight: '60vh' }
                 : {}
@@ -21216,8 +21217,7 @@ var createQuoteParams = function (quote, subscriptionQuantity, editedSubscriptio
 var canShowChangeQuantities = function (_a) {
     var subscriptions = _a.subscriptions;
     return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        var _a;
-        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.some(function (charge) {
+        return subscription.charges.some(function (charge) {
             return canShowQuantitiesInput(charge, subscription);
         });
     });
@@ -21296,10 +21296,6 @@ var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
         ? "".concat(starts, "-").concat(ends, ": ").concat(formatCurrency(selectedTier.price, currencyId, priceDecimals))
         : "".concat(formatCurrency(selectedTier.price, currencyId, priceDecimals));
 };
-// Create an id using the charge id and the subscription id
-var getUpdatingChargeQuantityId = function (charge, subscription) {
-    return "".concat(charge.priceListChargeId, "-").concat(subscription.id);
-};
 
 var QUOTE_CHARGE_CREATE = "\n".concat(QUOTE_FIELDS(), "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n        quote {\n          ...QuoteFields\n        }\n      }\n      id\n    }\n  }\n}\n\n");
 var quoteChargeCreate = function (_a) {
@@ -21366,9 +21362,6 @@ var useQuoteChangeUpdate = function () {
                 case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", apiHost, token, { charges: charges, id: quoteChangeId })];
                 case 1:
                     response = _a.sent();
-                    if (response.errors) {
-                        throw new Error(response.errors[0].message);
-                    }
                     return [2 /*return*/, response];
             }
         });
@@ -21404,7 +21397,7 @@ var formatDateForApi = function (date) {
     return date.format('YYYY-MM-DD');
 };
 var QuantityInput = function (_a) {
-    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId, setErrorUpdatingQuantity = _a.setErrorUpdatingQuantity;
+    var charge = _a.charge, chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionIndex = _a.subscriptionIndex, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     // Context
     var token = useToken();
     var apiHost = useContext(BunnyContext).apiHost;
@@ -21419,8 +21412,7 @@ var QuantityInput = function (_a) {
     var quantityDisabled = 
     // If we are editing a quote, we disable the quantity input
     // If we don't have a editedSubscription, we disable the quantity input
-    (updatingChargeQuantityId &&
-        updatingChargeQuantityId !== getUpdatingChargeQuantityId(charge, subscription)) ||
+    (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
         // If the subscription is not self-service, we disable the quantity input
         !charge.selfServiceQuantity;
     var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? '' : editedSubscription.quantity;
@@ -21446,8 +21438,8 @@ var QuantityInput = function (_a) {
         },
     }).mutate;
     var createQuote = useMutation({
-        mutationFn: function (subscriptionId) {
-            return createSubscriptionQuote([subscriptionId], apiHost, token);
+        mutationFn: function (subscriptionIds) {
+            return createSubscriptionQuote(subscriptionIds, apiHost, token);
         },
         onSuccess: function (subscriptionUpdateData) {
             var _a, _b;
@@ -21487,10 +21479,6 @@ var QuantityInput = function (_a) {
                     token: token,
                 }),
             });
-            setErrorUpdatingQuantity(false);
-        },
-        onError: function () {
-            setErrorUpdatingQuantity(true);
         },
     });
     // Handlers
@@ -21507,18 +21495,12 @@ var QuantityInput = function (_a) {
             quantity: quantity,
             subscription: subscription,
         });
-        if (quantity === charge.quantity) {
-            setEditingQuoteData(undefined);
-            showErrorNotification('New quantity cannot be the same as current');
+        if (quantity !== undefined && quantity !== charge.quantity) {
+            setUpdatingChargeQuantityId(charge.id);
         }
         else {
-            if (quantity !== undefined && quantity !== charge.quantity) {
-                if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
-                    showErrorNotification('Charge ID is not found');
-                    return;
-                }
-                setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge, subscription));
-            }
+            setUpdatingChargeQuantityId(undefined);
+            setEditingQuoteData(undefined);
         }
     };
     var handleSubscriptionUpdate = function (editedSubscription) {
@@ -21526,17 +21508,31 @@ var QuantityInput = function (_a) {
             return;
         // If we are not editing a quote, we create a new one
         if (!editingQuote) {
-            createQuote.mutate(editedSubscription.subscription.id);
+            var subscriptionIds = [];
+            var charge_1 = subscriptions[editedSubscription.subscriptionIndex].charges[editedSubscription.chargeIndex];
+            if (isQuantityLowerThanOriginal(charge_1.quantity)) {
+                // If the quantity is lower than the original, we remove the quote
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+                return;
+            }
+            subscriptionIds.push(editedSubscription.subscription.id);
+            createQuote.mutate(subscriptionIds);
         }
         else {
             // If we are editing a quote, we update the quote change
             var _a = createQuoteParams(editingQuote, charge.quantity, editedSubscription), charges = _a.charges, quoteChange = _a.quoteChange;
-            if (quoteChange && charges.length > 0) {
+            if (quoteChange && charges.length > 0 && charges[0].quantity > 0) {
                 updateQuote.mutate({
                     charges: charges,
                     quoteChangeId: quoteChange.id,
                 });
             }
+            else {
+                // Reset the editing quote data and the updating charge quantity ID to their initial states
+                setEditingQuoteData(undefined);
+                setUpdatingChargeQuantityId(undefined);
+            }
         }
     };
     // Initial subscription quantity if is on mobile
@@ -21565,8 +21561,13 @@ var QuantityInput = function (_a) {
             handleSubscriptionUpdate(editedSubscription);
         }, 1000);
         return function () { return clearTimeout(debounce); };
+        // eslint-disable-next-line
     }, [editedSubscription]);
-    return (jsx(Fragment, { children: jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: function (e) {
+    return (jsx(Fragment, { children: jsx(Input, { className: "bunny-text-right", disabled: quantityDisabled, onBlur: function () {
+                if (typeof value === 'number' && value < charge.quantity) {
+                    showErrorNotification('New value is less than the original quantity. This is not allowed');
+                }
+            }, onChange: function (e) {
                 onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
             }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
 };
@@ -21574,11 +21575,11 @@ var QuantityInput = function (_a) {
 var Text$b = Typography.Text;
 var QuantityChangeGridRow = function (_a) {
     var _b;
-    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId, setErrorUpdatingQuantity = _a.setErrorUpdatingQuantity;
+    var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     if (!canShowQuantitiesInput(subscriptionCharge, subscription))
         return null;
     var brandColor = useContext(BrandContext).brandColor;
-    return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-font-medium  bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsx(Text$b, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx(Text$b, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsx("div", {})] })), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
+    return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-font-medium  bunny-col-span-full", style: { fontSize: '11px', color: brandColor } }, { children: subscription.plan.name })), jsx(Text$b, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsx(Text$b, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }), jsx("div", {})] })), jsx(Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 
 var QuantityChangeGridTitle = function (_a) {
@@ -21587,10 +21588,11 @@ var QuantityChangeGridTitle = function (_a) {
 };
 
 var QuoteChangeSummarySection = function (_a) {
-    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, errorUpdatingQuantity = _a.errorUpdatingQuantity;
+    var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData;
     var apiHost = useContext(BunnyContext).apiHost;
     var isMobile = useIsMobile();
     var token = useToken();
+    // const apiHost = getApiHost();
     var showSuccessNotification = useSuccessNotification();
     var trialUpgradeMutation = useMutation({
         mutationFn: function (quoteId) { return checkout({ quoteId: quoteId, token: token, apiHost: apiHost }); },
@@ -21601,7 +21603,7 @@ var QuoteChangeSummarySection = function (_a) {
     });
     return (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [editingQuote && (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-mb-8" }, { children: [jsx("div", __assign({ className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2" }, { children: "TOTAL" })), jsx("div", __assign({ className: "bunny-text-right ".concat(isMobile ? 'bunny-text-2xl' : 'bunny-text-xl') }, { children: formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') }))] }))), jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-end ".concat(isMobile ? 'bunny-w-full' : '') }, { children: jsx(Button, __assign({ className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
                         ? function () { return trialUpgradeMutation.mutate(editingQuoteData.id); }
-                        : openCheckout, disabled: !editingQuoteData || !editingQuote || errorUpdatingQuantity, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' })) }))] })));
+                        : openCheckout, disabled: !editingQuoteData || !editingQuote, size: isMobile ? 'large' : 'middle', type: "primary" }, { children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' })) }))] })));
 };
 
 var QUANTITY_CHANGE_HEADER_TITLE = 'Update unit quantity';
@@ -21609,7 +21611,6 @@ var QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change wi
 var QuantityChangeDrawerDesktop = function (_a) {
     var editingQuote = _a.editingQuote, editingQuoteData = _a.editingQuoteData, onClose = _a.onClose, open = _a.open, openCheckout = _a.openCheckout, setEditingQuoteData = _a.setEditingQuoteData, subscriptions = _a.subscriptions, setUpdatingChargeQuantityId = _a.setUpdatingChargeQuantityId, updatingChargeQuantityId = _a.updatingChargeQuantityId;
     var _b = useState(open), openLocal = _b[0], setOpenLocal = _b[1];
-    var _c = useState(false), errorUpdatingQuantity = _c[0], setErrorUpdatingQuantity = _c[1];
     var isMobile = useIsMobile();
     useEffect(function () {
         var timeoutId;
@@ -21645,17 +21646,17 @@ var QuantityChangeDrawerDesktop = function (_a) {
                     rowGap: '0.25rem',
                     columnGap: '1rem',
                 } }, { children: [jsx(QuantityChangeGridTitle, { children: "ACTIVE SUBSCRIPTIONS" }), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "CURRENT QUANTITY" })), jsx(QuantityChangeGridTitle, __assign({ right: true }, { children: "NEW QUANTITY" })), jsx(Divider, { className: "bunny-col-span-full" }), subscriptions.map(function (subscription, index) {
-                        var _a, _b;
+                        var _a;
                         var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState.TRIAL;
-                        return (jsx("div", __assign({ className: "bunny-contents" }, { children: (_b = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _b === void 0 ? void 0 : _b.map(function (charge, chargeIndex) {
+                        return (jsx("div", __assign({ className: "bunny-contents" }, { children: subscription.charges.map(function (charge, chargeIndex) {
                                 var _a;
                                 if ((isTrial && !charge.trial) ||
                                     (!isTrial && charge.trial) ||
                                     ((_a = charge.chargeType) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === 'USAGE')
                                     return null;
-                                return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
+                                return (jsx(QuantityChangeGridRow, { chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, subscriptionIndex: index, subscriptions: subscriptions, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId }, chargeIndex));
                             }) }), index));
-                    })] })), jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData, errorUpdatingQuantity: errorUpdatingQuantity })] })));
+                    })] })), jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData })] })));
 };
 
 var QuantityDrawerContainer = function (_a) {
@@ -22245,7 +22246,7 @@ var ADDON_CARD_COLUMNS = [
     },
 ];
 var SubscriptionCardDesktop = function (_a) {
-    var _b, _c;
+    var _b;
     var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, subscription = _a.subscription, isAddon = _a.isAddon;
     var shadow = useContext(SubscriptionsContext).shadow;
     // Derived state
@@ -22258,21 +22259,21 @@ var SubscriptionCardDesktop = function (_a) {
                 } }), jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
                     gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(' '),
                     rowGap: '0.75rem',
-                } }, { children: [jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), (_c = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _c === void 0 ? void 0 : _c.map(function (charge, chargeIndex) {
+                } }, { children: [jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
                         if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                             return null;
                         return (jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, subscription: subscription }, chargeIndex));
                     })] }))] })));
 };
 var SubscriptionCardDesktopRow = function (_a) {
-    var _b, _c, _d;
+    var _b, _c;
     var charge = _a.charge, chargeIndex = _a.chargeIndex, subscription = _a.subscription;
     // Context
     var apiHost = useContext(BunnyContext).apiHost;
     var token = useToken();
     // Derived state
     var isRamp = charge.isRamp;
-    var prevCharge = (_b = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _b === void 0 ? void 0 : _b[chargeIndex - 1];
+    var prevCharge = subscription.charges[chargeIndex - 1];
     var isFirstRampRow = chargeIndex === 0 || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) !== charge.priceListChargeId;
     var chargePeriod = "".concat(formatDate(charge.startDate), " - ").concat(formatDate(charge.endDate));
     // Queries
@@ -22292,15 +22293,15 @@ var SubscriptionCardDesktopRow = function (_a) {
     var isDiscount = charge.kind === QuoteChangeKind.DISCOUNT;
     var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId) === charge.priceListChargeId &&
         !isDiscount &&
-        (!isTrial || (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial)) &&
-        (isTrial || !(prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.trial));
+        (!isTrial || prevCharge.trial) &&
+        (isTrial || !prevCharge.trial);
     return (jsxs("div", __assign({ className: "bunny-contents" }, { children: [(isRampFirstRow || !isRamp) && (jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? '1/-1' : '1' }, { children: jsx("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2 ".concat(isDiscount ? 'bunny-pl-4' : '') }, { children: jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName) ? charge.name : '' }) })) }))), jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsx("div", { children: chargePeriod }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === QuoteChangeKind.DISCOUNT
                     ? ''
                     : charge.chargeType === ChargeType.USAGE
                         ? data && jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
                         : charge.isAmendment
-                            ? "+".concat((_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString())
-                            : (_d = charge.quantity) === null || _d === void 0 ? void 0 : _d.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
+                            ? "+".concat((_b = charge.quantity) === null || _b === void 0 ? void 0 : _b.toLocaleString())
+                            : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
 function AddonSubscriptionsCards(_a) {
@@ -22341,7 +22342,7 @@ var CHARGE_COLUMNS = [
     },
 ];
 var SubscriptionCard = function (_a) {
-    var _b, _c;
+    var _b;
     var subscription = _a.subscription;
     var darkMode = useContext(BunnyContext).darkMode;
     // Derived state
@@ -22356,7 +22357,7 @@ var SubscriptionCard = function (_a) {
                         gridTemplateColumns: "1fr auto auto auto",
                         rowGap: '0.75rem',
                         backgroundColor: backgroundColor,
-                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), (_c = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _c === void 0 ? void 0 : _c.map(function (charge, chargeIndex) {
+                    } }, { children: [CHARGE_COLUMNS.map(function (subscriptionColumn, index) { return (jsx(SubscriptionCardCellMobile, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: '11px' } }, { children: subscriptionColumn.title }), index)); }), subscription.charges.map(function (charge, chargeIndex) {
                             if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                                 return null;
                             var isRamp = charge.isRamp;
@@ -24000,12 +24001,12 @@ var PlanPicker = function (_a) {
                 upgradingSubscription: upgradingSubscription,
             });
         },
-        enabled: !areSubscriptionsLoading && Boolean(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id),
+        enabled: isInPreviewMode || (!areSubscriptionsLoading && Boolean(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)),
     }), priceListChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
     if (!priceListChangeOptions) {
         return null;
     }
-    return (jsx(Fragment, { children: ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (jsx(ErrorView, { message: "There are no plans available" })) : (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] })) }));
+    return (jsx(Fragment, { children: ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.length) === 0 ? (jsx(ErrorView, { message: "There are no plans available" })) : (jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions })) }));
 };
 
 var Text$1 = Typography.Text;
@@ -24017,8 +24018,14 @@ var PreviewModeAdvisary = function (_a) {
 };
 
 var UpgradeWrapper = function (_a) {
-    var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors, upgradingSubscription = _a.upgradingSubscription;
-    return (jsx(SubscriptionsContext.Provider, __assign({ value: { upgradingSubscription: upgradingSubscription, setUpgradingSubscription: function () { }, isInPreviewMode: false } }, { children: jsx(QuoteProvider, { children: jsx(Upgrade, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors }) }) })));
+    var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors, upgradingSubscription = _a.upgradingSubscription, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, className = _a.className;
+    return (jsx(SubscriptionsContext.Provider, __assign({ value: {
+            upgradingSubscription: upgradingSubscription,
+            setUpgradingSubscription: function () { },
+            isInPreviewMode: isInPreviewMode,
+            productId: productId,
+            className: className,
+        } }, { children: jsx(QuoteProvider, { children: jsx(Upgrade, { onChangePlanCancel: onChangePlanCancel, handlePortalErrors: handlePortalErrors }) }) })));
 };
 var Upgrade = function (_a) {
     var onChangePlanCancel = _a.onChangePlanCancel, handlePortalErrors = _a.handlePortalErrors;
@@ -24099,7 +24106,7 @@ var Subscriptions = function (_a) {
     // Context
     var token = useToken();
     var apiHost = useContext(BunnyContext).apiHost;
-    var _b = useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired, upgradingSubscription = _b.upgradingSubscription;
+    var _b = useContext(SubscriptionsContext), setUpgradingSubscription = _b.setUpgradingSubscription, className = _b.className, isInPreviewMode = _b.isInPreviewMode, hideExpiredOverride = _b.hideExpired, upgradingSubscription = _b.upgradingSubscription, productId = _b.productId;
     // Local state
     var _c = useState(true), hideExpiredState = _c[0], setHideExpiredState = _c[1];
     var _d = useState(false), expiredSwitchVisible = _d[0], setExpiredSwitchVisible = _d[1];
@@ -24158,7 +24165,7 @@ var Subscriptions = function (_a) {
             ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === SubscriptionState.CANCELED;
     });
     useEffect(function () {
-        if (allSubscriptionsExpired && subscriptions && subscriptions.length > 0) {
+        if (allSubscriptionsExpired && subscriptions.length > 0) {
             setHideExpiredState(false);
         }
         else {
@@ -24166,7 +24173,7 @@ var Subscriptions = function (_a) {
         }
     }, [allSubscriptionsExpired, subscriptions, isChangingPlan]);
     useEffect(function () {
-        if (hasExpiredOrCanceledSubscriptions && subscriptions && subscriptions.length > 0) {
+        if (hasExpiredOrCanceledSubscriptions && subscriptions.length > 0) {
             setExpiredSwitchVisible(true);
         }
         else {
@@ -24174,11 +24181,11 @@ var Subscriptions = function (_a) {
         }
     }, [hasExpiredOrCanceledSubscriptions, subscriptions]);
     if (isChangingPlan || isInPreviewMode) {
-        return (jsx(UpgradeWrapper, { onChangePlanCancel: function () {
+        return (jsx(UpgradeWrapper, { isInPreviewMode: isInPreviewMode, productId: productId !== null && productId !== void 0 ? productId : undefined, onChangePlanCancel: function () {
                 setIsChangingPlan(false);
-            }, handlePortalErrors: handlePortalErrors, upgradingSubscription: upgradingSubscription }));
+            }, handlePortalErrors: handlePortalErrors, upgradingSubscription: upgradingSubscription, className: className }));
     }
-    return (jsxs("div", __assign({ className: className }, { children: [jsx(PageHeaderWithActions, __assign({ title: jsx(Fragment, { children: !hideExpiredToggle && isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState })) }) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [], subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [] }) }))), jsx(QuantityDrawerContainer, { subscriptions: subscriptions !== null && subscriptions !== void 0 ? subscriptions : [], quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
+    return (jsxs("div", __assign({ className: className }, { children: [jsx(PageHeaderWithActions, __assign({ title: jsx(Fragment, { children: !hideExpiredToggle && isMobile && expiredSwitchVisible && (jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState })) }) }, { children: !isMobile && (jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsx(QuantityDrawerContainer, { subscriptions: subscriptions, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setHideExpiredState: setHideExpiredState })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;

package/dist/esm/src/components/PaymentForm/hooks/useHasActiveSubscription.d.ts

@@ -1,5 +1,5 @@
 declare function useHasActiveSubscription({ token, apiHost, }: {
     token: string;
     apiHost: string;
-}): boolean | undefined;
+}): any;
 export default useHasActiveSubscription;

package/dist/esm/src/components/Subscriptions/Upgrade/Upgrade.d.ts

@@ -1,7 +1,10 @@
 import { Subscription } from '@bunnyapp/common';
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, isInPreviewMode, productId, className, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: ((error: any) => void) | undefined;
     upgradingSubscription?: Subscription | undefined;
+    isInPreviewMode: boolean;
+    productId: string | undefined;
+    className?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default UpgradeWrapper;

package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityChangeGridRow.d.ts

@@ -1,13 +1,13 @@
 import { Quote, Subscription, SubscriptionCharge } from '@bunnyapp/common';
-declare const QuantityChangeGridRow: ({ chargeIndex, editingQuote, subscriptionIndex, setEditingQuoteData, subscription, subscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }: {
+declare const QuantityChangeGridRow: ({ chargeIndex, editingQuote, subscriptions, subscriptionIndex, setEditingQuoteData, subscription, subscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, }: {
     chargeIndex: number;
     editingQuote?: Quote | undefined;
+    subscriptions: Subscription[];
     subscriptionIndex: number;
     setEditingQuoteData: (value: any) => void;
     subscription: Subscription;
     subscriptionCharge: SubscriptionCharge;
     setUpdatingChargeQuantityId: (updatingChargeQuantityId: string | undefined) => void;
     updatingChargeQuantityId: string | undefined;
-    setErrorUpdatingQuantity: (errorUpdatingQuantity: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default QuantityChangeGridRow;

package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuantityInput.d.ts

@@ -6,7 +6,7 @@ export type EditingSubscriptionType = {
     subscription: Subscription;
     subscriptionIndex: number;
 };
-declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuoteData, subscription, subscriptionIndex, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }: {
+declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuoteData, subscription, subscriptionIndex, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }: {
     charge: SubscriptionCharge;
     chargeIndex: number;
     editingQuote?: Quote | undefined;
@@ -16,8 +16,8 @@ declare const QuantityInput: ({ charge, chargeIndex, editingQuote, setEditingQuo
     } | undefined) => void;
     subscription: Subscription;
     subscriptionIndex: number;
+    subscriptions: Subscription[];
     setUpdatingChargeQuantityId: (updatingChargeQuantityId: string | undefined) => void;
     updatingChargeQuantityId: string | undefined;
-    setErrorUpdatingQuantity: (errorUpdatingQuantity: boolean) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default QuantityInput;

package/dist/esm/src/components/Subscriptions/quantityChangeDrawer/QuoteChangeSummarySection.d.ts

@@ -1,10 +1,9 @@
 import { Quote } from '@bunnyapp/common';
 import { EditingQuoteDataType } from '../SubscriptionsListContainer';
-declare const QuoteChangeSummarySection: ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }: {
+declare const QuoteChangeSummarySection: ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, }: {
     editingQuote?: Quote | undefined;
     editingQuoteData?: EditingQuoteDataType | undefined;
     openCheckout: () => void;
     setEditingQuoteData: (editingQuoteData: EditingQuoteDataType | undefined) => void;
-    errorUpdatingQuantity: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default QuoteChangeSummarySection;

package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionUtils.d.ts

@@ -25,4 +25,3 @@ export declare const isDiscount: (kind?: QuoteChangeKind) => boolean;
 export declare const hasPriceTiers: (charge: SubscriptionCharge) => boolean;
 export declare const hasMultiplePriceTiers: (charge: SubscriptionCharge) => boolean;
 export declare const getApplicablePriceTier: (charge: SubscriptionCharge, currencyId: string, priceDecimals: number) => string;
-export declare const getUpdatingChargeQuantityId: (charge: SubscriptionCharge, subscription: Subscription) => string;

package/dist/esm/src/graphql/QuoteRequests.d.ts

@@ -8,7 +8,7 @@ export declare const useCreateSubscriptionQuote: () => (subscriptionIds: string[
 export declare const useQuoteChangeUpdate: () => (charges: {
     id: string;
     quantity: number;
-}[], quoteChangeId: string, apiHost: string, token?: string) => Promise<any>;
+}[], quoteChangeId: string, apiHost: string, token?: string) => Promise<unknown>;
 export declare const useQuoteDelete: () => (quoteId: string, apiHost: string, token?: string) => Promise<unknown>;
 export declare const quoteSubscriptionAddon: ({ subscriptionId, priceListId, apiHost, token, }: {
     subscriptionId: string;

package/dist/esm/src/graphql/queries/getSubscriptions.d.ts

@@ -1,7 +1,6 @@
-import { Subscription } from '@bunnyapp/common';
 declare const getSubscriptions: ({ apiHost, isInPreviewMode, token, }: {
     apiHost: string;
     isInPreviewMode?: boolean | undefined;
     token?: string | undefined;
-}) => Promise<Subscription[]>;
+}) => Promise<any>;
 export default getSubscriptions;

package/dist/index.d.ts

@@ -192,10 +192,13 @@ declare const SubscriptionsWrapper: ({ handlePortalErrors, companyName, isInPrev
     hideExpiredToggle?: boolean | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, }: {
+declare const UpgradeWrapper: ({ onChangePlanCancel, handlePortalErrors, upgradingSubscription, isInPreviewMode, productId, className, }: {
     onChangePlanCancel: () => void;
     handlePortalErrors?: ((error: any) => void) | undefined;
     upgradingSubscription?: Subscription | undefined;
+    isInPreviewMode: boolean;
+    productId: string | undefined;
+    className?: string | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const BillingDetails: ({ className, countryListFilter, hideBillingDetailsForm, hidePaymentMethodForm, isCardEnabled, isUpgradeFromTrial, shadow, onSavePaymentMethod, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.5.0-beta.11.3",
+  "version": "1.5.0-beta.13",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",