@bunnyapp/components 1.0.55 → 1.0.57

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { Markup } from 'interweave';
 import { ConfigProvider, Button, Tag, Typography, Divider, Popconfirm, Input, Checkbox, Collapse, Skeleton, Modal, Form, Drawer, Card as Card$1, Image, Select, Tooltip, Radio, Space, Dropdown } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, ArrowLeftOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, sortSubscriptionCharges, Lists, SLATE_500, PRIMARY_COLOR, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, getPlugins, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, sortSubscriptionCharges, Lists, SLATE_500, PRIMARY_COLOR, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, TAG_COLORS, SubscriptionChargeKind } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
@@ -141,7 +141,7 @@ var BrandContext = createContext({
     topNavImageUrl: DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
+var MUTATION$a = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -149,7 +149,7 @@ var getBranding = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$9,
+                        query: MUTATION$a,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -438,28 +438,6 @@ var usePaymentMethod = function (_a) {
     return { data: data, isLoading: isLoading };
 };
 
-var usePlugins = function (_a) {
-    var apiHost = _a.apiHost, token = _a.token;
-    var response = useQuery({
-        queryKey: QueryKeyFactory.default.pluginsKey(token),
-        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var plugins;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, getPlugins({
-                            token: token,
-                            apiHost: apiHost,
-                        })];
-                    case 1:
-                        plugins = _a.sent();
-                        return [2 /*return*/, plugins];
-                }
-            });
-        }); },
-    });
-    return response;
-};
-
 var filterPaymentPlugins = function (plugins) {
     return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
         var _a, _b, _c, _d;
@@ -468,19 +446,44 @@ var filterPaymentPlugins = function (plugins) {
             ((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.frontend) === null || _d === void 0 ? void 0 : _d.length);
     });
 };
+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 getPaymentPlugins = function (_a) {
+    var apiHost = _a.apiHost, token = _a.token;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, gqlRequest({
+                            query: MUTATION$9,
+                            token: token,
+                            apiHost: apiHost,
+                        })];
+                case 1:
+                    response = _b.sent();
+                    return [2 /*return*/, (response === null || response === void 0 ? void 0 : response.paymentPlugins) || []];
+                case 2:
+                    _b.sent();
+                    return [2 /*return*/, []];
+                case 3: return [2 /*return*/];
+            }
+        });
+    });
+};
 var usePaymentPlugins = function (_a) {
     var apiHost = _a.apiHost, token = _a.token;
-    var _b = usePlugins({
-        apiHost: apiHost,
-        token: token,
-    }), plugins = _b.data, isFetched = _b.isFetched;
-    var paymentPlugins = filterPaymentPlugins(Array.isArray(plugins) ? plugins : []);
-    var paymentMethodAllowedPlugins = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.filter(function (plugin) {
+    var _b = useQuery({
+        queryKey: ["paymentPlugins", token],
+        queryFn: function () { return getPaymentPlugins({ apiHost: apiHost, token: token }); },
+    }), paymentPlugins = _b.data, isFetched = _b.isFetched;
+    var filteredPaymentPlugins = filterPaymentPlugins(paymentPlugins);
+    var paymentMethodAllowedPlugins = filteredPaymentPlugins === null || filteredPaymentPlugins === void 0 ? void 0 : filteredPaymentPlugins.filter(function (plugin) {
         var _a, _b;
         return (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b.some(function (component) { var _a; return (_a = component === null || component === void 0 ? void 0 : component.scenarios) === null || _a === void 0 ? void 0 : _a.includes("admin-payment_method"); });
     });
     return {
-        paymentPlugins: paymentPlugins,
+        paymentPlugins: filteredPaymentPlugins,
         paymentMethodAllowedPlugins: paymentMethodAllowedPlugins,
         isFetched: isFetched,
     };
@@ -1356,7 +1359,7 @@ var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateOb
 });
 var templateObject_1$9;
 
-function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
+function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId, onRemovePaymentMethod) {
     var _this = this;
     var queryClient = useQueryClient();
     var showErrorNotification = useErrorNotification();
@@ -1384,6 +1387,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
                                 token: token,
                                 accountId: accountId,
                             }), null);
+                            onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod();
                         })
                             .catch(function (error) {
                             showErrorNotification(error.message, "Error removing payment method");
@@ -1401,7 +1405,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, token, accountId) {
 var Panel = Collapse.Panel;
 var PaymentForm = function (_a) {
     var _b;
-    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
+    var invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, onRemovePaymentMethod = _a.onRemovePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId, customPaymentForms = _a.customPaymentForms, _c = _a.useAllPaymentPlugins, useAllPaymentPlugins = _c === void 0 ? false : _c;
     // Local state
     var _d = useState(), selectedPaymentMethod = _d[0], setSelectedPaymentMethod = _d[1];
     var _e = useState(false), showPaymentMethodForm = _e[0], setShowPaymentMethodForm = _e[1];
@@ -1426,7 +1430,7 @@ var PaymentForm = function (_a) {
         }
         return allPaymentMethodAllowedPlugins;
     }, [allPaymentMethodAllowedPlugins, allPaymentPlugins, useAllPaymentPlugins]);
-    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId);
+    var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], apiHost, token, accountId, onRemovePaymentMethod);
     var queryClient = useQueryClient();
     // Set default plugin
     useEffect(function () {
@@ -1574,6 +1578,28 @@ var getFormattedQuote = function (_a) {
     });
 };
 
+var usePlugins = function (_a) {
+    var apiHost = _a.apiHost, token = _a.token;
+    var response = useQuery({
+        queryKey: QueryKeyFactory.default.pluginsKey(token || ""),
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var plugins;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, getPlugins({
+                            token: token,
+                            apiHost: apiHost,
+                        })];
+                    case 1:
+                        plugins = _a.sent();
+                        return [2 /*return*/, plugins];
+                }
+            });
+        }); },
+    });
+    return response;
+};
+
 var filterSigningPlugins = function (plugins) {
     return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
         var _a, _b;
@@ -19894,18 +19920,20 @@ function Signup(_a) {
 }
 
 var createRequestHeaders = function (token) {
-    var bearerToken = "Bearer ".concat(token);
+    var bearerToken = token ? "Bearer ".concat(token) : null;
     var headers = {
         "Content-type": "application/json; charset=utf-8",
     };
-    headers["Authorization"] = bearerToken;
+    if (bearerToken) {
+        headers["Authorization"] = bearerToken;
+    }
     return headers;
 };
 var getGraphQLBaseURL = function (apiHost) {
     return "".concat(apiHost, "/graphql");
 };
 var useGraphQLRequest = function () {
-    return function (query, token, apiHost, variables) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (query, apiHost, token, variables) { return __awaiter(void 0, void 0, void 0, function () {
         var error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
@@ -19924,11 +19952,11 @@ var useGraphQLRequest = function () {
 
 var useCreateSubscriptionQuote = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var data;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            subscription {\n              charges {\n                startDate\n                endDate\n                id\n                priceListCharge {\n                  id\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n      ", token, apiHost, {
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation quoteSubscriptionUpdate(\n      $subscriptionIds: [ID!]!,\n    ) {\n      quoteSubscriptionUpdate(\n        subscriptionIds: $subscriptionIds,\n      ) {\n        quote {\n          id\n          quoteChanges {\n            id\n            priceList {\n              id\n            }\n            subscription {\n              charges {\n                startDate\n                endDate\n                id\n                priceListCharge {\n                  id\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n      ", apiHost, token, {
                         subscriptionIds: subscriptionIds,
                     })];
                 case 1:
@@ -19940,11 +19968,11 @@ var useCreateSubscriptionQuote = function () {
 };
 var useQuoteChangeUpdate = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (charges, quoteChangeId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (charges, quoteChangeId, 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 QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", token, apiHost, { charges: charges, id: quoteChangeId })];
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteChangeUpdate($charges:[QuoteChargeAttributes!], $id:ID!) {\n      quoteChangeUpdate(id:$id, charges:$charges) {\n        quoteChange { id quoteId }\n        errors\n      }\n    }", apiHost, token, { charges: charges, id: quoteChangeId })];
                 case 1:
                     response = _a.sent();
                     return [2 /*return*/, response];
@@ -19954,11 +19982,11 @@ var useQuoteChangeUpdate = function () {
 };
 var useQuoteDelete = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (quoteId, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (quoteId, 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 QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", token, apiHost, { id: quoteId })];
+                case 0: return [4 /*yield*/, graphQLRequest("mutation QuoteDelete($id: ID!) {\n        quoteDelete(id: $id) {\n          errors\n        }\n      }", apiHost, token, { id: quoteId })];
                 case 1:
                     response = _a.sent();
                     return [2 /*return*/, response];
@@ -20044,7 +20072,7 @@ var quoteCompose = function (_a) {
 
 var QUOTE_RECALCULATE_TAXES = "\n  mutation QuoteRecalculateTaxes($id: ID!) {\n    quoteRecalculateTaxes(id: $id) {\n      ".concat(QUOTE_FIELDS, "\n      errors\n    }\n  }\n");
 var quoteRecalculateTaxes = function (_a) {
-    var quoteId = _a.quoteId, token = _a.token, apiHost = _a.apiHost;
+    var quoteId = _a.quoteId, apiHost = _a.apiHost, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
         var vars, response, errors;
         var _b, _c;
@@ -20071,7 +20099,7 @@ var quoteRecalculateTaxes = function (_a) {
 
 var MUTATION$2 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
 var getTaxationRequiredAccountFields = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
+    var apiHost = _a.apiHost, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         var _b, _c;
@@ -20267,14 +20295,14 @@ var Checkout = function (_a) {
     // Queries
     var _f = useQuery({
         queryKey: ["getTaxationRequiredAccountFields", token],
-        queryFn: function () { return getTaxationRequiredAccountFields({ token: token, apiHost: apiHost }); },
+        queryFn: function () { return getTaxationRequiredAccountFields({ apiHost: apiHost, token: token }); },
         enabled: Boolean(quote),
         staleTime: 0,
     }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
     var _g = useQuery({
         queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
         queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
+            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, apiHost: apiHost, token: token });
         },
         enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
             ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
@@ -20292,8 +20320,8 @@ var Checkout = function (_a) {
                         if (!quote) return [3 /*break*/, 2];
                         return [4 /*yield*/, quoteRecalculateTaxes({
                                 quoteId: quote.id,
-                                token: token,
                                 apiHost: apiHost,
+                                token: token,
                             })];
                     case 1:
                         updatedQuote = _a.sent();
@@ -21423,12 +21451,12 @@ var PlanManager = function (_a) {
 
 var useCancelSubscription = function () {
     var graphQLRequest = useGraphQLRequest();
-    return function (subscriptionIds, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
+    return function (subscriptionIds, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
         var data;
         var _a;
         return __generator(this, function (_b) {
             switch (_b.label) {
-                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", token, apiHost, { subscriptionIds: subscriptionIds })];
+                case 0: return [4 /*yield*/, graphQLRequest("\n    mutation SubscriptionCancel($subscriptionIds: [ID!]!) {\n      subscriptionCancel(ids: $subscriptionIds) {\n        subscriptions {\n          accountId\n          state\n        }\n      }\n    }", apiHost, token, { subscriptionIds: subscriptionIds })];
                 case 1:
                     data = _b.sent();
                     return [2 /*return*/, (_a = data === null || data === void 0 ? void 0 : data.subscriptions) === null || _a === void 0 ? void 0 : _a.nodes];
@@ -21885,7 +21913,7 @@ var SubscriptionsListContainer = function (_a) {
     // Queries
     var _c = useQuery({
         queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPriceListChangeOptions({ token: token, apiHost: apiHost }); },
+        queryFn: function () { return getPriceListChangeOptions({ apiHost: apiHost, token: token }); },
         enabled: Boolean(onChangePlanClick),
     }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
     if (subscriptionsAreLoading ||
@@ -21933,14 +21961,17 @@ var QuantityInput = function (_a) {
     (updatingChargeQuantityId && updatingChargeQuantityId !== charge.id) ||
         // If the subscription is not self-service, we disable the quantity input
         !charge.selfServiceQuantity;
-    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined ? "" : editedSubscription.quantity;
+    var value = (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) === undefined
+        ? ""
+        : editedSubscription.quantity;
     // Mutations
     var createCharge = useMutation({
         mutationFn: quoteChargeCreate,
         onSuccess: function (response) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
+                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+                    SubscriptionState$2.TRIAL;
                 setEditingQuoteData({
                     id: (_e = (_d = (_c = response.quoteChargeCreate) === null || _c === void 0 ? void 0 : _c.quoteCharge) === null || _d === void 0 ? void 0 : _d.quoteChange) === null || _e === void 0 ? void 0 : _e.quoteId,
                     isTrial: isTrial,
@@ -21957,12 +21988,15 @@ var QuantityInput = function (_a) {
     }).mutate;
     var createQuote = useMutation({
         mutationFn: function (subscriptionIds) {
-            return createSubscriptionQuote(subscriptionIds, token, apiHost);
+            return createSubscriptionQuote(subscriptionIds, apiHost, token);
         },
         onSuccess: function (subscriptionUpdateData) {
             var _a, _b;
             var quote = (_a = subscriptionUpdateData === null || subscriptionUpdateData === void 0 ? void 0 : subscriptionUpdateData.quoteSubscriptionUpdate) === null || _a === void 0 ? void 0 : _a.quote;
-            var quoteChange = quote.quoteChanges.find(function (quoteChange) { return quoteChange.priceList.id === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id); });
+            var quoteChange = quote.quoteChanges.find(function (quoteChange) {
+                return quoteChange.priceList.id ===
+                    (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription.priceList.id);
+            });
             var subscriptionCharge = (_b = quoteChange === null || quoteChange === void 0 ? void 0 : quoteChange.subscription) === null || _b === void 0 ? void 0 : _b.charges.find(function (charge) { var _a; return ((_a = charge === null || charge === void 0 ? void 0 : charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.id) === (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.chargeId); });
             if (subscriptionCharge && quoteChange && editedSubscription) {
                 createCharge({
@@ -21980,12 +22014,13 @@ var QuantityInput = function (_a) {
     var updateQuote = useMutation({
         mutationFn: function (_a) {
             var charges = _a.charges, quoteChangeId = _a.quoteChangeId;
-            return quoteChangeUpdate(charges, quoteChangeId, token, apiHost);
+            return quoteChangeUpdate(charges, quoteChangeId, apiHost, token);
         },
         onSuccess: function (response) {
             var _a, _b, _c, _d, _e, _f;
             if (!(editingQuote === null || editingQuote === void 0 ? void 0 : editingQuote.id)) {
-                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
+                var isTrial = ((_b = (_a = editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.subscription) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) ===
+                    SubscriptionState$2.TRIAL;
                 setEditingQuoteData({
                     id: (_d = (_c = response.quoteChangeUpdate) === null || _c === void 0 ? void 0 : _c.quoteChange) === null || _d === void 0 ? void 0 : _d.quoteId,
                     isTrial: isTrial,
@@ -22002,7 +22037,8 @@ var QuantityInput = function (_a) {
     });
     // Handlers
     var isQuantityLowerThanOriginal = function (quantity) {
-        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined && editedSubscription.quantity <= quantity;
+        return (editedSubscription === null || editedSubscription === void 0 ? void 0 : editedSubscription.quantity) !== undefined &&
+            editedSubscription.quantity <= quantity;
     };
     var onChangeQuantity = function (chargeIndex, value, priceListChargeId, subscription, subscriptionIndex) {
         var quantity = isNaN(parseInt(value)) ? 0 : parseInt(value);
@@ -22283,7 +22319,7 @@ var Subscriptions = function (_a) {
     // Mutations
     var subscriptionCancel = useMutation({
         mutationFn: function (subscription) {
-            return cancelSubscription([subscription.id], token, apiHost);
+            return cancelSubscription([subscription.id], apiHost, token);
         },
         onSuccess: function () {
             queryClient.invalidateQueries({
@@ -22334,7 +22370,7 @@ var Subscriptions = function (_a) {
     };
     var onClose = function () {
         if (editingQuoteData) {
-            quoteDelete(editingQuoteData.id, token, apiHost);
+            quoteDelete(editingQuoteData.id, apiHost, token);
             setEditingQuoteData(undefined);
         }
         if (updatingChargeQuantityId) {

package/dist/esm/src/components/BunnyProvider.d.ts

@@ -5,7 +5,7 @@ import { GraphQLClient } from "graphql-request";
 export type BunnyContextValues = {
     apiHost: string;
     graphQLClient: GraphQLClient;
-    token: string;
+    token?: string;
     displayPayButtonNameAnyways?: boolean;
     darkMode?: boolean;
     onTokenExpired?: () => void;
@@ -16,7 +16,7 @@ declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token
     darkMode?: boolean;
     queryClient?: QueryClient;
     apiHost: string;
-    token: string;
+    token?: string;
     onTokenExpired?: () => void;
     configProviderProps?: ThemeConfig | undefined;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/Checkout/Checkout.d.ts

@@ -2,7 +2,7 @@ import { PaymentMethod } from "@bunnyapp/common";
 import { CheckoutProps } from "../PaymentForm/PaymentFormTypes";
 interface CheckoutComponentProps extends CheckoutProps {
     isMobile: boolean;
-    token: string;
+    token?: string;
     storedPaymentMethod?: PaymentMethod;
     quantity?: number;
 }

package/dist/esm/src/components/Checkout/QuoteCheckout.d.ts

@@ -4,7 +4,7 @@ interface QuoteCheckoutProps extends InvoiceQuoteParentProps {
     account: Account;
     quote: Quote;
     taxationRequiredAccountFields?: TaxationRequiredAccountFields | null;
-    token: string;
+    token?: string;
     storedPaymentMethod?: PaymentMethod;
 }
 declare const QuoteCheckout: ({ account, onSuccess, onFail, quote, taxationRequiredAccountFields, }: QuoteCheckoutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { FormattedInvoice, PluginData, Quote } from "@bunnyapp/common";
 import { GraphQLClient } from "graphql-request";
-export declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {
+export declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {
     invoice?: FormattedInvoice | undefined;
     quote?: Quote | undefined;
     onFail: (error: any) => void;
     onPaymentSuccess?: (() => void) | undefined;
     onSavePaymentMethod?: (() => void) | undefined;
+    onRemovePaymentMethod?: (() => void) | undefined;
     accountId?: string | undefined;
     overrideToken?: string | undefined;
     graphQLClient: GraphQLClient;

package/dist/esm/src/components/PaymentForm/PaymentFormTypes.d.ts

@@ -20,5 +20,5 @@ export type CheckoutProps = {
     open: boolean;
     quote?: Quote;
     selectedPriceList?: PriceList;
-    token: string;
+    token?: string;
 };

package/dist/esm/src/components/PaymentForm/useRemovePaymentMethod.d.ts

@@ -1,3 +1,3 @@
 import { PluginData } from "@bunnyapp/common";
-declare function useRemovePaymentMethod(paymentPlugins: PluginData[], apiHost: string, token: string, accountId?: string): (data: any) => Promise<void>;
+declare function useRemovePaymentMethod(paymentPlugins: PluginData[], apiHost: string, token?: string, accountId?: string, onRemovePaymentMethod?: () => void): (data: any) => Promise<void>;
 export default useRemovePaymentMethod;

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

@@ -1,2 +1,2 @@
-export declare const useCancelSubscription: () => (subscriptionIds: string[], token: string, apiHost: string) => Promise<any>;
-export declare const useSubscriptionTrialConvert: (handlePortalErrors: (errors: any) => void, apiHost: string) => (subscriptionId: string, token: string, paymentId?: string) => Promise<any>;
+export declare const useCancelSubscription: () => (subscriptionIds: string[], apiHost: string, token?: string) => Promise<any>;
+export declare const useSubscriptionTrialConvert: (handlePortalErrors: (errors: any) => void, apiHost: string) => (subscriptionId: string, token?: string, paymentId?: string) => Promise<any>;

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

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

package/dist/esm/src/graphql/mutations/quoteChargeCreate.d.ts

@@ -7,7 +7,7 @@ type QuoteChangeCreateChargeProps = {
     quoteChangeId: string;
     startDate: string;
     subscriptionChargeId?: string;
-    token: string;
+    token?: string;
 };
 declare const quoteChargeCreate: ({ endDate, price, priceListChargeId, quantity, quoteChangeId, startDate, subscriptionChargeId, token, apiHost, }: QuoteChangeCreateChargeProps) => Promise<unknown>;
 export default quoteChargeCreate;

package/dist/esm/src/graphql/mutations/quoteCompose.d.ts

@@ -6,7 +6,7 @@ type Options = {
     subscriptionId?: string;
     quantity?: number;
     accountId?: string;
-    token: string;
+    token?: string;
     apiHost: string;
 };
 declare const quoteCompose: ({ quoteId, priceListId, subscriptionId, quantity, accountId, token, apiHost, }: Options) => Promise<Quote>;

package/dist/esm/src/graphql/mutations/quoteRecalculateTaxes.d.ts

@@ -1,6 +1,6 @@
-declare const quoteRecalculateTaxes: ({ quoteId, token, apiHost, }: {
+declare const quoteRecalculateTaxes: ({ quoteId, apiHost, token, }: {
     quoteId: string;
-    token: string;
     apiHost: string;
+    token?: string | undefined;
 }) => Promise<any>;
 export default quoteRecalculateTaxes;

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

@@ -3,7 +3,7 @@ declare const getPriceListChangeOptions: ({ apiHost, isInPreviewMode, productId,
     apiHost: string;
     isInPreviewMode?: boolean | undefined;
     productId?: string | undefined;
-    token: string;
+    token?: string | undefined;
     upgradingSubscription?: Subscription | undefined;
 }) => Promise<any>;
 export default getPriceListChangeOptions;

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

@@ -1,6 +1,6 @@
 import { TaxationRequiredAccountFields } from "@bunnyapp/common";
-declare const getTaxationRequiredAccountFields: ({ token, apiHost, }: {
-    token: string;
+declare const getTaxationRequiredAccountFields: ({ apiHost, token, }: {
     apiHost: string;
+    token?: string | undefined;
 }) => Promise<TaxationRequiredAccountFields | null>;
 export default getTaxationRequiredAccountFields;

package/dist/esm/src/hooks/quotes/useSendAcceptQuote.d.ts

@@ -3,7 +3,7 @@ declare const useSendAcceptQuote: ({ onTokenExpired, quoteId, apiHost, token, }:
     onTokenExpired?: (() => void) | undefined;
     quoteId?: string | undefined;
     apiHost: string;
-    token: string;
+    token?: string | undefined;
 }) => {
     acceptBoxVisible: boolean;
     isAccepting: boolean;

package/dist/esm/src/hooks/quotes/useSigningComplete.d.ts

@@ -1,5 +1,5 @@
 declare const useSigningComplete: ({ data, token }: {
     data: any;
-    token: string;
+    token?: string | undefined;
 }) => void;
 export default useSigningComplete;

package/dist/esm/src/hooks/useHasTaxPlugin.d.ts

@@ -1,5 +1,5 @@
 declare const useHasTaxPlugin: ({ apiHost, token, }: {
     apiHost: string;
-    token: string;
+    token?: string | undefined;
 }) => boolean;
 export default useHasTaxPlugin;

package/dist/esm/src/hooks/usePaymentMethod.d.ts

@@ -2,7 +2,7 @@ import { GraphQLClient } from "graphql-request";
 export declare const usePaymentMethod: ({ accountId, graphQLClient, token, }: {
     accountId?: string | undefined;
     graphQLClient: GraphQLClient;
-    token: string;
+    token?: string | undefined;
 }) => {
     data: any;
     isLoading: boolean;

package/dist/esm/src/hooks/usePaymentPlugins.d.ts

@@ -1,7 +1,7 @@
 import { PluginData } from "@bunnyapp/common";
 export declare const usePaymentPlugins: ({ apiHost, token, }: {
     apiHost: string;
-    token: string;
+    token?: string | undefined;
 }) => {
     paymentPlugins: PluginData[] | undefined;
     paymentMethodAllowedPlugins: PluginData[] | undefined;

package/dist/esm/src/hooks/usePlugins.d.ts

@@ -1,5 +1,5 @@
-declare const usePlugins: ({ apiHost, token }: {
+declare const usePlugins: ({ apiHost, token, }: {
     apiHost: string;
-    token: string;
+    token?: string | undefined;
 }) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<any, Error>;
 export default usePlugins;

package/dist/esm/src/hooks/useSigningPlugins.d.ts

@@ -1,5 +1,5 @@
 import { PluginData } from "@bunnyapp/common";
 export declare const useSigningPlugins: ({ apiHost, token, }: {
     apiHost: string;
-    token: string;
+    token?: string | undefined;
 }) => PluginData[] | undefined;

package/dist/esm/src/hooks/useToken.d.ts

@@ -1,2 +1,2 @@
-declare function useToken(): string;
+declare function useToken(): string | undefined;
 export default useToken;

package/dist/esm/src/utils/apiUtils.d.ts

@@ -1,2 +1,2 @@
 export declare const getGraphQLBaseURL: (apiHost: string) => string;
-export declare const useGraphQLRequest: () => (query: string, token: string, apiHost: string, variables?: any) => Promise<unknown>;
+export declare const useGraphQLRequest: () => (query: string, apiHost: string, token?: string, variables?: any) => Promise<unknown>;

package/dist/index.d.ts

@@ -79,12 +79,13 @@ declare const PaymentMethod: ({ className, shadow, cardEnabled, useModal, }: {
     useModal?: boolean | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {
+declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {
     invoice?: FormattedInvoice | undefined;
     quote?: Quote$1 | undefined;
     onFail: (error: any) => void;
     onPaymentSuccess?: (() => void) | undefined;
     onSavePaymentMethod?: (() => void) | undefined;
+    onRemovePaymentMethod?: (() => void) | undefined;
     accountId?: string | undefined;
     overrideToken?: string | undefined;
     graphQLClient: GraphQLClient;
@@ -118,7 +119,7 @@ declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token
     darkMode?: boolean;
     queryClient?: QueryClient;
     apiHost: string;
-    token: string;
+    token?: string;
     onTokenExpired?: () => void;
     configProviderProps?: ThemeConfig | undefined;
 }): react_jsx_runtime.JSX.Element;

package/package.json

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