@bunnyapp/components 1.0.76-beta.10 → 1.0.76-beta.12

package/dist/cjs/index.js

@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.76-beta.10';
+var PACKAGE_VERSION = '1.0.76-beta.12';
 var createRequestHeaders = function (token) {
     var headers = common.createClientDevHeaders(token);
     // Add the components version header
@@ -22194,6 +22194,9 @@ var PriceListGridDesktop = function (_a) {
     }, [availablePriceLists, priceListChangeOptions, priceListStart]); _b.availablePriceListsArray; var displayPriceLists = _b.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) {
+        return priceList.charges.some(function (charge) { return charge.featureAddon; });
+    });
     return (jsxRuntime.jsxs("div", __assign({ className: "bunny-relative bunny-flex bunny-flex-col bunny-rounded-md bunny-shadow bunny-overflow-hidden bunny-bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, numberOfPlansToDisplay: plansToDisplay, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "bunny-grid bunny-w-full", style: {
                     gridTemplateColumns: everythingInPlus
                         ? "repeat(".concat(plansToDisplay, ", minmax(120px, 1fr))")
@@ -22204,7 +22207,7 @@ var PriceListGridDesktop = function (_a) {
                         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));
-                    }), (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 }), jsxRuntime.jsx(PlanFeatureAddons, { displayPriceLists: displayPriceLists, plansToDisplay: plansToDisplay })] }))] }))] })));
+                    }), (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 }))] }))] }))] })));
 };
 
 var Text$9 = antd.Typography.Text;
@@ -22777,19 +22780,278 @@ var getApplicablePriceTier = function (charge, 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];
+            }
+        });
+    });
+};
+
+// 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);
-    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 && (isInTrial || isActiveOrPending) && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: isInTrial ? 'Upgrade' : 'Change plan' })))] }));
+    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$7 = antd.Typography.Text;
+var Text$6 = antd.Typography.Text;
 var getSubscriptionStatusText = function (subscription) {
     var cancellationDate = subscription.cancellationDate, state = subscription.state, evergreen = subscription.evergreen, endDate = subscription.endDate;
     if (cancellationDate &&
@@ -22818,7 +23080,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$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 }))] }))] })));
+        } }, { 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 }))] }))] })));
 };
 
 var SubscriptionChargeTotal = function (_a) {
@@ -22895,16 +23157,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$6 = antd.Typography.Text;
+var Text$5 = 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$6, __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$5, __assign({ className: "bunny-text-slate-400 ".concat(subscriptionColumn.className), style: { fontSize: "11px" } }, { children: subscriptionColumn.title }), index)); }) }));
 };
 
-var Text$5 = antd.Typography.Text;
+var Text$4 = 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$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 })));
+    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 })));
 };
 
 var CARD_COLUMNS = [
@@ -22992,10 +23254,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$4 = antd.Typography.Text;
+var Text$3 = antd.Typography.Text;
 var SubscriptionCardCellMobile = function (_a) {
     var children = _a.children, className = _a.className, style = _a.style;
-    return (jsxRuntime.jsx(Text$4, __assign({ className: className, style: style }, { children: children })));
+    return (jsxRuntime.jsx(Text$3, __assign({ className: className, style: style }, { children: children })));
 };
 
 var CHARGE_COLUMNS = [
@@ -23073,10 +23335,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$3 = antd.Typography.Text;
+var Text$2 = 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$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 }))] })));
+    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 }))] })));
 };
 
 var formatDateForApi = function (date) {
@@ -23259,13 +23521,13 @@ var QuantityInput = function (_a) {
             }, status: isQuantityLowerThanOriginal(charge.quantity) ? 'error' : '', style: { width: '96px' }, value: value }) }));
 };
 
-var Text$2 = antd.Typography.Text;
+var Text$1 = 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$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" })] }));
+    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" })] }));
 };
 
 var QuantityChangeGridTitle = function (_a) {
@@ -23376,7 +23638,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$1 = antd.Typography.Text;
+var Text = 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 = {
@@ -23535,7 +23797,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$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 })] })));
+    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 })] })));
 };
 var PageHeaderWithActions = function (_a) {
     var children = _a.children, title = _a.title;
@@ -23550,246 +23812,6 @@ 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 _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? 'shadow-md' : _c, className = _a.className, _d = _a.hidePaymentMethodForm, hidePaymentMethodForm = _d === void 0 ? false : _d, _e = _a.hideBillingDetailsForm, hideBillingDetailsForm = _e === void 0 ? false : _e, countryListFilter = _a.countryListFilter;
-    // 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 })) : 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;
-    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('Your payment method has been saved');
-            } }) })));
-};
-
 exports.BillingDetails = BillingDetails;
 exports.BunnyProvider = BunnyProvider;
 exports.Footer = Footer;