@bunnyapp/components 1.6.0-beta.10 → 1.6.0-beta.11

package/dist/cjs/index.js

@@ -52,7 +52,7 @@ var css_248z = ":root {\n  --row-background: #ffffff;\n  --row-background-altern
 styleInject(css_248z);
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.9';
+const PACKAGE_VERSION = '1.6.0-beta.10';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -21693,814 +21693,791 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 }, children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
 }
 
+const SubscriptionsContext = react.createContext({});
+
 const { Text: Text$l } = antd.Typography;
 const DrawerHeader = ({ description, onClose, title, closeButtonClassName, }) => {
     return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2", children: [jsxRuntime.jsx(Text$l, { className: "bunny-text-xl bunny-font-normal", children: title }), onClose ? (jsxRuntime.jsx("button", { id: "closePayment", onClick: onClose, className: closeButtonClassName, children: jsxRuntime.jsx(icons.CloseOutlined, {}) })) : null] }), description && jsxRuntime.jsx("div", { className: "bunny-text-sm bunny-font-medium", children: description })] }));
 };
 
-const QUOTE_CHARGE_CREATE = `
-${QUOTE_FIELDS()}
-mutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {
-  quoteChargeCreate(
-    endDate: $endDate
-    price: $price
-    priceListChargeId: $priceListChargeId
-    quantity: $quantity
-    quoteChangeId: $quoteChangeId
-    startDate: $startDate
-    subscriptionChargeId: $subscriptionChargeId
-  ) {
-    quoteCharge {
-      quoteChange {
-        id
-        quoteId
-        quote {
-          ...QuoteFields
-        }
-      }
-      id
-    }
+const MUTATION$2 = `{
+  currentUser {
+    taxationRequiredAccountFields
   }
-}
-
-`;
-const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
+}`;
+const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
+    var _a, _b;
     const response = await gqlRequest({
-        query: QUOTE_CHARGE_CREATE,
-        vars: {
-            price,
-            priceListChargeId,
-            quantity,
-            quoteChangeId,
-            startDate,
-            subscriptionChargeId,
-        },
-        apiHost,
+        query: MUTATION$2,
         token,
+        apiHost: apiHost,
     });
-    if (response.errors) {
-        throw new Error(response.errors[0].message);
-    }
-    return response.quoteChargeCreate.quoteCharge;
+    return ((_b = (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.taxationRequiredAccountFields) === null || _b === void 0 ? void 0 : _b.length) > 0
+        ? response.currentUser.taxationRequiredAccountFields
+        : null;
 };
 
-const quoteSubscriptionUpgrade = ({ subscriptionId, priceListId, apiHost, token, }) => {
-    return gqlRequest({
-        query: `mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {
-      quoteSubscriptionUpgrade(
-        subscriptionId: $subscriptionId
-        priceListId: $priceListId
-      ) {
-        quote {
-          id
-        }
-      }
-    }`,
-        vars: { subscriptionId, priceListId },
+const useHasTaxPlugin = ({ apiHost, token, }) => {
+    const { data: plugins } = usePlugins({
         apiHost,
         token,
     });
+    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some((plugin) => plugin.type === "taxation"));
 };
-const useCreateSubscriptionQuote = () => {
-    const graphQLRequest = useGraphQLRequest();
-    return async (subscriptionIds, apiHost, token) => {
-        const data = await graphQLRequest(`
-    mutation quoteSubscriptionUpdate(
-      $subscriptionIds: [ID!]!,
-    ) {
-      quoteSubscriptionUpdate(
-        subscriptionIds: $subscriptionIds,
+
+var SubscriptionState;
+(function (SubscriptionState) {
+    SubscriptionState["ACTIVE"] = "ACTIVE";
+    SubscriptionState["TRIAL"] = "TRIAL";
+    SubscriptionState["PENDING"] = "PENDING";
+    SubscriptionState["EXPIRED"] = "EXPIRED";
+    SubscriptionState["CANCELED"] = "CANCELED";
+    SubscriptionState["TRIAL_EXPIRED"] = "TRIAL_EXPIRED";
+})(SubscriptionState || (SubscriptionState = {}));
+var SubscriptionState$1 = SubscriptionState;
+
+function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
+    var _a, _b;
+    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$1.TRIAL ||
+        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL_EXPIRED;
+    function upgradingFromFree() {
+        const totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce((acc, charge) => acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0), 0);
+        return totalPrice === 0;
+    }
+    const quoteKindIsValid = quote.kind === common.QuoteChangeKind.SUBSCRIBE ||
+        quote.kind === common.QuoteChangeKind.ADJUSTMENT ||
+        quote.kind === common.QuoteChangeKind.ACTIVATE;
+    if (quoteKindIsValid) {
+        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
+    }
+    return false;
+}
+
+const MUTATION$1 = `
+mutation accountUpdate(
+    $id: ID!,
+    $attributes: AccountAttributes!) {
+      accountUpdate(
+        id: $id,
+        attributes: $attributes
       ) {
-        quote {
+        account {
           id
-          quoteChanges {
-            id
-            priceList {
-              id
-            }
-            subscription {
-              charges {
-                startDate
-                endDate
-                id
-                priceListCharge {
-                  id
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-      `, apiHost, token, {
-            subscriptionIds,
-        });
-        return data;
-    };
-};
-const useQuoteChangeUpdate = () => {
-    const graphQLRequest = useGraphQLRequest();
-    return async (charges, quoteChangeId, apiHost, token) => {
-        const response = await graphQLRequest(`mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {
-      quoteChangeUpdate(id:$id, charges:$charges) {
-        quoteChange { id quoteId }
-        errors
-      }
-    }`, apiHost, token, { charges, id: quoteChangeId });
-        if (response.errors) {
-            throw new Error(response.errors[0].message);
+          billingCountry
+          billingState
+          billingStreet
+          billingCity
+          billingZip
+          name
         }
-        return response;
-    };
-};
-const quoteSubscriptionAddon = ({ subscriptionId, priceListId, apiHost, token, }) => {
-    return gqlRequest({
-        query: `mutation QuoteSubscriptionAddon($subscriptionId: ID!, $priceListId: ID) {
-      quoteSubscriptionAddon(subscriptionId: $subscriptionId, priceListId: $priceListId) {
         errors
-        quote {
-          id
-        }
       }
-    }`,
-        vars: {
-            subscriptionId,
-            priceListId,
-        },
-        apiHost,
+  }
+`;
+const accountUpdate = async ({ accountId, attributes, token, apiHost, }) => {
+    var _a;
+    const vars = { id: accountId, attributes };
+    const response = await gqlRequest({
+        query: MUTATION$1,
         token,
+        vars,
+        apiHost,
     });
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _a === void 0 ? void 0 : _a.errors;
+    if (errors)
+        throw errors;
+    return response.accountUpdate;
 };
-const quoteSubscriptionActivate = ({ subscriptionId, apiHost, token, }) => {
-    return gqlRequest({
-        query: `mutation QuoteSubscriptionActivate($subscriptionId: ID!) {
-      quoteSubscriptionActivate(subscriptionId: $subscriptionId) {
-        quote {
-          id
-        }
-      }
-    }`,
-        vars: {
-            subscriptionId,
+
+const COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
+const TaxationForm = ({ account, accountId }) => {
+    // Hooks
+    const queryClient = reactQuery.useQueryClient();
+    const { apiHost } = react.useContext(BunnyContext);
+    const token = useToken();
+    const [form] = antd.Form.useForm();
+    // Mutations
+    const { mutate: updateAccount, isPending: isUpdatingAccount } = reactQuery.useMutation({
+        mutationFn: async (changedFormData) => {
+            const account = await accountUpdate({
+                accountId,
+                attributes: changedFormData,
+                token,
+                apiHost,
+            });
+            return account;
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: ['getTaxationRequiredAccountFields', token],
+            });
         },
-        apiHost,
-        token,
     });
+    return (jsxRuntime.jsxs(antd.Form, { className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount, children: [jsxRuntime.jsx(antd.Form.Item, { label: "Billing street", name: "billingStreet", children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Billing city", name: "billingCity", children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) }), jsxRuntime.jsx(FormBillingState, {}), jsxRuntime.jsx(antd.Form.Item, { label: "Billing country", name: "billingCountry", rules: [{ required: true }], children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: (input, option) => {
+                        var _a, _b;
+                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
+                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
+                    } }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Billing zip", name: "billingZip", children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) }), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary", children: "Submit" }) })] }));
+};
+const FormBillingState = () => {
+    const billingCountry = antd.Form.useWatch('billingCountry');
+    const billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
+    return (jsxRuntime.jsx(antd.Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) }));
 };
 
-const CanShowQuantitiesInput_SubscriptionChargeFragment = t(`
-  fragment CanShowQuantitiesInput_SubscriptionChargeFragment on SubscriptionCharge {
-    id
-    pricingModel
-    expired
-    selfServiceQuantity
-  }
-`);
-const CanShowQuantitiesInput_SubscriptionFragment = t(`
-    fragment CanShowQuantitiesInput_SubscriptionFragment on Subscription {
+// HACK: I have imported QuoteFields_QuoteFragment here as a hack to ensure I have all of the quote data needed for
+// the eventual children of this component.
+// Solution: Eventually all children of this component should be using query fragments to avoid this
+const QuoteCheckout_QuoteFragment = t(`
+    fragment QuoteCheckout_QuoteFragment on Quote {
       id
-      state
-      priceList {
+      accountId
+      amountDue
+      amount
+      quoteChanges {
         id
+        charges {
+          kind
+          coupon {
+            couponCode
+          }
+        }
       }
-      chargeReport {
-        ...CanShowQuantitiesInput_SubscriptionChargeFragment
-      }
-    }
-  `, [CanShowQuantitiesInput_SubscriptionChargeFragment]);
-const createQuoteParams = (quote, subscriptionQuantity, editedSubscription) => {
-    if (!editedSubscription || editedSubscription.quantity === undefined) {
-        return { charges: [], quoteChange: undefined };
+      ...QuoteFields_QuoteFragment
     }
-    const quoteChange = quote.quoteChanges.find(quoteChange => { var _a, _b; return quoteChange.priceList.id === ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.priceList) === null || _b === void 0 ? void 0 : _b.id); });
-    const quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => charge.priceListCharge.id === editedSubscription.chargeId);
-    let charges = [
-        {
-            id: quoteChangeCharge.id,
-            quantity: editedSubscription.quantity - subscriptionQuantity,
-        },
-    ];
-    return { charges, quoteChange };
-};
-// Create an id using the charge id and the subscription id
-const getUpdatingChargeQuantityId = (priceListChargeId, subscriptionId) => {
-    return `${priceListChargeId}-${subscriptionId}`;
-};
-const canShowQuantitiesInput = ({ charge: maskedCharge, subscription: maskedSubscription, }) => {
-    const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
-    const charge = readFragment(CanShowQuantitiesInput_SubscriptionChargeFragment, maskedCharge);
-    // Check if the subscription is active, pending, or in trial,
-    // the pricing model is not flat,
-    // and if it's not a trial, also check if the current charge is the last one in the subscription.
-    const isActiveSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'ACTIVE';
-    const isPendingSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'PENDING';
-    const isTrialSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL';
-    const isFlatPricing = (charge === null || charge === void 0 ? void 0 : charge.pricingModel) === 'FLAT';
-    const shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
-        !isFlatPricing &&
-        (charge === null || charge === void 0 ? void 0 : charge.selfServiceQuantity) &&
-        !(charge === null || charge === void 0 ? void 0 : charge.expired);
-    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
-    return shouldProcessCharge;
-};
-const canShowChangeQuantities = ({ subscriptions, }) => {
-    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(maskedSubscription => {
-        var _a;
-        if (!maskedSubscription)
-            return false;
-        const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
-        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.some(charge => {
-            return canShowQuantitiesInput({ charge, subscription: maskedSubscription });
-        });
-    });
-};
-
-const QuantityInput_SubscriptionChargeFragment = t(`
-  fragment QuantityInput_SubscriptionChargeFragment on SubscriptionCharge {
-    id
-    quantity
-    selfServiceQuantity
-    priceListChargeId
-  }
-`);
-const QuantityInput_SubscriptionFragment = t(`
-    fragment QuantityInput_SubscriptionFragment on Subscription {
-      id
-      state
-      priceList {
-        id
-      }
-      chargeReport {
-        ...QuantityInput_SubscriptionChargeFragment
-        ...CanShowQuantitiesInput_SubscriptionChargeFragment
-      }
-      ...CanShowQuantitiesInput_SubscriptionFragment
-    }
-  `, [
-    QuantityInput_SubscriptionChargeFragment,
-    CanShowQuantitiesInput_SubscriptionChargeFragment,
-    CanShowQuantitiesInput_SubscriptionFragment,
-]);
-const formatDateForApi = (date) => {
-    if (typeof date === 'string')
-        date = dayjs(date);
-    return date.format('YYYY-MM-DD');
-};
-const QuantityInput = ({ charge: maskedCharge, chargeIndex, editingQuote, setEditingQuoteData, subscription: maskedSubscription, subscriptionIndex, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
-    // Context
-    const token = useToken();
+  `, [QuoteFields_QuoteFragment]);
+const showSuccessNotification = common.useSuccessNotification();
+const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxationRequiredAccountFields, onRecalculateTaxes, }) => {
+    var _a, _b, _c, _d, _e;
+    // Read fragments
+    const quote = readFragment(QuoteCheckout_QuoteFragment, maskedQuote);
     const { apiHost } = react.useContext(BunnyContext);
-    // Local state
-    const [editedSubscription, setEditedSubscription] = react.useState();
-    // Derived state
-    const charge = readFragment(QuantityInput_SubscriptionChargeFragment, maskedCharge);
-    const subscription = readFragment(QuantityInput_SubscriptionFragment, maskedSubscription);
-    // Hooks
+    const { upgradingSubscription } = react.useContext(SubscriptionsContext);
+    const token = useToken();
+    const isMobile = common.useIsMobile();
+    const [isSaving, setIsSaving] = react.useState(false);
+    const paymentRequired = getQuoteAmountDue(quote) > 0;
     const queryClient = reactQuery.useQueryClient();
-    const createSubscriptionQuote = useCreateSubscriptionQuote();
-    const quoteChangeUpdate = useQuoteChangeUpdate();
-    const showErrorNotification = common.useErrorNotification();
-    const 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 &&
-        charge.priceListChargeId &&
-        subscription.id &&
-        updatingChargeQuantityId !==
-            getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id)) ||
-        // If the subscription is not self-service, we disable the quantity input
-        !charge.selfServiceQuantity;
-    const value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? '' : editedSubscription.quantity;
-    // Mutations
-    const { mutate: createCharge } = reactQuery.useMutation({
-        mutationFn: quoteChargeCreate,
-        onSuccess: (response) => {
-            var _a, _b, _c;
-            if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                const isTrial = ((_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === 'TRIAL';
-                setEditingQuoteData({
-                    id: (_b = response.quoteChange) === null || _b === void 0 ? void 0 : _b.quoteId,
-                    isTrial,
-                });
-            }
+    const [couponCode, setCouponCode] = react.useState('');
+    const { addCoupon, removeCoupon, isAddingCoupon, isRemovingCoupon, activeCouponsExist } = useUpdateCoupons({
+        apiHost,
+        token,
+        quoteChangeId: (_d = (_c = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a[((_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.length) - 1]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : undefined,
+        onCouponAdded: () => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+                throw new Error('Quote ID is required');
             queryClient.invalidateQueries({
                 queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    id: (_c = response.quoteChange) === null || _c === void 0 ? void 0 : _c.quoteId,
+                    id: quote === null || quote === void 0 ? void 0 : quote.id,
                     objectName: 'editingQuote',
                     token,
                 }),
             });
+            showSuccessNotification('Coupon applied');
+            onRecalculateTaxes();
+            setCouponCode('');
         },
-    });
-    const createQuote = reactQuery.useMutation({
-        mutationFn: (subscriptionId) => createSubscriptionQuote([subscriptionId], apiHost, token),
-        onSuccess: (subscriptionUpdateData) => {
-            var _a, _b;
-            const quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
-            const quoteChange = quote.quoteChanges.find(quoteChange => { var _a; return quoteChange.priceList.id === ((_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList) === null || _a === void 0 ? void 0 : _a.id); });
-            const subscriptionCharge = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges.find(charge => { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.chargeId); });
-            if (subscriptionCharge && quoteChange && editedSubscription) {
-                createCharge({
-                    apiHost,
-                    quantity: editedSubscription.quantity,
-                    quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
-                    startDate: formatDateForApi(dayjs()),
-                    subscriptionChargeId: subscriptionCharge.id,
-                    token,
-                });
-            }
-        },
-    });
-    const updateQuote = reactQuery.useMutation({
-        mutationFn: ({ charges, quoteChangeId, }) => quoteChangeUpdate(charges, quoteChangeId, apiHost, token),
-        onSuccess: (response) => {
-            var _a, _b, _c, _d, _e;
-            if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                const isTrial = ((_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === 'TRIAL';
-                setEditingQuoteData({
-                    id: (_c = (_b = response.quoteChangeUpdate) === null || _b === void 0 ? void 0 : _b.quoteChange) === null || _c === void 0 ? void 0 : _c.quoteId,
-                    isTrial,
-                });
-            }
+        onCouponRemoved: () => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+                throw new Error('Quote ID is required');
             queryClient.invalidateQueries({
                 queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    id: (_e = (_d = response.quoteChangeUpdate) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
+                    id: quote === null || quote === void 0 ? void 0 : quote.id,
                     objectName: 'editingQuote',
                     token,
                 }),
             });
-            setErrorUpdatingQuantity(false);
+            showSuccessNotification('Coupon removed');
+            onRecalculateTaxes();
         },
-        onError: () => {
-            setErrorUpdatingQuantity(true);
+    });
+    const couponsOnQuote = (_e = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _e === void 0 ? void 0 : _e.flatMap(quoteChange => { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => charge.kind === 'COUPON'); });
+    const checkoutMutation = reactQuery.useMutation({
+        mutationFn: async () => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+                throw new Error('Quote ID is required');
+            if (paymentRequired)
+                throw new Error('Payment is required');
+            return await checkout({ quoteId: quote.id, token, apiHost });
         },
+        onSuccess,
+        onError: onFail,
     });
-    // Handlers
-    const isQuantityLowerThanOriginal = (quantity) => (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
-    const onChangeQuantity = (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) => {
-        // Handle empty string - don't convert to 0, keep it as undefined
-        const quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
-        setEditedSubscription({
-            chargeIndex,
-            subscriptionIndex,
-            chargeId: priceListChargeId,
-            quantity,
-            subscription,
-        });
-        if (quantity === undefined) {
-            setUpdatingChargeQuantityId(undefined);
-            setEditingQuoteData(undefined);
-        }
-        if (quantity === charge.quantity) {
-            setEditingQuoteData(undefined);
-            showErrorNotification('New quantity cannot be the same as current');
-        }
-        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.priceListChargeId, subscription.id));
-            }
-        }
-    };
-    const handleSubscriptionUpdate = (editedSubscription) => {
-        if (!editedSubscription || editedSubscription.quantity === undefined)
-            return;
-        // If we are not editing a quote, we create a new one
-        if (!editingQuote) {
-            createQuote.mutate(editedSubscription.subscription.id);
-        }
-        else {
-            // If we are editing a quote, we update the quote change
-            if (!charge.quantity)
-                throw new Error('Charge quantity is required');
-            const { charges, quoteChange } = createQuoteParams(editingQuote, charge.quantity, editedSubscription);
-            if (quoteChange && charges.length > 0) {
-                updateQuote.mutate({
-                    charges,
-                    quoteChangeId: quoteChange.id,
-                });
-            }
-        }
-    };
-    // Edit subscription debounce
-    react.useEffect(() => {
-        const debounce = setTimeout(() => {
-            handleSubscriptionUpdate(editedSubscription);
-        }, 1000);
-        return () => clearTimeout(debounce);
-    }, [editedSubscription]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
-                if (!charge.priceListChargeId)
-                    throw new Error('Charge price list charge ID is required');
-                onChangeQuantity(chargeIndex, e.target.value, charge.priceListChargeId, subscription, subscriptionIndex);
-            }, status: charge.quantity && isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
+    async function handleCheckoutNoPayment() {
+        setIsSaving(true);
+        checkoutMutation.mutate();
+        setIsSaving(false);
+    }
+    if (taxationRequiredAccountFields)
+        return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
+                        shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
+                        couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
+                            var _a;
+                            const couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
+                            if (couponCode) {
+                                removeCoupon(couponCode);
+                            }
+                        });
+                    }, children: "Remove coupon(s)" }))] })) : (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsxRuntime.jsx(antd.Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsxRuntime.jsx("div", { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] }) })) }));
+};
+const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
+    const isMobile = common.useIsMobile();
+    return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-w-full bunny-flex-col bunny-gap-6 ${isMobile ? 'bunny-shadow-padding-xb' : ''} ${className}`, style: {
+            ...(isMobile
+                ? setMaxHeight
+                    ? { maxHeight: '60vh' }
+                    : {}
+                : {
+                    width: '100%',
+                    maxWidth: '350px',
+                }),
+        }, children: children }));
 };
 
-const QuantityChangeGridRow_SubscriptionChargeFragment = t(`
-    fragment QuantityChangeGridRow_SubscriptionChargeFragment on SubscriptionCharge {
-      id
-      quantity
-      name
-      ...QuantityInput_SubscriptionChargeFragment
-      ...CanShowQuantitiesInput_SubscriptionChargeFragment
-    }
-  `, [QuantityInput_SubscriptionChargeFragment, CanShowQuantitiesInput_SubscriptionChargeFragment]);
-const QuantityChangeGridRow_SubscriptionFragment = t(`
-    fragment QuantityChangeGridRow_SubscriptionFragment on Subscription {
+const queryKeyFactory = common.QueryKeyFactory.default;
+const Checkout_QuoteFragment = t(`
+    fragment Checkout_QuoteFragment on Quote {
       id
-      priceList {
-        id
-      }
-      plan {
-        name
-      }
-      chargeReport {
-        ...QuantityChangeGridRow_SubscriptionChargeFragment
-        ...CanShowQuantitiesInput_SubscriptionChargeFragment
+      accountId
+      formattedQuote {
+        html
       }
-      ...QuantityInput_SubscriptionFragment
-      ...CanShowQuantitiesInput_SubscriptionFragment
+      ...QuoteCheckout_QuoteFragment
     }
-  `, [
-    QuantityChangeGridRow_SubscriptionChargeFragment,
-    CanShowQuantitiesInput_SubscriptionChargeFragment,
-    CanShowQuantitiesInput_SubscriptionFragment,
-    QuantityInput_SubscriptionFragment,
-]);
-const { Text: Text$k } = antd.Typography;
-const QuantityChangeGridRow = ({ chargeIndex, editingQuote, subscriptionIndex, setEditingQuoteData, subscription: maskedSubscription, subscriptionCharge: maskedSubscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
-    var _a, _b;
-    const subscription = readFragment(QuantityChangeGridRow_SubscriptionFragment, maskedSubscription);
-    const charge = readFragment(QuantityChangeGridRow_SubscriptionChargeFragment, maskedSubscriptionCharge);
-    if (!canShowQuantitiesInput({ charge, subscription }))
-        return null;
-    const { brandColor } = react.useContext(BrandContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx(Text$k, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsxRuntime.jsx(Text$k, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsxRuntime.jsx(Text$k, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsxRuntime.jsx(QuantityInput, { charge: charge, 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" })] }));
-};
-
-const { Text: Text$j } = antd.Typography;
-const QuantityChangeGridTitle = ({ children, right }) => (jsxRuntime.jsx(Text$j, { className: `bunny-font-medium bunny-text-sm bunny-text-slate-600 ${right ? 'bunny-text-right' : 'bunny-text-left'}`, children: children }));
-
-const QuoteChangeSummarySection = ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }) => {
+  `, [QuoteCheckout_QuoteFragment]);
+const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
+    var _a, _b, _c, _d, _e;
     const { apiHost } = react.useContext(BunnyContext);
     const isMobile = common.useIsMobile();
     const token = useToken();
-    const showSuccessNotification = common.useSuccessNotification();
-    const trialUpgradeMutation = reactQuery.useMutation({
-        mutationFn: (quoteId) => checkout({ quoteId, token, apiHost }),
-        onSuccess: () => {
-            setEditingQuoteData(undefined);
-            showSuccessNotification('Subscription updated successfully');
-        },
+    // Read fragments
+    const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
+    const hasTaxPlugin = useHasTaxPlugin({
+        apiHost,
+        token,
     });
-    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [editingQuote && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsxRuntime.jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsxRuntime.jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') })] })), jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
-                        ? () => 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' }) })] }));
-};
-
-const QUANTITY_CHANGE_HEADER_TITLE = 'Update quantities';
-const QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
-const QuantityDrawerDesktop_SubscriptionFragment = t(`
-    fragment QuantityDrawerDesktop_SubscriptionFragment on Subscription {
-      currentCharges {
-        chargeType
-        ...QuantityChangeGridRow_SubscriptionChargeFragment
-      }
-      ...QuantityChangeGridRow_SubscriptionFragment
-    }
-  `, [QuantityChangeGridRow_SubscriptionFragment, QuantityChangeGridRow_SubscriptionChargeFragment]);
-const QuantityChangeDrawerDesktop = ({ editingQuote, editingQuoteData, onClose, open, openCheckout, setEditingQuoteData, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
-    const [openLocal, setOpenLocal] = react.useState(open);
-    const [errorUpdatingQuantity, setErrorUpdatingQuantity] = react.useState(false);
-    const isMobile = common.useIsMobile();
-    react.useEffect(() => {
-        let timeoutId;
-        if (!open) {
-            timeoutId = setTimeout(() => {
-                setOpenLocal(false);
-            }, 300); // Delay to allow for close animation
-        }
-        else {
-            setOpenLocal(true);
+    const queryClient = reactQuery.useQueryClient();
+    // Queries
+    const { data: taxationRequiredAccountFields, isLoading: isLoadingTaxationRequiredAccountFields } = reactQuery.useQuery({
+        queryKey: ['getTaxationRequiredAccountFields', token],
+        queryFn: () => getTaxationRequiredAccountFields({ apiHost, token }),
+        enabled: Boolean(quote),
+        staleTime: 0,
+    });
+    const { data: account, isLoading: isLoadingAccount } = reactQuery.useQuery({
+        queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryFn: () => (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
+            common.getAccount({ id: quote.accountId, apiHost, token, componentsVersion: PACKAGE_VERSION }),
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+    });
+    async function recalculateTaxes() {
+        if (quote) {
+            if (!quote.id)
+                throw new Error('Quote ID is required');
+            const updatedQuote = await quoteRecalculateTaxes({
+                quoteId: quote.id,
+                apiHost,
+                token,
+            });
+            if (updatedQuote) {
+                const quoteKey = queryKeyFactory.createObjectKey({
+                    id: updatedQuote.id,
+                    objectName: 'editingQuote',
+                    token,
+                });
+                queryClient.setQueryData(quoteKey, updatedQuote);
+            }
         }
-        return () => clearTimeout(timeoutId);
-    }, [open]);
-    if (!openLocal)
+        return {};
+    }
+    const recalculateTaxesEnabled = Boolean(quote) &&
+        open &&
+        hasTaxPlugin &&
+        !taxationRequiredAccountFields &&
+        !isLoadingTaxationRequiredAccountFields &&
+        !isUpdatingQuote;
+    reactQuery.useQuery({
+        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
+            id: (_a = quote === null || quote === void 0 ? void 0 : quote.id) !== null && _a !== void 0 ? _a : undefined,
+            token,
+        }),
+        queryFn: recalculateTaxes,
+        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
+        enabled: recalculateTaxesEnabled,
+        staleTime: 0,
+    });
+    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
         return null;
-    return (jsxRuntime.jsxs(antd.Drawer, { closeIcon: null, destroyOnHidden: true, onClose: onClose, open: open, styles: isMobile
-            ? {
-                body: {
-                    padding: '1rem',
-                    background: common.SLATE_50,
-                },
-                wrapper: {
-                    width: '100vw',
-                },
-            }
-            : {
-                wrapper: {
-                    minWidth: '600px',
-                },
-            }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }), children: [jsxRuntime.jsxs("div", { className: "bunny-grid bunny-pb-2", style: {
-                    gridTemplateColumns: '3fr 3fr 2fr',
-                    rowGap: '0.25rem',
-                    columnGap: '1rem',
-                }, children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: " " }), jsxRuntime.jsx(QuantityChangeGridTitle, { right: true, children: "CURRENT QUANTITY" }), jsxRuntime.jsx(QuantityChangeGridTitle, { right: true, children: "NEW QUANTITY" }), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full", style: { marginBottom: '8px', marginTop: '20px' } }), subscriptions.map((maskedSubscription, index) => {
-                        var _a;
-                        const subscription = readFragment(QuantityDrawerDesktop_SubscriptionFragment, maskedSubscription);
-                        return (jsxRuntime.jsx("div", { className: "bunny-contents", children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
-                                if (charge.chargeType === '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));
-                            }) }, index));
-                    })] }), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData, errorUpdatingQuantity: errorUpdatingQuantity })] }));
+    return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
+      bunny-overflow-auto bunny-height-full`, style: {
+            zIndex: 1001,
+        }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
+                                onFail(error);
+                            }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
+                                if (recalculateTaxesEnabled) {
+                                    await recalculateTaxes();
+                                }
+                            } })) : (jsxRuntime.jsx(PaymentForm, { onFail: error => {
+                                onFail(error);
+                            }, onPaymentSuccess: onSuccess }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
 
-const SubscriptionsContext = react.createContext({});
+const QuantityDrawer_QuoteFragment = t(`
+    fragment QuantityDrawer_QuoteFragment on Quote {
+      id
+      ...Checkout_QuoteFragment
+    }
+  `, [Checkout_QuoteFragment]);
 
-const MUTATION$2 = `{
-  currentUser {
-    taxationRequiredAccountFields
-  }
-}`;
-const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
-    var _a, _b;
-    const response = await gqlRequest({
-        query: MUTATION$2,
-        token,
-        apiHost: apiHost,
-    });
-    return ((_b = (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.taxationRequiredAccountFields) === null || _b === void 0 ? void 0 : _b.length) > 0
-        ? response.currentUser.taxationRequiredAccountFields
-        : null;
+const useSetQuoteQueryData = () => {
+    const token = useToken();
+    const queryClient = reactQuery.useQueryClient();
+    const setQuoteQueryData = (quoteId, maskedQuote) => {
+        console.log('maskedQuote in setQuoteQueryData', maskedQuote);
+        const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
+        queryClient.setQueryData(common.QueryKeyFactory.default.createObjectKey({
+            id: quoteId,
+            objectName: 'editingQuote',
+            token,
+        }), quote);
+    };
+    return { setQuoteQueryData };
 };
 
-const useHasTaxPlugin = ({ apiHost, token, }) => {
-    const { data: plugins } = usePlugins({
-        apiHost,
-        token,
-    });
-    return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some((plugin) => plugin.type === "taxation"));
+const mutation$4 = t(`
+    mutation QuoteChargeCreate(
+      $quoteChangeId: ID!
+      $startDate: ISO8601Date!
+      $endDate: ISO8601Date
+      $priceListChargeId: ID
+      $subscriptionChargeId: ID
+      $price: Float
+      $quantity: Int
+    ) {
+      quoteChargeCreate(
+        endDate: $endDate
+        price: $price
+        priceListChargeId: $priceListChargeId
+        quantity: $quantity
+        quoteChangeId: $quoteChangeId
+        startDate: $startDate
+        subscriptionChargeId: $subscriptionChargeId
+      ) {
+        quoteCharge {
+          quoteChange {
+            id
+            quoteId
+            quote {
+              ...QuantityDrawer_QuoteFragment
+            }
+          }
+          id
+        }
+        errors
+      }
+    }
+  `, [QuantityDrawer_QuoteFragment]);
+const quoteChargeCreate$1 = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
+    var _a, _b;
+    const response = await execute(mutation$4, { apiHost, token }, { price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId });
+    if ((_a = response.quoteChargeCreate) === null || _a === void 0 ? void 0 : _a.errors) {
+        throw new Error(response.quoteChargeCreate.errors[0]);
+    }
+    return (_b = response.quoteChargeCreate) === null || _b === void 0 ? void 0 : _b.quoteCharge;
 };
 
-var SubscriptionState;
-(function (SubscriptionState) {
-    SubscriptionState["ACTIVE"] = "ACTIVE";
-    SubscriptionState["TRIAL"] = "TRIAL";
-    SubscriptionState["PENDING"] = "PENDING";
-    SubscriptionState["EXPIRED"] = "EXPIRED";
-    SubscriptionState["CANCELED"] = "CANCELED";
-    SubscriptionState["TRIAL_EXPIRED"] = "TRIAL_EXPIRED";
-})(SubscriptionState || (SubscriptionState = {}));
-var SubscriptionState$1 = SubscriptionState;
-
-function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
-    var _a, _b;
-    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$1.TRIAL ||
-        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL_EXPIRED;
-    function upgradingFromFree() {
-        const totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce((acc, charge) => acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0), 0);
-        return totalPrice === 0;
+const mutation$3 = t(`
+    mutation QuoteChargeUpdate($quoteChargeId: ID!, $quantity: Int) {
+      quoteChargeUpdate(quoteChargeId: $quoteChargeId, quantity: $quantity) {
+        quoteCharge {
+          quoteChange {
+            id
+            quoteId
+            quote {
+              ...QuantityDrawer_QuoteFragment
+            }
+          }
+          id
+        }
+        errors
+      }
     }
-    const quoteKindIsValid = quote.kind === common.QuoteChangeKind.SUBSCRIBE ||
-        quote.kind === common.QuoteChangeKind.ADJUSTMENT ||
-        quote.kind === common.QuoteChangeKind.ACTIVATE;
-    if (quoteKindIsValid) {
-        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
+  `, [QuantityDrawer_QuoteFragment]);
+const quoteChargeUpdate$1 = async (quoteChargeId, quantity, apiHost, token) => {
+    var _a, _b;
+    const response = await execute(mutation$3, { apiHost, token }, { quoteChargeId, quantity });
+    if ((_a = response.quoteChargeUpdate) === null || _a === void 0 ? void 0 : _a.errors) {
+        throw new Error(response.quoteChargeUpdate.errors[0]);
     }
-    return false;
-}
+    return (_b = response.quoteChargeUpdate) === null || _b === void 0 ? void 0 : _b.quoteCharge;
+};
 
-const MUTATION$1 = `
-mutation accountUpdate(
-    $id: ID!,
-    $attributes: AccountAttributes!) {
-      accountUpdate(
-        id: $id,
-        attributes: $attributes
-      ) {
-        account {
+const mutation$2 = t(`
+    mutation quoteSubscriptionUpdate($subscriptionIds: [ID!]!) {
+      quoteSubscriptionUpdate(subscriptionIds: $subscriptionIds) {
+        quote {
           id
-          billingCountry
-          billingState
-          billingStreet
-          billingCity
-          billingZip
-          name
+          quoteChanges {
+            id
+            priceList {
+              id
+            }
+            subscription {
+              charges {
+                startDate
+                endDate
+                id
+                priceListCharge {
+                  id
+                }
+              }
+            }
+          }
+          ...QuantityDrawer_QuoteFragment
         }
         errors
       }
+    }
+  `, [QuantityDrawer_QuoteFragment]);
+const quoteSubscriptionUpdate = async (subscriptionIds, apiHost, token) => {
+    var _a, _b;
+    const response = await execute(mutation$2, { apiHost, token }, { subscriptionIds });
+    if ((_a = response.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.errors) {
+        throw new Error(response.quoteSubscriptionUpdate.errors[0]);
+    }
+    return (_b = response.quoteSubscriptionUpdate) === null || _b === void 0 ? void 0 : _b.quote;
+};
+
+const formatDateForApi = (date) => {
+    if (typeof date === 'string')
+        date = dayjs(date);
+    return date.format('YYYY-MM-DD');
+};
+
+const CanShowQuantitiesInput_SubscriptionChargeFragment = t(`
+  fragment CanShowQuantitiesInput_SubscriptionChargeFragment on SubscriptionCharge {
+    id
+    pricingModel
+    expired
+    selfServiceQuantity
   }
-`;
-const accountUpdate = async ({ accountId, attributes, token, apiHost, }) => {
-    var _a;
-    const vars = { id: accountId, attributes };
-    const response = await gqlRequest({
-        query: MUTATION$1,
-        token,
-        vars,
-        apiHost,
+`);
+const CanShowQuantitiesInput_SubscriptionFragment = t(`
+    fragment CanShowQuantitiesInput_SubscriptionFragment on Subscription {
+      id
+      state
+      priceList {
+        id
+      }
+      chargeReport {
+        ...CanShowQuantitiesInput_SubscriptionChargeFragment
+      }
+    }
+  `, [CanShowQuantitiesInput_SubscriptionChargeFragment]);
+// Create an id using the charge id and the subscription id
+const getUpdatingChargeQuantityId = (priceListChargeId, subscriptionId) => {
+    return `${priceListChargeId}-${subscriptionId}`;
+};
+const canShowQuantitiesInput = ({ charge: maskedCharge, subscription: maskedSubscription, }) => {
+    const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
+    const charge = readFragment(CanShowQuantitiesInput_SubscriptionChargeFragment, maskedCharge);
+    // Check if the subscription is active, pending, or in trial,
+    // the pricing model is not flat,
+    // and if it's not a trial, also check if the current charge is the last one in the subscription.
+    const isActiveSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'ACTIVE';
+    const isPendingSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'PENDING';
+    const isTrialSubscription = (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL';
+    const isFlatPricing = (charge === null || charge === void 0 ? void 0 : charge.pricingModel) === 'FLAT';
+    const shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
+        !isFlatPricing &&
+        (charge === null || charge === void 0 ? void 0 : charge.selfServiceQuantity) &&
+        !(charge === null || charge === void 0 ? void 0 : charge.expired);
+    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
+    return shouldProcessCharge;
+};
+const canShowChangeQuantities = ({ subscriptions, }) => {
+    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(maskedSubscription => {
+        var _a;
+        if (!maskedSubscription)
+            return false;
+        const subscription = readFragment(CanShowQuantitiesInput_SubscriptionFragment, maskedSubscription);
+        return (_a = subscription === null || subscription === void 0 ? void 0 : subscription.chargeReport) === null || _a === void 0 ? void 0 : _a.some(charge => {
+            return canShowQuantitiesInput({ charge, subscription: maskedSubscription });
+        });
     });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response.accountUpdate;
 };
 
-const COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
-const TaxationForm = ({ account, quote }) => {
-    // Hooks
-    const queryClient = reactQuery.useQueryClient();
-    const { apiHost } = react.useContext(BunnyContext);
+const QuantityInput_SubscriptionChargeFragment = t(`
+  fragment QuantityInput_SubscriptionChargeFragment on SubscriptionCharge {
+    id
+    quantity
+    selfServiceQuantity
+    priceListChargeId
+  }
+`);
+const QuantityInput_SubscriptionFragment = t(`
+    fragment QuantityInput_SubscriptionFragment on Subscription {
+      id
+      state
+      priceList {
+        id
+      }
+      chargeReport {
+        ...QuantityInput_SubscriptionChargeFragment
+        ...CanShowQuantitiesInput_SubscriptionChargeFragment
+      }
+      ...CanShowQuantitiesInput_SubscriptionFragment
+    }
+  `, [
+    QuantityInput_SubscriptionChargeFragment,
+    CanShowQuantitiesInput_SubscriptionChargeFragment,
+    CanShowQuantitiesInput_SubscriptionFragment,
+]);
+const DEBOUNCE_TIME = 1000;
+const QuantityInput = ({ charge: maskedCharge, editingQuote, editingQuoteId, setEditingQuoteData, subscription: maskedSubscription, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
+    // Context
     const token = useToken();
-    const [form] = antd.Form.useForm();
+    const { apiHost } = react.useContext(BunnyContext);
+    // Local state
+    const [quantity, setQuantity] = react.useState();
+    // Derived state
+    const charge = readFragment(QuantityInput_SubscriptionChargeFragment, maskedCharge);
+    const subscription = readFragment(QuantityInput_SubscriptionFragment, maskedSubscription);
+    // Hooks
+    const showErrorNotification = common.useErrorNotification();
+    const { setQuoteQueryData } = useSetQuoteQueryData();
+    const quantityDisabled = 
+    // If we are editing a quote, we disable the quantity input
+    // If we don't have a quantity, we disable the quantity input
+    (updatingChargeQuantityId &&
+        charge.priceListChargeId &&
+        subscription.id &&
+        updatingChargeQuantityId !==
+            getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id)) ||
+        // If the subscription is not self-service, we disable the quantity input
+        !charge.selfServiceQuantity;
+    const value = quantity === undefined ? '' : quantity;
     // Mutations
-    const { mutate: updateAccount, isPending: isUpdatingAccount } = reactQuery.useMutation({
-        mutationFn: async (changedFormData) => {
-            const account = await accountUpdate({
-                accountId: quote.accountId,
-                attributes: changedFormData,
-                token,
-                apiHost,
-            });
-            return account;
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({
-                queryKey: ['getTaxationRequiredAccountFields', token],
-            });
+    const { mutate: createCharge } = reactQuery.useMutation({
+        mutationFn: quoteChargeCreate$1,
+        onSuccess: response => {
+            var _a, _b;
+            if (!editingQuoteId)
+                throw new Error('editingQuoteId is required');
+            setQuoteQueryData(editingQuoteId, (_b = (_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote) !== null && _b !== void 0 ? _b : null);
         },
     });
-    return (jsxRuntime.jsxs(antd.Form, { className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount, children: [jsxRuntime.jsx(antd.Form.Item, { label: "Billing street", name: "billingStreet", children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Billing city", name: "billingCity", children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) }), jsxRuntime.jsx(FormBillingState, {}), jsxRuntime.jsx(antd.Form.Item, { label: "Billing country", name: "billingCountry", rules: [{ required: true }], children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: (input, option) => {
-                        var _a, _b;
-                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
-                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
-                    } }) }), jsxRuntime.jsx(antd.Form.Item, { label: "Billing zip", name: "billingZip", children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) }), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary", children: "Submit" }) })] }));
-};
-const FormBillingState = () => {
-    const billingCountry = antd.Form.useWatch('billingCountry');
-    const billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
-    return (jsxRuntime.jsx(antd.Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) }));
-};
-
-const showSuccessNotification = common.useSuccessNotification();
-const QuoteCheckout = ({ account, onSuccess, onFail, quote, taxationRequiredAccountFields, onRecalculateTaxes, }) => {
-    var _a, _b;
-    const { apiHost } = react.useContext(BunnyContext);
-    const { upgradingSubscription } = react.useContext(SubscriptionsContext);
-    const token = useToken();
-    const isMobile = common.useIsMobile();
-    const [isSaving, setIsSaving] = react.useState(false);
-    const paymentRequired = getQuoteAmountDue(quote) > 0;
-    const queryClient = reactQuery.useQueryClient();
-    const [couponCode, setCouponCode] = react.useState('');
-    const { addCoupon, removeCoupon, isAddingCoupon, isRemovingCoupon, activeCouponsExist } = useUpdateCoupons({
-        apiHost,
-        token,
-        quoteChangeId: (_a = quote.quoteChanges[quote.quoteChanges.length - 1]) === null || _a === void 0 ? void 0 : _a.id,
-        onCouponAdded: () => {
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    id: quote === null || quote === void 0 ? void 0 : quote.id,
-                    objectName: 'editingQuote',
-                    token,
-                }),
+    const createQuote = reactQuery.useMutation({
+        mutationFn: (subscriptionId) => quoteSubscriptionUpdate([subscriptionId], apiHost, token),
+        onSuccess: quote => {
+            var _a, _b, _c;
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+                throw new Error('quote id is required');
+            setEditingQuoteData({
+                id: quote === null || quote === void 0 ? void 0 : quote.id,
+                isTrial: (subscription === null || subscription === void 0 ? void 0 : subscription.state) === 'TRIAL',
             });
-            showSuccessNotification('Coupon applied');
-            onRecalculateTaxes();
-            setCouponCode('');
-        },
-        onCouponRemoved: () => {
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.createObjectKey({
-                    id: quote === null || quote === void 0 ? void 0 : quote.id,
-                    objectName: 'editingQuote',
-                    token,
-                }),
+            const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(quoteChange => { var _a, _b; return ((_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.priceList) === null || _a === void 0 ? void 0 : _a.id) === ((_b = subscription.priceList) === null || _b === void 0 ? void 0 : _b.id); });
+            const subscriptionCharge = (_c = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges) === null || _c === void 0 ? void 0 : _c.find(subscriptionCharge => { var _a; return ((_a = subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.priceListChargeId; });
+            if (!(quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id))
+                throw new Error('quoteChange id is required');
+            if (!(subscriptionCharge === null || subscriptionCharge === void 0 ? void 0 : subscriptionCharge.id))
+                throw new Error('subscriptionCharge id is required');
+            createCharge({
+                apiHost,
+                quantity,
+                quoteChangeId: quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.id,
+                startDate: formatDateForApi(dayjs()),
+                subscriptionChargeId: subscriptionCharge.id,
+                token,
             });
-            showSuccessNotification('Coupon removed');
-            onRecalculateTaxes();
         },
     });
-    const couponsOnQuote = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.flatMap(quoteChange => { var _a; return (_a = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => charge.kind === 'COUPON'); });
-    const checkoutMutation = reactQuery.useMutation({
-        mutationFn: async () => {
-            if (!quote)
-                throw new Error('Quote is required');
-            if (paymentRequired)
-                throw new Error('Payment is required');
-            return await checkout({ quoteId: quote.id, token, apiHost });
+    const updateQuoteCharge = reactQuery.useMutation({
+        mutationFn: ({ quoteChargeId, quantity }) => quoteChargeUpdate$1(quoteChargeId, quantity, apiHost, token),
+        onSuccess: response => {
+            var _a;
+            const quote = (_a = response === null || response === void 0 ? void 0 : response.quoteChange) === null || _a === void 0 ? void 0 : _a.quote;
+            if (!editingQuoteId)
+                throw new Error('editingQuoteId is required');
+            setQuoteQueryData(editingQuoteId, quote !== null && quote !== void 0 ? quote : null);
+            setErrorUpdatingQuantity(false);
+        },
+        onError: () => {
+            setErrorUpdatingQuantity(true);
         },
-        onSuccess,
-        onError: onFail,
     });
-    async function handleCheckoutNoPayment() {
-        setIsSaving(true);
-        checkoutMutation.mutate();
-        setIsSaving(false);
-    }
-    if (taxationRequiredAccountFields)
-        return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) }));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
-                        shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
-                        couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
-                            var _a;
-                            const couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
-                            if (couponCode) {
-                                removeCoupon(couponCode);
-                            }
-                        });
-                    }, children: "Remove coupon(s)" }))] })) : (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsxRuntime.jsx(antd.Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsxRuntime.jsx("div", { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] }) })) }));
+    const onChangeQuantity = (value) => {
+        var _a;
+        // Handle empty string - don't convert to 0, keep it as undefined
+        const quantity = value === '' ? undefined : isNaN(parseInt(value)) ? 0 : parseInt(value);
+        setQuantity(quantity);
+        if (quantity === undefined) {
+            setUpdatingChargeQuantityId(undefined);
+        }
+        else {
+            if (!(charge === null || charge === void 0 ? void 0 : charge.priceListChargeId)) {
+                showErrorNotification('Charge ID is not found');
+                return;
+            }
+            // The set charge id is used to disable all other quantity inputs
+            setUpdatingChargeQuantityId(getUpdatingChargeQuantityId(charge.priceListChargeId, subscription.id));
+            // if (quantity === charge.quantity) {
+            //   showErrorNotification('New quantity cannot be the same as current');
+            // } else {
+            // }
+            const quantityDelta = quantity - ((_a = charge.quantity) !== null && _a !== void 0 ? _a : 0);
+            debouncedQuantityUpdate.cancel();
+            debouncedQuantityUpdate(charge.priceListChargeId, quantityDelta, subscription.id, editingQuote, // TODO: do not cast as Quote
+            editingQuoteId);
+        }
+    };
+    const debouncedQuantityUpdate = react.useCallback(lodashExports.debounce((priceListChargeId, quantityDelta, subscriptionId, quote, editingQuoteId) => {
+        if (quantityDelta === 0) {
+            setErrorUpdatingQuantity(true);
+            showErrorNotification('New quantity cannot be the same as current');
+            return;
+        }
+        // If we are not editing a quote, we create a new one
+        if (editingQuoteId === undefined) {
+            createQuote.mutate(subscriptionId);
+        }
+        else {
+            const quoteChange = quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(quoteChange => { var _a; return quoteChange.priceList.id === ((_a = subscription.priceList) === null || _a === void 0 ? void 0 : _a.id); });
+            const quoteCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(charge => charge.priceListCharge.id === priceListChargeId);
+            if (quoteCharge) {
+                updateQuoteCharge.mutate({
+                    quoteChargeId: quoteCharge.id,
+                    quantity: quantityDelta,
+                });
+            }
+        }
+    }, DEBOUNCE_TIME), []);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(antd.Input, { className: "bunny-text-right", disabled: quantityDisabled, onChange: e => {
+                onChangeQuantity(e.target.value);
+            }, style: { width: '96px' }, value: value }) }));
 };
-const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
-    const isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-w-full bunny-flex-col bunny-gap-6 ${isMobile ? 'bunny-shadow-padding-xb' : ''} ${className}`, style: {
-            ...(isMobile
-                ? setMaxHeight
-                    ? { maxHeight: '60vh' }
-                    : {}
-                : {
-                    width: '100%',
-                    maxWidth: '350px',
-                }),
-        }, children: children }));
+
+const QuantityChangeGridRow_SubscriptionChargeFragment = t(`
+    fragment QuantityChangeGridRow_SubscriptionChargeFragment on SubscriptionCharge {
+      id
+      quantity
+      name
+      ...QuantityInput_SubscriptionChargeFragment
+      ...CanShowQuantitiesInput_SubscriptionChargeFragment
+    }
+  `, [QuantityInput_SubscriptionChargeFragment, CanShowQuantitiesInput_SubscriptionChargeFragment]);
+const QuantityChangeGridRow_SubscriptionFragment = t(`
+    fragment QuantityChangeGridRow_SubscriptionFragment on Subscription {
+      id
+      priceList {
+        id
+      }
+      plan {
+        name
+      }
+      chargeReport {
+        ...QuantityChangeGridRow_SubscriptionChargeFragment
+        ...CanShowQuantitiesInput_SubscriptionChargeFragment
+      }
+      ...QuantityInput_SubscriptionFragment
+      ...CanShowQuantitiesInput_SubscriptionFragment
+    }
+  `, [
+    QuantityChangeGridRow_SubscriptionChargeFragment,
+    CanShowQuantitiesInput_SubscriptionChargeFragment,
+    CanShowQuantitiesInput_SubscriptionFragment,
+    QuantityInput_SubscriptionFragment,
+]);
+const { Text: Text$k } = antd.Typography;
+const QuantityChangeGridRow = ({ editingQuote, editingQuoteId, setEditingQuoteData, subscription: maskedSubscription, subscriptionCharge: maskedSubscriptionCharge, setUpdatingChargeQuantityId, updatingChargeQuantityId, setErrorUpdatingQuantity, }) => {
+    var _a, _b;
+    const subscription = readFragment(QuantityChangeGridRow_SubscriptionFragment, maskedSubscription);
+    const charge = readFragment(QuantityChangeGridRow_SubscriptionChargeFragment, maskedSubscriptionCharge);
+    if (!canShowQuantitiesInput({ charge, subscription }))
+        return null;
+    const { brandColor } = react.useContext(BrandContext);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1", children: [jsxRuntime.jsx(Text$k, { className: "bunny-font-medium bunny-text-sm bunny-col-span-full", style: { color: brandColor }, children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _a === void 0 ? void 0 : _a.name }), jsxRuntime.jsx(Text$k, { className: "bunny-text-sm", children: (_b = charge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })] }), jsxRuntime.jsx(Text$k, { className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-sm bunny-text-gray-900", children: charge.quantity }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-justify-center bunny-items-end", children: [jsxRuntime.jsx(QuantityInput, { charge: charge, editingQuote: editingQuote, editingQuoteId: editingQuoteId, setEditingQuoteData: setEditingQuoteData, subscription: subscription, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }), jsxRuntime.jsx("div", {})] }), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 
-const queryKeyFactory = common.QueryKeyFactory.default;
-const Checkout = ({ onCancel, onSuccess, onFail, invoice, open, quote, isUpdatingQuote, }) => {
-    var _a, _b;
+const { Text: Text$j } = antd.Typography;
+const QuantityChangeGridTitle = ({ children, right }) => (jsxRuntime.jsx(Text$j, { className: `bunny-font-medium bunny-text-sm bunny-text-slate-600 ${right ? 'bunny-text-right' : 'bunny-text-left'}`, children: children }));
+
+const QuoteChangeSummarySection = ({ editingQuote, editingQuoteData, openCheckout, setEditingQuoteData, errorUpdatingQuantity, }) => {
     const { apiHost } = react.useContext(BunnyContext);
     const isMobile = common.useIsMobile();
     const token = useToken();
-    const hasTaxPlugin = useHasTaxPlugin({
-        apiHost,
-        token,
-    });
-    const queryClient = reactQuery.useQueryClient();
-    // Queries
-    const { data: taxationRequiredAccountFields, isLoading: isLoadingTaxationRequiredAccountFields } = reactQuery.useQuery({
-        queryKey: ['getTaxationRequiredAccountFields', token],
-        queryFn: () => getTaxationRequiredAccountFields({ apiHost, token }),
-        enabled: Boolean(quote),
-        staleTime: 0,
-    });
-    const { data: account, isLoading: isLoadingAccount } = reactQuery.useQuery({
-        queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: () => (quote === null || quote === void 0 ? void 0 : quote.accountId) &&
-            common.getAccount({ id: quote.accountId, apiHost, token, componentsVersion: PACKAGE_VERSION }),
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+    const showSuccessNotification = common.useSuccessNotification();
+    const trialUpgradeMutation = reactQuery.useMutation({
+        mutationFn: (quoteId) => checkout({ quoteId, token, apiHost }),
+        onSuccess: () => {
+            setEditingQuoteData(undefined);
+            showSuccessNotification('Subscription updated successfully');
+        },
     });
-    async function recalculateTaxes() {
-        if (quote) {
-            const updatedQuote = await quoteRecalculateTaxes({
-                quoteId: quote.id,
-                apiHost,
-                token,
-            });
-            if (updatedQuote) {
-                const quoteKey = queryKeyFactory.createObjectKey({
-                    id: updatedQuote.id,
-                    objectName: 'editingQuote',
-                    token,
-                });
-                queryClient.setQueryData(quoteKey, updatedQuote);
-            }
-        }
-        return {};
+    const disabled = !editingQuoteData || !editingQuote || errorUpdatingQuantity;
+    return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-end", children: [editingQuote && !disabled && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-mb-8", children: [jsxRuntime.jsx("div", { className: "bunny-text-slate-500 bunny-text-right bunny-text-xs bunny-mb-2", children: "TOTAL" }), jsxRuntime.jsx("div", { className: `bunny-text-right ${isMobile ? 'bunny-text-2xl' : 'bunny-text-xl'}`, children: common.formatCurrency(getQuoteAmountDue(editingQuote), (editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.currencyId) || '') })] })), jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-justify-end ${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", onClick: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial)
+                        ? () => trialUpgradeMutation.mutate(editingQuoteData.id)
+                        : openCheckout, disabled: disabled, size: isMobile ? 'large' : 'middle', type: "primary", children: (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.isTrial) ? 'Activate Trial' : 'Proceed to checkout' }) })] }));
+};
+
+const QUANTITY_CHANGE_HEADER_TITLE = 'Update quantities';
+const QUANTITY_CHANGE_HEADER_DESCRIPTION = 'Adjust quantities below. The change will take effect immediately after checkout has been completed.';
+const QuantityDrawerDesktop_SubscriptionFragment = t(`
+    fragment QuantityDrawerDesktop_SubscriptionFragment on Subscription {
+      currentCharges {
+        chargeType
+        ...QuantityChangeGridRow_SubscriptionChargeFragment
+      }
+      ...QuantityChangeGridRow_SubscriptionFragment
     }
-    const recalculateTaxesEnabled = Boolean(quote) &&
-        open &&
-        hasTaxPlugin &&
-        !taxationRequiredAccountFields &&
-        !isLoadingTaxationRequiredAccountFields &&
-        !isUpdatingQuote;
-    reactQuery.useQuery({
-        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({
-            id: quote === null || quote === void 0 ? void 0 : quote.id,
-            token,
-        }),
-        queryFn: recalculateTaxes,
-        // Recalculate taxes if the quote is open, has a tax plugin, and the taxation required account fields are not required
-        enabled: recalculateTaxesEnabled,
-        staleTime: 0,
-    });
-    if (!open || isLoadingTaxationRequiredAccountFields || isLoadingAccount)
+  `, [QuantityChangeGridRow_SubscriptionFragment, QuantityChangeGridRow_SubscriptionChargeFragment]);
+const QuantityChangeDrawerDesktop = ({ editingQuote, editingQuoteData, onClose, open, openCheckout, setEditingQuoteData, subscriptions, setUpdatingChargeQuantityId, updatingChargeQuantityId, }) => {
+    const [openLocal, setOpenLocal] = react.useState(open);
+    const [errorUpdatingQuantity, setErrorUpdatingQuantity] = react.useState(false);
+    const isMobile = common.useIsMobile();
+    react.useEffect(() => {
+        let timeoutId;
+        if (!open) {
+            timeoutId = setTimeout(() => {
+                setOpenLocal(false);
+            }, 300); // Delay to allow for close animation
+        }
+        else {
+            setOpenLocal(true);
+        }
+        return () => clearTimeout(timeoutId);
+    }, [open]);
+    if (!openLocal)
         return null;
-    return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
-      bunny-overflow-auto bunny-height-full`, style: {
-            zIndex: 1001,
-        }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_a = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _a === void 0 ? void 0 : _a.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : quote ? quote.formattedQuote.html : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: invoice }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
-                                onFail(error);
-                            }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
-                                if (recalculateTaxesEnabled) {
-                                    await recalculateTaxes();
-                                }
-                            } })) : (jsxRuntime.jsx(PaymentForm, { onFail: error => {
-                                onFail(error);
-                            }, onPaymentSuccess: onSuccess }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
+    return (jsxRuntime.jsxs(antd.Drawer, { closeIcon: null, destroyOnHidden: true, onClose: onClose, open: open, styles: isMobile
+            ? {
+                body: {
+                    padding: '1rem',
+                    background: common.SLATE_50,
+                },
+                wrapper: {
+                    width: '100vw',
+                },
+            }
+            : {
+                wrapper: {
+                    minWidth: '600px',
+                },
+            }, title: jsxRuntime.jsx(DrawerHeader, { description: QUANTITY_CHANGE_HEADER_DESCRIPTION, onClose: onClose, title: QUANTITY_CHANGE_HEADER_TITLE, closeButtonClassName: "ant-drawer-close" }), children: [jsxRuntime.jsxs("div", { className: "bunny-grid bunny-pb-2", style: {
+                    gridTemplateColumns: '3fr 3fr 2fr',
+                    rowGap: '0.25rem',
+                    columnGap: '1rem',
+                }, children: [jsxRuntime.jsx(QuantityChangeGridTitle, { children: " " }), jsxRuntime.jsx(QuantityChangeGridTitle, { right: true, children: "CURRENT QUANTITY" }), jsxRuntime.jsx(QuantityChangeGridTitle, { right: true, children: "NEW QUANTITY" }), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full", style: { marginBottom: '8px', marginTop: '20px' } }), subscriptions.map((maskedSubscription, index) => {
+                        var _a;
+                        const subscription = readFragment(QuantityDrawerDesktop_SubscriptionFragment, maskedSubscription);
+                        return (jsxRuntime.jsx("div", { className: "bunny-contents", children: (_a = subscription === null || subscription === void 0 ? void 0 : subscription.currentCharges) === null || _a === void 0 ? void 0 : _a.map((charge, chargeIndex) => {
+                                if (charge.chargeType === 'USAGE')
+                                    return null;
+                                return (jsxRuntime.jsx(QuantityChangeGridRow, { editingQuote: editingQuote, editingQuoteId: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionCharge: charge, setUpdatingChargeQuantityId: setUpdatingChargeQuantityId, updatingChargeQuantityId: updatingChargeQuantityId, setErrorUpdatingQuantity: setErrorUpdatingQuantity }, chargeIndex));
+                            }) }, index));
+                    })] }), jsxRuntime.jsx(QuoteChangeSummarySection, { editingQuote: editingQuote, editingQuoteData: editingQuoteData, openCheckout: openCheckout, setEditingQuoteData: setEditingQuoteData, errorUpdatingQuantity: errorUpdatingQuantity })] }));
 };
 
 function invalidateSubscriptionsQueryKeys(queryClient, token) {
@@ -22524,26 +22501,41 @@ function invalidateSubscriptionsQueryKeys(queryClient, token) {
     });
 }
 
-const QuantityDrawerContainer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
-    const { apiHost } = react.useContext(BunnyContext);
+const useQuoteQueryData = (quoteId) => {
     const token = useToken();
-    const queryClient = reactQuery.useQueryClient();
-    const showSuccessNotification = common.useSuccessNotification();
-    // State management
-    const [editingQuoteData, setEditingQuoteData] = react.useState();
-    const [payModalVisible, setPayModalVisible] = react.useState(false);
-    const [updatingChargeQuantityId, setUpdatingChargeQuantityId] = react.useState(undefined);
-    // Quote query
     const { data } = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createObjectKey({
-            id: editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id,
+            id: quoteId,
             objectName: 'editingQuote',
             token,
         }),
-        queryFn: () => (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote$1({ token, id: editingQuoteData.id, apiHost }) : undefined,
-        enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
+        queryFn: () => {
+            // This queryFn should never be called if data is set via setQueryData
+            // If called, it means data doesn't exist - return undefined
+            // In practice, data should always be set via setQueryData before this hook is used
+            return undefined;
+        },
+        enabled: false,
+        staleTime: Infinity, // Never consider data stale, only use cache
+        gcTime: Infinity, // Never garbage collect this data
+        // Don't refetch if data exists in cache
+        refetchOnMount: false,
+        refetchOnWindowFocus: false,
+        refetchOnReconnect: false,
     });
-    const quote = data;
+    return data;
+};
+
+const QuantityDrawer = ({ subscriptions, quantityDrawerOpen, setQuantityDrawerOpen, handlePortalErrors, setShowInactive, }) => {
+    const token = useToken();
+    const queryClient = reactQuery.useQueryClient();
+    const showSuccessNotification = common.useSuccessNotification();
+    // State management
+    const [editingQuoteData, setEditingQuoteData] = react.useState();
+    const [payModalVisible, setPayModalVisible] = react.useState(false);
+    const [updatingChargeQuantityId, setUpdatingChargeQuantityId] = react.useState(undefined);
+    const maskedQuote = useQuoteQueryData(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id);
+    const quote = readFragment(QuantityDrawer_QuoteFragment, maskedQuote);
     // Handlers
     const onSuccess = () => {
         setQuantityDrawerOpen(false);
@@ -23618,6 +23610,58 @@ const SubscriptionsListContainer = ({ companyName, showInactive = false, onCance
 
 const QuoteContext = react.createContext({});
 
+const quoteSubscriptionUpgrade = ({ subscriptionId, priceListId, apiHost, token, }) => {
+    return gqlRequest({
+        query: `mutation QuoteSubscriptionUpgrade($subscriptionId: ID!, $priceListId: ID!) {
+      quoteSubscriptionUpgrade(
+        subscriptionId: $subscriptionId
+        priceListId: $priceListId
+      ) {
+        quote {
+          id
+        }
+      }
+    }`,
+        vars: { subscriptionId, priceListId },
+        apiHost,
+        token,
+    });
+};
+const quoteSubscriptionAddon = ({ subscriptionId, priceListId, apiHost, token, }) => {
+    return gqlRequest({
+        query: `mutation QuoteSubscriptionAddon($subscriptionId: ID!, $priceListId: ID) {
+      quoteSubscriptionAddon(subscriptionId: $subscriptionId, priceListId: $priceListId) {
+        errors
+        quote {
+          id
+        }
+      }
+    }`,
+        vars: {
+            subscriptionId,
+            priceListId,
+        },
+        apiHost,
+        token,
+    });
+};
+const quoteSubscriptionActivate = ({ subscriptionId, apiHost, token, }) => {
+    return gqlRequest({
+        query: `mutation QuoteSubscriptionActivate($subscriptionId: ID!) {
+      quoteSubscriptionActivate(subscriptionId: $subscriptionId) {
+        quote {
+          id
+        }
+      }
+    }`,
+        vars: {
+            subscriptionId,
+        },
+        apiHost,
+        token,
+    });
+};
+
 const FormattedQuoteFields_QuoteFragment = t(`
   fragment FormattedQuoteFields_QuoteFragment on Quote {
     formattedQuote {
@@ -24594,6 +24638,52 @@ const PriceListCard = ({ hideButton, isSelected, priceList, subscriptions, trial
         disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsxRuntime.jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
 };
 
+const QUOTE_CHARGE_CREATE = `
+${QUOTE_FIELDS()}
+mutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {
+  quoteChargeCreate(
+    endDate: $endDate
+    price: $price
+    priceListChargeId: $priceListChargeId
+    quantity: $quantity
+    quoteChangeId: $quoteChangeId
+    startDate: $startDate
+    subscriptionChargeId: $subscriptionChargeId
+  ) {
+    quoteCharge {
+      quoteChange {
+        id
+        quoteId
+        quote {
+          ...QuoteFields
+        }
+      }
+      id
+    }
+  }
+}
+
+`;
+const quoteChargeCreate = async ({ price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }) => {
+    const response = await gqlRequest({
+        query: QUOTE_CHARGE_CREATE,
+        vars: {
+            price,
+            priceListChargeId,
+            quantity,
+            quoteChangeId,
+            startDate,
+            subscriptionChargeId,
+        },
+        apiHost,
+        token,
+    });
+    if (response.errors) {
+        throw new Error(response.errors[0].message);
+    }
+    return response.quoteChargeCreate.quoteCharge;
+};
+
 const mutation = t(`
     mutation QuoteChargeDelete($quoteChargeId: ID!) {
       quoteChargeDelete(quoteChargeId: $quoteChargeId) {
@@ -25803,7 +25893,7 @@ const Subscriptions = ({ handlePortalErrors, companyName, noSubscriptionsCompone
                 setIsChangingPlan(false);
             }, handlePortalErrors: handlePortalErrors, upgradingSubscription: upgradingSubscription, className: className, shadow: shadow }));
     }
-    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx(PageHeaderWithActions, { title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showInactiveSubscriptionsToggle && isMobile && inactiveSwitchVisible && (jsxRuntime.jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && ((_f = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _f === void 0 ? void 0 : _f.nodes) && (jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: !showInactiveSubscriptionsToggle && inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_g = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _g === void 0 ? void 0 : _g.nodes })) }), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: (_h = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _h === void 0 ? void 0 : _h.nodes, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && ((_j = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _j === void 0 ? void 0 : _j.nodes) && (jsxRuntime.jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_k = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _k === void 0 ? void 0 : _k.nodes }) })), ((_l = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _l === void 0 ? void 0 : _l.nodes) && (jsxRuntime.jsx(QuantityDrawerContainer, { subscriptions: (_m = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _m === void 0 ? void 0 : _m.nodes, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactiveSubscriptionsState }))] }));
+    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx(PageHeaderWithActions, { title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showInactiveSubscriptionsToggle && isMobile && inactiveSwitchVisible && (jsxRuntime.jsx(ShowInactiveToggle, { showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState })) }), children: !isMobile && ((_f = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _f === void 0 ? void 0 : _f.nodes) && (jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: !showInactiveSubscriptionsToggle && inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_g = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _g === void 0 ? void 0 : _g.nodes })) }), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, showInactive: showInactiveSubscriptions, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: (_h = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _h === void 0 ? void 0 : _h.nodes, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && ((_j = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _j === void 0 ? void 0 : _j.nodes) && (jsxRuntime.jsx("div", { className: "bunny-pt-4 bunny-pb-2", children: jsxRuntime.jsx(SubscriptionsNavigation, { inactiveSwitchVisible: inactiveSwitchVisible, showInactive: showInactiveSubscriptions, setShowInactive: setShowInactiveSubscriptionsState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: (_k = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _k === void 0 ? void 0 : _k.nodes }) })), ((_l = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _l === void 0 ? void 0 : _l.nodes) && (jsxRuntime.jsx(QuantityDrawer, { subscriptions: (_m = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _m === void 0 ? void 0 : _m.nodes, quantityDrawerOpen: quantityDrawerOpen, setQuantityDrawerOpen: setQuantityDrawerOpen, handlePortalErrors: handlePortalErrors, setShowInactive: setShowInactiveSubscriptionsState }))] }));
 };
 const PageHeaderWithActions = ({ children, title, }) => {
     const isMobile = common.useIsMobile();