npm - @bunnyapp/components - Versions diffs - 1.3.0-beta.4 → 1.3.0-beta.7 - Mend

@bunnyapp/components 1.3.0-beta.4 → 1.3.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/dist/cjs/index.js CHANGED Viewed

@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
 });
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.76-beta.15';
+var PACKAGE_VERSION = '1.3.0-beta.6';
 var createRequestHeaders = function (token) {
     var headers = common.createClientDevHeaders(token);
     // Add the components version header
@@ -430,6 +430,7 @@ var DocumentTemplatePreview = function (_a) {
                 URL.revokeObjectURL(url_1);
             };
         }
+        return undefined;
     }, [data]);
     if (isLoading) {
         return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsxRuntime.jsx(antd.Spin, {}) })));
@@ -501,6 +502,7 @@ function LegacyDocument(_a) {
             setPdfUrl(url_1);
             return function () { return URL.revokeObjectURL(url_1); };
         }
+        return undefined;
     }, [pdfBlob]);
     if (isLoading || !pdfUrl)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -547,7 +549,7 @@ var checkout = function (_a) {
     });
 };
-var paymentMethodsQuery = function (filter) { return "query paymentMethods {\n  paymentMethods ".concat(filter ? "(".concat(filter, ")") : '', " {\n    nodes {\n      id\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n        type\n      }\n      isDefault\n    }\n  }\n}"); };
+var paymentMethodsQuery = function () { return "query PaymentMethods($accountId: ID) {\n  paymentMethods (accountId: $accountId) {\n    nodes {\n      id\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n        type\n      }\n      isDefault\n    }\n  }\n}"; };
 var getPaymentMethods = function (_a) {
     var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -556,9 +558,10 @@ var getPaymentMethods = function (_a) {
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: paymentMethodsQuery(accountId ? "filter: \"accountId is ".concat(accountId, "\"") : ''),
+                        query: paymentMethodsQuery(),
                         token: token,
                         apiHost: apiHost,
+                        vars: { accountId: accountId },
                     })];
                 case 1:
                     response = _c.sent();
@@ -586,20 +589,11 @@ var usePaymentMethod = function (_a) {
 };
 var filterPaymentPlugins = function (plugins) {
-    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; }).filter(function (plugin) { return plugin.name !== 'Manual Payment'; });
-};
-var filterPaymentPluginsByEntity = function (plugins, selectedEntityId) {
-    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
-        var _a, _b;
-        return selectedEntityId === undefined ||
-            selectedEntityId === null ||
-            ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(selectedEntityId)) ||
-            ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0;
-    });
+    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'payment' && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === 'valid'; });
 };
-var MUTATION$9 = "{\n  paymentPlugins {\n    enabled\n    entities\n    guid\n    hidden\n    id\n    name\n    status\n    type\n    webhookEnabled\n    components\n  }\n}";
+var MUTATION$9 = "query PaymentPlugins($accountId: ID) {\n  paymentPlugins (accountId: $accountId) {\n    enabled\n    entities\n    guid\n    hidden\n    id\n    name\n    status\n    type\n    webhookEnabled\n    components\n  }\n}";
 var getPaymentPlugins = function (_a) {
-    var apiHost = _a.apiHost, token = _a.token;
+    var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
@@ -610,6 +604,7 @@ var getPaymentPlugins = function (_a) {
                             query: MUTATION$9,
                             token: token,
                             apiHost: apiHost,
+                            vars: { accountId: accountId },
                         })];
                 case 1:
                     response = _b.sent();
@@ -623,18 +618,15 @@ var getPaymentPlugins = function (_a) {
     });
 };
 var usePaymentPlugins = function (_a) {
-    var apiHost = _a.apiHost, token = _a.token, selectedEntityId = _a.selectedEntityId;
+    var apiHost = _a.apiHost, token = _a.token, accountId = _a.accountId;
     var _b = reactQuery.useQuery({
         queryKey: ['paymentPlugins', token],
-        queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
+        queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }); },
         staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
     }), paymentPlugins = _b.data, isFetched = _b.isFetched;
     var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
-    var filteredPaymentPluginsByEntity = selectedEntityId
-        ? filterPaymentPluginsByEntity(filteredPaymentPlugins, selectedEntityId)
-        : filteredPaymentPlugins;
     return {
-        paymentPlugins: filteredPaymentPluginsByEntity,
+        paymentPlugins: filteredPaymentPlugins,
         isFetched: isFetched,
     };
 };
@@ -18613,13 +18605,13 @@ var isCardExpired = function (expiry) {
 var formatCardExpiry = function (cardExpiry) {
     if (cardExpiry.length <= 2)
         return cardExpiry;
-    return cardExpiry.substring(0, 2) + "/" + cardExpiry.substring(2);
+    return cardExpiry.substring(0, 2) + '/' + cardExpiry.substring(2);
 };
 // removes spaces from a credit card number
 var unformatCardNumber = function (cardNumber) {
-    var cardNumberArray = cardNumber.split("");
-    var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== " "; });
-    return unformattedCardNumberArray.join("");
+    var cardNumberArray = cardNumber.split('');
+    var unformattedCardNumberArray = cardNumberArray.filter(function (character) { return character !== ' '; });
+    return unformattedCardNumberArray.join('');
 };
 var storePayment = function (options, plugin, apiHost, accountId) { return __awaiter(void 0, void 0, void 0, function () {
     var testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token, response;
@@ -18628,7 +18620,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
             case 0:
                 testCreditCardNumber = options.testCreditCardNumber, testCreditCardCvc = options.testCreditCardCvc, testCreditCardExpirationDate = options.testCreditCardExpirationDate, token = options.token;
                 return [4 /*yield*/, common.invokePlugin({
-                        method: "store_payment_method",
+                        method: 'store_payment_method',
                         plugin: plugin,
                         payload: {
                             test_credit_card_number: testCreditCardNumber,
@@ -18641,7 +18633,7 @@ var storePayment = function (options, plugin, apiHost, accountId) { return __awa
                     })];
             case 1:
                 response = _a.sent();
-                if ((response === null || response === void 0 ? void 0 : response.status) !== "success")
+                if ((response === null || response === void 0 ? void 0 : response.status) !== 'success')
                     throw new Error(response === null || response === void 0 ? void 0 : response.message);
                 return [2 /*return*/, response];
         }
@@ -18958,7 +18950,7 @@ var PaymentMethodDetails = function (_a) {
         case 'StripePayment':
             return (jsxRuntime.jsx(StripeForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
         case 'DemoPayPayment':
-            return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: onSavePaymentMethod, plugin: plugin }));
+            return (jsxRuntime.jsx(DemoPayForm, { onFail: onFail, onSavePaymentMethod: function (response) { return onSavePaymentMethod(response); }, plugin: plugin }));
         default:
             console.warn('Can not find form for plugin', plugin);
             return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -19104,7 +19096,7 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
 var showErrorNotification$2 = common.useErrorNotification();
 var PaymentForm = function (_a) {
     var _b;
-    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, entityId = _a.entityId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
+    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, onPaymentHoldSuccess = _a.onPaymentHoldSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, onSetDefaultPaymentMethod = _a.onSetDefaultPaymentMethod, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, paymentHoldOptions = _a.paymentHoldOptions;
     // Local state
     var _c = react.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
     // Simple hooks
@@ -19118,7 +19110,7 @@ var PaymentForm = function (_a) {
         apiHost: apiHost,
     }), storedPaymentMethods = _d.paymentMethods, defaultPaymentMethod = _d.defaultPaymentMethod, isPaymentMethodLoading = _d.isLoading;
     // Complex hooks
-    var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, selectedEntityId: entityId, token: token }).paymentPlugins;
+    var paymentPlugins = usePaymentPlugins({ apiHost: apiHost, token: token, accountId: accountId }).paymentPlugins;
     var selectedPaymentMethodPlugin = react.useMemo(function () {
         // TODO: consolate PluginData and PaymentPlugin into one type. Needs to be done on API side.
         return paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = defaultPaymentMethod === null || defaultPaymentMethod === void 0 ? void 0 : defaultPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
@@ -19176,14 +19168,14 @@ var PaymentForm = function (_a) {
         setShowPaymentMethodForm(false);
         onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
-    var handleSavePaymentMethod = function () {
+    var handleSavePaymentMethod = function (response) {
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({
                 accountId: accountId,
                 token: token,
             }),
         });
-        onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
+        onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
         setShowPaymentMethodForm(false);
     };
     function handleClickAddPaymentMethod() {
@@ -19225,15 +19217,6 @@ function StripeWrapper(_a) {
     return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
-var useCurrentUserData = function () {
-    var queryClient = reactQuery.useQueryClient();
-    var token = useToken();
-    var currentUser = queryClient.getQueryData(common.QueryKeyFactory.default.currentUserKey(token));
-    if (!currentUser)
-        return {};
-    return currentUser;
-};
 function Invoice(_a) {
     var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? 'shadow-md' : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
     return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -19256,7 +19239,6 @@ function ActualInvoice() {
     var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired;
     var _c = react.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
-    var entityId = useCurrentUserData().entityId;
     // Hooks
     var showSuccessNotification = common.useSuccessNotification();
     var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
@@ -19292,12 +19274,12 @@ function ActualInvoice() {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
-var MUTATION$8 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      quote {\n        documentTemplateId\n        documents { id filename size date url }\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$8 = function () { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      quote {\n        documentTemplateId\n        documents { id filename size date url }\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
-    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
+    var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         return __generator(this, function (_b) {
@@ -19306,12 +19288,11 @@ var getFormattedQuote = function (_a) {
                         query: MUTATION$8(),
                         token: token,
                         apiHost: apiHost,
-                        vars: { id: id },
                     })];
                 case 1:
                     response = _b.sent();
-                    if (response === null || response === void 0 ? void 0 : response.formattedQuote.error) {
-                        throw new Error(response === null || response === void 0 ? void 0 : response.formattedQuote.error);
+                    if (response.errors && response.errors.length > 0) {
+                        throw new Error(response.errors[0].message);
                     }
                     return [2 /*return*/, response === null || response === void 0 ? void 0 : response.formattedQuote];
             }
@@ -19606,10 +19587,9 @@ var PaymentHoldModal = function (_a) {
     var visible = _a.visible, setVisible = _a.setVisible, quote = _a.quote;
     var queryClient = reactQuery.useQueryClient();
     var token = useToken();
-    var entityId = useCurrentUserData().entityId;
     return (jsxRuntime.jsxs(StyledModal$1, __assign({ centered: true, onCancel: function () {
             setVisible(false);
-        }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, quote: {
+        }, footer: null, open: visible, width: 600 }, { children: [jsxRuntime.jsx(Title$2, __assign({ className: "mt-4 pb-4 mx-4", level: 5 }, { children: "Pay to accept" })), jsxRuntime.jsx("div", __assign({ className: "mb-4" }, { children: jsxRuntime.jsx(PaymentForm, { quote: {
                         amount: quote.amount,
                         currencyId: quote.currency,
                         id: quote.quote.id,
@@ -19672,18 +19652,10 @@ function ActualQuote() {
     var _f = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
-            var error_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0:
-                        _a.trys.push([0, 2, , 3]);
-                        return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost, id: id })];
+                    case 0: return [4 /*yield*/, getFormattedQuote({ token: token, apiHost: apiHost })];
                     case 1: return [2 /*return*/, _a.sent()];
-                    case 2:
-                        error_1 = _a.sent();
-                        showErrorNotification(error_1.message);
-                        return [3 /*break*/, 3];
-                    case 3: return [2 /*return*/];
                 }
             });
         }); },
@@ -19698,7 +19670,6 @@ function ActualQuote() {
     }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = common.useIsMobile();
-    var showErrorNotification = common.useErrorNotification();
     react.useEffect(function () {
         if (formattedQuote) {
             onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
@@ -20018,7 +19989,7 @@ function Transactions(_a) {
 function TransactionsDisplay(_a) {
     var _b, _c;
     var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
-    var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions; _d.transactionDateType;
+    var _d = react.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions;
     var columns = react.useContext(TransactionsListContext).columns;
     var darkMode = react.useContext(BunnyContext).darkMode;
     var secondaryColor = react.useContext(BrandContext).secondaryColor;
@@ -20312,7 +20283,7 @@ var getPriceList = function (_a) {
     });
 };
-var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                startDate\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    kind\n                    charges {\n                        subtotal\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        priceList {\n                          id\n                        }\n                        coupon {\n                          couponCode\n                        }\n                        quantity\n                        kind\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
+var QUOTE_QUERY = function (id) { return "\n        query quote {\n            quote ".concat(id ? "(id: ".concat(id, ")") : '', " {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                startDate\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                kind\n                quoteChanges {\n                    currencyId\n                    id\n                    kind\n                    charges {\n                        subtotal\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        priceList {\n                          id\n                        }\n                        coupon {\n                          couponCode\n                        }\n                        quantity\n                        kind\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"); };
 var getQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -20467,6 +20438,45 @@ var useUpdateCoupons = function (_a) {
     };
 };
+var CURRENT_USER_DATA_QUERY = "{\n    company {\n      name\n    }\n    currentUser {\n      account {\n        billingCountry\n        currencyId\n      }\n      authObjectName\n      payload {\n        returnUrl\n      }\n      privacyUrl\n      termsUrl\n      entityId\n    }\n  }";
+var getCurrentUserData = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b, _c, _d, _e, _f, _g, _h, _j;
+        return __generator(this, function (_k) {
+            switch (_k.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        query: CURRENT_USER_DATA_QUERY,
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _k.sent();
+                    return [2 /*return*/, {
+                            authObjectName: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.authObjectName,
+                            account: (_c = response === null || response === void 0 ? void 0 : response.currentUser) === null || _c === void 0 ? void 0 : _c.account,
+                            companyName: (_d = response === null || response === void 0 ? void 0 : response.company) === null || _d === void 0 ? void 0 : _d.name,
+                            returnUrl: (_f = (_e = response === null || response === void 0 ? void 0 : response.currentUser) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.returnUrl,
+                            privacyUrl: (_g = response === null || response === void 0 ? void 0 : response.currentUser) === null || _g === void 0 ? void 0 : _g.privacyUrl,
+                            termsUrl: (_h = response === null || response === void 0 ? void 0 : response.currentUser) === null || _h === void 0 ? void 0 : _h.termsUrl,
+                            entityId: (_j = response === null || response === void 0 ? void 0 : response.currentUser) === null || _j === void 0 ? void 0 : _j.entityId,
+                        }];
+            }
+        });
+    });
+};
+var useCurrentUserData = function (token) {
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var currentUserData = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.currentUserKey(token),
+        queryFn: function () { return getCurrentUserData({ token: token, apiHost: apiHost }); },
+        enabled: Boolean(token),
+    }).data;
+    return currentUserData || {};
+};
 var BunnyFooterIcon = function (_a) {
     var color = _a.color;
     return (jsxRuntime.jsxs("svg", __assign({ width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsxs("g", __assign({ clipPath: "url(#clip0_6_851)" }, { children: [jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 }), jsxRuntime.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 })] })), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", __assign({ id: "clip0_6_851" }, { children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) })) })] })));
@@ -20475,7 +20485,8 @@ var BunnyFooterIcon = function (_a) {
 var Text$g = antd.Typography.Text;
 var Footer = function (_a) {
     var className = _a.className;
-    var _b = useCurrentUserData(), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
+    var token = useToken();
+    var _b = useCurrentUserData(token), privacyUrl = _b.privacyUrl, termsUrl = _b.termsUrl;
     var isMobile = common.useIsMobile();
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-shrink-0 ".concat(isMobile ? 'bunny-flex-col bunny-gap-2' : '', " ").concat(className) }, { children: [(termsUrl || privacyUrl) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-3" }, { children: [termsUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: termsUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Terms" }))), privacyUrl && (jsxRuntime.jsx(StyedLink, __assign({ className: "bunny-text-xs bunny-text-slate-400", href: privacyUrl, rel: "noopener noreferrer", target: "_blank", type: "text" }, { children: "Privacy" })))] }))), jsxRuntime.jsx(BunnyMarketingLink, {})] })));
 };
@@ -20488,6 +20499,22 @@ var StyedLink = styled__default["default"].a(templateObject_1$5 || (templateObje
 var StyledBunnyLink = styled__default["default"](StyedLink)(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  &:hover {\n    color: ", " !important;\n  }\n"], ["\n  &:hover {\n    color: ", " !important;\n  }\n"])), common.PRIMARY_COLOR);
 var templateObject_1$5, templateObject_2$1;
+function shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) {
+    var _a;
+    var upgradingFromTrial = ((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
+    function upgradingFromFree() {
+        var totalPrice = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges.reduce(function (acc, charge) { return acc + Number((charge === null || charge === void 0 ? void 0 : charge.discountedPrice) || 0); }, 0);
+        return totalPrice === 0;
+    }
+    if (quote.kind === common.QuoteChangeKind.SUBSCRIBE) {
+        return activeCouponsExist;
+    }
+    else if (quote.kind === common.QuoteChangeKind.ADJUSTMENT) {
+        return activeCouponsExist && (upgradingFromTrial || upgradingFromFree());
+    }
+    return false;
+}
 function CouponEditor(_a) {
     var className = _a.className, onAddCoupon = _a.onAddCoupon, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode;
     function handleAddCoupon() {
@@ -20501,9 +20528,12 @@ function CouponEditor(_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 ".concat(className) }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-row bunny-gap-2" }, { children: [jsxRuntime.jsx(antd.Input, { value: couponCode, onChange: function (e) { return setCouponCode(e.target.value); }, placeholder: "Coupon code", disabled: isAddingCoupon, size: "small" }), jsxRuntime.jsx(antd.Button, __assign({ loading: isAddingCoupon, type: "primary", onClick: handleAddCoupon, disabled: couponCode.length === 0 }, { children: "Apply" }))] })) })));
 }
+var SubscriptionsContext = react.createContext({});
 var Text$f = antd.Typography.Text;
 function CheckoutSummary(_a) {
     var quote = _a.quote, className = _a.className, onAddCoupon = _a.onAddCoupon, onRemoveCoupon = _a.onRemoveCoupon, isRemovingCoupon = _a.isRemovingCoupon, priceListData = _a.priceListData, isAddingCoupon = _a.isAddingCoupon, couponCode = _a.couponCode, setCouponCode = _a.setCouponCode, activeCouponsExist = _a.activeCouponsExist;
+    var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
     return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className, " bunny-space-y-4") }, { children: [jsxRuntime.jsxs(Text$f, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-text-lg bunny-font-medium bunny-mb-4" }, { children: ["Checkout summary - ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.product.name, " ", priceListData === null || priceListData === void 0 ? void 0 : priceListData.name] })), jsxRuntime.jsx("div", __assign({ className: "bunny-space-y-4" }, { children: quote === null || quote === void 0 ? void 0 : quote.quoteChanges.map(function (quoteChange) {
                             return quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.map(function (charge) {
                                 var _a;
@@ -20519,7 +20549,8 @@ function CheckoutSummary(_a) {
                                                     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" }, { children: "Remove" }))) : (jsxRuntime.jsx("div", { children: charge.quantity })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-col-span-1 bunny-text-right" }, { children: common.formatCurrency(multiplier * (charge.subtotal || 0), charge.currencyId) }))] }), charge.id));
                             });
-                        }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), activeCouponsExist && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
+                        }) })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-space-y-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Subtotal" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.subtotal, quote.currencyId) })] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Taxes" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.taxAmount, quote.currencyId) })] }))] })), jsxRuntime.jsx(CheckoutSummaryDivider, {}), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-justify-between" }, { children: [jsxRuntime.jsx("div", { children: "Total" }), jsxRuntime.jsx("div", { children: common.formatCurrency(quote.amountDue, quote.currencyId) })] }))] }), upgradingSubscription &&
+                shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-w-full", quote: quote, onAddCoupon: onAddCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode }))] })));
 }
 var CheckoutSummaryDivider = function () {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-my-2" }, { children: jsxRuntime.jsx(antd.Divider, { className: "m-0" }) })));
@@ -20528,8 +20559,7 @@ var CheckoutSummaryDivider = function () {
 var Title$1 = antd.Typography.Title;
 function PaymentForms(_a) {
     var quote = _a.quote, handlePaymentSuccess = _a.handlePaymentSuccess, handlePaymentFail = _a.handlePaymentFail, handleSubmit = _a.handleSubmit, proceedingToPayment = _a.proceedingToPayment, accountId = _a.accountId, overrideToken = _a.overrideToken, customCheckoutFunction = _a.customCheckoutFunction, defaultValues = _a.defaultValues;
-    var entityId = useCurrentUserData().entityId;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx("div", __assign({ className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]" }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) }))] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: quote ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: overrideToken ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Payment" })), jsxRuntime.jsx("div", __assign({ className: "bunny-overflow-y-auto bunny-max-h-[calc(100vh-10rem)]" }, { children: jsxRuntime.jsx(PaymentForm, { onFail: handlePaymentFail, onPaymentSuccess: handlePaymentSuccess, accountId: accountId, quote: quote, overrideToken: overrideToken, customCheckoutFunction: customCheckoutFunction }) }))] })) : null })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Title$1, __assign({ className: "bunny-px-4 bunny-m-0", level: 2 }, { children: "Signup" })), jsxRuntime.jsx(InitialSignupForm, { className: "bunny-px-4", onSubmit: handleSubmit, submitting: proceedingToPayment, defaultValues: defaultValues })] })) }));
 }
 function InitialSignupForm(_a) {
     var className = _a.className, onSubmit = _a.onSubmit, submitting = _a.submitting, defaultValues = _a.defaultValues;
@@ -20840,8 +20870,22 @@ var useQuoteDelete = function () {
         });
     }); };
 };
+var useQuoteSubscriptionActivate = function () {
+    var graphQLRequest = useGraphQLRequest();
+    return function (subscriptionId, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteSubscriptionActivate($subscriptionId: ID!) {\n        quoteSubscriptionActivate(subscriptionId: $subscriptionId) {\n          quote {\n            id\n          }\n        }\n      }", apiHost, token, { subscriptionId: subscriptionId })];
+                case 1:
+                    response = _a.sent();
+                    return [2 /*return*/, response];
+            }
+        });
+    }); };
+};
-var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        daysLeftInTrial\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        daysLeftInTrial\n        trialExpirationAction\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n            featureAddon\n            id\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -20927,7 +20971,7 @@ var accountUpdate = function (_a) {
     });
 };
-var COUNTRIES_REQUIRING_STATE = ["US", "CA"];
+var COUNTRIES_REQUIRING_STATE = ['US', 'CA'];
 var TaxationForm = function (_a) {
     var account = _a.account, quote = _a.quote;
     // Hooks
@@ -20955,19 +20999,18 @@ var TaxationForm = function (_a) {
         }); },
         onSuccess: function () {
             queryClient.invalidateQueries({
-                queryKey: ["getTaxationRequiredAccountFields", token],
+                queryKey: ['getTaxationRequiredAccountFields', token],
             });
         },
     }), updateAccount = _b.mutate, isUpdatingAccount = _b.isPending;
-    return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, { form: form }), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
+    return (jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4", form: form, initialValues: account, layout: "vertical", onFinish: updateAccount }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing street", name: "billingStreet" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Street" }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing city", name: "billingCity" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "City" }) })), jsxRuntime.jsx(FormBillingState, {}), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing country", name: "billingCountry", rules: [{ required: true }] }, { children: jsxRuntime.jsx(antd.Select, { options: common.Lists.COUNTRY_LIST, placeholder: "Select a country", showSearch: true, filterOption: function (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());
+                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
+                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
                     } }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing zip", name: "billingZip" }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Zip" }) })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-w-full", disabled: isUpdatingAccount, htmlType: "submit", type: "primary" }, { children: "Submit" })) })] })));
 };
-var FormBillingState = function (_a) {
-    _a.form;
-    var billingCountry = antd.Form.useWatch("billingCountry");
+var FormBillingState = function () {
+    var billingCountry = antd.Form.useWatch('billingCountry');
     var billingStateRequired = COUNTRIES_REQUIRING_STATE.includes(billingCountry);
     return (jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Billing state", name: "billingState", rules: [{ required: billingStateRequired }] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "State" }) })));
 };
@@ -20977,11 +21020,11 @@ var QuoteCheckout = function (_a) {
     var _b, _c;
     var account = _a.account, onSuccess = _a.onSuccess, onFail = _a.onFail, quote = _a.quote, taxationRequiredAccountFields = _a.taxationRequiredAccountFields, onRecalculateTaxes = _a.onRecalculateTaxes;
     var apiHost = react.useContext(BunnyContext).apiHost;
+    var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
     var token = useToken();
     var isMobile = common.useIsMobile();
     var _d = react.useState(false), isSaving = _d[0], setIsSaving = _d[1];
     var paymentRequired = getQuoteAmountDue(quote) > 0;
-    var entityId = useCurrentUserData().entityId;
     var queryClient = reactQuery.useQueryClient();
     var _e = react.useState(''), couponCode = _e[0], setCouponCode = _e[1];
     var _f = useUpdateCoupons({
@@ -21042,7 +21085,8 @@ var QuoteCheckout = function (_a) {
     }
     if (taxationRequiredAccountFields)
         return (jsxRuntime.jsx(PaymentFormWrapper, __assign({ setMaxHeight: false }, { children: jsxRuntime.jsx(TaxationForm, { account: account, quote: quote }) })));
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: activeCouponsExist && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: paymentRequired ? (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full" }, { children: [jsxRuntime.jsx(PaymentForm, { onFail: onFail, onPaymentSuccess: onSuccess, quote: quote }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
+                        shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", quote: quote, onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, __assign({ type: "link", loading: isRemovingCoupon, onClick: function () {
                         couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(function (couponCharge) {
                             var _a;
                             var couponCode = (_a = couponCharge === null || couponCharge === void 0 ? void 0 : couponCharge.coupon) === null || _a === void 0 ? void 0 : _a.couponCode;
@@ -21191,8 +21235,6 @@ var PageTitle = function (_a) {
                 } })), title] })));
 };
-var SubscriptionsContext = react.createContext({});
 var QUOTE_CHARGE_UPDATE = "\n  mutation QuoteChargeUpdate (\n    $discount: Float,\n    $endDate: ISO8601Date,\n    $name: String,\n    $price: Float,\n    $quantity: Int,\n    $quoteChargeId: ID!\n    $startDate: ISO8601Date\n    $subtotal: Float,\n  ) {\n    quoteChargeUpdate(\n      discount: $discount\n      endDate: $endDate\n      name: $name\n      price: $price\n      quantity: $quantity\n      quoteChargeId: $quoteChargeId\n      startDate: $startDate\n      subtotal: $subtotal\n    ) {\n      quoteCharge {\n        id\n      }\n    }\n  }\n";
 var quoteChargeUpdate = function (_a) {
     var discount = _a.discount, name = _a.name, price = _a.price, quantity = _a.quantity, quoteChargeId = _a.quoteChargeId, startDate = _a.startDate, subtotal = _a.subtotal, apiHost = _a.apiHost, token = _a.token;
@@ -21284,10 +21326,112 @@ var billingPeriodConverter = function (period) {
         return 12;
 };
+var canShowQuantitiesInput = function (charge, subscription) {
+    // Check if the subscription is active, pending, or in trial,
+    // the pricing model is not flat,
+    // and if it's not a trial, also check if the current charge is the last one in the subscription.
+    var _a, _b, _c;
+    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
+    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
+    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
+    var isFlatPricing = charge.pricingModel === 'FLAT';
+    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
+        !isFlatPricing &&
+        charge.selfServiceQuantity &&
+        !charge.expired;
+    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
+    return shouldProcessCharge;
+};
+var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
+    var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
+    var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
+    var charges = [
+        {
+            id: quoteChangeCharge.id,
+            quantity: editedSubscription.quantity - subscriptionQuantity,
+        },
+    ];
+    return { charges: charges, quoteChange: quoteChange };
+};
+var canShowChangeQuantities = function (_a) {
+    var subscriptions = _a.subscriptions;
+    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
+        return subscription.charges.some(function (charge) {
+            return canShowQuantitiesInput(charge, subscription);
+        });
+    });
+};
+var canSubscriptionUpgradeFromTrial = function (subscription) {
+    var _a;
+    return (((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL &&
+        subscription.plan.selfServiceBuy) ||
+        false;
+};
+var isSubscriptionNotActive = function (subscription) {
+    var _a, _b;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
+};
+var isSubscriptionActiveOrPending = function (subscription) {
+    var _a, _b;
+    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
+        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
+};
+var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
+// Helper function to check if charge is a discount
+var isDiscount = function (kind) {
+    return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
+};
+var hasPriceTiers = function (charge) {
+    var _a;
+    return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
+};
+var hasMultiplePriceTiers = function (charge) {
+    var _a;
+    return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
+};
+var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
+    var _a;
+    if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
+        return '';
+    var selectedTier;
+    // For TIERED pricing model: always show the first tier
+    if (charge.pricingModel === common.PricingModel.TIERED) {
+        selectedTier = charge.priceTiers[0];
+    }
+    // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
+    else if (charge.pricingModel === common.PricingModel.VOLUME ||
+        charge.pricingModel === common.PricingModel.BANDS) {
+        // Find the appropriate tier based on quantity
+        selectedTier = charge.priceTiers.find(function (tier, index) {
+            var nextTier = charge.priceTiers[index + 1];
+            var tierStart = tier.starts;
+            var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
+            return charge.quantity >= tierStart && charge.quantity <= tierEnd;
+        });
+        // Fallback to first tier if no tier found (shouldn't happen with proper data)
+        selectedTier = selectedTier || charge.priceTiers[0];
+    }
+    // Default fallback for any other pricing models
+    else {
+        selectedTier = charge.priceTiers[0];
+    }
+    if (!selectedTier)
+        return '';
+    // Calculate the tier range for display
+    var tierIndex = charge.priceTiers.indexOf(selectedTier);
+    var starts = selectedTier.starts;
+    var nextTier = charge.priceTiers[tierIndex + 1];
+    var ends = nextTier ? nextTier.starts - 1 : '∞';
+    return hasMultiplePriceTiers(charge)
+        ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals))
+        : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
+};
 var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
 // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
 var createPlanDescription = function (priceList) {
-    return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (x, y) {
+    return (priceList.plan.description || '').replace(removeHTMLTagsRegex, function (_, y) {
         return y ? ' & ' : '';
     });
 };
@@ -21329,25 +21473,17 @@ var getActivePlanPriceData = function (priceList, selectedPriceList) {
     };
 };
 var isPriceListDisabled = function (_a) {
-    var priceList = _a.priceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
-    // Plan already has a subscription
-    var existingSubscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
-        var _a, _b;
-        var isCurrentUpgradingSubscription = subscription.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id);
-        var subscriptionAlreadyExists = isCurrentUpgradingSubscription
-            ? subscription.priceList.id === priceList.id
-            : subscription.plan.id === priceList.plan.id;
-        return (subscriptionAlreadyExists &&
-            subscription.plan.id === priceList.plan.id &&
-            ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
-            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED);
-    });
-    var isUpgradingPriceList = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
-    if (existingSubscription) {
-        return true;
-    }
-    if (isUpgradingPriceList && !canPurchaseFeatureAddons) {
-        return true;
+    var priceList = _a.priceList, upgradingSubscription = _a.upgradingSubscription, canPurchaseFeatureAddons = _a.canPurchaseFeatureAddons;
+    var existingSubscriptionInTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
+    var 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 (isUpgradingSubscriptionPriceList) {
+        return !existingSubscriptionInTrial && !canPurchaseFeatureAddons;
     }
     return false;
 };
@@ -21376,11 +21512,13 @@ var CheckoutBarSummarySection = function (_a) {
     // Context
     var apiHost = react.useContext(BunnyContext).apiHost;
     var quotePreviewData = react.useContext(QuotePreviewContext).quotePreviewData;
+    var accountId = react.useContext(PaymentContext).accountId;
     // Hooks
     var token = useToken();
     var paymentPlugins = usePaymentPlugins({
         apiHost: apiHost,
         token: token,
+        accountId: accountId,
     }).paymentPlugins;
     var queryClient = reactQuery.useQueryClient();
     var isMobile = common.useIsMobile();
@@ -21433,31 +21571,32 @@ var PlanPickerCheckoutBar = function (_a) {
     }).defaultPaymentMethod;
     var createSubscriptionUpgradeQuote = useQuoteSubscriptionUpgrade();
     var createSubscriptionUpdateQuote = useCreateSubscriptionQuote();
+    var quoteSubscriptionActivate = useQuoteSubscriptionActivate();
     // Mutations
     var createQuote = reactQuery.useMutation({
         mutationFn: function (_a) {
             var subscriptionId = _a.subscriptionId, priceListId = _a.priceListId;
             return createSubscriptionUpgradeQuote(subscriptionId, priceListId, apiHost, token);
         },
-        onSuccess: function (subscriptionUpdateData) {
+        onSuccess: function (response) {
             var _a;
-            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
+            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpgrade) === null || _a === void 0 ? void 0 : _a.quote;
             setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
             handleSetEditingQuote(quote.id);
         },
-    });
+    }).mutate;
     var createEmptyQuote = reactQuery.useMutation({
         mutationFn: function (_a) {
             var subscriptionId = _a.subscriptionId;
             return createSubscriptionUpdateQuote([subscriptionId], apiHost, token);
         },
-        onSuccess: function (subscriptionUpdateData) {
+        onSuccess: function (response) {
             var _a;
-            var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
+            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
             setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
             handleSetEditingQuote(quote.id);
         },
-    });
+    }).mutate;
     var updateCharge = reactQuery.useMutation({
         mutationFn: quoteChargeUpdate,
         onSuccess: function () {
@@ -21470,6 +21609,32 @@ var PlanPickerCheckoutBar = function (_a) {
             });
         },
     }).mutate;
+    var subscriptionActivate = reactQuery.useMutation({
+        mutationFn: function (_a) {
+            var subscriptionId = _a.subscriptionId;
+            return __awaiter(void 0, void 0, void 0, function () {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0: return [4 /*yield*/, quoteSubscriptionActivate(subscriptionId, apiHost, token)];
+                        case 1: return [2 /*return*/, _b.sent()];
+                    }
+                });
+            });
+        },
+        onSuccess: function (response) {
+            var _a;
+            var quote = (_a = response === null || response === void 0 ? void 0 : response.quoteSubscriptionActivate) === null || _a === void 0 ? void 0 : _a.quote;
+            setEditingQuoteData === null || setEditingQuoteData === void 0 ? void 0 : setEditingQuoteData(quote.id);
+            handleSetEditingQuote(quote.id);
+            queryClient.invalidateQueries({
+                queryKey: common.QueryKeyFactory.default.createObjectKey({
+                    objectName: 'editingQuote',
+                    id: editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id,
+                    token: token,
+                }),
+            });
+        },
+    }).mutate;
     // Queries
     var quote = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createObjectKey({
@@ -21499,18 +21664,26 @@ var PlanPickerCheckoutBar = function (_a) {
         enabled: Boolean(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id),
     }).data;
     react.useEffect(function () {
+        var _a;
         if (!(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id)) {
             console.error('upgradingSubscription is undefined');
             return;
         }
         var upgradingCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id);
         if (upgradingCurrentSubscription) {
-            createEmptyQuote.mutate({
-                subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-            });
+            if (((_a = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL) {
+                subscriptionActivate({
+                    subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+                });
+            }
+            else {
+                createEmptyQuote({
+                    subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+                });
+            }
         }
         else {
-            createQuote.mutate({
+            createQuote({
                 subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
                 priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
             });
@@ -21585,7 +21758,7 @@ var PlanPickerCheckoutBar = function (_a) {
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
 var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        showPriceAsMonthly\n        basePrice\n        currencyId\n        id\n        monthlyBasePrice\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          featureAddon\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          priceList {\n            id\n          }\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
 var getPriceListChangeOptions = function (_a) {
-    var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
+    var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription, accountCurrencyId = _a.accountCurrencyId;
     return __awaiter(void 0, void 0, void 0, function () {
         var response, priceListChangeOptions;
         return __generator(this, function (_b) {
@@ -21606,6 +21779,8 @@ var getPriceListChangeOptions = function (_a) {
                     if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) {
                         priceListChangeOptions.priceLists.sort(function (a, b) { return a.plan.position - b.plan.position; });
                     }
+                    // Filter out price lists that don't have the same currency as the account
+                    priceListChangeOptions.priceLists = priceListChangeOptions.priceLists.filter(function (priceList) { return priceList.currencyId === accountCurrencyId; });
                     return [2 /*return*/, priceListChangeOptions];
             }
         });
@@ -21737,7 +21912,10 @@ var PriceListCardButton = function (_a) {
         subscriptionPlan &&
         priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
     var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
+    var canUpgradeFromTrial = upgradingSubscription && canSubscriptionUpgradeFromTrial(upgradingSubscription);
     var createButtonText = function () {
+        if (isPriceListCurrentSubscription && canUpgradeFromTrial)
+            return 'Upgrade from trial';
         if (isPriceListCurrentSubscription)
             return 'Current';
         if (isSelected)
@@ -21891,7 +22069,6 @@ var PriceListCard = function (_a) {
     var canPurchaseFeatureAddons = priceListHasUnpurchasedFeatureAddons(priceList, upgradingSubscription);
     var disableOnClick = isPriceListDisabled({
         priceList: priceList,
-        subscriptions: subscriptions,
         upgradingSubscription: upgradingSubscription,
         canPurchaseFeatureAddons: canPurchaseFeatureAddons,
     });
@@ -22188,14 +22365,14 @@ var FeatureTitle = function (_a) {
 var PriceListGridDesktop = function (_a) {
     var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
-    var _b = react.useMemo(function () {
+    var displayPriceLists = react.useMemo(function () {
         return getAvailablePlansAndPriceLists({
             availablePriceLists: availablePriceLists,
             priceListChangeOptions: priceListChangeOptions,
             priceListStart: priceListStart,
             plansToDisplay: (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3,
         });
-    }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.displayPriceLists;
+    }, [availablePriceLists, priceListChangeOptions, priceListStart]).displayPriceLists;
     var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
     var plansToDisplay = Math.min((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.plansToDisplay) || 3, availablePriceLists.length);
     var hasFeatureAddons = displayPriceLists.some(function (priceList) {
@@ -22210,7 +22387,7 @@ var PriceListGridDesktop = function (_a) {
                         var doesPrevPriceListExist = displayPriceLists[index - 1];
                         if (!priceList)
                             return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
-                        return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                        return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
                     }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(PlanFeatures, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay, selectedProduct: selectedProduct }), hasFeatureAddons && (jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay }))] }))] }))] })));
 };
@@ -22284,7 +22461,6 @@ var PriceListSelector = function (_a) {
                     priceList.plan.id === ((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.plan.id) &&
                     !isPriceListDisabled({
                         priceList: priceList,
-                        subscriptions: subscriptions,
                         upgradingSubscription: upgradingSubscription,
                         canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, upgradingSubscription),
                     });
@@ -22302,13 +22478,7 @@ var PriceListSelector = function (_a) {
                 });
             }
         }
-    }, [
-        quotePreviewData,
-        priceListChangeOptions,
-        subscriptions,
-        upgradingSubscription,
-        setQuotePreviewData,
-    ]);
+    }, [quotePreviewData, priceListChangeOptions, upgradingSubscription, setQuotePreviewData]);
     var onChangeProduct = react.useCallback(function (product) {
         var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
         if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
@@ -22353,7 +22523,6 @@ var PriceListSelector = function (_a) {
             !isInPreviewMode &&
             !isPriceListDisabled({
                 priceList: initialPriceList,
-                subscriptions: subscriptions,
                 upgradingSubscription: upgradingSubscription,
                 canPurchaseFeatureAddons: priceListHasUnpurchasedFeatureAddons(initialPriceList, upgradingSubscription),
             })) {
@@ -22371,7 +22540,6 @@ var PriceListSelector = function (_a) {
         selectedPriceList,
         selectedProduct,
         setQuotePreviewData,
-        subscriptions,
         upgradingSubscription,
     ]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
@@ -22384,6 +22552,7 @@ var PlanPicker = function () {
     var apiHost = react.useContext(BunnyContext).apiHost;
     var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, productId = _b.productId, upgradingSubscription = _b.upgradingSubscription;
     var _c = react.useContext(QuotePreviewContext), quotePreviewData = _c.quotePreviewData, setQuotePreviewData = _c.setQuotePreviewData;
+    var account = useCurrentUserData(token).account;
     // Hooks
     var showInfoNotification = common.useInfoNotification();
     // Queries
@@ -22406,6 +22575,7 @@ var PlanPicker = function () {
                 productId: productId,
                 token: token,
                 upgradingSubscription: upgradingSubscription,
+                accountCurrencyId: account === null || account === void 0 ? void 0 : account.currencyId,
             });
         },
         enabled: !areSubscriptionsLoading,
@@ -22568,7 +22738,7 @@ var SubscriptionState$1 = SubscriptionState;
 var FEATURE_USAGE_MUTATION = "\nquery GetFeatureUsage($id: ID!) {\n  featureUsageHistogram(subscriptionChargeId: $id) {\n    subscriptionCharge { \n      id\n      name\n      amount\n      currentPeriodPriceByTiers { \n        tier { starts price } \n        quantity\n        amount\n      }\n    }\n    feature { id name }\n    periodRange\n    dataInterval\n    data {\n      periodStart\n      periodEnd\n      intervals {\n        intervalStart\n        intervalUsage\n      }\n      intervalsTotal\n    }\n  }\n}\n";
 var getFeatureUsage = function (_a) {
-    var subscriptionChargeId = _a.subscriptionChargeId; _a.startDate; _a.endDate; _a.dataInterval; var token = _a.token, apiHost = _a.apiHost;
+    var subscriptionChargeId = _a.subscriptionChargeId, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response;
         var _b;
@@ -22688,381 +22858,45 @@ var FeatureBarChart = function (_a) {
 var StyledBarChart = defaultStyled(recharts.BarChart)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
 var templateObject_1$2;
-var canShowQuantitiesInput = function (charge, subscription) {
-    // Check if the subscription is active, pending, or in trial,
-    // the pricing model is not flat,
-    // and if it's not a trial, also check if the current charge is the last one in the subscription.
-    var _a, _b, _c;
-    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
-    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
-    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
-    var isFlatPricing = charge.pricingModel === 'FLAT';
-    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
-        !isFlatPricing &&
-        charge.selfServiceQuantity &&
-        !charge.expired;
-    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
-    return shouldProcessCharge;
-};
-var createQuoteParams = function (quote, subscriptionQuantity, editedSubscription) {
-    var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
-    var quoteChangeCharge = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.charges.find(function (charge) { return charge.priceListCharge.id === editedSubscription.chargeId; });
-    var charges = [
-        {
-            id: quoteChangeCharge.id,
-            quantity: editedSubscription.quantity - subscriptionQuantity,
-        },
-    ];
-    return { charges: charges, quoteChange: quoteChange };
-};
-var canShowChangeQuantities = function (_a) {
-    var subscriptions = _a.subscriptions;
-    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        return subscription.charges.some(function (charge, chargeIndex) {
-            return canShowQuantitiesInput(charge, subscription);
-        });
-    });
-};
-var isSubscriptionNotActive = function (subscription) {
-    var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
-};
-var isSubscriptionActiveOrPending = function (subscription) {
-    var _a, _b;
-    return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE ||
-        ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
-};
-var isSubscriptionTrial = function (subscription) { var _a; return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL; };
-// Helper function to check if charge is a discount
-var isDiscount = function (kind) {
-    return kind === common.QuoteChangeKind.DISCOUNT || kind === common.QuoteChangeKind.FREE_PERIOD_DISCOUNT;
-};
-var hasPriceTiers = function (charge) {
-    var _a;
-    return Boolean((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length);
-};
-var hasMultiplePriceTiers = function (charge) {
-    var _a;
-    return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length) > 1;
-};
-var getApplicablePriceTier = function (charge, currencyId, priceDecimals) {
-    var _a;
-    if (!((_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.length))
-        return '';
-    var selectedTier;
-    // For TIERED pricing model: always show the first tier
-    if (charge.pricingModel === common.PricingModel.TIERED) {
-        selectedTier = charge.priceTiers[0];
-    }
-    // For VOLUME and BANDS pricing models: find the tier that contains the current quantity
-    else if (charge.pricingModel === common.PricingModel.VOLUME ||
-        charge.pricingModel === common.PricingModel.BANDS) {
-        // Find the appropriate tier based on quantity
-        selectedTier = charge.priceTiers.find(function (tier, index) {
-            var nextTier = charge.priceTiers[index + 1];
-            var tierStart = tier.starts;
-            var tierEnd = nextTier ? nextTier.starts - 1 : Infinity;
-            return charge.quantity >= tierStart && charge.quantity <= tierEnd;
-        });
-        // Fallback to first tier if no tier found (shouldn't happen with proper data)
-        selectedTier = selectedTier || charge.priceTiers[0];
-    }
-    // Default fallback for any other pricing models
-    else {
-        selectedTier = charge.priceTiers[0];
-    }
-    if (!selectedTier)
-        return '';
-    // Calculate the tier range for display
-    var tierIndex = charge.priceTiers.indexOf(selectedTier);
-    var starts = selectedTier.starts;
-    var nextTier = charge.priceTiers[tierIndex + 1];
-    var ends = nextTier ? nextTier.starts - 1 : '∞';
-    return hasMultiplePriceTiers(charge)
-        ? "".concat(starts, "-").concat(ends, ": ").concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals))
-        : "".concat(common.formatCurrency(selectedTier.price, currencyId, priceDecimals));
-};
-var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";
-var billingDetailsUpdate = function (_a) {
-    var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, errors;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = { attributes: attributes };
-                    return [4 /*yield*/, gqlRequest({
-                            query: MUTATION,
-                            token: token,
-                            vars: vars,
-                            apiHost: apiHost,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, response.billingDetailsUpdate];
-            }
-        });
-    });
+var SubscriptionCardActions = function (_a) {
+    var _b;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    var isPaymentMethodLoading = usePaymentMethod({
+        accountId: subscription.accountId,
+        token: token,
+        apiHost: apiHost,
+    }).isLoading;
+    // Derived state
+    var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
+    var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
+    var arePlansAvailable = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
+    var isInTrial = isSubscriptionTrial(subscription);
+    var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
+    if (isPaymentMethodLoading)
+        return null;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), arePlansAvailable && (isActiveOrPending || isInTrial) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: 'primary' }, { children: isInTrial ? 'Upgrade from trial' : 'Change plan' }))), !arePlansAvailable && isInTrial && jsxRuntime.jsx(antd.Tag, __assign({ color: "warning" }, { children: "Cannot upgrade" }))] }));
 };
-// TODO: move this to common
-var billingDetailsQuery = function () {
-    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
-};
-var getBillingDetails = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: billingDetailsQuery(),
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _c.sent();
-                    if (response === null || response === void 0 ? void 0 : response.errors) {
-                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
-                    }
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
-            }
-        });
-    });
-};
-var Text$7 = antd.Typography.Text;
-function BillingDetailsSection(_a) {
-    var _this = this;
-    var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
-    // State
-    var _b = react.useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
-    var _c = react.useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
-    var form = antd.Form.useForm()[0];
-    var values = antd.Form.useWatch([], form);
-    // Context
-    var apiHost = react.useContext(BunnyContext).apiHost;
-    var token = useToken();
-    // Hooks
-    var isMobile = common.useIsMobile();
-    var queryClient = reactQuery.useQueryClient();
-    var showErrorNotification = common.useErrorNotification();
-    var showSuccessNotification = common.useSuccessNotification();
-    // Queries
-    var _d = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.billingDetailsKey({ token: token }),
-        queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
-    }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
-    var _e = reactQuery.useMutation({
-        mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
-            var updatedBillingDetails;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, billingDetailsUpdate({
-                            attributes: {
-                                name: changedFormData.name,
-                                billingStreet: changedFormData.billingStreet,
-                                billingCity: changedFormData.billingCity,
-                                billingZip: changedFormData.billingZip,
-                                billingState: changedFormData.billingState,
-                                billingCountry: changedFormData.billingCountry,
-                                billingContactEmail: changedFormData.billingContactEmail,
-                                taxNumber: changedFormData.taxNumber,
-                            },
-                            token: token,
-                            apiHost: apiHost,
-                        })];
-                    case 1:
-                        updatedBillingDetails = _a.sent();
-                        queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
-                            return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
-                        });
-                        return [2 /*return*/, updatedBillingDetails];
-                }
-            });
-        }); },
-        onSuccess: function () {
-            showSuccessNotification('Your account details have been saved');
-            queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
-                    token: token,
-                }),
-            });
-        },
-    }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
-    // Set form values when billing details are loaded
-    react.useEffect(function () {
-        var _a;
-        if (billingDetails) {
-            form.setFieldsValue({
-                billingStreet: billingDetails.billingStreet,
-                billingCity: billingDetails.billingCity,
-                billingZip: billingDetails.billingZip,
-                billingState: billingDetails.billingState,
-                billingCountry: billingDetails.billingCountry,
-                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
-                taxNumber: billingDetails.taxNumber,
-            });
-        }
-    }, [billingDetails]);
-    react.useEffect(function () {
-        form
-            .validateFields({ validateOnly: true })
-            .then(function () { return setFormIsValid(true); })
-            .catch(function () { return setFormIsValid(false); });
-        var isFormEdited = function () {
-            var _a;
-            if (!billingDetails)
-                return false;
-            var currentValues = form.getFieldsValue();
-            var accountValues = {
-                billingStreet: billingDetails.billingStreet,
-                billingCity: billingDetails.billingCity,
-                billingZip: billingDetails.billingZip,
-                billingState: billingDetails.billingState,
-                billingCountry: billingDetails.billingCountry,
-                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
-                taxNumber: billingDetails.taxNumber,
-            };
-            return Object.keys(currentValues).some(function (key) {
-                var value = accountValues[key];
-                return currentValues[key] !== value;
-            });
-        };
-        setIsFormEdited(isFormEdited());
-    }, [form, values, billingDetails]);
-    // Validate form fields when isFormEdited changes
-    react.useEffect(function () {
-        var validateOnly = isFormEdited ? false : true;
-        form.validateFields({ validateOnly: validateOnly });
-    }, [isFormEdited]);
-    var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
-        var _this = this;
-        return __generator(this, function (_a) {
-            form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
-                var error_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0:
-                            _a.trys.push([0, 2, 3, 4]);
-                            return [4 /*yield*/, form.validateFields()];
-                        case 1:
-                            _a.sent();
-                            updateBillingDetails(form.getFieldsValue());
-                            return [3 /*break*/, 4];
-                        case 2:
-                            error_1 = _a.sent();
-                            if (error_1 instanceof Error) {
-                                showErrorNotification('Failed to update account', error_1.message);
-                            }
-                            else {
-                                showErrorNotification('Please fill out all required fields');
-                            }
-                            return [3 /*break*/, 4];
-                        case 3:
-                            setIsFormEdited(false);
-                            return [7 /*endfinally*/];
-                        case 4: return [2 /*return*/];
-                    }
-                });
-            }); });
-            return [2 /*return*/];
-        });
-    }); };
-    var filteredCountryList = react.useMemo(function () {
-        return countryListFilter ? common.Lists.COUNTRY_LIST.filter(countryListFilter) : common.Lists.COUNTRY_LIST;
-    }, [countryListFilter]);
-    return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsxRuntime.jsx(Text$7, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
-                                                    {
-                                                        required: false,
-                                                    },
-                                                ] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
-                                                        var _a, _b;
-                                                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
-                                                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
-                                                    } }) })) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
-                                        {
-                                            required: true,
-                                            message: 'Email is required',
-                                            type: 'email',
-                                        },
-                                    ] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
-}
-var BillingDetails = function (_a) {
-    var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
-    // Hooks
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
-};
-var WrapperComponent = function (_a) {
-    var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
-    return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsxRuntime.jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsxRuntime.jsx("div", { children: children }) })));
-};
-var ResponsiveDivider = function () {
-    var isMobile = common.useIsMobile();
-    return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
-};
-var PaymentFormSection = function (_a) {
-    var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
-    var isMobile = common.useIsMobile();
-    var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
-    var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
-    var showSuccessNotification = common.useSuccessNotification();
-    var entityId = useCurrentUserData().entityId;
-    return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onFail: function (error) {
-                handleAllErrorFormats(error);
-            }, onSavePaymentMethod: function () {
-                showSuccessNotification(isUpgradeFromTrial
-                    ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
-                    : 'Payment method saved successfully!');
-                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
-            } }) })));
-};
-var UpgradeFromTrial = function (_a) {
-    var onClose = _a.onClose, open = _a.open;
-    return (jsxRuntime.jsx(antd.Modal, __assign({ width: '80vw', open: open, onCancel: onClose, footer: null }, { children: jsxRuntime.jsx(BillingDetails, { isUpgradeFromTrial: true, onSavePaymentMethod: onClose }) })));
-};
-var SubscriptionCardActions = function (_a) {
-    var _b;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
-    var apiHost = react.useContext(BunnyContext).apiHost;
-    var token = useToken();
-    var _c = usePaymentMethod({
-        accountId: subscription.accountId,
-        token: token,
-        apiHost: apiHost,
-    }), storedPaymentMethods = _c.paymentMethods, isPaymentMethodLoading = _c.isLoading;
-    // Local state
-    var _d = react.useState(false), isUpgradeFromTrialModalOpen = _d[0], setIsUpgradeFromTrialModalOpen = _d[1];
-    // Derived state
-    var isSelfServiceCancelable = subscription.plan.selfServiceCancel;
-    var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
-    var arePlansAvailable = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
-    var isInTrial = isSubscriptionTrial(subscription);
-    var isActiveOrPending = isSubscriptionActiveOrPending(subscription);
-    if (isPaymentMethodLoading)
-        return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isSelfServiceCancelable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "bunny-p-0", type: "link" }, { children: "Cancel subscription" })) }))), isInTrial && !(storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return setIsUpgradeFromTrialModalOpen(true); }, type: "primary" }, { children: "Upgrade from trial" }))), arePlansAvailable && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: isInTrial ? 'default' : 'primary' }, { children: "Change plan" }))), jsxRuntime.jsx(UpgradeFromTrial, { onClose: function () { return setIsUpgradeFromTrialModalOpen(false); }, open: isUpgradeFromTrialModalOpen })] }));
-};
-var Text$6 = antd.Typography.Text;
+var Text$7 = antd.Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
-    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
+    var _a;
+    var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate, trialExpirationAction = subscription.trialExpirationAction;
+    var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
     if (cancellationDate &&
         (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.CANCELED &&
         (state === null || state === void 0 ? void 0 : state.toUpperCase()) !== common.SubscriptionState.EXPIRED) {
         return (jsxRuntime.jsxs(CustomizedTag, __assign({ color: "red" }, { children: ["Canceled - ends on ", common.formatDate(cancellationDate)] })));
     }
+    if (isTrial) {
+        switch (trialExpirationAction) {
+            case 'ACTIVATE':
+                return "Activates on ".concat(common.formatDate(endDate));
+            case 'CANCEL':
+                return "Trial ends on ".concat(common.formatDate(endDate));
+        }
+    }
     if (evergreen) {
         return "Renews on ".concat(common.formatDate(endDate));
     }
@@ -23084,7 +22918,7 @@ var SubscriptionCardHeader = function (_a) {
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: {
             backgroundColor: darkMode ? 'var(--row-background-dark)' : '',
-        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$6, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$6, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$6, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: '11px', fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft || 'N/A', " days left)") : ''] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 var SubscriptionChargeTotal = function (_a) {
@@ -23161,16 +22995,16 @@ var SubscriptionChargeUnitPrice = function (_a) {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasPriceTiers(charge) ? (jsxRuntime.jsx(TieredDisplayDropdown, { charge: charge, currencyId: currencyId, truncatedText: "".concat(charge.kind === common.QuoteChangeKind.PRICE_UPDATE ? 'new ' : '').concat(getApplicablePriceTier(charge, currencyId, charge.priceDecimals)) })) : isChargeDiscount ? ("-".concat(price)) : (price) }));
 };
-var Text$5 = antd.Typography.Text;
+var Text$6 = antd.Typography.Text;
 var SubscriptionCardColumnHeaders = function (_a) {
     var columns = _a.columns;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: columns.map(function (subscriptionColumn, index) { return (jsxRuntime.jsx(Text$6, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
 };
-var Text$4 = antd.Typography.Text;
+var Text$5 = antd.Typography.Text;
 var SubscriptionsListCell = function (_a) {
     var children = _a.children, className = _a.className, gridColumn = _a.gridColumn, right = _a.right, style = _a.style;
-    return (jsxRuntime.jsx(Text$4, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
+    return (jsxRuntime.jsx(Text$5, __assign({ className: "bunny-flex bunny-items-center bunny-text-sm bunny-whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
 };
 var CARD_COLUMNS = [
@@ -23230,11 +23064,9 @@ var SubscriptionCardDesktopRow = function (_a) {
     var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
     // Queries
     var data = reactQuery.useQuery({
-        queryKey: ['getFeatureUsage', charge.id, charge.startDate, charge.endDate],
+        queryKey: ['getFeatureUsage', charge.id],
         queryFn: function () {
             return getFeatureUsage({
-                endDate: charge.endDate,
-                startDate: charge.startDate,
                 subscriptionChargeId: charge.id,
                 token: token,
                 apiHost: apiHost,
@@ -23258,10 +23090,10 @@ var SubscriptionCardDesktopRow = function (_a) {
                             : (_c = charge.quantity) === null || _c === void 0 ? void 0 : _c.toLocaleString() })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, currencyId: subscription.currencyId }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
-var Text$3 = antd.Typography.Text;
+var Text$4 = antd.Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    return (jsxRuntime.jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
+    return (jsxRuntime.jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
 };
 var CHARGE_COLUMNS = [
@@ -23327,10 +23159,13 @@ var SubscriptionsListContainer = function (_a) {
     var apiHost = react.useContext(BunnyContext).apiHost;
     var gap = react.useContext(SubscriptionsContext).gap;
     var token = useToken();
+    var account = useCurrentUserData(token).account;
     // Queries
     var _c = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
+        queryFn: function () {
+            return getPriceListChangeOptions({ apiHost: apiHost, token: token, accountCurrencyId: account === null || account === void 0 ? void 0 : account.currencyId });
+        },
         enabled: Boolean(onChangePlanClick),
     }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
     if (subscriptionsAreLoading ||
@@ -23339,10 +23174,10 @@ var SubscriptionsListContainer = function (_a) {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-".concat(gap, " bunny-shrink bunny-overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-center bunny-w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
 };
-var Text$2 = antd.Typography.Text;
+var Text$3 = antd.Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-justify-between bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$3, __assign({ className: "bunny-text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "bunny-text-xs" }, { children: description }))] })));
 };
 var formatDateForApi = function (date) {
@@ -23525,13 +23360,13 @@ var QuantityInput = function (_a) {
             }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
 };
-var Text$1 = antd.Typography.Text;
+var Text$2 = antd.Typography.Text;
 var QuantityChangeGridRow = function (_a) {
     var _b;
     var chargeIndex = _a.chargeIndex, editingQuote = _a.editingQuote, subscriptions = _a.subscriptions, subscriptionIndex = _a.subscriptionIndex, setEditingQuoteData = _a.setEditingQuoteData, subscription = _a.subscription, subscriptionCharge = _a.subscriptionCharge;
     if (!canShowQuantitiesInput(subscriptionCharge, subscription))
         return null;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$1, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-orange-600 bunny-col-span-full", style: { fontSize: "11px" } }, { children: subscription.plan.name })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: (_b = subscriptionCharge.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() })), jsxRuntime.jsx(Text$2, __assign({ className: "bunny-flex bunny-items-center bunny-justify-end bunny-font-medium bunny-text-base bunny-text-gray-900" }, { children: subscriptionCharge.quantity })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: [jsxRuntime.jsx(QuantityInput, { charge: subscriptionCharge, chargeIndex: chargeIndex, editingQuote: editingQuote, setEditingQuoteData: setEditingQuoteData, subscription: subscription, subscriptionIndex: subscriptionIndex, subscriptions: subscriptions }), jsxRuntime.jsx("div", {})] })), jsxRuntime.jsx(antd.Divider, { className: "bunny-col-span-full bunny-my-2" })] }));
 };
 var QuantityChangeGridTitle = function (_a) {
@@ -23642,7 +23477,7 @@ var SubscriptionsNavigation = function (_a) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-grow bunny-gap-2 ".concat(isMobile ? 'bunny-flex-col' : 'bunny-justify-end') }, { children: canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
 };
-var Text = antd.Typography.Text;
+var Text$1 = antd.Typography.Text;
 var SubscriptionsWrapper = function (_a) {
     var handlePortalErrors = _a.handlePortalErrors, companyName = _a.companyName, _b = _a.isInPreviewMode, isInPreviewMode = _b === void 0 ? false : _b, productId = _a.productId, className = _a.className, _c = _a.styles, userStyles = _c === void 0 ? {} : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent, _d = _a.hideTitle, hideTitle = _d === void 0 ? false : _d, hideExpired = _a.hideExpired, _e = _a.hideExpiredToggle, hideExpiredToggle = _e === void 0 ? false : _e;
     var defaultStyles = {
@@ -23801,7 +23636,7 @@ var Subscriptions = function (_a) {
                 setIsChangingPlan(false);
             }, handlePortalErrors: handlePortalErrors }));
     }
-    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: className }, { children: [!hideTitle ? jsxRuntime.jsx(PageTitle, { title: 'Subscriptions' }) : null, jsxRuntime.jsx(PageHeaderWithActions, __assign({ title: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideExpiredToggle && (jsxRuntime.jsxs(Text$1, __assign({ className: "bunny-flex bunny-items-center bunny-justify-between", style: { minWidth: '120px' } }, { children: [hideExpired ? 'Active subscriptions' : 'All subscriptions', isMobile && expiredSwitchVisible && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpiredState }))] }))) }) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: !hideExpiredToggle && expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) })), jsxRuntime.jsx(SubscriptionsListContainer, { companyName: companyName, hideExpired: hideExpired, onCancelSubscriptionClick: onCancelSubscriptionClick, onChangePlanClick: onChangePlanClick, subscriptions: subscriptions, subscriptionsAreLoading: subscriptionsAreLoading, noSubscriptionsComponent: noSubscriptionsComponent }), isMobile && (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-4 bunny-pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { expiredSwitchVisible: expiredSwitchVisible, hideExpired: hideExpired, setHideExpired: setHideExpiredState, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(QuantityChangeDrawerDesktop, { editingQuote: quote, editingQuoteData: editingQuoteData, onClose: onClose, open: quantityDrawerOpen, openCheckout: function () { return setPayModalVisible(true); }, setEditingQuoteData: setEditingQuoteData, subscriptions: subscriptions }), jsxRuntime.jsx(Checkout, { onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, storedPaymentMethod: defaultPaymentMethod })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
@@ -23816,6 +23651,250 @@ var PageSubTitle = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-shrink-0 bunny-font-medium", style: { color: secondaryColor } }, { children: title })));
 };
+var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";
+var billingDetailsUpdate = function (_a) {
+    var attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var vars, response, errors;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    vars = { attributes: attributes };
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION,
+                            token: token,
+                            vars: vars,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _c.sent();
+                    errors = (_b = response === null || response === void 0 ? void 0 : response.billingDetailsUpdate) === null || _b === void 0 ? void 0 : _b.errors;
+                    if (errors)
+                        throw errors;
+                    return [2 /*return*/, response.billingDetailsUpdate];
+            }
+        });
+    });
+};
+// TODO: move this to common
+var billingDetailsQuery = function () {
+    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
+};
+var getBillingDetails = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: billingDetailsQuery(),
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    if (response === null || response === void 0 ? void 0 : response.errors) {
+                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
+                    }
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
+            }
+        });
+    });
+};
+var Text = antd.Typography.Text;
+function BillingDetailsSection(_a) {
+    var _this = this;
+    var hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
+    // State
+    var _b = react.useState(false), isFormEdited = _b[0], setIsFormEdited = _b[1];
+    var _c = react.useState(false), formIsValid = _c[0], setFormIsValid = _c[1];
+    var form = antd.Form.useForm()[0];
+    var values = antd.Form.useWatch([], form);
+    // Context
+    var apiHost = react.useContext(BunnyContext).apiHost;
+    var token = useToken();
+    // Hooks
+    var isMobile = common.useIsMobile();
+    var queryClient = reactQuery.useQueryClient();
+    var showErrorNotification = common.useErrorNotification();
+    var showSuccessNotification = common.useSuccessNotification();
+    // Queries
+    var _d = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.billingDetailsKey({ token: token }),
+        queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
+    }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
+    var _e = reactQuery.useMutation({
+        mutationFn: function (changedFormData) { return __awaiter(_this, void 0, void 0, function () {
+            var updatedBillingDetails;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, billingDetailsUpdate({
+                            attributes: {
+                                name: changedFormData.name,
+                                billingStreet: changedFormData.billingStreet,
+                                billingCity: changedFormData.billingCity,
+                                billingZip: changedFormData.billingZip,
+                                billingState: changedFormData.billingState,
+                                billingCountry: changedFormData.billingCountry,
+                                billingContactEmail: changedFormData.billingContactEmail,
+                                taxNumber: changedFormData.taxNumber,
+                            },
+                            token: token,
+                            apiHost: apiHost,
+                        })];
+                    case 1:
+                        updatedBillingDetails = _a.sent();
+                        queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey({ token: token }), function (old) {
+                            return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
+                        });
+                        return [2 /*return*/, updatedBillingDetails];
+                }
+            });
+        }); },
+        onSuccess: function () {
+            showSuccessNotification('Your account details have been saved');
+            queryClient.invalidateQueries({
+                queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey({
+                    token: token,
+                }),
+            });
+        },
+    }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
+    // Set form values when billing details are loaded
+    react.useEffect(function () {
+        var _a;
+        if (billingDetails) {
+            form.setFieldsValue({
+                billingStreet: billingDetails.billingStreet,
+                billingCity: billingDetails.billingCity,
+                billingZip: billingDetails.billingZip,
+                billingState: billingDetails.billingState,
+                billingCountry: billingDetails.billingCountry,
+                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
+                taxNumber: billingDetails.taxNumber,
+            });
+        }
+    }, [billingDetails]);
+    react.useEffect(function () {
+        form
+            .validateFields({ validateOnly: true })
+            .then(function () { return setFormIsValid(true); })
+            .catch(function () { return setFormIsValid(false); });
+        var isFormEdited = function () {
+            var _a;
+            if (!billingDetails)
+                return false;
+            var currentValues = form.getFieldsValue();
+            var accountValues = {
+                billingStreet: billingDetails.billingStreet,
+                billingCity: billingDetails.billingCity,
+                billingZip: billingDetails.billingZip,
+                billingState: billingDetails.billingState,
+                billingCountry: billingDetails.billingCountry,
+                billingContactEmail: (_a = billingDetails.billingContact) === null || _a === void 0 ? void 0 : _a.email,
+                taxNumber: billingDetails.taxNumber,
+            };
+            return Object.keys(currentValues).some(function (key) {
+                var value = accountValues[key];
+                return currentValues[key] !== value;
+            });
+        };
+        setIsFormEdited(isFormEdited());
+    }, [form, values, billingDetails]);
+    // Validate form fields when isFormEdited changes
+    react.useEffect(function () {
+        var validateOnly = isFormEdited ? false : true;
+        form.validateFields({ validateOnly: validateOnly });
+    }, [isFormEdited]);
+    var saveBillingDetails = function () { return __awaiter(_this, void 0, void 0, function () {
+        var _this = this;
+        return __generator(this, function (_a) {
+            form.validateFields({ validateOnly: false }).then(function () { return __awaiter(_this, void 0, void 0, function () {
+                var error_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            _a.trys.push([0, 2, 3, 4]);
+                            return [4 /*yield*/, form.validateFields()];
+                        case 1:
+                            _a.sent();
+                            updateBillingDetails(form.getFieldsValue());
+                            return [3 /*break*/, 4];
+                        case 2:
+                            error_1 = _a.sent();
+                            if (error_1 instanceof Error) {
+                                showErrorNotification('Failed to update account', error_1.message);
+                            }
+                            else {
+                                showErrorNotification('Please fill out all required fields');
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            setIsFormEdited(false);
+                            return [7 /*endfinally*/];
+                        case 4: return [2 /*return*/];
+                    }
+                });
+            }); });
+            return [2 /*return*/];
+        });
+    }); };
+    var filteredCountryList = react.useMemo(function () {
+        return countryListFilter ? common.Lists.COUNTRY_LIST.filter(countryListFilter) : common.Lists.COUNTRY_LIST;
+    }, [countryListFilter]);
+    return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? 'bunny-w-full' : 'bunny-w-1/2') }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-px-4" }, { children: [jsxRuntime.jsxs(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-mb-2" }, { children: jsxRuntime.jsx(Text, __assign({ className: "bunny-font-medium bunny-text-lg" }, { children: (billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.name) || 'No company name' })) })), jsxRuntime.jsxs(antd.Form, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: 'Street address is required' }] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: 'City is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: 'Zipcode is required' }], className: "bunny-flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex ".concat(isMobile ? 'bunny-flex-row bunny-pb-2' : 'bunny-flex-row', " bunny-gap-4") }, { children: [jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", rules: [
+                                                    {
+                                                        required: false,
+                                                    },
+                                                ] }, { children: jsxRuntime.jsx(antd.Input, {}) })) })), jsxRuntime.jsx("div", __assign({ className: "bunny-flex-1 bunny-w-1/2" }, { children: jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", rules: [{ required: true, message: 'Country is required' }] }, { children: jsxRuntime.jsx(antd.Select, { className: "bunny-w-full", options: filteredCountryList, placeholder: "Select a country", popupMatchSelectWidth: false, showSearch: true, filterOption: function (input, option) {
+                                                        var _a, _b;
+                                                        return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : '').toLowerCase().includes(input.toLowerCase()) ||
+                                                            ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : '').toLowerCase().includes(input.toLowerCase());
+                                                    } }) })) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
+                                        {
+                                            required: true,
+                                            message: 'Email is required',
+                                            type: 'email',
+                                        },
+                                    ] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Tax ID", name: "taxNumber", tooltip: "Tax ID will be printed on quotes and invoices below the account's address", rules: [{ required: false }] }, { children: jsxRuntime.jsx(antd.Input, {}) }))] }))] })), jsxRuntime.jsx(antd.Button, __assign({ disabled: !isFormEdited || isUpdatingBillingDetails || !formIsValid, className: "bunny-w-full bunny-mt-4", type: "primary", onClick: saveBillingDetails }, { children: "Save" }))] })) })));
+}
+var BillingDetails = function (_a) {
+    var className = _a.className, countryListFilter = _a.countryListFilter, _b = _a.hideBillingDetailsForm, hideBillingDetailsForm = _b === void 0 ? false : _b, _c = _a.hidePaymentMethodForm, hidePaymentMethodForm = _c === void 0 ? false : _c, _d = _a.isCardEnabled, isCardEnabled = _d === void 0 ? true : _d, _e = _a.isUpgradeFromTrial, isUpgradeFromTrial = _e === void 0 ? false : _e, _f = _a.shadow, shadow = _f === void 0 ? 'shadow-md' : _f, onSavePaymentMethod = _a.onSavePaymentMethod;
+    // Hooks
+    var isMobile = common.useIsMobile();
+    return (jsxRuntime.jsx(WrapperComponent, __assign({ isCardEnabled: isCardEnabled, shadow: shadow, className: className }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-py-2 bunny-my-2 ".concat(isMobile ? 'bunny-flex-col bunny-space-y-4' : 'bunny-flex-row', " bunny-gap-4") }, { children: [!hideBillingDetailsForm ? (jsxRuntime.jsx(BillingDetailsSection, { hidePaymentMethodForm: hidePaymentMethodForm, countryListFilter: countryListFilter })) : null, !hideBillingDetailsForm && !hidePaymentMethodForm ? jsxRuntime.jsx(ResponsiveDivider, {}) : null, !hidePaymentMethodForm ? (jsxRuntime.jsx(PaymentFormSection, { hideBillingDetailsForm: hideBillingDetailsForm, isUpgradeFromTrial: isUpgradeFromTrial, onSavePaymentMethod: onSavePaymentMethod })) : null] })) })));
+};
+var WrapperComponent = function (_a) {
+    var children = _a.children, isCardEnabled = _a.isCardEnabled, shadow = _a.shadow, className = _a.className;
+    return (jsxRuntime.jsx("div", __assign({ className: "".concat(className) }, { children: isCardEnabled ? jsxRuntime.jsx(Card, __assign({ className: "".concat(shadow) }, { children: children })) : jsxRuntime.jsx("div", { children: children }) })));
+};
+var ResponsiveDivider = function () {
+    var isMobile = common.useIsMobile();
+    return isMobile ? (jsxRuntime.jsx("div", __assign({ className: "bunny-mx-4" }, { children: jsxRuntime.jsx(antd.Divider, {}) }))) : (jsxRuntime.jsx("div", { children: jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" }) }));
+};
+var PaymentFormSection = function (_a) {
+    var hideBillingDetailsForm = _a.hideBillingDetailsForm, isUpgradeFromTrial = _a.isUpgradeFromTrial, onSavePaymentMethod = _a.onSavePaymentMethod;
+    var isMobile = common.useIsMobile();
+    var onTokenExpired = react.useContext(BunnyContext).onTokenExpired;
+    var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
+    var showSuccessNotification = common.useSuccessNotification();
+    return (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile || hideBillingDetailsForm ? 'bunny-w-full' : 'bunny-w-1/2 bunny-pt-4', " bunny-flex bunny-justify-center") }, { children: jsxRuntime.jsx(PaymentForm, { onFail: function (error) {
+                handleAllErrorFormats(error);
+            }, onSavePaymentMethod: function (response) {
+                showSuccessNotification(isUpgradeFromTrial
+                    ? 'Payment method saved! Your trial will automatically convert to a paid subscription.'
+                    : 'Payment method saved successfully!');
+                // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
+                // and work with both stripe and demo pay requests
+                onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response);
+            } }) })));
+};
 exports.BillingDetails = BillingDetails;
 exports.BunnyProvider = BunnyProvider;
 exports.Footer = Footer;