@bunnyapp/components 1.7.0-beta.32 → 1.7.0-beta.34

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, isValidElement, createContext, useContext, useMemo, createElement, useRef, useCallback, Fragment as Fragment$1 } from 'react';
-import { WarningOutlined, CheckCircleOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, DownloadOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
-import { notification, theme, ConfigProvider, Tag, Button, Dropdown, Typography, Input, Modal, Checkbox, Skeleton, Collapse, Spin, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Popconfirm, Table, Radio, Space, Switch } from 'antd';
+import { WarningOutlined, CheckCircleOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, DownloadOutlined, SearchOutlined, CheckCircleFilled, InfoCircleOutlined, CloseOutlined } from '@ant-design/icons';
+import { notification, theme, ConfigProvider, Tag, Button, Dropdown, Typography, Input, Modal, Checkbox, Skeleton, Collapse, Spin, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { QueryClient, QueryCache, QueryClientProvider, useQuery, useMutation, useQueryClient, keepPreviousData } from '@tanstack/react-query';
 import request$1 from 'graphql-request';
 import { RecoilRoot } from 'recoil';
@@ -1281,7 +1281,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.31';
+const PACKAGE_VERSION = '1.7.0-beta.33';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -1331,7 +1331,7 @@ const createClientDevHeaders = ({ token, componentsVersion, additionalHeaders, }
     return headers;
 };
 
-const MUTATION$7 = `
+const MUTATION$5 = `
 query FormattedInvoice($id: ID) {
   formattedInvoice(id: $id) {
     amount
@@ -1399,7 +1399,7 @@ query FormattedInvoice($id: ID) {
 const getFormattedInvoice = async ({ id, token, apiHost, }) => {
     const vars = { id };
     const response = await gqlRequest({
-        query: MUTATION$7,
+        query: MUTATION$5,
         token,
         vars,
         apiHost,
@@ -2246,7 +2246,7 @@ function readFragment(...r) {
 
 var t = initGraphQLTada();
 
-const query$9 = t(`
+const query$a = t(`
   query entityBranding {
     entityBranding {
       accentColor
@@ -2256,13 +2256,17 @@ const query$9 = t(`
   }
 `);
 const getBranding = async ({ token, apiHost }) => {
-    return await execute(query$9, { apiHost, token }, {});
+    return await execute(query$a, { apiHost, token }, {});
 };
 
 const BunnyContext = createContext({});
 // Every component shares similar props and functionality, which this wrapper handles.
 function BunnyProvider({ children, darkMode = false, queryClient, apiHost, token, onTokenExpired, onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification = false, configProviderProps, }) {
-    return (jsx(BunnyProviderCallbacksProvider, { value: { onUserUnavailable, onInvalidOrMissingAuthorization, suppressUserUnavailableErrorNotification }, children: jsx(BunnyProviderContent, { darkMode: darkMode, queryClient: queryClient, apiHost: apiHost, token: token, onTokenExpired: onTokenExpired, configProviderProps: configProviderProps, children: children }) }));
+    return (jsx(BunnyProviderCallbacksProvider, { value: {
+            onUserUnavailable,
+            onInvalidOrMissingAuthorization,
+            suppressUserUnavailableErrorNotification,
+        }, children: jsx(BunnyProviderContent, { darkMode: darkMode, queryClient: queryClient, apiHost: apiHost, token: token, onTokenExpired: onTokenExpired, configProviderProps: configProviderProps, children: children }) }));
 }
 function BunnyProviderContent({ children, darkMode = false, queryClient, apiHost, token, onTokenExpired, configProviderProps, }) {
     const createQueryClient = useCreateQueryClient();
@@ -19830,7 +19834,7 @@ const PaymentForm_PaymentMethodsFragment = t(`
     }
   `, [MiniCreditCard_PaymentMethodFragment]);
 
-const query$8 = t(`
+const query$9 = t(`
     query PaymentMethods($accountId: ID) {
       paymentMethods(accountId: $accountId) {
         nodes {
@@ -19859,7 +19863,7 @@ const query$8 = t(`
   `, [PaymentForm_PaymentMethodsFragment]);
 const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
     var _a, _b, _c;
-    const response = await execute(query$8, { apiHost, token }, { accountId });
+    const response = await execute(query$9, { apiHost, token }, { accountId });
     // Filter out null values that are technically possible due to api schema
     return (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.filter(paymentMethod => paymentMethod !== null)) !== null && _c !== void 0 ? _c : [];
 };
@@ -19884,7 +19888,7 @@ const usePaymentMethod = ({ accountId, enabled = true, }) => {
     };
 };
 
-const mutation$e = t(`
+const mutation$g = t(`
   query PaymentPlugins($accountId: ID) {
     paymentPlugins(accountId: $accountId) {
       enabled
@@ -19912,7 +19916,7 @@ const mutation$e = t(`
 //   }[];
 // };
 const getPaymentPlugins = async ({ apiHost, token, accountId, }) => {
-    const response = await execute(mutation$e, { apiHost, token }, { accountId });
+    const response = await execute(mutation$g, { apiHost, token }, { accountId });
     return response === null || response === void 0 ? void 0 : response.paymentPlugins;
 };
 const usePaymentPlugins = (accountId) => {
@@ -20131,7 +20135,7 @@ function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
     return { save, isSaving };
 }
 
-const MUTATION$6 = `
+const MUTATION$4 = `
   mutation checkout(
     $invoiceId: ID,
     $quoteId: ID,
@@ -20180,7 +20184,7 @@ const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData
         };
     }
     const response = await gqlRequest({
-        query: MUTATION$6,
+        query: MUTATION$4,
         token,
         vars: mutationVars,
         apiHost: apiHost,
@@ -21181,7 +21185,7 @@ const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMet
     ]);
 };
 
-const query$7 = t(`
+const query$8 = t(`
   query GetCurrentUserData {
     company {
       name
@@ -21204,7 +21208,7 @@ const query$7 = t(`
 `);
 const getCurrentUserData = async ({ token, apiHost }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const response = await execute(query$7, { apiHost, token }, {});
+    const response = await execute(query$8, { apiHost, token }, {});
     return {
         authObjectName: (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.authObjectName,
         account: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.account,
@@ -21971,7 +21975,7 @@ const StyledModal$2 = (props) => {
     return jsx(ModalOverrideBrandStylings, { closable: false, ...props });
 };
 
-const query$6 = t(`
+const query$7 = t(`
     query formattedQuote($id: ID) {
       formattedQuote(id: $id) {
         quote {
@@ -22122,7 +22126,7 @@ const query$6 = t(`
     QuoteButtons_FormattedQuoteFragment,
 ]);
 const getFormattedQuote = async ({ token, apiHost, id, }) => {
-    const response = await execute(query$6, { apiHost, token }, { id });
+    const response = await execute(query$7, { apiHost, token }, { id });
     return response === null || response === void 0 ? void 0 : response.formattedQuote;
 };
 
@@ -22936,6 +22940,110 @@ function QuotesWrapper() {
     return (jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
+const shouldShowCouponEditor_QuoteFragment = t(`
+    fragment shouldShowCouponEditor_QuoteFragment on Quote {
+      id
+      kind
+      amountDue
+    }
+  `, []);
+const shouldShowCouponEditor_SubscriptionFragment = t(`
+    fragment shouldShowCouponEditor_SubscriptionFragment on Subscription {
+      id
+      state
+      charges {
+        discountedPrice
+      }
+    }
+  `, []);
+function shouldShowCouponEditor(maskedQuote, activeCouponsExist, maskedUpgradingSubscription) {
+    var _a, _b;
+    const quote = readFragment(shouldShowCouponEditor_QuoteFragment, maskedQuote);
+    const upgradingSubscription = readFragment(shouldShowCouponEditor_SubscriptionFragment, maskedUpgradingSubscription);
+    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') ||
+        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+            t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
+    const signingUpForNewSubscription = upgradingSubscription === undefined;
+    function upgradingFromFree() {
+        var _a;
+        const totalPrice = (_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _a === void 0 ? void 0 : _a.reduce((acc, charge) => acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0), 0);
+        return totalPrice === 0;
+    }
+    const quoteKindIsValid = (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'SUBSCRIBE') ||
+        (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'ADJUSTMENT') ||
+        (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'ACTIVATE');
+    // if amount due is 0 do not show coupon editor
+    if ((quote === null || quote === void 0 ? void 0 : quote.amountDue) == 0) {
+        return false;
+    }
+    if (quoteKindIsValid) {
+        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree() || signingUpForNewSubscription);
+    }
+    return false;
+}
+
+function CouponEditor({ className, onAddCoupon, isAddingCoupon, couponCode, setCouponCode, }) {
+    async function handleAddCoupon() {
+        onAddCoupon(couponCode);
+    }
+    return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 ${className}`, children: jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2", children: [jsx(Input, { value: couponCode, onChange: e => setCouponCode(e.target.value), placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsx(Button, { loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0, children: "Apply" })] }) }));
+}
+
+const { Text: Text$q } = Typography;
+const CheckoutSummary_PriceListFragment = t(`
+    fragment CheckoutSummary_PriceListFragment on PriceList {
+      product {
+        name
+      }
+      name
+    }
+  `);
+const CheckoutSummary_QuoteFragment = t(`
+    fragment CheckoutSummary_QuoteFragment on Quote {
+      id
+      amountDue
+      subtotal
+      taxAmount
+      currencyId
+      quoteChanges {
+        charges {
+          id
+          kind
+          name
+          coupon {
+            couponCode
+          }
+          quantity
+          subtotal
+          currencyId
+        }
+      }
+      ...shouldShowCouponEditor_QuoteFragment
+    }
+  `, [shouldShowCouponEditor_QuoteFragment]);
+function CheckoutSummary({ quote: maskedQuote, className, onAddCoupon, onRemoveCoupon, isRemovingCoupon, priceList: maskedPriceList, isAddingCoupon, couponCode, setCouponCode, activeCouponsExist, }) {
+    var _a, _b;
+    const priceList = readFragment(CheckoutSummary_PriceListFragment, maskedPriceList);
+    const quote = readFragment(CheckoutSummary_QuoteFragment, maskedQuote);
+    return (jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxs(Text$q, { children: [jsxs("div", { className: "bunny-text-lg bunny-font-medium bunny-mb-4", children: ["Checkout summary - ", (_a = priceList === null || priceList === void 0 ? void 0 : priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList === null || priceList === void 0 ? void 0 : priceList.name] }), jsx("div", { className: "bunny-space-y-4", children: (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.map(quoteChange => quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(charge => {
+                            var _a;
+                            const multiplier = charge.kind === 'COUPON' ? -1 : 1;
+                            return (jsxs("div", { className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center", children: [jsx("div", { className: "bunny-col-span-1", children: charge.name }), jsx("div", { className: "bunny-col-span-1 bunny-text-center", children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsx("button", { onClick: () => {
+                                                var _a, _b;
+                                                if (isRemovingCoupon) {
+                                                    return;
+                                                }
+                                                if (!((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode)) {
+                                                    throw new Error('Coupon code not found');
+                                                }
+                                                onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
+                                            }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer bunny-bg-transparent bunny-border-none", children: "Remove" })) : (jsx("div", { children: charge.quantity })) }), jsx("div", { className: "bunny-col-span-1 bunny-text-right", children: formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) })] }, charge.id));
+                        })) }), jsx(CheckoutSummaryDivider, {}), jsxs("div", { className: "bunny-space-y-4", children: [jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.subtotal, quote.currencyId) })] }), jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] })] }), jsx(CheckoutSummaryDivider, {}), jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] })] }), shouldShowCouponEditor(quote, activeCouponsExist) && (jsx(CouponEditor, { className: "bunny-w-full", onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] }));
+}
+const CheckoutSummaryDivider = () => {
+    return (jsx("div", { className: "bunny-my-2", children: jsx(Divider, { className: "m-0" }) }));
+};
+
 const { Title: Title$1 } = Typography;
 const PaymentForms_QuoteFragment = t(`
     fragment PaymentForms_QuoteFragment on Quote {
@@ -22981,404 +23089,77 @@ function InitialSignupForm({ className, onSubmit, submitting, defaultValues, })
                                 } }) }) }) }), jsx(Form.Item, { children: jsx(Button, { type: "primary", onClick: handleSubmit, loading: submitting, className: "bunny-w-full", children: "Proceed to payment" }) })] }) }));
 }
 
-const QuoteContext = createContext({});
-
-const [SubscriptionPropsProvider, useSubscriptionProps] = createValueContext();
-
-var ChargeType;
-(function (ChargeType) {
-    ChargeType["USAGE"] = "USAGE";
-    ChargeType["ONE_TIME"] = "ONE_TIME";
-    ChargeType["RECURRING"] = "RECURRING";
-})(ChargeType || (ChargeType = {}));
-var ChargeType$1 = ChargeType;
-
-const canSubscriptionUpgradeFromTrial_SubscriptionFragment = t(`
-    fragment canSubscriptionUpgradeFromTrial_SubscriptionFragment on Subscription {
-      state
-      plan {
-        selfServiceBuy
+const Signup_QuoteFragment = t(`
+    fragment Signup_QuoteFragment on Quote {
+      ...CheckoutSummary_QuoteFragment
+      ...PaymentForms_QuoteFragment
+      id
+      currencyId
+      amountDue
+      quoteChanges {
+        id
       }
     }
-  `);
-const canSubscriptionUpgradeFromTrial = (maskedSubscription) => {
-    var _a, _b;
-    const subscription = readFragment(canSubscriptionUpgradeFromTrial_SubscriptionFragment, maskedSubscription);
-    return ((((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
-        ((_b = subscription.plan) === null || _b === void 0 ? void 0 : _b.selfServiceBuy)) ||
-        false);
-};
+  `, [CheckoutSummary_QuoteFragment, PaymentForms_QuoteFragment]);
 
-const canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment = t(`
-    fragment canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment on Subscription {
-      state
-      plan {
-        selfServiceBuy
+const query$6 = t(`
+    query quote($id: ID) {
+      quote(id: $id) {
+        ...Signup_QuoteFragment
       }
     }
-  `);
-const canSubscriptionUpgradeFromTrialExpired = (maskedSubscription) => {
-    var _a, _b;
-    const subscription = readFragment(canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment, maskedSubscription);
-    return ((((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
-        ((_b = subscription.plan) === null || _b === void 0 ? void 0 : _b.selfServiceBuy)) ||
-        false);
+  `, [Signup_QuoteFragment]);
+const getQuote$1 = async ({ id, token, apiHost, }) => {
+    const response = await execute(query$6, { apiHost, token }, { id });
+    return response === null || response === void 0 ? void 0 : response.quote;
 };
 
-const graphql = initGraphQLTada();
-
-const periodMonthsConverter = (period) => {
-    if (period === 0)
-        return graphql.scalar('BillingPeriod', 'ONCE');
-    else if (period === 1)
-        return graphql.scalar('BillingPeriod', 'MONTHLY');
-    else if (period === 3)
-        return graphql.scalar('BillingPeriod', 'QUARTERLY');
-    else if (period === 6)
-        return graphql.scalar('BillingPeriod', 'SEMI_ANNUAL');
-    else if (period === 12)
-        return graphql.scalar('BillingPeriod', 'ANNUAL');
-    else
-        return null;
-};
-const billingPeriodConverter = (period) => {
-    if (period === graphql.scalar('BillingPeriod', 'ONCE'))
-        return 0;
-    else if (period === graphql.scalar('BillingPeriod', 'MONTHLY'))
-        return 1;
-    else if (period === graphql.scalar('BillingPeriod', 'QUARTERLY'))
-        return 3;
-    else if (period === graphql.scalar('BillingPeriod', 'SEMI_ANNUAL'))
-        return 6;
-    else
-        return 12;
+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'));
 };
 
-function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
-    const flattenedPriceLists = addonPlans.flatMap(addonPlan => addonPlan.priceLists);
-    return flattenedPriceLists.filter(priceList => priceList.periodMonths === billingPeriodConverter(billingPeriod));
-}
-
-const hasUnpurchasedAddonPriceLists_PlanFragment = t(`
-    fragment hasUnpurchasedAddonPriceLists_PlanFragment on Plan {
-      priceLists {
+const MUTATION$3 = `mutation quoteChangeAddCoupon($couponCode: String!, $quoteChangeId: ID!) {
+    quoteChangeAddCoupon(couponCode: $couponCode, quoteChangeId: $quoteChangeId) {
+      quoteChange {
         id
-        isVisible
-        periodMonths
+        charges {
+          id
+          amount
+          couponId
+        }
       }
     }
-  `);
-function hasUnpurchasedAddonPriceLists(maskedPriceListAddonPlans, currentSubscription, billingPeriod) {
-    // Read fragments
-    const priceListAddonPlans = maskedPriceListAddonPlans.map(maskedAddonPlan => readFragment(hasUnpurchasedAddonPriceLists_PlanFragment, maskedAddonPlan));
-    const addonPriceLists = getAddonsForBillingPeriod(billingPeriod, priceListAddonPlans).filter(priceList => priceList.isVisible);
-    const unpurchasedAddonPriceLists = addonPriceLists === null || addonPriceLists === void 0 ? void 0 : addonPriceLists.filter(addonPriceList => {
-        var _a;
-        return !((_a = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(addonSubscription => addonSubscription.priceList.id === addonPriceList.id));
+}`;
+const quoteChangeAddCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
+    var _a;
+    const vars = { couponCode, quoteChangeId };
+    const response = await gqlRequest({
+        query: MUTATION$3,
+        token,
+        vars,
+        apiHost,
     });
-    return unpurchasedAddonPriceLists.length > 0;
-}
-
-var QuoteChangeKind;
-(function (QuoteChangeKind) {
-    QuoteChangeKind["ADJUSTMENT"] = "ADJUSTMENT";
-    QuoteChangeKind["COUPON"] = "COUPON";
-    QuoteChangeKind["CREDIT"] = "CREDIT";
-    QuoteChangeKind["DISCOUNT"] = "DISCOUNT";
-    QuoteChangeKind["FREE_PERIOD_DISCOUNT"] = "FREE_PERIOD_DISCOUNT";
-    QuoteChangeKind["PRICE_UPDATE"] = "PRICE_UPDATE";
-    QuoteChangeKind["QUANTITY_UPDATE"] = "QUANTITY_UPDATE";
-    QuoteChangeKind["REINSTATE"] = "REINSTATE";
-    QuoteChangeKind["RENEW"] = "RENEW";
-    QuoteChangeKind["SUBSCRIBE"] = "SUBSCRIBE";
-    QuoteChangeKind["UNSUBSCRIBE"] = "UNSUBSCRIBE";
-    QuoteChangeKind["UPDATE"] = "UPDATE";
-    QuoteChangeKind["ACTIVATE"] = "ACTIVATE";
-})(QuoteChangeKind || (QuoteChangeKind = {}));
-var QuoteChangeKind$1 = QuoteChangeKind;
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _a === void 0 ? void 0 : _a.errors;
+    if (errors)
+        throw errors;
+    return response.quote;
+};
 
-function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
-    const featureAddons = priceList.charges.filter(charge => charge.featureAddon);
-    const purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(charge => { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
-    const unpurchasedFeatureAddons = featureAddons.filter(charge => !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(purchasedCharge => { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; })));
-    return unpurchasedFeatureAddons.length > 0;
-}
-function findQuoteChangeForFeatureAddon(quote) {
-    return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(qc => qc.kind === QuoteChangeKind$1.UPDATE ||
-        qc.kind === QuoteChangeKind$1.SUBSCRIBE ||
-        qc.kind === QuoteChangeKind$1.ACTIVATE);
-}
-function featureAddonInQuote(selectedPriceList, priceListCharge, quote) {
-    var _a, _b, _c;
-    const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(qc => { var _a; return ((_a = qc === null || qc === void 0 ? void 0 : qc.priceList) === null || _a === void 0 ? void 0 : _a.id) === selectedPriceList.id; });
-    if (!quoteChange)
-        return false;
-    return (_c = (_b = quoteChange.charges) === null || _b === void 0 ? void 0 : _b.some(c => { var _a; return ((_a = c.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListCharge.id; })) !== null && _c !== void 0 ? _c : false;
-}
-// ID Cucumber will use to find the feature addon switch
-function featureAddonSwitchTestId(addonName) {
-    const name = addonName.toLowerCase().replace(/ /g, '-');
-    return `feature-addon-switch-${name}`;
-}
-
-const removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
-// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
-const createPlanDescription = (planDescription) => {
-    return (planDescription || '').replace(removeHTMLTagsRegex, (_, y) => (y ? ' & ' : ''));
-};
-const getActivePlanPriceData = (priceList, selectedPriceList) => {
-    if (!priceList) {
-        return;
-    }
-    // If a period option is selected, return the charge that matches the selected period option
-    let activeBillingPLCharge;
-    // Default to first price list charge
-    let lowestPLCharge;
-    // Find the lowest price list charge with a billing period that matches the selected period option
-    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
-        activeBillingPLCharge = priceList.charges[0];
-    }
-    for (let j = 0; j < priceList.charges.length; j++) {
-        const charge = priceList.charges[j];
-        if (charge.chargeType === ChargeType$1.USAGE || charge.featureAddon === true)
-            continue;
-        if (activeBillingPLCharge) {
-            // If we already found a charge with the same billing period check if this charge is lower
-            if (charge.basePrice < activeBillingPLCharge.basePrice &&
-                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
-                activeBillingPLCharge = charge;
-            }
-        }
-        // If a period option is selected, only return the charge if it matches the selected period option
-        else if (selectedPriceList &&
-            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
-            activeBillingPLCharge = charge;
-        }
-        // Otherwise, return the lowest price list charge
-        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
-            lowestPLCharge = charge;
-        }
-    }
-    return {
-        activeCharge: activeBillingPLCharge || lowestPLCharge,
-    };
-};
-const showErrorNotification$3 = useErrorNotification();
-const isPriceListDisabled = ({ priceList, upgradingSubscription, }) => {
-    const priceListAddonPlans = priceList === null || priceList === void 0 ? void 0 : priceList.plan.addonPlans;
-    if (!priceListAddonPlans) {
-        showErrorNotification$3('Price list addon plans are undefined');
-        return false;
-    }
-    const canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
-    const canPurchasePlanAddons = hasUnpurchasedAddonPriceLists(priceListAddonPlans, upgradingSubscription, periodMonthsConverter(priceList.periodMonths));
-    const existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription); // TODO: set type properly later
-    const existingSubscriptionInTrialExpired = upgradingSubscription && canSubscriptionUpgradeFromTrialExpired(upgradingSubscription); // TODO: set type properly later
-    const isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
-    // When should priceList be disabled?
-    // if upgradingSubscription?.priceList.id === priceList.id
-    //     AND the upgradingSubscription is not in trial
-    //     AND cannot purchase feature addons
-    //     AND cannot purchase add-on plans
-    //     AND selfServiceBuy is false
-    // if upgradingSubscription?.priceList.id != priceList.id
-    //     AND upgradingSubscription is expired trial
-    //     AND priceList is not deprecated
-    if (isUpgradingSubscriptionPriceList) {
-        return (!existingSubscriptionInTrial &&
-            !existingSubscriptionInTrialExpired &&
-            !canPurchaseFeatureAddons &&
-            !canPurchasePlanAddons);
-    }
-    else if (priceList === null || priceList === void 0 ? void 0 : priceList.deprecated) {
-        return true;
-    }
-    else {
-        return false;
-    }
-};
-
-const CheckoutButton = ({ disabled, onClickCheckout, loading, tooltipText, }) => {
-    const isMobile = useIsMobile();
-    const TooltipWrapper = ({ children }) => {
-        if (tooltipText) {
-            return jsx(Tooltip, { title: tooltipText, children: children });
-        }
-        return jsx("div", { children: children });
-    };
-    return (jsx(TooltipWrapper, { children: jsx(Button, { className: isMobile ? 'w-full' : '', disabled: disabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading, children: "Proceed to checkout" }) }));
-};
-
-const CheckoutPrice_QuoteFragment = t(`
-    fragment CheckoutPrice_QuoteFragment on Quote {
-      periodAmount
-      amountDue
-    }
-  `);
-const CheckoutPrice = ({ isUsage, quote: maskedQuote, selectedPriceList, }) => {
-    var _a;
-    // Read fragments
-    const quote = readFragment(CheckoutPrice_QuoteFragment, maskedQuote);
-    // Hooks
-    const isMobile = useIsMobile();
-    // amountDue might not be available, so we use periodAmount as a fallback
-    const displayAmount = (_a = quote === null || quote === void 0 ? void 0 : quote.amountDue) !== null && _a !== void 0 ? _a : quote === null || quote === void 0 ? void 0 : quote.periodAmount;
-    if (!isUsage && (!selectedPriceList || displayAmount === undefined))
-        return null;
-    const convertedPeriodMonths = periodMonthsConverter(selectedPriceList.periodMonths);
-    const periodLabel = convertedPeriodMonths ? PERIOD_LABELS[convertedPeriodMonths] : 'undefined';
-    return (jsx("div", { className: `bunny-font-medium ${isMobile ? 'bunny-text-2xl' : ''}`, children: isUsage
-            ? 'Usage based pricing'
-            : selectedPriceList && displayAmount !== undefined
-                ? `${formatCurrency(displayAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, undefined)} / ${periodLabel}`
-                : '' }));
-};
-
-const { Text: Text$q } = Typography;
-const CheckoutBarSummarySection_QuoteFragment = t(`
-    fragment CheckoutBarSummarySection_QuoteFragment on Quote {
-      quoteChanges {
-        charges {
-          id
-        }
-      }
-      ...CheckoutPrice_QuoteFragment
-    }
-  `, [CheckoutPrice_QuoteFragment]);
-const CheckoutBarSummarySection = ({ selectedPriceList, onClickCheckout, }) => {
-    var _a, _b;
-    // Context
-    const { quote: maskedQuote, isQuotePending, isUpdatingQuote } = useContext(QuoteContext);
-    const quote = readFragment(CheckoutBarSummarySection_QuoteFragment, maskedQuote);
-    const { isInPreviewMode } = useSubscriptionProps();
-    // Hooks
-    const { paymentPlugins } = usePaymentPlugins(undefined);
-    const isMobile = useIsMobile();
-    const hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
-    const quoteHasCharges = Boolean((_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.some(qc => qc.charges.length > 0));
-    const checkoutButtonDisabled = Boolean(!selectedPriceList || !quoteHasCharges || !hasPaymentPlugins || isInPreviewMode);
-    const activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
-    const isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === ChargeType$1.USAGE;
-    return (jsxs(Text$q, { className: `bunny-flex bunny-items-center bunny-gap-4 ${isMobile ? 'bunny-flex-col' : ''}`, children: [quote && (jsxs("div", { className: `bunny-flex ${isMobile ? 'items-center justify-between w-full' : 'flex-col'}`, children: [jsx("div", { className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' }, children: "TOTAL" }), jsx(CheckoutPrice, { isUsage: isUsage, quote: quote, selectedPriceList: selectedPriceList })] })), jsx(CheckoutButton, { disabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: isInPreviewMode
-                    ? 'Checkout is disabled in preview mode'
-                    : !hasPaymentPlugins
-                        ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
-                        : undefined })] }));
-};
-
-const accountQuery = (id) => `
-query account {
-  account(id: ${id}) {
-    billingCountry
-    billingState
-    billingStreet
-    billingCity
-    billingZip
-  }
-}`;
-const getAccount$1 = async ({ id, apiHost, token, }) => {
-    const response = await gqlRequest({
-        query: accountQuery(id),
-        token,
-        apiHost,
-    });
-    return response === null || response === void 0 ? void 0 : response.account;
-};
-
-const MUTATION$5 = `{
-  currentUser {
-    taxationRequiredAccountFields
-  }
-}`;
-const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
-    var _a, _b;
-    const response = await gqlRequest({
-        query: MUTATION$5,
-        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 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 BunnyFooterIcon = ({ color }) => {
-    return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_6_851)", children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
-};
-
-const { Text: Text$p } = Typography;
-const Footer = ({ className }) => {
-    const token = useToken();
-    const { currentUser } = useCurrentUserData(token);
-    const { privacyUrl, termsUrl } = currentUser;
-    const isMobile = useIsMobile();
-    return (jsxs("div", { className: `bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ${isMobile ? 'bunny-flex-col bunny-gap-2' : ''} ${className}`, children: [(termsUrl || privacyUrl) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-3", children: [termsUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Terms" })), privacyUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Privacy" }))] })), jsx(BunnyMarketingLink, {})] }));
-};
-const BunnyMarketingLink = () => {
-    const [isHovered, setIsHovered] = useState(false);
-    const isMobile = useIsMobile();
-    return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$p, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
-};
-const StyedLink = styled.a `
-  color: ${SLATE_400};
-  transition: color 0.3s;
-  &:hover {
-    color: ${SLATE_500};
-  }
-  text-decoration: none;
-`;
-const StyledBunnyLink = styled(StyedLink) `
-  &:hover {
-    color: ${PRIMARY_COLOR} !important;
-  }
-`;
-
-const MUTATION$4 = `mutation quoteChangeAddCoupon($couponCode: String!, $quoteChangeId: ID!) {
-    quoteChangeAddCoupon(couponCode: $couponCode, quoteChangeId: $quoteChangeId) {
-      quoteChange {
-        id
-        charges {
-          id
-          amount
-          couponId
-        }
-      }
-    }
-}`;
-const quoteChangeAddCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
-    var _a;
-    const vars = { couponCode, quoteChangeId };
-    const response = await gqlRequest({
-        query: MUTATION$4,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAddCoupon) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response.quote;
-};
-
-const MUTATION$3 = `mutation quoteChangeRemoveCoupon($quoteChangeId: ID!, $couponCode: String!) {
-    quoteChangeRemoveCoupon(quoteChangeId: $quoteChangeId, couponCode: $couponCode) {
-        errors
-    }
+const MUTATION$2 = `mutation quoteChangeRemoveCoupon($quoteChangeId: ID!, $couponCode: String!) {
+    quoteChangeRemoveCoupon(quoteChangeId: $quoteChangeId, couponCode: $couponCode) {
+        errors
+    }
 }
 `;
 const quoteChangeRemoveCoupon = async ({ quoteChangeId, couponCode, token, apiHost, }) => {
     var _a;
     const vars = { couponCode, quoteChangeId };
     const response = await gqlRequest({
-        query: MUTATION$3,
+        query: MUTATION$2,
         token,
         vars,
         apiHost,
@@ -23406,7 +23187,7 @@ const getCoupons = async ({ token, apiHost, filter, }) => {
     return response === null || response === void 0 ? void 0 : response.coupons;
 };
 
-const showErrorNotification$2 = useErrorNotification();
+const showErrorNotification$3 = useErrorNotification();
 const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCouponRemoved, }) => {
     const { data: coupons } = useQuery({
         queryKey: ['coupons', token],
@@ -23432,7 +23213,7 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
         },
         onError: (error) => {
             var _a, _b;
-            showErrorNotification$2((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
+            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error adding coupon');
         },
     });
     const { mutate: removeCoupon, isPending: isRemovingCoupon } = useMutation({
@@ -23452,7 +23233,7 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
         },
         onError: (error) => {
             var _a, _b;
-            showErrorNotification$2((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
+            showErrorNotification$3((_b = (_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.errors[0]) === null || _b === void 0 ? void 0 : _b.message, 'Error removing coupon');
         },
     });
     return {
@@ -23464,1090 +23245,384 @@ const useUpdateCoupons = ({ apiHost, token, quoteChangeId, onCouponAdded, onCoup
     };
 };
 
-const shouldShowCouponEditor_QuoteFragment = t(`
-    fragment shouldShowCouponEditor_QuoteFragment on Quote {
-      id
-      kind
-    }
-  `, []);
-const shouldShowCouponEditor_SubscriptionFragment = t(`
-    fragment shouldShowCouponEditor_SubscriptionFragment on Subscription {
-      id
-      state
-      charges {
-        discountedPrice
+const BunnyFooterIcon = ({ color }) => {
+    return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_6_851)", children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
+};
+
+const { Text: Text$p } = Typography;
+const Footer = ({ className }) => {
+    const token = useToken();
+    const { currentUser } = useCurrentUserData(token);
+    const { privacyUrl, termsUrl } = currentUser;
+    const isMobile = useIsMobile();
+    return (jsxs("div", { className: `bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ${isMobile ? 'bunny-flex-col bunny-gap-2' : ''} ${className}`, children: [(termsUrl || privacyUrl) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-3", children: [termsUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Terms" })), privacyUrl && (jsx(StyedLink, { className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text", children: "Privacy" }))] })), jsx(BunnyMarketingLink, {})] }));
+};
+const BunnyMarketingLink = () => {
+    const [isHovered, setIsHovered] = useState(false);
+    const isMobile = useIsMobile();
+    return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$p, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
+};
+const StyedLink = styled.a `
+  color: ${SLATE_400};
+  transition: color 0.3s;
+  &:hover {
+    color: ${SLATE_500};
+  }
+  text-decoration: none;
+`;
+const StyledBunnyLink = styled(StyedLink) `
+  &:hover {
+    color: ${PRIMARY_COLOR} !important;
+  }
+`;
+
+const SelfServiceBuyWarning_PriceListFragment = t(`
+    fragment SelfServiceBuyWarning_PriceListFragment on PriceList {
+      plan {
+        selfServiceBuy
       }
     }
-  `, []);
-function shouldShowCouponEditor(maskedQuote, activeCouponsExist, maskedUpgradingSubscription) {
-    var _a, _b;
-    const quote = readFragment(shouldShowCouponEditor_QuoteFragment, maskedQuote);
-    const upgradingSubscription = readFragment(shouldShowCouponEditor_SubscriptionFragment, maskedUpgradingSubscription);
-    const upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') ||
-        ((_b = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
-            t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
-    function upgradingFromFree() {
+  `);
+function SelfServiceBuyWarning({ priceList: maskedPriceList, onShowSelfServiceBuyWarning, }) {
+    const priceList = readFragment(SelfServiceBuyWarning_PriceListFragment, maskedPriceList);
+    const hasShownRef = useRef(false);
+    // Only show the warning when component is first mounted
+    useEffect(() => {
         var _a;
-        const totalPrice = (_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _a === void 0 ? void 0 : _a.reduce((acc, charge) => acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0), 0);
-        return totalPrice === 0;
-    }
-    const quoteKindIsValid = (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'SUBSCRIBE') ||
-        (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'ADJUSTMENT') ||
-        (quote === null || quote === void 0 ? void 0 : quote.kind) === t.scalar('QuoteChangeKind', 'ACTIVATE');
-    if (quoteKindIsValid) {
-        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
-    }
-    return false;
+        if (!priceList || hasShownRef.current)
+            return;
+        if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.selfServiceBuy) === false) {
+            hasShownRef.current = true;
+            onShowSelfServiceBuyWarning();
+        }
+    }, [priceList, onShowSelfServiceBuyWarning]);
+    return null;
 }
 
-function CouponEditor({ className, onAddCoupon, isAddingCoupon, couponCode, setCouponCode, }) {
-    async function handleAddCoupon() {
-        onAddCoupon(couponCode);
+const TAG_COLORS = {
+    ACTIVE: 'green',
+    TRIAL: 'blue',
+    CANCELED: 'red',
+    EXPIRED: 'gray',
+    TRIAL_EXPIRED: 'red',
+    PENDING: 'yellow',
+};
+
+const { Text: Text$o } = Typography;
+const PriceListDisplay_PriceListFragment = t(`
+    fragment PriceListDisplay_PriceListFragment on PriceList {
+      product {
+        name
+      }
+      name
+      basePrice
+      currencyId
+      trialAllowed
+      trialLengthDays
     }
-    return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 ${className}`, children: jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2", children: [jsx(Input, { value: couponCode, onChange: e => setCouponCode(e.target.value), placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsx(Button, { loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0, children: "Apply" })] }) }));
+  `);
+function PriceListDisplay({ priceList: maskedPriceList }) {
+    var _a, _b;
+    const priceList = readFragment(PriceListDisplay_PriceListFragment, maskedPriceList);
+    if (!priceList)
+        return null;
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-0", children: [jsxs(Text$o, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxs(Text$o, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / month"] })] }), priceList.trialAllowed ? (jsx("div", { className: "bunny-flex", children: jsx(CustomizedTag, { color: TAG_COLORS["TRIAL"], children: `${(_b = priceList.trialLengthDays) !== null && _b !== void 0 ? _b : 'N/A'} day trial` }) })) : null] }));
 }
 
-const QuoteFields_QuoteFragment = t(`
-    fragment QuoteFields_QuoteFragment on Quote @_unmask {
-      accountId
-      amount
-      amountDue
-      smallUnitAmountDue
-      currencyId
-      id
-      payableId
-      periodAmount
-      subtotal
-      taxAmount
-      startDate
-      formattedQuote {
-        html
+const Signup_PriceListFragment = t(`
+    fragment Signup_PriceListFragment on PriceList {
+      ...CheckoutSummary_PriceListFragment
+      ...PriceListDisplay_PriceListFragment
+      ...SelfServiceBuyWarning_PriceListFragment
+      plan {
+        selfServiceBuy
       }
-      amountsByPeriod {
+      trialAllowed
+    }
+  `, [
+    CheckoutSummary_PriceListFragment,
+    PriceListDisplay_PriceListFragment,
+    SelfServiceBuyWarning_PriceListFragment,
+]);
+
+const graphql = initGraphQLTada();
+
+const mutation$f = graphql(`
+  mutation AccountSignup (
+    $pluginId: String!,
+    $paymentMethodId: String,
+    $priceListCode: String!,
+    $accountId: ID!,
+    $quoteId: ID!,
+  ) {
+    accountSignup(
+      pluginId: $pluginId,
+      paymentMethodId: $paymentMethodId,
+      priceListCode: $priceListCode,
+      accountId: $accountId,
+      quoteId: $quoteId,
+    ) {
+      errors
+      quote {
+        accountId
         amount
-        startDate
-      }
-      kind
-      quoteChanges {
+        amountDue
+        applicationDate
+        applied
+        backdatedPeriods
+        backdatedQuote
+        billingDay
+        contactId
+        createdAt
+        credits
         currencyId
+        dealId
+        discount
+        discountValue
+        endDate
+        evergreen
+        expiresAt
         id
+        invoiceImmediately
+        invoiceImmediatelyAvailable
+        invoiceUntil
+        isPendingApprovalRequest
         kind
-        charges {
-          subtotal
-          amountsByPeriod {
-            amount
-            startDate
-          }
-          amount
-          billingPeriod
-          currencyId
-          feature {
-            unitName
-          }
-          id
-          name
-          priceListCharge {
-            id
-          }
-          priceList {
-            id
-          }
-          coupon {
-            couponCode
-          }
-          quantity
-          kind
-        }
-        priceList {
-          id
-          plan {
-            name
-          }
-          product {
-            name
-          }
-        }
+        message
+        name
+        netPaymentDays
+        notes
+        number
+        ownerId
+        payableId
+        periodAmount
+        poNumber
+        requiresApproval
+        smallUnitAmountDue
+        splitInvoice
+        startDate
+        state
+        subtotal
+        taxAmount
+        taxCode
+        updatedAt
+        uuid
       }
     }
-  `);
-
-const [UpgradingSubscriptionProvider, useUpgradingSubscription] = createValueContext();
-
-const MUTATION$2 = `
-mutation accountUpdate(
-    $id: ID!,
-    $attributes: AccountAttributes!) {
-      accountUpdate(
-        id: $id,
-        attributes: $attributes
-      ) {
-        account {
-          id
-          billingCountry
-          billingState
-          billingStreet
-          billingCity
-          billingZip
-          name
-        }
-        errors
-      }
-  }
-`;
-const accountUpdate$1 = async ({ accountId, attributes, token, apiHost, }) => {
+  }`);
+const accountSignup = async ({ token, apiHost, accountId, quoteId, paymentToken, paymentMethodId, pluginId, priceListCode, }) => {
     var _a;
-    const vars = { id: accountId, attributes };
-    const response = await gqlRequest({
-        query: MUTATION$2,
-        token,
-        vars,
-        apiHost,
+    const response = await execute(mutation$f, { apiHost, token }, {
+        accountId,
+        quoteId,
+        paymentToken,
+        pluginId,
+        paymentMethodId,
+        priceListCode,
     });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.accountUpdate) === null || _a === void 0 ? void 0 : _a.errors;
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _a === void 0 ? void 0 : _a.errors;
     if (errors)
         throw errors;
-    return response.accountUpdate;
+    return response === null || response === void 0 ? void 0 : response.accountSignup;
 };
 
-const COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
-const TaxationForm = ({ account, accountId }) => {
-    // Hooks
-    const queryClient = useQueryClient();
-    const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
-    const [form] = Form.useForm();
-    // Mutations
-    const { mutate: updateAccount, isPending: isUpdatingAccount } = useMutation({
-        mutationFn: async (changedFormData) => {
-            const account = await accountUpdate$1({
-                accountId,
-                attributes: changedFormData,
-                token,
-                apiHost,
-            });
-            return account;
-        },
-        onSuccess: () => {
-            queryClient.invalidateQueries({
-                queryKey: ['getTaxationRequiredAccountFields', token],
-            });
-        },
+const mutation$e = t(`
+  mutation QuoteAccountSignup (
+    $accountName: String!,
+    $billingContact: ContactAttributes!,
+    $priceListCode: String!,
+    $billingDetails: BillingDetailsAttributes
+    $trial: Boolean,
+  ) {
+    quoteAccountSignup(
+      priceListCode: $priceListCode,
+      accountName: $accountName,
+      billingContact: $billingContact,
+      billingDetails: $billingDetails,
+      trial: $trial,
+    ) {
+      account {
+        id
+      }
+      quote {
+        ...Signup_QuoteFragment
+        id
+      }
+      tenant {
+        code
+      }
+      portalSessionToken
+      errors
+    }
+  }`, [Signup_QuoteFragment]);
+const quoteAccountSignup = async ({ token, apiHost, priceListCode, accountName, billingContact, billingDetails, trial, }) => {
+    var _a;
+    const response = await execute(mutation$e, { apiHost, token }, {
+        priceListCode,
+        accountName,
+        billingContact,
+        billingDetails,
+        trial,
     });
-    return (jsxs(Form, { className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount, children: [jsx(Form.Item, { label: "Billing street", name: "billingStreet", children: jsx(Input, { placeholder: "Street" }) }), jsx(Form.Item, { label: "Billing city", name: "billingCity", children: jsx(Input, { placeholder: "City" }) }), jsx(FormBillingState, {}), jsx(Form.Item, { label: "Billing country", name: "billingCountry", rules: [{ required: true }], children: jsx(Select, { options: 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());
-                    } }) }), jsx(Form.Item, { label: "Billing zip", name: "billingZip", children: jsx(Input, { placeholder: "Zip" }) }), jsx(Form.Item, { children: jsx(Button, { className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary", children: "Submit" }) })] }));
-};
-const FormBillingState = () => {
-    const billingCountry = Form.useWatch('billingCountry');
-    const billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
-    return (jsx(Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsx(Input, { placeholder: "State" }) }));
+    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _a === void 0 ? void 0 : _a.errors;
+    if (errors)
+        throw errors;
+    return response === null || response === void 0 ? void 0 : response.quoteAccountSignup;
 };
 
-const [OnPaymentMethodSavedProvider, useOnPaymentMethodSaved] = createValueContext();
-// This provider is used in all components that may save a payment method
-
-const [OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved] = createValueContext();
-// This provider is used in all components that may remove a payment method
-
-const { Text: Text$o } = Typography;
-// 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
-      accountId
-      amountDue
-      amount
-      quoteChanges {
-        id
-        charges {
-          kind
-          coupon {
-            couponCode
-          }
-        }
+const mutation$d = t(`
+  mutation QuoteRecalculateTaxes($id: ID!) {
+    quoteRecalculateTaxes(id: $id) {
+      quote {
+        ...Signup_QuoteFragment
       }
-      ...QuoteFields_QuoteFragment
-      ...shouldShowCouponEditor_QuoteFragment
-      ...PaymentForm_QuoteFragment
-      ...getQuoteAmountDue_QuoteFragment
+      errors
     }
-  `, [
-    QuoteFields_QuoteFragment,
-    shouldShowCouponEditor_QuoteFragment,
-    PaymentForm_QuoteFragment,
-    getQuoteAmountDue_QuoteFragment,
-]);
-const QuoteCheckout_SubscriptionFragment = t(`
-    fragment QuoteCheckout_SubscriptionFragment on Subscription {
-      id
-      ...shouldShowCouponEditor_SubscriptionFragment
+  }
+`, [Signup_QuoteFragment]);
+const quoteRecalculateTaxes$2 = async ({ quoteId, apiHost, token, }) => {
+    var _a;
+    const response = await execute(mutation$d, { apiHost, token }, { id: quoteId });
+    return (_a = response.quoteRecalculateTaxes) === null || _a === void 0 ? void 0 : _a.quote;
+};
+
+const { Title, Text: Text$n } = Typography;
+function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, currencyId, }) {
+    return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ${className}`, style: style, children: [jsx(CheckCircleFilled, { style: { fontSize: '48px', color: 'rgb(52 211 153)' } }), jsxs(Title, { level: 3, className: "bunny-mt-2 bunny-m-0", children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] }), returnUrl && (jsxs(Text$n, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: ["Back to ", companyName] }))] }));
+}
+
+const query$5 = t(`
+  query PriceList($code: String!) {
+    priceList (code: $code) {
+      ...Signup_PriceListFragment
     }
-  `, [shouldShowCouponEditor_SubscriptionFragment]);
+  }
+`, [Signup_PriceListFragment]);
+const getPriceList = async ({ token, code, apiHost, }) => {
+    const response = await execute(query$5, { apiHost, token }, { code });
+    return response === null || response === void 0 ? void 0 : response.priceList;
+};
+
+const showErrorNotification$2 = useErrorNotification();
 const showSuccessNotification$1 = useSuccessNotification();
-const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxationRequiredAccountFields, onRecalculateTaxes, }) => {
-    var _a, _b, _c, _d, _e;
-    const maskedUpgradingSubscription = useUpgradingSubscription();
-    // Read fragments
-    const quote = readFragment(QuoteCheckout_QuoteFragment, maskedQuote);
-    const upgradingSubscription = readFragment(QuoteCheckout_SubscriptionFragment, maskedUpgradingSubscription);
-    // Context
-    const onPaymentMethodSaved = useOnPaymentMethodSaved();
-    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
+const showInfoNotification$2 = useInfoNotification();
+function Signup({ companyName, priceListCode, returnUrl, couponCode, className, shadow = 'shadow-md', style, defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry, }) {
+    var _a, _b, _c, _d, _e, _f;
+    // Hooks
     const { apiHost } = useContext(BunnyContext);
-    const token = useToken();
+    const tokenFromContexts = useToken();
     const isMobile = useIsMobile();
-    const [isSaving, setIsSaving] = useState(false);
-    const paymentRequired = getQuoteAmountDue(quote) > 0;
+    const { topNavImageUrl } = useBrand();
+    const defaultValues = useMemo(() => ({
+        firstName: defaultFirstName,
+        lastName: defaultLastName,
+        email: defaultEmail,
+        accountName: defaultCompanyName,
+        billingCountry: defaultBillingCountry,
+    }), [defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry]);
     const queryClient = useQueryClient();
-    const [couponCode, setCouponCode] = useState('');
-    const { addCoupon, removeCoupon, isAddingCoupon, isRemovingCoupon, activeCouponsExist } = useUpdateCoupons({
+    const [initialQuote, setInitialQuote] = useState(undefined);
+    const [accountId, setAccountId] = useState(undefined);
+    const [portalSessionToken, setPortalSessionToken] = useState(undefined);
+    const token = portalSessionToken || tokenFromContexts;
+    const [purchaseSucceeded, setPurchaseSucceeded] = useState(false);
+    const defaultCouponAppliedRef = useRef(undefined);
+    const [couponEditorCouponCode, setCouponEditorCouponCode] = useState('');
+    // Read fragment
+    const initialQuoteId = (_a = readFragment(Signup_QuoteFragment, initialQuote)) === null || _a === void 0 ? void 0 : _a.id;
+    const hasTaxPlugin = useHasTaxPlugin({
         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');
+    });
+    const { mutate: recalculateTaxesMutation } = useMutation({
+        mutationFn: (quoteId) => {
+            return quoteRecalculateTaxes$2({ token, apiHost, quoteId });
+        },
+        onError: (error) => {
+            if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
+                showErrorNotification$2(error.message);
+            }
+        },
+        onSuccess: (quote) => {
+            queryClient.setQueryData(['quote', initialQuoteId], quote);
             queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.createObjectKey({
-                    id: quote === null || quote === void 0 ? void 0 : quote.id,
-                    objectName: 'editingQuote',
-                    token,
-                }),
+                queryKey: ['quote', initialQuoteId],
             });
-            showSuccessNotification$1('Coupon applied');
-            onRecalculateTaxes();
-            setCouponCode('');
         },
-        onCouponRemoved: () => {
-            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
-                throw new Error('Quote ID is required');
+    });
+    const { mutate: quoteAccountSignupMutate, isPending: isSigningUp } = useMutation({
+        mutationFn: (formData) => {
+            var _a;
+            return quoteAccountSignup({
+                token,
+                apiHost,
+                priceListCode,
+                accountName: formData.accountName,
+                billingContact: {
+                    firstName: formData.firstName,
+                    lastName: formData.lastName,
+                    email: formData.email,
+                },
+                billingDetails: {
+                    billingCountry: formData.billingCountry,
+                    // TODO: add these billing details back for Avalara and AFC taxation plugins.
+                    // billingState: formData.billingState,
+                    // billingCity: formData.billingCity,
+                    // billingZip: formData.billingZip,
+                    // billingStreet: formData.billingStreet,
+                    // taxNumber: formData.taxNumber,
+                },
+                trial: (_a = priceList === null || priceList === void 0 ? void 0 : priceList.trialAllowed) !== null && _a !== void 0 ? _a : false,
+            });
+        },
+        onSuccess: (data) => {
+            var _a, _b;
+            setAccountId((_a = data === null || data === void 0 ? void 0 : data.account) === null || _a === void 0 ? void 0 : _a.id);
+            if (!(data === null || data === void 0 ? void 0 : data.portalSessionToken)) {
+                throw new Error('Portal session token is required');
+            }
+            setPortalSessionToken(data === null || data === void 0 ? void 0 : data.portalSessionToken);
+            // We must invalidate the accountPaymentMethodsKey query in order to clear payment methods from the provided api token,
+            // to instead use paymentMethods from portalSessionToken.
             queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.createObjectKey({
-                    id: quote === null || quote === void 0 ? void 0 : quote.id,
-                    objectName: 'editingQuote',
+                queryKey: QueryKeyFactory.accountPaymentMethodsKey({
+                    accountId,
                     token,
                 }),
             });
-            showSuccessNotification$1('Coupon removed');
-            onRecalculateTaxes();
+            setInitialQuote(data === null || data === void 0 ? void 0 : data.quote);
+            handleRecalculateTaxes((_b = data === null || data === void 0 ? void 0 : data.quote) === null || _b === void 0 ? void 0 : _b.id);
+        },
+        onError: (error) => {
+            const errorMessage = error.response.errors[0].message;
+            if (errorMessage.includes("Address couldn't be validated")) {
+                showErrorNotification$2('Please enter a valid billing address');
+            }
+            else {
+                showErrorNotification$2(errorMessage);
+            }
         },
     });
-    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 = useMutation({
-        mutationFn: async () => {
-            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+    // Queries
+    const { data: maskedPriceList, isLoading: isLoadingPriceList } = useQuery({
+        queryKey: ['priceList', priceListCode],
+        queryFn: () => getPriceList({ token, apiHost, code: priceListCode }),
+    });
+    const { data, isLoading: isLoadingQuote } = useQuery({
+        queryKey: ['quote', initialQuoteId],
+        queryFn: () => {
+            if (!initialQuoteId) {
                 throw new Error('Quote ID is required');
-            if (paymentRequired)
-                throw new Error('Payment is required');
-            return await checkout({ quoteId: quote.id, token, apiHost });
+            }
+            return getQuote$1({ token, apiHost, id: initialQuoteId });
         },
-        onSuccess,
-        onError: onFail,
-    });
-    async function handleCheckoutNoPayment() {
-        setIsSaving(true);
-        checkoutMutation.mutate();
-        setIsSaving(false);
-    }
-    if (taxationRequiredAccountFields)
-        return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
-    return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
-                        shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(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)" }))] })) : (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsx(Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsx(Text$o, { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] })) }));
-};
-const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
-    const isMobile = useIsMobile();
-    return (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: '400px',
-                }),
-        }, children: children }));
-};
-
-const Checkout_QuoteFragment = t(`
-    fragment Checkout_QuoteFragment on Quote {
-      id
-      accountId
-      formattedQuote {
-        html
-      }
-      ...QuoteCheckout_QuoteFragment
-    }
-  `, [QuoteCheckout_QuoteFragment]);
-const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
-    var _a, _b, _c, _d, _e;
-    const { apiHost } = useContext(BunnyContext);
-    const isMobile = useIsMobile();
-    const token = useToken();
-    // Context
-    const onPaymentMethodSaved = useOnPaymentMethodSaved();
-    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
-    // Read fragments
-    const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
-    const hasTaxPlugin = useHasTaxPlugin({
-        apiHost,
-        token,
-    });
-    // Queries
-    const { data: taxationRequiredAccountFields, isLoading: isLoadingTaxationRequiredAccountFields } = useQuery({
-        queryKey: ['getTaxationRequiredAccountFields', token],
-        queryFn: () => getTaxationRequiredAccountFields({ apiHost, token }),
-        enabled: Boolean(quote),
-        staleTime: 0,
-    });
-    const { data: account, isLoading: isLoadingAccount } = useQuery({
-        queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: () => (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount$1({ id: quote.accountId, apiHost, token }),
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
-    });
-    // Use onRecalculateTaxes callback because parents need to define recalculateTaxes to get and set the right quote data they need
-    async function recalculateTaxes() {
-        if (quote) {
-            if (!quote.id)
-                throw new Error('Quote ID is required');
-            onRecalculateTaxes(quote.id);
-        }
-        return {};
-    }
-    const recalculateTaxesEnabled = Boolean(quote) &&
-        open &&
-        hasTaxPlugin &&
-        !taxationRequiredAccountFields &&
-        !isLoadingTaxationRequiredAccountFields &&
-        !isUpdatingQuote;
-    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 (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: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), 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)) && (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)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
-                                onFail(error);
-                            }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
-                                if (recalculateTaxesEnabled) {
-                                    await recalculateTaxes();
-                                }
-                            } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
-};
-
-function canEditChargeQuantity(charge) {
-    if (!charge)
-        return false;
-    if (charge.chargeType === graphql.scalar('ChargeType', 'USAGE'))
-        return false;
-    if (charge.pricingModel === graphql.scalar('PricingModel', 'FLAT'))
-        return false;
-    return true;
-}
-
-const { Text: Text$n } = Typography;
-const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChanged, }) => {
-    var _a;
-    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
-    const isMobile = useIsMobile();
-    useEffect(() => {
-        setTimeout(() => {
-            setIsTooltipOpen(true);
-        }, 1000);
-        setTimeout(() => {
-            setIsTooltipOpen(false);
-        }, 6000);
-    }, []);
-    return (jsxs(Text$n, { className: `bunny-flex bunny-items-center bunny-gap-2 ${isMobile ? 'bunny-justify-between' : ''}`, children: [jsx(QuantityLabel, { activeCharge: priceListCharge }), jsx(Tooltip, { onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
-                    body: {
-                        paddingTop: '0.75rem',
-                        paddingBottom: '0.75rem',
-                    },
-                }, children: jsx(Input, { id: `${(_a = priceListCharge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/ /g, '-')}-quantity-input`, className: isMobile ? 'text-right' : '', disabled: disabled, onChange: e => {
-                        onQuantityChanged(Number(e.target.value));
-                    }, min: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin, max: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax, style: { minWidth: '120px' }, type: "number", value: quantity, required: true }) })] }));
-};
-const QuantityLabel = ({ activeCharge }) => {
-    const chargeName = activeCharge.name;
-    return (jsx(Text$n, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
-};
-
-const PlanPickerCheckoutBar_QuoteFragment = t(`
-    fragment PlanPickerCheckoutBar_QuoteFragment on Quote {
-      ...Checkout_QuoteFragment
-      quoteChanges {
-        priceList {
-          id
-        }
-        charges {
-          priceListCharge {
-            id
-          }
-        }
-      }
-    }
-  `, [Checkout_QuoteFragment]);
-const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onCheckoutSuccess, }) => {
-    // Context
-    const { shadow } = useSubscriptionProps();
-    const { quote: maskedQuote, onChangeQuantity, getFeatureQuantity, onRecalculateTaxes, isFeatureAddonsLoading, isUpdatingQuote, } = useContext(QuoteContext);
-    // Read fragments
-    const quote = readFragment(PlanPickerCheckoutBar_QuoteFragment, maskedQuote);
-    // Local state
-    const [payModalVisible, setPayModalVisible] = useState(false);
-    // Hooks
-    const token = useToken();
-    const showSuccessNotification = useSuccessNotification();
-    const queryClient = useQueryClient();
-    const isMobile = useIsMobile();
-    const handleCheckoutSuccess = () => {
-        queryClient.refetchQueries({
-            queryKey: QueryKeyFactory.createTableKey({
-                pluralType: 'subscriptions',
-                token,
-            }),
-        });
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.createTableKey({
-                pluralType: 'upgradeSubscriptions',
-                token,
-            }),
-        });
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.createTableKey({
-                pluralType: 'hasActiveSubscriptions',
-                token,
-            }),
-        });
-        queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.transactionsKey({ token }),
-        });
-        setPayModalVisible(false);
-        showSuccessNotification('Your subscription has been created', 'Checkout successful');
-        onCheckoutSuccess();
-    };
-    return (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-4' : 'bunny-flex-row'} bunny-my-4 bunny-p-4 bunny-justify-between bunny-bg-white bunny-rounded-md ${shadow ? `shadow-${shadow}` : ''}`, children: [jsx("div", { className: `${isMobile ? 'bunny-flex bunny-flex-col' : 'bunny-flex'} bunny-gap-4`, children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map((charge, index) => {
-                    var _a, _b, _c, _d;
-                    if (!canEditChargeQuantity({
-                        chargeType: (_a = charge.chargeType) !== null && _a !== void 0 ? _a : null,
-                        pricingModel: (_b = charge.pricingModel) !== null && _b !== void 0 ? _b : null,
-                    }))
-                        return null;
-                    if (!((_c = charge.feature) === null || _c === void 0 ? void 0 : _c.id))
-                        throw new Error('Charge feature is undefined');
-                    const isFeatureAddon = charge.featureAddon;
-                    const quantity = getFeatureQuantity((_d = charge.feature) === null || _d === void 0 ? void 0 : _d.id, charge.id);
-                    const maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
-                    if (!quantity)
-                        return null;
-                    // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
-                    if (isFeatureAddon && !featureAddonInQuote(selectedPriceList, charge, quote)) {
-                        return null;
-                    }
-                    const isDisabled = !quote || maybeIsChargeLoading || !selectedPriceList || !charge.selfServiceQuantity;
-                    return (jsx(CheckoutBarInput, { disabled: isDisabled, priceListCharge: charge, quantity: quantity, onQuantityChanged: quantity => {
-                            onChangeQuantity(charge.id, quantity);
-                        } }, index));
-                }) }), jsx(CheckoutBarSummarySection, { onClickCheckout: () => setPayModalVisible(true), selectedPriceList: selectedPriceList }), jsx(Checkout, { onCancel: () => setPayModalVisible(false), onFail: error => handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error), onSuccess: handleCheckoutSuccess, onRecalculateTaxes: onRecalculateTaxes, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] }));
-};
-
-const useQuoteUpdateFeatureAddon_QuoteFragment = t(`
-    fragment useQuoteUpdateFeatureAddon_QuoteFragment on Quote {
-      id
-      startDate
-    }
-  `);
-
-const FeatureAddonRow_QuoteFragment = t(`
-    fragment FeatureAddonRow_QuoteFragment on Quote {
-      ...useQuoteUpdateFeatureAddon_QuoteFragment
-    }
-  `, [useQuoteUpdateFeatureAddon_QuoteFragment]);
-
-const useToggleAddonPlan_QuoteFragment = t(`
-    fragment useToggleAddonPlan_QuoteFragment on Quote {
-      quoteChanges {
-        priceList {
-          id
-        }
-        id
-      }
-      id
-    }
-  `);
-
-const AddonPlanRow_QuoteFragment = t(`
-    fragment AddonPlanRow_QuoteFragment on Quote {
-      ...useToggleAddonPlan_QuoteFragment
-    }
-  `, [useToggleAddonPlan_QuoteFragment]);
-
-/**
- * Central quote fragment for QuoteProvider context.
- *
- * This fragment aggregates all child component fragments to ensure the QuoteProvider
- * fetches all required quote data upfront. When a component needs specific quote fields,
- * add its fragment here to maintain type safety and avoid over-fetching.
- *
- * Pattern: Fragment Composition
- * - Components define their data needs via fragments
- * - Provider composes these fragments into a single query
- * - Type safety ensures all required fields are fetched
- */
-const QuoteContext_QuoteFragment = t(`
-    fragment QuoteContext_QuoteFragment on Quote {
-      id
-      currencyId
-      amountDue
-      startDate
-      quoteChanges {
-        id
-        kind
-        priceList {
-          id
-        }
-        charges {
-          priceListCharge {
-            id
-            chargeType
-            pricingModel
-            quantityMin
-            quantityMax
-            selfServiceQuantity
-          }
-          feature {
-            id
-          }
-          quantity
-          id
-        }
-      }
-      ...PlanPickerCheckoutBar_QuoteFragment
-      ...CheckoutBarSummarySection_QuoteFragment
-      ...AddonPlanRow_QuoteFragment
-      ...FeatureAddonRow_QuoteFragment
-      ...PaymentForms_QuoteFragment
-    }
-  `, [
-    PlanPickerCheckoutBar_QuoteFragment,
-    CheckoutBarSummarySection_QuoteFragment,
-    AddonPlanRow_QuoteFragment,
-    FeatureAddonRow_QuoteFragment,
-    PaymentForms_QuoteFragment,
-]);
-
-const FormattedQuoteField_QuoteFragment = t(`
-  fragment FormattedQuoteField_QuoteFragment on Quote {
-    formattedQuote {
-      html
-    }
-  }
-`);
-const query$5 = t(`
-    query quote($id: ID, $removeFormattedQuoteField: Boolean!) {
-      quote(id: $id) {
-        ...QuoteContext_QuoteFragment
-        ...FormattedQuoteField_QuoteFragment @include(if: $removeFormattedQuoteField)
-      }
-    }
-  `, [QuoteContext_QuoteFragment, FormattedQuoteField_QuoteFragment]);
-const getQuote$1 = async ({ id, token, apiHost, removeFormattedQuoteField = false, }) => {
-    const response = await execute(query$5, { apiHost, token }, { id, removeFormattedQuoteField });
-    return response === null || response === void 0 ? void 0 : response.quote;
-};
-
-const MUTATION$1 = () => `
-mutation AccountSignup (
-  $pluginId: String!,
-  $paymentMethodId: String,
-  $priceListCode: String!,
-  $accountId: ID!,
-  $quoteId: ID!,
-) {
-  accountSignup(
-    pluginId: $pluginId,
-    paymentMethodId: $paymentMethodId,
-    priceListCode: $priceListCode,
-    accountId: $accountId,
-    quoteId: $quoteId,
-  ) {
-    errors
-    quote {
-      accountId
-      amount
-      amountDue
-      applicationDate
-      applied
-      backdatedPeriods
-      backdatedQuote
-      billingDay
-      contactId
-      createdAt
-      credits
-      currencyId
-      dealId
-      discount
-      discountValue
-      endDate
-      evergreen
-      expiresAt
-      id
-      invoiceImmediately
-      invoiceImmediatelyAvailable
-      invoiceUntil
-      isPendingApprovalRequest
-      kind
-      message
-      name
-      netPaymentDays
-      notes
-      number
-      ownerId
-      payableId
-      periodAmount
-      poNumber
-      requiresApproval
-      smallUnitAmountDue
-      splitInvoice
-      startDate
-      state
-      subtotal
-      taxAmount
-      taxCode
-      updatedAt
-      uuid
-    }
-  }
-}`;
-const accountSignup = async ({ token, apiHost, accountId, quoteId, paymentToken, paymentMethodId, pluginId, priceListCode, }) => {
-    var _a;
-    const vars = {
-        accountId,
-        quoteId,
-        paymentToken,
-        pluginId,
-        paymentMethodId,
-        priceListCode,
-    };
-    const response = await gqlRequest({
-        query: MUTATION$1(),
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.accountSignup) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response === null || response === void 0 ? void 0 : response.accountSignup;
-};
-
-const MUTATION = () => `
-mutation QuoteAccountSignup (
-  $accountName: String!,
-  $billingContact: ContactAttributes!,
-  $priceListCode: String!,
-  $billingDetails: BillingDetailsAttributes
-) {
-  quoteAccountSignup(
-    priceListCode: $priceListCode,
-    accountName: $accountName,
-    billingContact: $billingContact,
-    billingDetails: $billingDetails
-  ) {
-    account {
-      id
-    }
-    quote {
-      accountId
-      amount
-      amountDue
-      applicationDate
-      applied
-      backdatedPeriods
-      backdatedQuote
-      billingDay
-      contactId
-      createdAt
-      credits
-      currencyId
-      dealId
-      discount
-      discountValue
-      endDate
-      evergreen
-      expiresAt
-      id
-      invoiceImmediately
-      invoiceImmediatelyAvailable
-      invoiceUntil
-      isPendingApprovalRequest
-      kind
-      message
-      name
-      netPaymentDays
-      notes
-      number
-      ownerId
-      payableId
-      periodAmount
-      poNumber
-      requiresApproval
-      smallUnitAmountDue
-      splitInvoice
-      startDate
-      state
-      subtotal
-      taxAmount
-      taxCode
-      updatedAt
-      uuid
-    }
-    tenant {
-      code
-    }
-    portalSessionToken
-    errors
-  }
-}`;
-const quoteAccountSignup = async ({ token, apiHost, priceListCode, accountName, billingContact, billingDetails, }) => {
-    var _a;
-    const vars = {
-        priceListCode,
-        accountName,
-        billingContact,
-        billingDetails,
-    };
-    const response = await gqlRequest({
-        query: MUTATION(),
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteAccountSignup) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return response === null || response === void 0 ? void 0 : response.quoteAccountSignup;
-};
-
-const QUOTE_RECALCULATE_TAXES = `
-  mutation QuoteRecalculateTaxes($id: ID!) {
-    quoteRecalculateTaxes(id: $id) {
-      quote {
-        accountId
-        amount
-        amountDue
-        smallUnitAmountDue
-        currencyId
-        formattedQuote {
-          html
-        }
-        id
-        payableId
-        periodAmount
-        subtotal
-        taxAmount
-        amountsByPeriod {
-            amount
-            startDate
-        }
-        kind
-        quoteChanges {
-            currencyId
-            id
-            kind
-            charges {
-                subtotal
-                amountsByPeriod {
-                  amount
-                  startDate
-                }
-                amount
-                billingPeriod
-                currencyId
-                feature {
-                  unitName
-                }
-                id
-                name
-                priceListCharge {
-                  id
-                }
-                priceList {
-                  id
-                }
-                coupon {
-                  couponCode
-                }
-                quantity
-                kind
-            }
-            priceList {
-                id
-                plan {
-                    name
-                }
-                product {
-                    name
-                }
-            }
-        }
-      }
-      errors
-    }
-  }
-`;
-const quoteRecalculateTaxes$2 = async ({ quoteId, apiHost, token, }) => {
-    var _a, _b;
-    const vars = { id: quoteId };
-    const response = await gqlRequest({
-        query: QUOTE_RECALCULATE_TAXES,
-        token,
-        vars,
-        apiHost,
-    });
-    const errors = (_a = response === null || response === void 0 ? void 0 : response.quoteRecalculateTaxes) === null || _a === void 0 ? void 0 : _a.errors;
-    if (errors)
-        throw errors;
-    return (_b = response.quoteRecalculateTaxes) === null || _b === void 0 ? void 0 : _b.quote;
-};
-
-const { Text: Text$m } = Typography;
-const CheckoutSummary_PriceListFragment = t(`
-    fragment CheckoutSummary_PriceListFragment on PriceList {
-      product {
-        name
-      }
-      name
-    }
-  `);
-function CheckoutSummary({ quote, className, onAddCoupon, onRemoveCoupon, isRemovingCoupon, priceList: maskedPriceList, isAddingCoupon, couponCode, setCouponCode, activeCouponsExist, }) {
-    var _a;
-    const priceList = readFragment(CheckoutSummary_PriceListFragment, maskedPriceList);
-    return (jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxs(Text$m, { children: [jsxs("div", { className: "bunny-text-lg bunny-font-medium bunny-mb-4", children: ["Checkout summary - ", (_a = priceList === null || priceList === void 0 ? void 0 : priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList === null || priceList === void 0 ? void 0 : priceList.name] }), jsx("div", { className: "bunny-space-y-4", children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(quoteChange => quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(charge => {
-                            var _a;
-                            const multiplier = charge.kind === 'COUPON' ? -1 : 1;
-                            return (jsxs("div", { className: "bunny-grid bunny-grid-cols-3 bunny-gap-4 bunny-items-center", children: [jsx("div", { className: "bunny-col-span-1", children: charge.name }), jsx("div", { className: "bunny-col-span-1 bunny-text-center", children: ((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode) ? (jsx("button", { onClick: () => {
-                                                var _a, _b;
-                                                if (isRemovingCoupon) {
-                                                    return;
-                                                }
-                                                if (!((_a = charge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode)) {
-                                                    throw new Error('Coupon code not found');
-                                                }
-                                                onRemoveCoupon((_b = charge.coupon) === null || _b === void 0 ? void 0 : _b.couponCode);
-                                            }, className: "bunny-text-orange-500 hover:bunny-text-orange-400 bunny-cursor-pointer bunny-bg-transparent bunny-border-none", children: "Remove" })) : (jsx("div", { children: charge.quantity })) }), jsx("div", { className: "bunny-col-span-1 bunny-text-right", children: formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) })] }, charge.id));
-                        })) }), jsx(CheckoutSummaryDivider, {}), jsxs("div", { className: "bunny-space-y-4", children: [jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Subtotal" }), jsx("div", { children: formatCurrency(quote.subtotal, quote.currencyId) })] }), jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Taxes" }), jsx("div", { children: formatCurrency(quote.taxAmount, quote.currencyId) })] })] }), jsx(CheckoutSummaryDivider, {}), jsxs("div", { className: "bunny-flex bunny-justify-between", children: [jsx("div", { children: "Total" }), jsx("div", { children: formatCurrency(quote.amountDue, quote.currencyId) })] })] }), activeCouponsExist && (jsx(CouponEditor, { className: "bunny-w-full", onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] }));
-}
-const CheckoutSummaryDivider = () => {
-    return (jsx("div", { className: "bunny-my-2", children: jsx(Divider, { className: "m-0" }) }));
-};
-
-const SelfServiceBuyWarning_PriceListFragment = t(`
-    fragment SelfServiceBuyWarning_PriceListFragment on PriceList {
-      plan {
-        selfServiceBuy
-      }
-    }
-  `);
-function SelfServiceBuyWarning({ priceList: maskedPriceList, onShowSelfServiceBuyWarning, }) {
-    const priceList = readFragment(SelfServiceBuyWarning_PriceListFragment, maskedPriceList);
-    const hasShownRef = useRef(false);
-    // Only show the warning when component is first mounted
-    useEffect(() => {
-        var _a;
-        if (!priceList || hasShownRef.current)
-            return;
-        if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.selfServiceBuy) === false) {
-            hasShownRef.current = true;
-            onShowSelfServiceBuyWarning();
-        }
-    }, [priceList, onShowSelfServiceBuyWarning]);
-    return null;
-}
-
-const { Text: Text$l } = Typography;
-const PriceListDisplay_PriceListFragment = t(`
-    fragment PriceListDisplay_PriceListFragment on PriceList {
-      product {
-        name
-      }
-      name
-      basePrice
-      currencyId
-    }
-  `);
-function PriceListDisplay({ priceList: maskedPriceList }) {
-    var _a;
-    const priceList = readFragment(PriceListDisplay_PriceListFragment, maskedPriceList);
-    if (!priceList)
-        return null;
-    return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-space-y-8", children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(Text$l, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxs(Text$l, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / month"] })] }) }));
-}
-
-const Signup_PriceListFragment = t(`
-    fragment Signup_PriceListFragment on PriceList {
-      ...CheckoutSummary_PriceListFragment
-      ...PriceListDisplay_PriceListFragment
-      ...SelfServiceBuyWarning_PriceListFragment
-      plan {
-        selfServiceBuy
-      }
-    }
-  `, [
-    CheckoutSummary_PriceListFragment,
-    PriceListDisplay_PriceListFragment,
-    SelfServiceBuyWarning_PriceListFragment,
-]);
-
-const { Title, Text: Text$k } = Typography;
-function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, currencyId, }) {
-    return (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-items-center bunny-justify-center bunny-h-full ${className}`, style: style, children: [jsx(CheckCircleFilled, { style: { fontSize: '48px', color: 'rgb(52 211 153)' } }), jsxs(Title, { level: 3, className: "bunny-mt-2 bunny-m-0", children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] }), returnUrl && (jsxs(Text$k, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: ["Back to ", companyName] }))] }));
-}
-
-const mutation$d = t(`
-  query PriceList($code: String!) {
-    priceList (code: $code) {
-      ...Signup_PriceListFragment
-    }
-  }
-`, [Signup_PriceListFragment]);
-const getPriceList = async ({ token, code, apiHost, }) => {
-    const response = await execute(mutation$d, { apiHost, token }, { code });
-    return response === null || response === void 0 ? void 0 : response.priceList;
-};
-
-const showErrorNotification$1 = useErrorNotification();
-const showSuccessNotification = useSuccessNotification();
-const showInfoNotification$2 = useInfoNotification();
-function Signup({ companyName, priceListCode, returnUrl, couponCode, className, shadow = 'shadow-md', style, defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry, }) {
-    var _a, _b, _c, _d, _e;
-    // Hooks
-    const { apiHost } = useContext(BunnyContext);
-    const tokenFromContexts = useToken();
-    const isMobile = useIsMobile();
-    const { topNavImageUrl } = useBrand();
-    const defaultValues = useMemo(() => ({
-        firstName: defaultFirstName,
-        lastName: defaultLastName,
-        email: defaultEmail,
-        accountName: defaultCompanyName,
-        billingCountry: defaultBillingCountry,
-    }), [defaultFirstName, defaultLastName, defaultEmail, defaultCompanyName, defaultBillingCountry]);
-    const queryClient = useQueryClient();
-    const [initialQuote, setInitialQuote] = useState(undefined);
-    const [accountId, setAccountId] = useState(undefined);
-    const [portalSessionToken, setPortalSessionToken] = useState(undefined);
-    const token = portalSessionToken || tokenFromContexts;
-    const [purchaseSucceeded, setPurchaseSucceeded] = useState(false);
-    const defaultCouponAppliedRef = useRef(undefined);
-    const [couponEditorCouponCode, setCouponEditorCouponCode] = useState('');
-    const hasTaxPlugin = useHasTaxPlugin({
-        apiHost,
-        token,
-    });
-    const { mutate: recalculateTaxesMutation } = useMutation({
-        mutationFn: (quoteId) => {
-            return quoteRecalculateTaxes$2({ token, apiHost, quoteId });
-        },
-        onError: (error) => {
-            if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
-                showErrorNotification$1(error.message);
-            }
-        },
-        onSuccess: (quote) => {
-            queryClient.setQueryData(['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id], quote);
-            queryClient.invalidateQueries({
-                queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
-            });
-        },
-    });
-    const { mutate: quoteAccountSignupMutate, isPending: isSigningUp } = useMutation({
-        mutationFn: (formData) => {
-            return quoteAccountSignup({
-                token,
-                apiHost,
-                priceListCode,
-                accountName: formData.accountName,
-                billingContact: {
-                    firstName: formData.firstName,
-                    lastName: formData.lastName,
-                    email: formData.email,
-                },
-                billingDetails: {
-                    billingCountry: formData.billingCountry,
-                    // TODO: add these billing details back for Avalara and AFC taxation plugins.
-                    // billingState: formData.billingState,
-                    // billingCity: formData.billingCity,
-                    // billingZip: formData.billingZip,
-                    // billingStreet: formData.billingStreet,
-                    // taxNumber: formData.taxNumber,
-                },
-            });
-        },
-        onSuccess: (data) => {
-            setAccountId(data.account.id);
-            setPortalSessionToken(data.portalSessionToken);
-            // We must invalidate the accountPaymentMethodsKey query in order to clear payment methods from the provided api token,
-            // to instead use paymentMethods from portalSessionToken.
-            queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.accountPaymentMethodsKey({
-                    accountId,
-                    token,
-                }),
-            });
-            setInitialQuote(data.quote);
-            handleRecalculateTaxes(data.quote.id);
-        },
-        onError: (error) => {
-            const errorMessage = error.response.errors[0].message;
-            if (errorMessage.includes("Address couldn't be validated")) {
-                showErrorNotification$1('Please enter a valid billing address');
-            }
-            else {
-                showErrorNotification$1(errorMessage);
-            }
-        },
-    });
-    // Queries
-    const { data: maskedPriceList, isLoading: isLoadingPriceList } = useQuery({
-        queryKey: ['priceList', priceListCode],
-        queryFn: () => getPriceList({ token, apiHost, code: priceListCode }),
-    });
-    const { data, isLoading: isLoadingQuote } = useQuery({
-        queryKey: ['quote', initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id],
-        queryFn: () => {
-            if (!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id)) {
-                throw new Error('Quote ID is required');
-            }
-            return getQuote$1({ token, apiHost, id: initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id });
-        },
-        enabled: !!(initialQuote === null || initialQuote === void 0 ? void 0 : initialQuote.id),
+        enabled: !!initialQuoteId,
     });
     const priceList = readFragment(Signup_PriceListFragment, maskedPriceList);
-    const quote = readFragment(QuoteContext_QuoteFragment, data || initialQuote);
-    const 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;
+    const quote = readFragment(Signup_QuoteFragment, data || initialQuote);
+    const quoteChangeId = (_e = (_d = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b[((_c = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _c === void 0 ? void 0 : _c.length) - 1]) === null || _d === void 0 ? void 0 : _d.id) !== null && _e !== void 0 ? _e : undefined;
     // Derived state
-    const selfServiceBuyEnabled = (_e = priceList === null || priceList === void 0 ? void 0 : priceList.plan) === null || _e === void 0 ? void 0 : _e.selfServiceBuy;
+    const selfServiceBuyEnabled = (_f = priceList === null || priceList === void 0 ? void 0 : priceList.plan) === null || _f === void 0 ? void 0 : _f.selfServiceBuy;
     const { addCoupon, removeCoupon, isAddingCoupon, isRemovingCoupon, activeCouponsExist } = useUpdateCoupons({
         apiHost,
         token,
@@ -24556,7 +23631,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             queryClient.invalidateQueries({
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
-            showSuccessNotification('Coupon applied');
+            showSuccessNotification$1('Coupon applied');
             handleRecalculateTaxes(quote === null || quote === void 0 ? void 0 : quote.id);
             setCouponEditorCouponCode('');
         },
@@ -24564,7 +23639,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             queryClient.invalidateQueries({
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
-            showSuccessNotification('Coupon removed');
+            showSuccessNotification$1('Coupon removed');
             handleRecalculateTaxes(quote === null || quote === void 0 ? void 0 : quote.id);
         },
     });
@@ -24586,17 +23661,19 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
         setPurchaseSucceeded(true);
     }
     async function accountSignupFunction(pluginId, paymentMethodId) {
-        var _a;
         if (!portalSessionToken) {
             throw new Error('Portal session token is required');
         }
         if (!accountId) {
             throw new Error('Account ID is required');
         }
+        if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
+            throw new Error('Quote ID is required');
+        }
         return await accountSignup({
             token: portalSessionToken,
             apiHost,
-            quoteId: (_a = quote === null || quote === void 0 ? void 0 : quote.id) !== null && _a !== void 0 ? _a : undefined,
+            quoteId: quote === null || quote === void 0 ? void 0 : quote.id,
             paymentMethodId,
             pluginId,
             priceListCode: priceListCode,
@@ -24609,7 +23686,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             return;
         }
         if (!quoteId) {
-            showErrorNotification$1('No quote ID found to recalculate taxes');
+            showErrorNotification$2('No quote ID found to recalculate taxes');
             return;
         }
         recalculateTaxesMutation(quoteId);
@@ -24620,7 +23697,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
     if (purchaseSucceeded) {
         return (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx("div", { className: "bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 bunny-flex bunny-items-start bunny-pt-[25vh]", children: jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) })) : (jsx("div", { children: "No currency ID found from Quote" })) }));
     }
-    return (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col' : 'bunny-flex-row'} bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ${shadow} ${className}`, style: style, children: [jsx(SelfServiceBuyWarning, { priceList: priceList, onShowSelfServiceBuyWarning: handleShowSelfServiceBuyWarning }), jsx("div", { className: `bunny-flex bunny-items-center bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full'} bunny-justify-center`, children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24", children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx("img", { alt: "Logo", src: topNavImageUrl, style: { width: 'auto', height: '28px' } })) }), data ? (jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceList: priceList, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceList: priceList })) })), jsx(Footer, {})] }) }), jsx("div", { className: `bunny-flex bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full'} bunny-items-center`, style: {
+    return (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col' : 'bunny-flex-row'} bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ${shadow} ${className}`, style: style, children: [jsx(SelfServiceBuyWarning, { priceList: priceList, onShowSelfServiceBuyWarning: handleShowSelfServiceBuyWarning }), jsx("div", { className: `bunny-flex bunny-items-center bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full'} bunny-justify-center`, children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24", children: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx("img", { alt: "Logo", src: topNavImageUrl, style: { width: 'auto', height: '28px' } })) }), quote ? (jsx(CheckoutSummary, { quote: quote, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceList: priceList, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceList: priceList })) })), jsx(Footer, {})] }) }), jsx("div", { className: `bunny-flex bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full'} bunny-items-center`, style: {
                     boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
                 }, children: isLoadingPriceList ? (jsx(Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
 }
@@ -24629,8 +23706,283 @@ const [ChangeUpgradingSubscriptionProvider, useChangeUpgradingSubscription] = cr
 
 const [SubscriptionCancelProvider, useSubscriptionCancel] = createValueContext();
 
+const [SubscriptionPropsProvider, useSubscriptionProps] = createValueContext();
+
+const [UpgradingSubscriptionProvider, useUpgradingSubscription] = createValueContext();
+
 const [UpgradingSubscriptionIdProvider, useUpgradingSubscriptionId] = createStateContext(initialValue => useState(initialValue));
 
+const QuoteFields_QuoteFragment = t(`
+    fragment QuoteFields_QuoteFragment on Quote @_unmask {
+      accountId
+      amount
+      amountDue
+      smallUnitAmountDue
+      currencyId
+      id
+      payableId
+      periodAmount
+      subtotal
+      taxAmount
+      startDate
+      formattedQuote {
+        html
+      }
+      amountsByPeriod {
+        amount
+        startDate
+      }
+      kind
+      quoteChanges {
+        currencyId
+        id
+        kind
+        charges {
+          subtotal
+          amountsByPeriod {
+            amount
+            startDate
+          }
+          amount
+          billingPeriod
+          currencyId
+          feature {
+            unitName
+          }
+          id
+          name
+          priceListCharge {
+            id
+          }
+          priceList {
+            id
+          }
+          coupon {
+            couponCode
+          }
+          quantity
+          kind
+        }
+        priceList {
+          id
+          plan {
+            name
+          }
+          product {
+            name
+          }
+        }
+      }
+    }
+  `);
+
+const MUTATION$1 = `
+mutation accountUpdate(
+    $id: ID!,
+    $attributes: AccountAttributes!) {
+      accountUpdate(
+        id: $id,
+        attributes: $attributes
+      ) {
+        account {
+          id
+          billingCountry
+          billingState
+          billingStreet
+          billingCity
+          billingZip
+          name
+        }
+        errors
+      }
+  }
+`;
+const accountUpdate$1 = 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 COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
+const TaxationForm = ({ account, accountId }) => {
+    // Hooks
+    const queryClient = useQueryClient();
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const [form] = Form.useForm();
+    // Mutations
+    const { mutate: updateAccount, isPending: isUpdatingAccount } = useMutation({
+        mutationFn: async (changedFormData) => {
+            const account = await accountUpdate$1({
+                accountId,
+                attributes: changedFormData,
+                token,
+                apiHost,
+            });
+            return account;
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({
+                queryKey: ['getTaxationRequiredAccountFields', token],
+            });
+        },
+    });
+    return (jsxs(Form, { className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount, children: [jsx(Form.Item, { label: "Billing street", name: "billingStreet", children: jsx(Input, { placeholder: "Street" }) }), jsx(Form.Item, { label: "Billing city", name: "billingCity", children: jsx(Input, { placeholder: "City" }) }), jsx(FormBillingState, {}), jsx(Form.Item, { label: "Billing country", name: "billingCountry", rules: [{ required: true }], children: jsx(Select, { options: 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());
+                    } }) }), jsx(Form.Item, { label: "Billing zip", name: "billingZip", children: jsx(Input, { placeholder: "Zip" }) }), jsx(Form.Item, { children: jsx(Button, { className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary", children: "Submit" }) })] }));
+};
+const FormBillingState = () => {
+    const billingCountry = Form.useWatch('billingCountry');
+    const billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
+    return (jsx(Form.Item, { label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }], children: jsx(Input, { placeholder: "State" }) }));
+};
+
+const [OnPaymentMethodSavedProvider, useOnPaymentMethodSaved] = createValueContext();
+// This provider is used in all components that may save a payment method
+
+const [OnPaymentMethodRemovedProvider, useOnPaymentMethodRemoved] = createValueContext();
+// This provider is used in all components that may remove a payment method
+
+const { Text: Text$m } = Typography;
+// 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
+      accountId
+      amountDue
+      amount
+      quoteChanges {
+        id
+        charges {
+          kind
+          coupon {
+            couponCode
+          }
+        }
+      }
+      ...QuoteFields_QuoteFragment
+      ...shouldShowCouponEditor_QuoteFragment
+      ...PaymentForm_QuoteFragment
+      ...getQuoteAmountDue_QuoteFragment
+    }
+  `, [
+    QuoteFields_QuoteFragment,
+    shouldShowCouponEditor_QuoteFragment,
+    PaymentForm_QuoteFragment,
+    getQuoteAmountDue_QuoteFragment,
+]);
+const QuoteCheckout_SubscriptionFragment = t(`
+    fragment QuoteCheckout_SubscriptionFragment on Subscription {
+      id
+      ...shouldShowCouponEditor_SubscriptionFragment
+    }
+  `, [shouldShowCouponEditor_SubscriptionFragment]);
+const showSuccessNotification = useSuccessNotification();
+const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxationRequiredAccountFields, onRecalculateTaxes, }) => {
+    var _a, _b, _c, _d, _e;
+    const maskedUpgradingSubscription = useUpgradingSubscription();
+    // Read fragments
+    const quote = readFragment(QuoteCheckout_QuoteFragment, maskedQuote);
+    const upgradingSubscription = readFragment(QuoteCheckout_SubscriptionFragment, maskedUpgradingSubscription);
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
+    const { apiHost } = useContext(BunnyContext);
+    const token = useToken();
+    const isMobile = useIsMobile();
+    const [isSaving, setIsSaving] = useState(false);
+    const paymentRequired = getQuoteAmountDue(quote) > 0;
+    const queryClient = useQueryClient();
+    const [couponCode, setCouponCode] = 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: QueryKeyFactory.createObjectKey({
+                    id: quote === null || quote === void 0 ? void 0 : quote.id,
+                    objectName: 'editingQuote',
+                    token,
+                }),
+            });
+            showSuccessNotification('Coupon applied');
+            onRecalculateTaxes();
+            setCouponCode('');
+        },
+        onCouponRemoved: () => {
+            if (!(quote === null || quote === void 0 ? void 0 : quote.id))
+                throw new Error('Quote ID is required');
+            queryClient.invalidateQueries({
+                queryKey: QueryKeyFactory.createObjectKey({
+                    id: quote === null || quote === void 0 ? void 0 : quote.id,
+                    objectName: 'editingQuote',
+                    token,
+                }),
+            });
+            showSuccessNotification('Coupon removed');
+            onRecalculateTaxes();
+        },
+    });
+    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 = 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,
+    });
+    async function handleCheckoutNoPayment() {
+        setIsSaving(true);
+        checkoutMutation.mutate();
+        setIsSaving(false);
+    }
+    if (taxationRequiredAccountFields)
+        return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
+    return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
+                        shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(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)" }))] })) : (jsxs("div", { className: `bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4 ${isMobile ? 'bunny-shadow-padding-x' : ''}`, children: [jsx(Button, { onClick: handleCheckoutNoPayment, type: "primary", children: isSaving ? 'Processing...' : 'Complete order' }), jsx(Text$m, { className: "bunny-text-xs bunny-text-slate-500", children: "No payment is required" })] })) }));
+};
+const PaymentFormWrapper = ({ children, setMaxHeight, className, }) => {
+    const isMobile = useIsMobile();
+    return (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: '400px',
+                }),
+        }, children: children }));
+};
+
 const findParentSubscription_SubscriptionFragment = t(`
     fragment findParentSubscription_SubscriptionFragment on Subscription {
       id
@@ -24704,15 +24056,6 @@ const Card = ({ children, className, style, }) => {
         }, children: children }));
 };
 
-const TAG_COLORS = {
-    ACTIVE: 'green',
-    TRIAL: 'blue',
-    CANCELED: 'red',
-    EXPIRED: 'gray',
-    TRIAL_EXPIRED: 'red',
-    PENDING: 'yellow',
-};
-
 const isSubscriptionNotActive = (subscriptionState) => {
     return ((subscriptionState === null || subscriptionState === void 0 ? void 0 : subscriptionState.toUpperCase()) === t.scalar('SubscriptionState', 'EXPIRED') ||
         (subscriptionState === null || subscriptionState === void 0 ? void 0 : subscriptionState.toUpperCase()) === t.scalar('SubscriptionState', 'CANCELED') ||
@@ -25086,7 +24429,7 @@ function SubscriptionStatusText({ subscription: maskedSubscription, }) {
     return `Ends on ${formatDate(endDate || trialEndDate)}`;
 }
 
-const { Text: Text$j } = Typography;
+const { Text: Text$l } = Typography;
 const SubscriptionStatusAndActions_SubscriptionFragment = t(`
     fragment SubscriptionStatusAndActions_SubscriptionFragment on Subscription {
       id
@@ -25124,11 +24467,11 @@ function SubscriptionStatusAndActions({ subscription: maskedSubscription, }) {
     const cardActionsVisible = !isMobile;
     const showStatusSkeleton = arePriceListChangeOptionsLoading && cardActionsVisible;
     const showActionsSkeleton = arePriceListChangeOptionsLoading && !priceListChangeOptions;
-    return (jsxs(Fragment, { children: [showStatusSkeleton ? (jsx(Skeleton.Input, { active: true, size: "small", style: { width: 180 } })) : (jsx(Text$j, { className: "bunny-grow", children: jsx(SubscriptionStatusText, { subscription: subscription }) })), cardActionsVisible &&
+    return (jsxs(Fragment, { children: [showStatusSkeleton ? (jsx(Skeleton.Input, { active: true, size: "small", style: { width: 180 } })) : (jsx(Text$l, { className: "bunny-grow", children: jsx(SubscriptionStatusText, { subscription: subscription }) })), cardActionsVisible &&
                 (showActionsSkeleton ? (jsx(Skeleton.Button, { active: true, size: "default", style: { width: 100 } })) : (jsx(SubscriptionCardActions, { priceListChangeOptions: priceListChangeOptions, subscription: subscription, isPaymentMethodLoading: isPaymentMethodLoading })))] }));
 }
 
-const { Text: Text$i } = Typography;
+const { Text: Text$k } = Typography;
 const SubscriptionCardHeader_SubscriptionFragment = t(`
     fragment SubscriptionCardHeader_SubscriptionFragment on Subscription {
       id
@@ -25166,10 +24509,10 @@ const SubscriptionCardHeader = ({ subscription: maskedSubscription, }) => {
     const isTrial = isSubscriptionTrial(subscription.state);
     return (jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-between", style: {
             backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
-        }, children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [((_a = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _a === void 0 ? void 0 : _a.name) && (jsx(Text$i, { style: {
+        }, children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [((_a = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _a === void 0 ? void 0 : _a.name) && (jsx(Text$k, { style: {
                             color: brandColor,
                             ...subscriptionProductNameStyle,
-                        }, children: subscription.product.name })), jsxs("div", { className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2", children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _b === void 0 ? void 0 : _b.name) && (jsx(Text$i, { className: "bunny-text-sm", children: subscription.plan.name })), jsxs(CustomizedTag, { color: TAG_COLORS[(_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()], children: [lodashExports.capitalize(subscription.state.toLowerCase().replace(/_/g, ' ')), isTrial ? ` (${trialDaysLeft !== null && trialDaysLeft !== void 0 ? trialDaysLeft : 'N/A'} days left)` : ''] }), ((_d = subscription.priceList) === null || _d === void 0 ? void 0 : _d.deprecated) && (jsx(CustomizedTag, { color: LEGACY_SUBSCRIPTION_COLOR, children: "Legacy" }))] })] }), jsx("div", { className: "bunny-flex bunny-items-center bunny-gap-6", children: jsx(SubscriptionStatusAndActions, { subscription: subscription }) })] }));
+                        }, children: subscription.product.name })), jsxs("div", { className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2", children: [((_b = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _b === void 0 ? void 0 : _b.name) && (jsx(Text$k, { className: "bunny-text-sm", children: subscription.plan.name })), jsxs(CustomizedTag, { color: TAG_COLORS[(_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()], children: [lodashExports.capitalize(subscription.state.toLowerCase().replace(/_/g, ' ')), isTrial ? ` (${trialDaysLeft !== null && trialDaysLeft !== void 0 ? trialDaysLeft : 'N/A'} days left)` : ''] }), ((_d = subscription.priceList) === null || _d === void 0 ? void 0 : _d.deprecated) && (jsx(CustomizedTag, { color: LEGACY_SUBSCRIPTION_COLOR, children: "Legacy" }))] })] }), jsx("div", { className: "bunny-flex bunny-items-center bunny-gap-6", children: jsx(SubscriptionStatusAndActions, { subscription: subscription }) })] }));
 };
 
 const filterSubscriptionCharges_SubscriptionChargeFragment = t(`
@@ -25222,11 +24565,37 @@ function sortSubscriptionCharges(charges) {
     return orderedCharges;
 }
 
-const { Text: Text$h } = Typography;
+const { Text: Text$j } = Typography;
 const SubscriptionCardColumnHeaders = ({ columns, }) => {
-    return (jsx(Fragment, { children: columns.map((subscriptionColumn, index) => (jsx(Text$h, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, children: subscriptionColumn.title }, index))) }));
+    return (jsx(Fragment, { children: columns.map((subscriptionColumn, index) => (jsx(Text$j, { className: `bunny-text-slate-400 ${subscriptionColumn.className}`, children: subscriptionColumn.title }, index))) }));
 };
 
+var ChargeType;
+(function (ChargeType) {
+    ChargeType["USAGE"] = "USAGE";
+    ChargeType["ONE_TIME"] = "ONE_TIME";
+    ChargeType["RECURRING"] = "RECURRING";
+})(ChargeType || (ChargeType = {}));
+var ChargeType$1 = ChargeType;
+
+var QuoteChangeKind;
+(function (QuoteChangeKind) {
+    QuoteChangeKind["ADJUSTMENT"] = "ADJUSTMENT";
+    QuoteChangeKind["COUPON"] = "COUPON";
+    QuoteChangeKind["CREDIT"] = "CREDIT";
+    QuoteChangeKind["DISCOUNT"] = "DISCOUNT";
+    QuoteChangeKind["FREE_PERIOD_DISCOUNT"] = "FREE_PERIOD_DISCOUNT";
+    QuoteChangeKind["PRICE_UPDATE"] = "PRICE_UPDATE";
+    QuoteChangeKind["QUANTITY_UPDATE"] = "QUANTITY_UPDATE";
+    QuoteChangeKind["REINSTATE"] = "REINSTATE";
+    QuoteChangeKind["RENEW"] = "RENEW";
+    QuoteChangeKind["SUBSCRIBE"] = "SUBSCRIBE";
+    QuoteChangeKind["UNSUBSCRIBE"] = "UNSUBSCRIBE";
+    QuoteChangeKind["UPDATE"] = "UPDATE";
+    QuoteChangeKind["ACTIVATE"] = "ACTIVATE";
+})(QuoteChangeKind || (QuoteChangeKind = {}));
+var QuoteChangeKind$1 = QuoteChangeKind;
+
 var utc$2 = {exports: {}};
 
 var utc$1 = utc$2.exports;
@@ -25514,7 +24883,7 @@ const TieredDisplayDropdown = ({ pricingModel, charge: maskedCharge, currencyId,
                                     const nextRecord = priceTiers === null || priceTiers === void 0 ? void 0 : priceTiers[index + 1];
                                     const starts = record.starts;
                                     const ends = (nextRecord === null || nextRecord === void 0 ? void 0 : nextRecord.starts) ? nextRecord.starts - 1 : '+';
-                                    return (jsxs(Fragment, { children: [formatNumber(starts, 0), typeof ends === 'number' ? formatNumber(ends, 0) : '+'] }));
+                                    return (jsxs(Fragment, { children: [formatNumber(starts, 0), typeof ends === 'number' ? ' - ' : '', typeof ends === 'number' ? formatNumber(ends, 0) : '+'] }));
                                 },
                             },
                             {
@@ -25612,9 +24981,9 @@ const SubscriptionChargeUnitPrice = ({ charge: maskedCharge, currencyId, }) => {
     return (jsx(Fragment, { children: hasPriceTiers(charge) ? (jsx(TieredDisplayDropdown, { pricingModel: charge.pricingModel, charge: charge, currencyId: currencyId, priceDecimals: (_c = charge.priceDecimals) !== null && _c !== void 0 ? _c : 0, truncatedText: `${charge.kind === 'PRICE_UPDATE' ? 'new ' : ''}${getApplicablePriceTier(charge, currencyId, (_d = charge.priceDecimals) !== null && _d !== void 0 ? _d : 0)}` })) : isChargeDiscount ? (`-${price}`) : (price) }));
 };
 
-const { Text: Text$g } = Typography;
+const { Text: Text$i } = Typography;
 const SubscriptionsListCell = ({ children, className, gridColumn, right, style, }) => {
-    return (jsx(Text$g, { className: `bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ${className}`, style: {
+    return (jsx(Text$i, { className: `bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ${className}`, style: {
             gridColumn,
             textAlign: right ? "right" : "left",
             justifyContent: right ? "flex-end" : "flex-start",
@@ -25786,9 +25155,9 @@ function AddonSubscriptionsCards({ subscriptions: maskedSubscriptions, subscript
         }) }));
 }
 
-const { Text: Text$f } = Typography;
+const { Text: Text$h } = Typography;
 const SubscriptionCardCellMobile = ({ children, className, style, }) => {
-    return (jsx(Text$f, { className: className, style: style, children: children }));
+    return (jsx(Text$h, { className: className, style: style, children: children }));
 };
 
 const SubscriptionCardMobile_SubscriptionFragment = t(`
@@ -25894,6 +25263,38 @@ const SubscriptionsList = ({ showInactive, subscriptions: maskedSubscriptions, }
         }) }));
 };
 
+const canSubscriptionUpgradeFromTrial_SubscriptionFragment = t(`
+    fragment canSubscriptionUpgradeFromTrial_SubscriptionFragment on Subscription {
+      state
+      plan {
+        selfServiceBuy
+      }
+    }
+  `);
+const canSubscriptionUpgradeFromTrial = (maskedSubscription) => {
+    var _a, _b;
+    const subscription = readFragment(canSubscriptionUpgradeFromTrial_SubscriptionFragment, maskedSubscription);
+    return ((((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL') &&
+        ((_b = subscription.plan) === null || _b === void 0 ? void 0 : _b.selfServiceBuy)) ||
+        false);
+};
+
+const canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment = t(`
+    fragment canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment on Subscription {
+      state
+      plan {
+        selfServiceBuy
+      }
+    }
+  `);
+const canSubscriptionUpgradeFromTrialExpired = (maskedSubscription) => {
+    var _a, _b;
+    const subscription = readFragment(canSubscriptionUpgradeFromTrialExpired_SubscriptionFragment, maskedSubscription);
+    return ((((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED') &&
+        ((_b = subscription.plan) === null || _b === void 0 ? void 0 : _b.selfServiceBuy)) ||
+        false);
+};
+
 const PriceListCardButton_PriceListFragment = t(`
     fragment PriceListCardButton_PriceListFragment on PriceList {
       id
@@ -25944,16 +25345,50 @@ const PriceListCardButton = ({ disableSelectCurrentPlan, isPriceListCurrentSubsc
     return (jsx("div", { className: "bunny-flex bunny-flex-col bunny-grow bunny-w-full bunny-gap-3", children: jsx(Button, { className: "bunny-w-full", disabled: disableSelectCurrentPlan, type: isSelected ? 'primary' : 'default', children: createButtonText() }) }));
 };
 
+const periodMonthsConverter = (period) => {
+    if (period === 0)
+        return graphql.scalar('BillingPeriod', 'ONCE');
+    else if (period === 1)
+        return graphql.scalar('BillingPeriod', 'MONTHLY');
+    else if (period === 3)
+        return graphql.scalar('BillingPeriod', 'QUARTERLY');
+    else if (period === 6)
+        return graphql.scalar('BillingPeriod', 'SEMI_ANNUAL');
+    else if (period === 12)
+        return graphql.scalar('BillingPeriod', 'ANNUAL');
+    else
+        return null;
+};
+const billingPeriodConverter = (period) => {
+    if (period === graphql.scalar('BillingPeriod', 'ONCE'))
+        return 0;
+    else if (period === graphql.scalar('BillingPeriod', 'MONTHLY'))
+        return 1;
+    else if (period === graphql.scalar('BillingPeriod', 'QUARTERLY'))
+        return 3;
+    else if (period === graphql.scalar('BillingPeriod', 'SEMI_ANNUAL'))
+        return 6;
+    else
+        return 12;
+};
+
+const QuoteContext = createContext({});
+
 const BillingPeriodSelector = ({ availableBillingPeriods, onChangeBillingPeriod, products, selectedBillingPeriod, selectedProduct, onChangeProduct, }) => {
     const { secondaryColor, brandColor } = useBrand();
     const isMobile = useIsMobile();
+    const { isInPreviewMode } = useSubscriptionProps();
     if (!availableBillingPeriods || (availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.length) < 2)
         return null;
     return (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-8", children: [(products === null || products === void 0 ? void 0 : products.length) && products.length > 1 && (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsx("div", { className: "bunny-font-medium bunny-text-xs", style: {
                             color: secondaryColor,
                         }, children: "Select product" }), jsx(ProductRadioStyled, { brandColor: brandColor, children: jsx(Radio.Group, { onChange: e => {
+                                if (isInPreviewMode)
+                                    return;
                                 onChangeProduct(products === null || products === void 0 ? void 0 : products.find(product => product.id === e.target.value));
                             }, value: selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id, buttonStyle: "solid", children: jsx(Space, { className: "bunny-gap-2", children: products === null || products === void 0 ? void 0 : products.map(product => (jsx(Radio.Button, { value: product.id, children: product.name }, product.id))) }) }) })] })), jsx("div", { className: "bunny-flex bunny-flex-col bunny-w-full bunny-gap-2", children: jsx(StyledRadioGroup, { className: "bunny-w-full", "$isMobile": isMobile, children: jsx(Radio.Group, { onChange: e => {
+                            if (isInPreviewMode)
+                                return;
                             onChangeBillingPeriod(e.target.value);
                         }, value: selectedBillingPeriod, size: "small", buttonStyle: "solid", children: availableBillingPeriods === null || availableBillingPeriods === void 0 ? void 0 : availableBillingPeriods.map((periodMonth, index) => {
                             return (jsx(Radio.Button, { value: periodMonthsConverter(periodMonth), children: periodMonthsConverter(periodMonth) }, index));
@@ -25988,14 +25423,140 @@ const StyledRadioGroup = styled.div `
     > span {
       font-size: 11px !important;
     }
-  }
-  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {
-    background: transparent !important;
-  }
-  .ant-radio-button-wrapper::before {
-    display: none !important;
-  }
-`;
+  }
+  .ant-radio-button-wrapper:not(.ant-radio-button-wrapper-checked) {
+    background: transparent !important;
+  }
+  .ant-radio-button-wrapper::before {
+    display: none !important;
+  }
+`;
+
+function getAddonsForBillingPeriod(billingPeriod, addonPlans) {
+    const flattenedPriceLists = addonPlans.flatMap(addonPlan => addonPlan.priceLists);
+    return flattenedPriceLists.filter(priceList => priceList.periodMonths === billingPeriodConverter(billingPeriod));
+}
+
+const hasUnpurchasedAddonPriceLists_PlanFragment = t(`
+    fragment hasUnpurchasedAddonPriceLists_PlanFragment on Plan {
+      priceLists {
+        id
+        isVisible
+        periodMonths
+      }
+    }
+  `);
+function hasUnpurchasedAddonPriceLists(maskedPriceListAddonPlans, currentSubscription, billingPeriod) {
+    // Read fragments
+    const priceListAddonPlans = maskedPriceListAddonPlans.map(maskedAddonPlan => readFragment(hasUnpurchasedAddonPriceLists_PlanFragment, maskedAddonPlan));
+    const addonPriceLists = getAddonsForBillingPeriod(billingPeriod, priceListAddonPlans).filter(priceList => priceList.isVisible);
+    const unpurchasedAddonPriceLists = addonPriceLists === null || addonPriceLists === void 0 ? void 0 : addonPriceLists.filter(addonPriceList => {
+        var _a;
+        return !((_a = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.addonSubscriptions) === null || _a === void 0 ? void 0 : _a.some(addonSubscription => addonSubscription.priceList.id === addonPriceList.id));
+    });
+    return unpurchasedAddonPriceLists.length > 0;
+}
+
+function hasUnpurchasedFeatureAddons(priceList, currentSubscription) {
+    const featureAddons = priceList.charges.filter(charge => charge.featureAddon);
+    const purchasedFeatureAddons = currentSubscription === null || currentSubscription === void 0 ? void 0 : currentSubscription.charges.filter(charge => { var _a; return (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.featureAddon; });
+    const unpurchasedFeatureAddons = featureAddons.filter(charge => !(purchasedFeatureAddons === null || purchasedFeatureAddons === void 0 ? void 0 : purchasedFeatureAddons.some(purchasedCharge => { var _a; return ((_a = purchasedCharge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === charge.id; })));
+    return unpurchasedFeatureAddons.length > 0;
+}
+function findQuoteChangeForFeatureAddon(quote) {
+    return quote === null || quote === void 0 ? void 0 : quote.quoteChanges.find(qc => qc.kind === QuoteChangeKind$1.UPDATE ||
+        qc.kind === QuoteChangeKind$1.SUBSCRIBE ||
+        qc.kind === QuoteChangeKind$1.ACTIVATE);
+}
+function featureAddonInQuote(selectedPriceList, priceListCharge, quote) {
+    var _a, _b, _c;
+    const quoteChange = (_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.find(qc => { var _a; return ((_a = qc === null || qc === void 0 ? void 0 : qc.priceList) === null || _a === void 0 ? void 0 : _a.id) === selectedPriceList.id; });
+    if (!quoteChange)
+        return false;
+    return (_c = (_b = quoteChange.charges) === null || _b === void 0 ? void 0 : _b.some(c => { var _a; return ((_a = c.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === priceListCharge.id; })) !== null && _c !== void 0 ? _c : false;
+}
+// ID Cucumber will use to find the feature addon switch
+function featureAddonSwitchTestId(addonName) {
+    const name = addonName.toLowerCase().replace(/ /g, '-');
+    return `feature-addon-switch-${name}`;
+}
+
+const removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
+// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
+const createPlanDescription = (planDescription) => {
+    return (planDescription || '').replace(removeHTMLTagsRegex, (_, y) => (y ? ' & ' : ''));
+};
+const getActivePlanPriceData = (priceList, selectedPriceList) => {
+    if (!priceList) {
+        return;
+    }
+    // If a period option is selected, return the charge that matches the selected period option
+    let activeBillingPLCharge;
+    // Default to first price list charge
+    let lowestPLCharge;
+    // Find the lowest price list charge with a billing period that matches the selected period option
+    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+        activeBillingPLCharge = priceList.charges[0];
+    }
+    for (let j = 0; j < priceList.charges.length; j++) {
+        const charge = priceList.charges[j];
+        if (charge.chargeType === ChargeType$1.USAGE || charge.featureAddon === true)
+            continue;
+        if (activeBillingPLCharge) {
+            // If we already found a charge with the same billing period check if this charge is lower
+            if (charge.basePrice < activeBillingPLCharge.basePrice &&
+                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
+                activeBillingPLCharge = charge;
+            }
+        }
+        // If a period option is selected, only return the charge if it matches the selected period option
+        else if (selectedPriceList &&
+            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
+            activeBillingPLCharge = charge;
+        }
+        // Otherwise, return the lowest price list charge
+        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
+            lowestPLCharge = charge;
+        }
+    }
+    return {
+        activeCharge: activeBillingPLCharge || lowestPLCharge,
+    };
+};
+const showErrorNotification$1 = useErrorNotification();
+const isPriceListDisabled = ({ priceList, upgradingSubscription, }) => {
+    const priceListAddonPlans = priceList === null || priceList === void 0 ? void 0 : priceList.plan.addonPlans;
+    if (!priceListAddonPlans) {
+        showErrorNotification$1('Price list addon plans are undefined');
+        return false;
+    }
+    const canPurchaseFeatureAddons = hasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
+    const canPurchasePlanAddons = hasUnpurchasedAddonPriceLists(priceListAddonPlans, upgradingSubscription, periodMonthsConverter(priceList.periodMonths));
+    const existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription); // TODO: set type properly later
+    const existingSubscriptionInTrialExpired = upgradingSubscription && canSubscriptionUpgradeFromTrialExpired(upgradingSubscription); // TODO: set type properly later
+    const isUpgradingSubscriptionPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
+    // When should priceList be disabled?
+    // if upgradingSubscription?.priceList.id === priceList.id
+    //     AND the upgradingSubscription is not in trial
+    //     AND cannot purchase feature addons
+    //     AND cannot purchase add-on plans
+    //     AND selfServiceBuy is false
+    // if upgradingSubscription?.priceList.id != priceList.id
+    //     AND upgradingSubscription is expired trial
+    //     AND priceList is not deprecated
+    if (isUpgradingSubscriptionPriceList) {
+        return (!existingSubscriptionInTrial &&
+            !existingSubscriptionInTrialExpired &&
+            !canPurchaseFeatureAddons &&
+            !canPurchasePlanAddons);
+    }
+    else if (priceList === null || priceList === void 0 ? void 0 : priceList.deprecated) {
+        return true;
+    }
+    else {
+        return false;
+    }
+};
 
 const NextPriceListButton = ({ availablePriceLists, priceListStart, setPriceListStart, numberOfPlansToDisplay, }) => {
     return (jsxs("div", { className: "bunny-absolute bunny-flex bunny-gap-1", style: { top: '12px', right: '8px' }, children: [priceListStart > 0 && (jsx("div", { className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shadow bunny-p-1 bunny-cursor-pointer", onClick: () => {
@@ -26056,12 +25617,12 @@ function priceDescriptionString({ unitName, showPriceAsMonthly, periodMonths, pr
     return `Per ${unitName && !priceListHasFlatFeeCharges ? `${unitName.toLowerCase()} / ` : ''}${showPriceAsMonthly ? 'month' : periodLabel}`;
 }
 
-const { Text: Text$e } = Typography;
+const { Text: Text$g } = Typography;
 const PriceTierPrice = ({ currencyId, priceDecimals, tier, }) => {
-    return (jsx(Text$e, { className: "bunny-text-white", children: formatCurrency(tier.price, currencyId, priceDecimals) }));
+    return (jsx(Text$g, { className: "bunny-text-white", children: formatCurrency(tier.price, currencyId, priceDecimals) }));
 };
 
-const { Text: Text$d } = Typography;
+const { Text: Text$f } = Typography;
 const PriceTierRow_PriceTierFragment = t(`
   fragment PriceTierRow_PriceTierFragment on PriceListChargeTier {
     starts
@@ -26076,10 +25637,10 @@ const PriceTierRow = ({ tier: maskedTier, nextTier: maskedNextTier, }) => {
         }
         return `${tier === null || tier === void 0 ? void 0 : tier.starts}+`;
     })();
-    return jsx(Text$d, { className: "bunny-text-white", children: text });
+    return jsx(Text$f, { className: "bunny-text-white", children: text });
 };
 
-const { Text: Text$c } = Typography;
+const { Text: Text$e } = Typography;
 const ChargePriceTiers_PriceListChargeFragment = t(`
     fragment ChargePriceTiers_PriceListChargeFragment on PriceListCharge {
       id
@@ -26096,7 +25657,7 @@ const ChargePriceTiers_PriceListChargeFragment = t(`
 const ChargePriceTiers = ({ charge: maskedCharge, currencyId, }) => {
     var _a;
     const charge = readFragment(ChargePriceTiers_PriceListChargeFragment, maskedCharge);
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1 bunny-w-full", children: [jsx(Text$c, { className: "bunny-text-white bunny-font-bold", children: charge.name }), jsxs(Text$c, { className: "bunny-flex bunny-flex-row bunny-text-gray-400 bunny-text-xs/3", children: [getPricingModelTitle(charge.pricingModel), " pricing -", ' ', getPricingModelDescription(charge.pricingModel)] }), jsx("div", { style: {
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-1 bunny-w-full", children: [jsx(Text$e, { className: "bunny-text-white bunny-font-bold", children: charge.name }), jsxs(Text$e, { className: "bunny-flex bunny-flex-row bunny-text-gray-400 bunny-text-xs/3", children: [getPricingModelTitle(charge.pricingModel), " pricing -", ' ', getPricingModelDescription(charge.pricingModel)] }), jsx("div", { style: {
                     maxWidth: '150px',
                     minWidth: '50%',
                     gap: '0.1rem',
@@ -26247,7 +25808,7 @@ const hasMultipleRecurringCharges = (maskedPriceList) => {
     return (((_b = (_a = priceList.charges) === null || _a === void 0 ? void 0 : _a.filter(charge => charge.chargeType !== t.scalar('ChargeType', 'USAGE') && charge.featureAddon !== true).length) !== null && _b !== void 0 ? _b : 0) > 1);
 };
 
-const { Text: Text$b } = Typography;
+const { Text: Text$d } = Typography;
 const MarkupWrapper = defaultStyled.div `
   padding: 0 !important;
   margin: 0 !important;
@@ -26282,7 +25843,7 @@ const PriceListCardPriceDescription = ({ feature, priceList: maskedPriceList, })
     const billingPeriodText = periodMonthsConverted
         ? BillingPeriodConverter$1[periodMonthsConverted]
         : 'undefined';
-    return (jsxs(Text$b, { className: "bunny-text-start bunny-text-gray-400 bunny-text-sm", children: [jsx("div", { children: ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingDescription) && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(MarkupWrapper, { children: jsx(Markup, { content: priceList.plan.pricingDescription }) })) : (priceDescriptionString({
+    return (jsxs(Text$d, { className: "bunny-text-start bunny-text-gray-400 bunny-text-sm", children: [jsx("div", { children: ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingDescription) && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(MarkupWrapper, { children: jsx(Markup, { content: priceList.plan.pricingDescription }) })) : (priceDescriptionString({
                     unitName: hasMultipleRecurringCharges(priceList) ? undefined : feature === null || feature === void 0 ? void 0 : feature.unitName,
                     showPriceAsMonthly: priceList.showPriceAsMonthly,
                     periodMonths: priceList.periodMonths,
@@ -26290,9 +25851,9 @@ const PriceListCardPriceDescription = ({ feature, priceList: maskedPriceList, })
                 })) }), priceList.periodMonths && priceList.periodMonths > 1 && (jsxs("div", { children: ["Billed ", billingPeriodText] }))] }));
 };
 
-const { Text: Text$a } = Typography;
+const { Text: Text$c } = Typography;
 const PriceListCardDescription = ({ description }) => {
-    return (jsx(Text$a, { className: "bunny-text-gray-400 bunny-text-sm", children: jsx(Markup, { content: description }) }));
+    return (jsx(Text$c, { className: "bunny-text-gray-400 bunny-text-sm", children: jsx(Markup, { content: description }) }));
 };
 
 const GetPrice_PriceListFragment = t(`
@@ -26318,218 +25879,609 @@ const PriceListPriceText_PriceListFragment = t(`
         id
         pricingStyle
       }
-      currencyId
-      ...GetPrice_PriceListFragment
+      currencyId
+      ...GetPrice_PriceListFragment
+    }
+  `, [GetPrice_PriceListFragment]);
+function priceListPriceText({ priceList: maskedPriceList, }) {
+    var _a, _b, _c;
+    // Read fragments
+    const priceList = readFragment(PriceListPriceText_PriceListFragment, maskedPriceList);
+    const calculatePriceDecimals = () => {
+        var _a, _b;
+        if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) === t.scalar('PlanPricingStyles', 'PRICED')) {
+            const decimalPart = (_b = getPrice(priceList)) === null || _b === void 0 ? void 0 : _b.toString().split('.')[1];
+            if (!decimalPart)
+                return 0;
+            // If decimal part consists only of zeros, return 0
+            if (parseInt(decimalPart) === 0) {
+                return 0;
+            }
+            return undefined;
+        }
+        return 0;
+    };
+    const priceDecimals = calculatePriceDecimals();
+    const price = !((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) ||
+        ((_b = priceList.plan) === null || _b === void 0 ? void 0 : _b.pricingStyle) === t.scalar('PlanPricingStyles', 'PRICED')
+        ? formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
+        : ((_c = priceList.plan) === null || _c === void 0 ? void 0 : _c.pricingStyle) === t.scalar('PlanPricingStyles', 'CONTACT_US')
+            ? 'Custom'
+            : 'Free';
+    return price;
+}
+
+const { Text: Text$b } = Typography;
+const PriceListCardPrice_PriceListFragment = t(`
+    fragment PriceListCardPrice_PriceListFragment on PriceList {
+      ...PriceListPriceText_PriceListFragment
+    }
+  `, [PriceListPriceText_PriceListFragment]);
+const PriceListCardPrice = ({ className, priceList: maskedPriceList, }) => {
+    // Read fragments
+    const priceList = readFragment(PriceListCardPrice_PriceListFragment, maskedPriceList);
+    return (jsx(Text$b, { className: className ? className : 'bunny-font-medium bunny-text-3xl bunny-text-gray-900', children: priceListPriceText({ priceList }) }));
+};
+
+const { Text: Text$a } = Typography;
+const PriceListCardTitle = ({ planName, isPriceListCurrentSubscription, trialRemainingDays, }) => {
+    const { brandColor } = useBrand();
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [Boolean(trialRemainingDays) && (jsx("div", { className: "bunny-font-medium bunny-text-secondary", style: { height: '1rem' }, children: isPriceListCurrentSubscription
+                    ? `Trial ends in ${trialRemainingDays} day${trialRemainingDays === 1 ? '' : 's'}`
+                    : ' ' })), jsx(Text$a, { className: "bunny-font-medium bunny-text-xl bunny-text-left", style: { color: brandColor }, children: planName })] }));
+};
+
+const PLAN_GRID_PADDING = 4;
+const PlanPickerGridCell = ({ children, noBorder, }) => {
+    const isMobile = useIsMobile();
+    return (jsxs("div", { className: "bunny-flex bunny-flex-col", style: isMobile
+            ? {}
+            : {
+                ...(noBorder ? {} : { borderLeft: `1px solid ${SLATE_200}` }),
+            }, children: [jsx("div", { className: "bunny-grow", children: children }), jsx("div", { className: "bunny-mt-4" })] }));
+};
+
+const PriceListCardDesktop_PriceListFragment = t(`
+    fragment PriceListCardDesktop_PriceListFragment on PriceList {
+      id
+      deprecated
+      plan {
+        id
+        pricingStyle
+        contactUsUrl
+        name
+      }
+      charges {
+        id
+        featureAddon
+        priceListChargeTiers {
+          starts
+          price
+        }
+        ...PricingTooltip_PriceListChargeFragment
+      }
+      currencyId
+      ...PriceListCardButton_PriceListFragment
+      ...PriceListHasPriceTiers_PriceListFragment
+      ...PricingTooltip_PriceListFragment
+      ...PriceListCardPrice_PriceListFragment
+      ...PriceListCardPriceDescription_PriceListFragment
+    }
+  `, [
+    PriceListCardButton_PriceListFragment,
+    PricingTooltip_PriceListChargeFragment,
+    PriceListHasPriceTiers_PriceListFragment,
+    PricingTooltip_PriceListFragment,
+    PriceListCardPrice_PriceListFragment,
+    PriceListCardPriceDescription_PriceListFragment,
+]);
+const PriceListCardDesktop = ({ hideButton, description, disableSelectCurrentPlan, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, noBorder, onClickPriceListCard, }) => {
+    var _a, _b, _c, _d;
+    // Context
+    const { isInPreviewMode } = useSubscriptionProps();
+    // Read fragments
+    const priceList = readFragment(PriceListCardDesktop_PriceListFragment, maskedPriceList);
+    return (jsx(PlanPickerGridCell, { noBorder: noBorder, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-4 bunny-px-4 ${disableSelectCurrentPlan ? '' : 'cursor-pointer'} bunny-box-border`, onClick: () => {
+                var _a, _b, _c;
+                if (isInPreviewMode)
+                    return;
+                if (!disableSelectCurrentPlan) {
+                    if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) === t.scalar('PlanPricingStyles', 'CONTACT_US')) {
+                        window.open((_c = (_b = priceList.plan) === null || _b === void 0 ? void 0 : _b.contactUsUrl) !== null && _c !== void 0 ? _c : undefined, '_blank');
+                    }
+                    else {
+                        onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
+                    }
+                }
+            }, style: {
+                height: '100%',
+            }, children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-8 bunny-h-full bunny-justify-between", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-gap-2", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), priceList.deprecated && jsx(CustomizedTag, { color: 'orange', children: "Legacy" })] }), jsx(PriceListCardDescription, { description: description })] }), jsxs("div", { style: {
+                                display: 'grid',
+                                gridTemplateRows: 'auto minmax(40px, auto)',
+                                alignItems: 'start',
+                            }, children: [jsx(PriceListCardPrice, { priceList: priceList }), jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList }), priceListHasPriceTiers(priceList) && (jsx(PricingTooltip, { priceListCharges: (_d = (_c = priceList.charges) === null || _c === void 0 ? void 0 : _c.filter(charge => charge.featureAddon !== true)) !== null && _d !== void 0 ? _d : [], currencyId: priceList.currencyId, priceList: priceList }))] })] })] }), !hideButton && (jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] }) }));
+};
+
+const CheckIcon = ({ backgroundColor, size, }) => {
+    return (jsx("div", { className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor }, children: jsx("svg", { width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+};
+
+const PriceListCardMobile_PriceListFragment = t(`
+    fragment PriceListCardMobile_PriceListFragment on PriceList {
+      plan {
+        name
+      }
+      ...PriceListCardPriceDescription_PriceListFragment
+      ...PriceListCardButton_PriceListFragment
+      ...PriceListCardPrice_PriceListFragment
+      ...PriceListCardButton_PriceListFragment
+    }
+  `, [
+    PriceListCardPriceDescription_PriceListFragment,
+    PriceListCardButton_PriceListFragment,
+    PriceListCardPrice_PriceListFragment,
+    PriceListCardButton_PriceListFragment,
+]);
+const PriceListCardMobile = ({ description, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, disableOnClickPriceListCard, onClickPriceListCard, }) => {
+    var _a, _b;
+    // Context
+    const { brandColor } = useBrand();
+    const { isInPreviewMode } = useSubscriptionProps();
+    // Read fragments
+    const priceList = readFragment(PriceListCardMobile_PriceListFragment, maskedPriceList);
+    return (jsxs("div", { className: `bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4`, onClick: () => {
+            if (isInPreviewMode)
+                return;
+            if (!disableOnClickPriceListCard)
+                onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
+        }, style: {
+            minWidth: '220px',
+            borderColor: isSelected ? brandColor : SLATE_200,
+        }, children: [isSelected && (jsx("div", { className: "bunny-absolute", style: {
+                    top: '10px',
+                    right: '10px',
+                }, children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) })), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] }), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }), jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })] }));
+};
+
+const PriceListCard_PriceListFragment = t(`
+    fragment PriceListCard_PriceListFragment on PriceList {
+      id
+      plan {
+        description
+        id
+      }
+      ...PriceListCardDesktop_PriceListFragment
+      ...PriceListCardMobile_PriceListFragment
+    }
+  `, [PriceListCardDesktop_PriceListFragment, PriceListCardMobile_PriceListFragment]);
+const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, subscriptions, trialRemainingDays, noBorder, onClickPriceListCard, disableCurrentPlan, }) => {
+    var _a, _b, _c, _d;
+    const isMobile = useIsMobile();
+    const upgradingSubscription = useUpgradingSubscription();
+    // Read fragments
+    const priceList = readFragment(PriceListCard_PriceListFragment, maskedPriceList);
+    // Derived state
+    const description = createPlanDescription((_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : '');
+    // Get the active price list charge for this plan
+    const activeCharge = (_c = getActivePlanPriceData(priceList, priceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
+    // Is the price list the current price list for the upgradingSubscription
+    const isPriceListCurrentSubscription = ((_d = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) === null || _d === void 0 ? void 0 : _d.id) === priceList.id;
+    const disableSelectCurrentPlan = disableCurrentPlan !== null && disableCurrentPlan !== void 0 ? disableCurrentPlan : isPriceListDisabled({
+        priceList: priceList,
+        upgradingSubscription: upgradingSubscription, // TODO: set type properly later
+    });
+    const subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(subscription => {
+        var _a, _b;
+        return subscription.plan.id === ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.id) &&
+            subscription.state !== t.scalar('SubscriptionState', 'CANCELED') &&
+            subscription.state !== t.scalar('SubscriptionState', 'EXPIRED') &&
+            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
+    });
+    if (!activeCharge) {
+        return null;
+    }
+    const { feature } = activeCharge;
+    return isMobile ? (jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, 
+        // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
+        disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (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 useSetQuoteQueryData$1 = () => {
+    const token = useToken();
+    const queryClient = useQueryClient();
+    const setQuoteQueryData = (quoteId, quote) => {
+        queryClient.setQueryData(QueryKeyFactory.createObjectKey({
+            id: quoteId,
+            objectName: 'editingQuote',
+            token,
+        }), quote);
+    };
+    return { setQuoteQueryData };
+};
+
+const CheckoutButton = ({ disabled, onClickCheckout, loading, tooltipText, }) => {
+    const isMobile = useIsMobile();
+    const TooltipWrapper = ({ children }) => {
+        if (tooltipText) {
+            return jsx(Tooltip, { title: tooltipText, children: children });
+        }
+        return jsx("div", { children: children });
+    };
+    return (jsx(TooltipWrapper, { children: jsx(Button, { className: isMobile ? 'w-full' : '', disabled: disabled, onClick: onClickCheckout, size: isMobile ? 'large' : 'middle', type: "primary", loading: loading, children: "Proceed to checkout" }) }));
+};
+
+const CheckoutPrice_QuoteFragment = t(`
+    fragment CheckoutPrice_QuoteFragment on Quote {
+      periodAmount
+      amountDue
+      quoteChanges {
+        charges {
+          kind
+          chargeType
+        }
+      }
     }
-  `, [GetPrice_PriceListFragment]);
-function priceListPriceText({ priceList: maskedPriceList, }) {
-    var _a, _b, _c;
+  `);
+// if there are any charges on the subscribe quote change
+const CheckoutPrice = ({ quote: maskedQuote, selectedPriceList, }) => {
+    var _a, _b;
     // Read fragments
-    const priceList = readFragment(PriceListPriceText_PriceListFragment, maskedPriceList);
-    const calculatePriceDecimals = () => {
-        var _a, _b;
-        if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) === t.scalar('PlanPricingStyles', 'PRICED')) {
-            const decimalPart = (_b = getPrice(priceList)) === null || _b === void 0 ? void 0 : _b.toString().split('.')[1];
-            if (!decimalPart)
-                return 0;
-            // If decimal part consists only of zeros, return 0
-            if (parseInt(decimalPart) === 0) {
-                return 0;
-            }
-            return undefined;
-        }
-        return 0;
-    };
-    const priceDecimals = calculatePriceDecimals();
-    const price = !((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) ||
-        ((_b = priceList.plan) === null || _b === void 0 ? void 0 : _b.pricingStyle) === t.scalar('PlanPricingStyles', 'PRICED')
-        ? formatCurrency(getPrice(priceList), priceList.currencyId, priceDecimals)
-        : ((_c = priceList.plan) === null || _c === void 0 ? void 0 : _c.pricingStyle) === t.scalar('PlanPricingStyles', 'CONTACT_US')
-            ? 'Custom'
-            : 'Free';
-    return price;
-}
+    const quote = readFragment(CheckoutPrice_QuoteFragment, maskedQuote);
+    // Hooks
+    const isMobile = useIsMobile();
+    const displayAmount = (_a = quote === null || quote === void 0 ? void 0 : quote.amountDue) !== null && _a !== void 0 ? _a : quote === null || quote === void 0 ? void 0 : quote.periodAmount; // amountDue might not be available, so we use periodAmount as a fallback
+    const hasDisplayAmount = selectedPriceList && displayAmount !== undefined;
+    const convertedPeriodMonths = periodMonthsConverter(selectedPriceList.periodMonths);
+    const periodLabel = convertedPeriodMonths ? PERIOD_LABELS[convertedPeriodMonths] : 'undefined';
+    const subscribingToUsageCharges = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.some(qc => qc.charges.some(c => c.kind === 'SUBSCRIBE' && c.chargeType === 'USAGE'));
+    return (jsxs("div", { className: `bunny-font-medium ${isMobile ? 'bunny-text-2xl' : ''}`, children: [subscribingToUsageCharges ? 'Usage based pricing' : '', subscribingToUsageCharges && hasDisplayAmount ? ' + ' : '', hasDisplayAmount
+                ? `${formatCurrency(displayAmount, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.currencyId, undefined)} / ${periodLabel}`
+                : ''] }));
+};
 
 const { Text: Text$9 } = Typography;
-const PriceListCardPrice_PriceListFragment = t(`
-    fragment PriceListCardPrice_PriceListFragment on PriceList {
-      ...PriceListPriceText_PriceListFragment
+const CheckoutBarSummarySection_QuoteFragment = t(`
+    fragment CheckoutBarSummarySection_QuoteFragment on Quote {
+      quoteChanges {
+        charges {
+          id
+        }
+      }
+      ...CheckoutPrice_QuoteFragment
     }
-  `, [PriceListPriceText_PriceListFragment]);
-const PriceListCardPrice = ({ className, priceList: maskedPriceList, }) => {
-    // Read fragments
-    const priceList = readFragment(PriceListCardPrice_PriceListFragment, maskedPriceList);
-    return (jsx(Text$9, { className: className ? className : 'bunny-font-medium bunny-text-3xl bunny-text-gray-900', children: priceListPriceText({ priceList }) }));
+  `, [CheckoutPrice_QuoteFragment]);
+const CheckoutBarSummarySection = ({ selectedPriceList, onClickCheckout, }) => {
+    var _a;
+    // Context
+    const { quote: maskedQuote, isQuotePending, isUpdatingQuote } = useContext(QuoteContext);
+    const quote = readFragment(CheckoutBarSummarySection_QuoteFragment, maskedQuote);
+    const { isInPreviewMode } = useSubscriptionProps();
+    // Hooks
+    const { paymentPlugins } = usePaymentPlugins(undefined);
+    const isMobile = useIsMobile();
+    const hasPaymentPlugins = Boolean(paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length);
+    const quoteHasCharges = Boolean((_a = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _a === void 0 ? void 0 : _a.some(qc => qc.charges.length > 0));
+    const checkoutButtonDisabled = Boolean(!selectedPriceList || !quoteHasCharges || !hasPaymentPlugins || isInPreviewMode);
+    return (jsxs(Text$9, { className: `bunny-flex bunny-items-center bunny-gap-4 ${isMobile ? 'bunny-flex-col' : ''}`, children: [quote && (jsxs("div", { className: `bunny-flex ${isMobile ? 'items-center justify-between w-full' : 'flex-col'}`, children: [jsx("div", { className: "bunny-text-slate-500 bunny-font-medium bunny-text-right", style: { fontSize: '11px' }, children: "TOTAL" }), jsx(CheckoutPrice, { quote: quote, selectedPriceList: selectedPriceList })] })), jsx(CheckoutButton, { disabled: checkoutButtonDisabled, onClickCheckout: onClickCheckout, loading: isQuotePending || isUpdatingQuote, tooltipText: isInPreviewMode
+                    ? 'Checkout is disabled in preview mode'
+                    : !hasPaymentPlugins
+                        ? 'Cannot checkout. No valid payment plugins found. Please contact your administrator.'
+                        : undefined })] }));
 };
 
-const { Text: Text$8 } = Typography;
-const PriceListCardTitle = ({ planName, isPriceListCurrentSubscription, trialRemainingDays, }) => {
-    const { brandColor } = useBrand();
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [Boolean(trialRemainingDays) && (jsx("div", { className: "bunny-font-medium bunny-text-secondary", style: { height: '1rem' }, children: isPriceListCurrentSubscription
-                    ? `Trial ends in ${trialRemainingDays} day${trialRemainingDays === 1 ? '' : 's'}`
-                    : ' ' })), jsx(Text$8, { className: "bunny-font-medium bunny-text-xl bunny-text-left", style: { color: brandColor }, children: planName })] }));
+const accountQuery = (id) => `
+query account {
+  account(id: ${id}) {
+    billingCountry
+    billingState
+    billingStreet
+    billingCity
+    billingZip
+  }
+}`;
+const getAccount$1 = async ({ id, apiHost, token, }) => {
+    const response = await gqlRequest({
+        query: accountQuery(id),
+        token,
+        apiHost,
+    });
+    return response === null || response === void 0 ? void 0 : response.account;
 };
 
-const PLAN_GRID_PADDING = 4;
-const PlanPickerGridCell = ({ children, noBorder, }) => {
-    const isMobile = useIsMobile();
-    return (jsxs("div", { className: "bunny-flex bunny-flex-col", style: isMobile
-            ? {}
-            : {
-                ...(noBorder ? {} : { borderLeft: `1px solid ${SLATE_200}` }),
-            }, children: [jsx("div", { className: "bunny-grow", children: children }), jsx("div", { className: "bunny-mt-4" })] }));
+const MUTATION = `{
+  currentUser {
+    taxationRequiredAccountFields
+  }
+}`;
+const getTaxationRequiredAccountFields = async ({ apiHost, token, }) => {
+    var _a, _b;
+    const response = await gqlRequest({
+        query: MUTATION,
+        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 PriceListCardDesktop_PriceListFragment = t(`
-    fragment PriceListCardDesktop_PriceListFragment on PriceList {
+const Checkout_QuoteFragment = t(`
+    fragment Checkout_QuoteFragment on Quote {
       id
-      deprecated
-      plan {
-        id
-        pricingStyle
-        contactUsUrl
-        name
-      }
-      charges {
-        id
-        featureAddon
-        priceListChargeTiers {
-          starts
-          price
-        }
-        ...PricingTooltip_PriceListChargeFragment
+      accountId
+      formattedQuote {
+        html
       }
-      currencyId
-      ...PriceListCardButton_PriceListFragment
-      ...PriceListHasPriceTiers_PriceListFragment
-      ...PricingTooltip_PriceListFragment
-      ...PriceListCardPrice_PriceListFragment
-      ...PriceListCardPriceDescription_PriceListFragment
+      ...QuoteCheckout_QuoteFragment
     }
-  `, [
-    PriceListCardButton_PriceListFragment,
-    PricingTooltip_PriceListChargeFragment,
-    PriceListHasPriceTiers_PriceListFragment,
-    PricingTooltip_PriceListFragment,
-    PriceListCardPrice_PriceListFragment,
-    PriceListCardPriceDescription_PriceListFragment,
-]);
-const PriceListCardDesktop = ({ hideButton, description, disableSelectCurrentPlan, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, noBorder, onClickPriceListCard, }) => {
-    var _a, _b, _c, _d;
+  `, [QuoteCheckout_QuoteFragment]);
+const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, open, quote: maskedQuote, isUpdatingQuote, }) => {
+    var _a, _b, _c, _d, _e;
+    const { apiHost } = useContext(BunnyContext);
+    const isMobile = useIsMobile();
+    const token = useToken();
+    // Context
+    const onPaymentMethodSaved = useOnPaymentMethodSaved();
+    const onPaymentMethodRemoved = useOnPaymentMethodRemoved();
     // Read fragments
-    const priceList = readFragment(PriceListCardDesktop_PriceListFragment, maskedPriceList);
-    return (jsx(PlanPickerGridCell, { noBorder: noBorder, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-full bunny-rounded-md bunny-gap-4 bunny-pt-4 bunny-px-4 ${disableSelectCurrentPlan ? '' : 'cursor-pointer'} bunny-box-border`, onClick: () => {
-                var _a, _b, _c;
-                if (!disableSelectCurrentPlan) {
-                    if (((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.pricingStyle) === t.scalar('PlanPricingStyles', 'CONTACT_US')) {
-                        window.open((_c = (_b = priceList.plan) === null || _b === void 0 ? void 0 : _b.contactUsUrl) !== null && _c !== void 0 ? _c : undefined, '_blank');
-                    }
-                    else {
-                        onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
-                    }
-                }
-            }, style: {
-                height: '100%',
-            }, children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-8 bunny-h-full bunny-justify-between", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-gap-2", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), priceList.deprecated && jsx(CustomizedTag, { color: 'orange', children: "Legacy" })] }), jsx(PriceListCardDescription, { description: description })] }), jsxs("div", { style: {
-                                display: 'grid',
-                                gridTemplateRows: 'auto minmax(40px, auto)',
-                                alignItems: 'start',
-                            }, children: [jsx(PriceListCardPrice, { priceList: priceList }), jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList }), priceListHasPriceTiers(priceList) && (jsx(PricingTooltip, { priceListCharges: (_d = (_c = priceList.charges) === null || _c === void 0 ? void 0 : _c.filter(charge => charge.featureAddon !== true)) !== null && _d !== void 0 ? _d : [], currencyId: priceList.currencyId, priceList: priceList }))] })] })] }), !hideButton && (jsx(PriceListCardButton, { disableSelectCurrentPlan: disableSelectCurrentPlan, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan }))] }) }));
+    const quote = readFragment(Checkout_QuoteFragment, maskedQuote);
+    const hasTaxPlugin = useHasTaxPlugin({
+        apiHost,
+        token,
+    });
+    // Queries
+    const { data: taxationRequiredAccountFields, isLoading: isLoadingTaxationRequiredAccountFields } = useQuery({
+        queryKey: ['getTaxationRequiredAccountFields', token],
+        queryFn: () => getTaxationRequiredAccountFields({ apiHost, token }),
+        enabled: Boolean(quote),
+        staleTime: 0,
+    });
+    const { data: account, isLoading: isLoadingAccount } = useQuery({
+        queryKey: ['account', quote === null || quote === void 0 ? void 0 : quote.accountId],
+        queryFn: () => (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount$1({ id: quote.accountId, apiHost, token }),
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+    });
+    // Use onRecalculateTaxes callback because parents need to define recalculateTaxes to get and set the right quote data they need
+    async function recalculateTaxes() {
+        if (quote) {
+            if (!quote.id)
+                throw new Error('Quote ID is required');
+            onRecalculateTaxes(quote.id);
+        }
+        return {};
+    }
+    const recalculateTaxesEnabled = Boolean(quote) &&
+        open &&
+        hasTaxPlugin &&
+        !taxationRequiredAccountFields &&
+        !isLoadingTaxationRequiredAccountFields &&
+        !isUpdatingQuote;
+    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 (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: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), 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)) && (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)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
+                                onFail(error);
+                            }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
+                                if (recalculateTaxesEnabled) {
+                                    await recalculateTaxes();
+                                }
+                            } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
 };
 
-const CheckIcon = ({ backgroundColor, size, }) => {
-    return (jsx("div", { className: "bunny-flex bunny-items-center bunny-justify-center bunny-rounded-full bunny-shrink-0", style: { width: size, height: size, backgroundColor }, children: jsx("svg", { width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+function canEditChargeQuantity(charge) {
+    if (!charge)
+        return false;
+    if (charge.chargeType === graphql.scalar('ChargeType', 'USAGE'))
+        return false;
+    if (charge.pricingModel === graphql.scalar('PricingModel', 'FLAT'))
+        return false;
+    return true;
+}
+
+const { Text: Text$8 } = Typography;
+const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChanged, }) => {
+    var _a;
+    const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+    const isMobile = useIsMobile();
+    useEffect(() => {
+        setTimeout(() => {
+            setIsTooltipOpen(true);
+        }, 1000);
+        setTimeout(() => {
+            setIsTooltipOpen(false);
+        }, 6000);
+    }, []);
+    return (jsxs(Text$8, { className: `bunny-flex bunny-items-center bunny-gap-2 ${isMobile ? 'bunny-justify-between' : ''}`, children: [jsx(QuantityLabel, { activeCharge: priceListCharge }), jsx(Tooltip, { onOpenChange: setIsTooltipOpen, open: isTooltipOpen, title: "Change quantity here", styles: {
+                    body: {
+                        paddingTop: '0.75rem',
+                        paddingBottom: '0.75rem',
+                    },
+                }, children: jsx(Input, { id: `${(_a = priceListCharge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().replace(/ /g, '-')}-quantity-input`, className: isMobile ? 'text-right' : '', disabled: disabled, onChange: e => {
+                        onQuantityChanged(Number(e.target.value));
+                    }, min: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin, max: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax, style: { minWidth: '120px' }, type: "number", value: quantity, required: true }) })] }));
+};
+const QuantityLabel = ({ activeCharge }) => {
+    const chargeName = activeCharge.name;
+    return (jsx(Text$8, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
 };
 
-const PriceListCardMobile_PriceListFragment = t(`
-    fragment PriceListCardMobile_PriceListFragment on PriceList {
-      plan {
-        name
+const PlanPickerCheckoutBar_QuoteFragment = t(`
+    fragment PlanPickerCheckoutBar_QuoteFragment on Quote {
+      ...Checkout_QuoteFragment
+      quoteChanges {
+        priceList {
+          id
+        }
+        charges {
+          priceListCharge {
+            id
+          }
+        }
       }
-      ...PriceListCardPriceDescription_PriceListFragment
-      ...PriceListCardButton_PriceListFragment
-      ...PriceListCardPrice_PriceListFragment
-      ...PriceListCardButton_PriceListFragment
     }
-  `, [
-    PriceListCardPriceDescription_PriceListFragment,
-    PriceListCardButton_PriceListFragment,
-    PriceListCardPrice_PriceListFragment,
-    PriceListCardButton_PriceListFragment,
-]);
-const PriceListCardMobile = ({ description, feature, isPriceListCurrentSubscription, isSelected, priceList: maskedPriceList, subscriptionPlan, trialRemainingDays, disableOnClickPriceListCard, onClickPriceListCard, }) => {
-    var _a, _b;
+  `, [Checkout_QuoteFragment]);
+const PlanPickerCheckoutBar = ({ selectedPriceList, handlePortalErrors, onCheckoutSuccess, }) => {
     // Context
-    const { brandColor } = useBrand();
+    const { shadow, isInPreviewMode } = useSubscriptionProps();
+    const { quote: maskedQuote, onChangeQuantity, getFeatureQuantity, onRecalculateTaxes, isFeatureAddonsLoading, isUpdatingQuote, } = useContext(QuoteContext);
     // Read fragments
-    const priceList = readFragment(PriceListCardMobile_PriceListFragment, maskedPriceList);
-    return (jsxs("div", { className: `bunny-relative bunny-flex bunny-flex-col bunny-border-2 bunny-border-solid bunny-rounded-lg bunny-p-4`, onClick: () => {
-            if (!disableOnClickPriceListCard)
-                onClickPriceListCard === null || onClickPriceListCard === void 0 ? void 0 : onClickPriceListCard(priceList);
-        }, style: {
-            minWidth: '220px',
-            borderColor: isSelected ? brandColor : SLATE_200,
-        }, children: [isSelected && (jsx("div", { className: "bunny-absolute", style: {
-                    top: '10px',
-                    right: '10px',
-                }, children: jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) })), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-grow bunny-gap-2", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, planName: (_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'undefined', trialRemainingDays: trialRemainingDays }), jsx(PriceListCardDescription, { description: description })] }), jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-center bunny-gap-2", children: [jsx(PriceListCardPrice, { priceList: priceList }), jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }), jsx(PriceListCardButton, { disableSelectCurrentPlan: disableOnClickPriceListCard, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })] }));
+    const quote = readFragment(PlanPickerCheckoutBar_QuoteFragment, maskedQuote);
+    // Local state
+    const [payModalVisible, setPayModalVisible] = useState(false);
+    // Hooks
+    const token = useToken();
+    const showSuccessNotification = useSuccessNotification();
+    const queryClient = useQueryClient();
+    const isMobile = useIsMobile();
+    const handleCheckoutSuccess = () => {
+        queryClient.refetchQueries({
+            queryKey: QueryKeyFactory.createTableKey({
+                pluralType: 'subscriptions',
+                token,
+            }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.createTableKey({
+                pluralType: 'upgradeSubscriptions',
+                token,
+            }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.createTableKey({
+                pluralType: 'hasActiveSubscriptions',
+                token,
+            }),
+        });
+        queryClient.invalidateQueries({
+            queryKey: QueryKeyFactory.transactionsKey({ token }),
+        });
+        setPayModalVisible(false);
+        showSuccessNotification('Your subscription has been created', 'Checkout successful');
+        onCheckoutSuccess();
+    };
+    return (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-4' : 'bunny-flex-row'} bunny-my-4 bunny-p-4 bunny-justify-between bunny-bg-white bunny-rounded-md ${shadow ? `shadow-${shadow}` : ''}`, children: [jsx("div", { className: `${isMobile ? 'bunny-flex bunny-flex-col' : 'bunny-flex'} bunny-gap-4`, children: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.charges.map((charge, index) => {
+                    var _a, _b, _c, _d;
+                    if (!canEditChargeQuantity({
+                        chargeType: (_a = charge.chargeType) !== null && _a !== void 0 ? _a : null,
+                        pricingModel: (_b = charge.pricingModel) !== null && _b !== void 0 ? _b : null,
+                    }))
+                        return null;
+                    if (!((_c = charge.feature) === null || _c === void 0 ? void 0 : _c.id))
+                        throw new Error('Charge feature is undefined');
+                    const isFeatureAddon = charge.featureAddon;
+                    const quantity = getFeatureQuantity((_d = charge.feature) === null || _d === void 0 ? void 0 : _d.id, charge.id);
+                    const maybeIsChargeLoading = isFeatureAddon && isFeatureAddonsLoading;
+                    if (!quantity)
+                        return null;
+                    // if charge is a feature addon, and a corresponding quote charge is not found in quote, return null
+                    if (isFeatureAddon && !featureAddonInQuote(selectedPriceList, charge, quote)) {
+                        return null;
+                    }
+                    const isDisabled = !quote || maybeIsChargeLoading || !selectedPriceList || !charge.selfServiceQuantity;
+                    return (jsx(CheckoutBarInput, { disabled: isDisabled, priceListCharge: charge, quantity: quantity, onQuantityChanged: quantity => {
+                            if (isInPreviewMode)
+                                return;
+                            onChangeQuantity(charge.id, quantity);
+                        } }, index));
+                }) }), jsx(CheckoutBarSummarySection, { onClickCheckout: () => setPayModalVisible(true), selectedPriceList: selectedPriceList }), jsx(Checkout, { onCancel: () => setPayModalVisible(false), onFail: error => handlePortalErrors === null || handlePortalErrors === void 0 ? void 0 : handlePortalErrors(error), onSuccess: handleCheckoutSuccess, onRecalculateTaxes: onRecalculateTaxes, open: payModalVisible, quote: quote, token: token, isUpdatingQuote: isUpdatingQuote })] }));
 };
 
-const PriceListCard_PriceListFragment = t(`
-    fragment PriceListCard_PriceListFragment on PriceList {
+const useQuoteUpdateFeatureAddon_QuoteFragment = t(`
+    fragment useQuoteUpdateFeatureAddon_QuoteFragment on Quote {
       id
-      plan {
-        description
+      startDate
+    }
+  `);
+
+const FeatureAddonRow_QuoteFragment = t(`
+    fragment FeatureAddonRow_QuoteFragment on Quote {
+      ...useQuoteUpdateFeatureAddon_QuoteFragment
+    }
+  `, [useQuoteUpdateFeatureAddon_QuoteFragment]);
+
+const useToggleAddonPlan_QuoteFragment = t(`
+    fragment useToggleAddonPlan_QuoteFragment on Quote {
+      quoteChanges {
+        priceList {
+          id
+        }
         id
       }
-      ...PriceListCardDesktop_PriceListFragment
-      ...PriceListCardMobile_PriceListFragment
+      id
     }
-  `, [PriceListCardDesktop_PriceListFragment, PriceListCardMobile_PriceListFragment]);
-const PriceListCard = ({ hideButton, isSelected, priceList: maskedPriceList, subscriptions, trialRemainingDays, noBorder, onClickPriceListCard, disableCurrentPlan, }) => {
-    var _a, _b, _c, _d;
-    const isMobile = useIsMobile();
-    const upgradingSubscription = useUpgradingSubscription();
-    // Read fragments
-    const priceList = readFragment(PriceListCard_PriceListFragment, maskedPriceList);
-    // Derived state
-    const description = createPlanDescription((_b = (_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : '');
-    // Get the active price list charge for this plan
-    const activeCharge = (_c = getActivePlanPriceData(priceList, priceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
-    // Is the price list the current price list for the upgradingSubscription
-    const isPriceListCurrentSubscription = ((_d = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) === null || _d === void 0 ? void 0 : _d.id) === priceList.id;
-    const disableSelectCurrentPlan = disableCurrentPlan !== null && disableCurrentPlan !== void 0 ? disableCurrentPlan : isPriceListDisabled({
-        priceList: priceList,
-        upgradingSubscription: upgradingSubscription, // TODO: set type properly later
-    });
-    const subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(subscription => {
-        var _a, _b;
-        return subscription.plan.id === ((_a = priceList.plan) === null || _a === void 0 ? void 0 : _a.id) &&
-            subscription.state !== t.scalar('SubscriptionState', 'CANCELED') &&
-            subscription.state !== t.scalar('SubscriptionState', 'EXPIRED') &&
-            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === t.scalar('SubscriptionState', 'TRIAL_EXPIRED');
-    });
-    if (!activeCharge) {
-        return null;
+  `);
+
+const AddonPlanRow_QuoteFragment = t(`
+    fragment AddonPlanRow_QuoteFragment on Quote {
+      ...useToggleAddonPlan_QuoteFragment
     }
-    const { feature } = activeCharge;
-    return isMobile ? (jsx(PriceListCardMobile, { description: description, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, 
-        // TODO: naming mismatch disableOnClickPriceListCard vs disableSelectCurrentPlan, maybe also functionality mismatch? (ignore for now, mobile won't ever show this currently)
-        disableOnClickPriceListCard: disableSelectCurrentPlan, onClickPriceListCard: onClickPriceListCard })) : (jsx(PriceListCardDesktop, { hideButton: hideButton, description: description, disableSelectCurrentPlan: disableSelectCurrentPlan, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan, noBorder: noBorder, onClickPriceListCard: onClickPriceListCard }));
-};
+  `, [useToggleAddonPlan_QuoteFragment]);
 
-const useSetQuoteQueryData$1 = () => {
-    const token = useToken();
-    const queryClient = useQueryClient();
-    const setQuoteQueryData = (quoteId, quote) => {
-        queryClient.setQueryData(QueryKeyFactory.createObjectKey({
-            id: quoteId,
-            objectName: 'editingQuote',
-            token,
-        }), quote);
-    };
-    return { setQuoteQueryData };
-};
+/**
+ * Central quote fragment for QuoteProvider context.
+ *
+ * This fragment aggregates all child component fragments to ensure the QuoteProvider
+ * fetches all required quote data upfront. When a component needs specific quote fields,
+ * add its fragment here to maintain type safety and avoid over-fetching.
+ *
+ * Pattern: Fragment Composition
+ * - Components define their data needs via fragments
+ * - Provider composes these fragments into a single query
+ * - Type safety ensures all required fields are fetched
+ */
+const QuoteContext_QuoteFragment = t(`
+    fragment QuoteContext_QuoteFragment on Quote {
+      id
+      currencyId
+      amountDue
+      startDate
+      quoteChanges {
+        id
+        kind
+        priceList {
+          id
+        }
+        charges {
+          priceListCharge {
+            id
+            chargeType
+            pricingModel
+            quantityMin
+            quantityMax
+            selfServiceQuantity
+          }
+          feature {
+            id
+          }
+          quantity
+          id
+        }
+      }
+      ...PlanPickerCheckoutBar_QuoteFragment
+      ...CheckoutBarSummarySection_QuoteFragment
+      ...AddonPlanRow_QuoteFragment
+      ...FeatureAddonRow_QuoteFragment
+      ...PaymentForms_QuoteFragment
+    }
+  `, [
+    PlanPickerCheckoutBar_QuoteFragment,
+    CheckoutBarSummarySection_QuoteFragment,
+    AddonPlanRow_QuoteFragment,
+    FeatureAddonRow_QuoteFragment,
+    PaymentForms_QuoteFragment,
+]);
 
 const mutation$c = t(`
     mutation QuoteChargeDelete($quoteChargeId: ID!) {
@@ -27126,7 +27078,11 @@ function AddonPlanRow({ addonPriceList: maskedAddonPriceList, selectedPriceList,
     // Derived state
     const switchDisabled = isInPreviewMode || isPurchased;
     const hasCustomPrice = ((_b = addonPriceList.plan) === null || _b === void 0 ? void 0 : _b.pricingDescription) != null;
-    return (jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx("div", { className: `bunny-font-medium bunny-text-center bunny-text-orange-600`, children: (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.name }), jsx(PriceListCardDescription, { description: (_e = (_d = addonPriceList.plan) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : '' }), !hasCustomPrice && (jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-text-sm bunny-font-medium bunny-text-gray-900" })), jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsx(Button, { type: "link", onClick: onClickSelect, children: jsx(InfoCircleOutlined, {}) })] }), jsx(Switch, { id: addonPlanSwitchTestId((_g = (_f = addonPriceList.plan) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
+    return (jsxs("div", { className: `bunny-flex bunny-flex-row bunny-gap-2 bunny-justify-between bunny-items-center bunny-p-4 bunny-rounded-md bunny-bg-white ${shadow ? `shadow-${shadow}` : ''} bunny-mb-2`, children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx("div", { className: `bunny-font-medium bunny-text-center bunny-text-orange-600`, children: (_c = addonPriceList.plan) === null || _c === void 0 ? void 0 : _c.name }), jsx(PriceListCardDescription, { description: (_e = (_d = addonPriceList.plan) === null || _d === void 0 ? void 0 : _d.description) !== null && _e !== void 0 ? _e : '' }), !hasCustomPrice && (jsx(PriceListCardPrice, { priceList: addonPriceList, className: "bunny-text-sm bunny-font-medium bunny-text-gray-900" })), jsx(PriceListCardPriceDescription, { feature: activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.feature, priceList: addonPriceList }), jsx(Button, { type: "link", onClick: () => {
+                            if (isInPreviewMode)
+                                return;
+                            onClickSelect();
+                        }, children: jsx(InfoCircleOutlined, {}) })] }), jsx(Switch, { id: addonPlanSwitchTestId((_g = (_f = addonPriceList.plan) === null || _f === void 0 ? void 0 : _f.name) !== null && _g !== void 0 ? _g : ''), loading: isPending && !switchDisabled, checked: addedQuoteChange || isPurchased, onChange: (checked) => {
                     if (checked) {
                         addAddonQuoteChange();
                     }
@@ -29273,7 +29229,8 @@ const UpgradeWrapper = ({ onChangePlanCancel, handlePortalErrors, upgradingSubsc
             pluralType: 'upgradeSubscriptions',
             token,
         }),
-        queryFn: () => getSubscriptions({ isInPreviewMode, token, apiHost }),
+        queryFn: () => getSubscriptions({ token, apiHost, isInPreviewMode }),
+        enabled: !isInPreviewMode, // Don't query subscriptions in preview mode
     });
     // find upgrading subscription based on upgradingSubscriptionId
     const upgradingSubscription = (_b = (_a = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.find(subscription => (subscription === null || subscription === void 0 ? void 0 : subscription.id) === upgradingSubscriptionId);
@@ -29336,7 +29293,8 @@ const SubscriptionsWrapper = ({ handlePortalErrors, companyName, isInPreviewMode
             pluralType: 'subscriptions',
             token,
         }),
-        queryFn: () => getSubscriptions$1({ token, apiHost }),
+        queryFn: () => getSubscriptions$1({ token, apiHost, isInPreviewMode }),
+        enabled: !isInPreviewMode, // Don't query subscriptions in preview mode
     });
     const subscriptions = (_b = (_a = subscriptionsData === null || subscriptionsData === void 0 ? void 0 : subscriptionsData.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.filter(subscription => subscription !== null);
     const defaultStyles = {