@bunnyapp/components 1.0.39 → 1.0.41

package/README.md

@@ -1,18 +1,10 @@
 # ℹ️ About
 
-This package provides components from the Bunny portal to integrate Bunny UI functionality into your application. Both CJS and ESM builds are provided.
+This package provides components from Bunny to integrate Bunny UI functionality into your application. Both CJS and ESM builds are provided.
 
-# 🧩 Components
+# 📖 Documentation
 
-- Invoice
-- Quote
-- Quotes
-- PaymentMethod
-- BillingDetails
-- Transactions
-- Subscriptions (view-only mode)
-- BillingDetails
-- Signup
+Documentation on the usage of the components can be found [here](https://docs.bunny.com/developer/bunny-components/bunny-components).
 
 # 📦 Install
 
@@ -34,92 +26,6 @@ bun add @bunnyapp/components
 
 Ensure all peer dependencies in the package.json are installed.
 
-# ⚙️ Configuration
-
-1. Whitelist your subdomain in Bunny (e.g., `localhost` for development, `https://[company-name].bunny.com` for production).
-
-   - ![How to Whitelist Domains](/images/howtowhitelistdomains.png)
-
-2. Get an access token:
-   - **API Token**: Use an API token when you want all of your Bunny data to be accessible to the components. [Create an API Client](https://docs.bunny.com/developer/getting-started/api#create-an-api-client).
-   - **Portal Session Token**: Use a portal session token when you only want data for a single Bunny account to be accessible to the components. [Create a Portal Session](https://docs.bunny.com/developer/integrate/enable-upgrades-and-payments/standalone-customer-portal). The account is baked into the portal session token, therefore there is no accountId parameter in most Bunny components.
-
-# 🔨 Usage
-
-In order to use any of the components, you must wrap them in the BunnyProvider component.
-The BunnyProvider component provides all the state management and context for the components
-and keeps state up to date between all the components.
-
-We recommend placing the BunnyProvider component at the root of your application so that all Bunny components will be children of the BunnyProvider component.
-
-The below example shows how to use the BunnyProvider component with the Invoice and PaymentMethod components.
-Here the data such as the saved payment method will be updated between the components.
-
-```tsx
-import { BunnyProvider, Invoice, PaymentMethod } from "@bunnyapp/components";
-
-function App() {
-  return (
-    <BunnyProvider token={token} apiHost={apiHost}>
-      <Invoice id="12345" entityId="1" />
-      <PaymentMethod entityId="1" />
-    </BunnyProvider>
-  );
-}
-```
-
-In this example, each component has their own BunnyProvider. This is not recommended as it will create a mismatch in the state
-between each of the components. ie if a payment method is saved in the Invoice component, it will not automatically be available in the PaymentMethod component.
-
-```tsx
-import { BunnyProvider, Invoice, PaymentMethod } from "@bunnyapp/components";
-
-function App() {
-  return (
-    <div>
-      <BunnyProvider token={token} apiHost={apiHost}>
-        <Invoice id="12345" entityId="1" />
-      </BunnyProvider>
-      {/* Other components */}
-      <BunnyProvider token={token} apiHost={apiHost}>
-        <PaymentMethod entityId="1" />
-      </BunnyProvider>
-    </div>
-  );
-}
-```
-
-### Using Signup
-
-The Signup component allows potential customers to sign up for a (paid) subscription and create an account that you can manage within Bunny.
-
-Because the Signup component will be exposed to potentially anyone on the internet, it is very important that you use a token with **ONLY** the `signup:read` and `signup:write` scopes. Providing more scopes will leave your data exposed and could lead to security issues. ![How to Create Signup Token](/images/creatingsignuptoken.png)
-
-Because Signup must use a special token, it should have its own BunnyProvider that is not a child of any other BunnyProvider.
-
-```tsx
-import { BunnyProvider, Signup } from "@bunnyapp/components";
-
-function App() {
-  return (
-    <BunnyProvider token={tokenWithSignupScope} apiHost={apiHost}>
-      <Signup
-        companyName="Acme"
-        entityId="1"
-        priceListCode="business-monthly"
-        returnUrl="https://acme.com/dashboard" // Optional, the customer will be led to this url after signing up
-      />
-    </BunnyProvider>
-  );
-}
-```
-
-## Parameters
-
-- `token`: Token that allows access to the Bunny API. Generate this using `portalSessionCreate` from [docs](https://docs.bunny.com/developer/api-reference/mutations/portalsessioncreate)
-- `apiHost`: The API host the components will make requests to. e.g. `https://acme.bunny.com`
-- `entityId`: This is the id of the Bunny entity that you want to make requests to. An entity is different from an account. [Entity docs](https://docs.bunny.com/guide/tour/entities)
-
 ## Development
 
 To run the development server, run `npm run dev`.

package/dist/cjs/index.js

@@ -232,9 +232,7 @@ function ContextualWrapper(_a) {
     var entityBranding = react.useMemo(function () {
         var _a;
         // This is to determine if the secondary color should be white or black
-        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
-            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
-            : common.DEFAULT_BRAND_COLOR;
+        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor) ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16)) : common.DEFAULT_BRAND_COLOR;
         var secondaryColor = common.DEFAULT_SECONDARY_COLOR;
         if (!isMobile && common.isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
             secondaryColor = "#ffffff";
@@ -269,17 +267,11 @@ function ContextualWrapper(_a) {
                             boxShadowSecondary: "none",
                             fontWeight: "normal",
                             contentFontSizeLG: 14,
-                            colorBgContainerDisabled: darkMode
-                                ? "var(--row-background-dark)"
-                                : "#eef0f2",
-                            borderColorDisabled: darkMode
-                                ? "var(--row-background-dark)"
-                                : "#eef0f2",
+                            colorBgContainerDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
+                            borderColorDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
                         },
                         Drawer: {
-                            colorBgElevated: darkMode
-                                ? "var(--row-background-dark)"
-                                : common.SLATE_50,
+                            colorBgElevated: darkMode ? "var(--row-background-dark)" : common.SLATE_50,
                         },
                         Divider: {
                             colorSplit: darkMode ? common.SLATE_400 : common.SLATE_200,
@@ -447,9 +439,10 @@ function InvoicePDF(_a) {
 }
 
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
-var usePaymentMethod = function (graphQLClient, entityId, token, accountId) {
-    var _a = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
+var usePaymentMethod = function (_a) {
+    var accountId = _a.accountId, entityId = _a.entityId, graphQLClient = _a.graphQLClient, token = _a.token;
+    var _b = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token, accountId: accountId }),
         queryFn: function () {
             return graphQLClient
                 .request(paymentMethodsQuery, {
@@ -463,7 +456,7 @@ var usePaymentMethod = function (graphQLClient, entityId, token, accountId) {
                 return paymentMethod;
             });
         },
-    }), data = _a.data, isLoading = _a.isLoading;
+    }), data = _b.data, isLoading = _b.isLoading;
     return { data: data, isLoading: isLoading };
 };
 
@@ -1329,7 +1322,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, entityId, token, accoun
                         })
                             .then(function () {
                             showSuccessNotification("Payment method was removed", "Success");
-                            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId), null);
+                            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token, accountId: accountId }), null);
                         })
                             .catch(function (error) {
                             showErrorNotification(error.message, "Error removing payment method");
@@ -1352,14 +1345,17 @@ var PaymentForm = function (_a) {
     var _d = react.useState(), selectedPaymentMethod = _d[0], setSelectedPaymentMethod = _d[1];
     var _e = react.useState(false), showPaymentMethodForm = _e[0], setShowPaymentMethodForm = _e[1];
     var paying = !!(quote || invoice);
-    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
-        (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
-        currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) || currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
     // Hooks
     var apiHost = react.useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var token = overrideToken || tokenFromContexts;
-    var _f = usePaymentMethod(graphQLClient, entityId, token, accountId), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
+    var _f = usePaymentMethod({
+        accountId: accountId,
+        entityId: entityId,
+        graphQLClient: graphQLClient,
+        token: token,
+    }), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
     var _g = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _g.paymentMethodAllowedPlugins, allPaymentPlugins = _g.paymentPlugins, arePluginsFetched = _g.isFetched;
     var paymentMethodAllowedPlugins = react.useMemo(function () {
@@ -1372,9 +1368,7 @@ var PaymentForm = function (_a) {
     var queryClient = reactQuery.useQueryClient();
     // Set default plugin
     react.useEffect(function () {
-        if (!arePluginsFetched ||
-            !isPaymentMethodFetched ||
-            selectedPaymentMethod) {
+        if (!arePluginsFetched || !isPaymentMethodFetched || selectedPaymentMethod) {
             return;
         }
         var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
@@ -1403,7 +1397,7 @@ var PaymentForm = function (_a) {
     };
     var handleSavePaymentMethod = function () {
         queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
+            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ accountId: accountId, entityId: entityId, token: token }),
         });
         onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
         setShowPaymentMethodForm(false);
@@ -1448,7 +1442,7 @@ function Invoice(_a) {
 function ActualInvoice() {
     // Context
     var queryClient = reactQuery.useQueryClient();
-    var _a = react.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, className = _a.className;
+    var _a = react.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
     var _b = react.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
     var _c = react.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
@@ -1457,7 +1451,7 @@ function ActualInvoice() {
     var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
     // Queries
     var formattedInvoice = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey(id, token),
+        queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
         queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
     }).data;
     // Derived state
@@ -1466,12 +1460,13 @@ function ActualInvoice() {
     var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
     var onSuccess = function () {
         queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.transactionsKey(token),
+            queryKey: common.QueryKeyFactory.default.transactionsKey({ token: token }),
         });
         queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey(id, token),
+            queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
         });
         showSuccessNotification("Your invoice has been paid", "Payment successful");
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
     var onFail = function (error) {
         handleAllErrorFormats(error.message);
@@ -1511,11 +1506,7 @@ var getFormattedQuote = function (_a) {
 };
 
 var filterSigningPlugins = function (plugins) {
-    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
-        var _a, _b;
-        return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "signing" &&
-            ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid";
-    });
+    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "signing" && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid"; });
 };
 var useSigningPlugins = function (_a) {
     var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
@@ -1576,10 +1567,10 @@ var useSendAcceptQuote = function (_a) {
                     });
                     client.on("sign", function (data) {
                         queryClient.refetchQueries({
-                            queryKey: common.QueryKeyFactory.default.createQuoteKey(quoteId, token),
+                            queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                         });
                         queryClient.refetchQueries({
-                            queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
+                            queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                         });
                     });
                     // Open the DropboxSign modal
@@ -1600,10 +1591,10 @@ var useSendAcceptQuote = function (_a) {
             else {
                 setAcceptBoxVisible(false);
                 queryClient.invalidateQueries({
-                    queryKey: common.QueryKeyFactory.default.createQuoteKey(quoteId, token),
+                    queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                 });
                 queryClient.invalidateQueries({
-                    queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
+                    queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                 });
             }
         }, token);
@@ -1640,7 +1631,7 @@ var useSigningComplete = function (_a) {
     react.useEffect(function () {
         if (data && eventParam === "signing_complete") {
             data.state = "ACCEPTED";
-            queryClient.setQueryData(common.QueryKeyFactory.default.createQuoteKey(token), data);
+            queryClient.setQueryData(common.QueryKeyFactory.default.createQuoteKey({ id: data === null || data === void 0 ? void 0 : data.id, token: token }), data);
         }
     }, [data, eventParam, queryClient, token]);
 };
@@ -1759,7 +1750,7 @@ function ActualQuote(_a) {
     var _e = react.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
     // Queries
     var _f = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createQuoteKey(id, token),
+        queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             var error_1;
             return __generator(this, function (_a) {
@@ -1804,11 +1795,7 @@ function ActualQuote(_a) {
     var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
-                                    ? "flex w-full justify-end gap-2"
-                                    : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
-                                            return downloadFile(apiHost + "/api/pdf/quote", token);
-                                        } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile ? "flex w-full justify-end gap-2" : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, !isAccepted ? (jsxRuntime.jsx(antd.Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
@@ -19528,18 +19515,18 @@ var PaymentMethod = function (_a) {
     var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
     var showSuccessNotification = common.useSuccessNotification();
     var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
-    var data = usePaymentMethod(graphQLClient, entityId, token).data;
+    var data = usePaymentMethod({ entityId: entityId, graphQLClient: graphQLClient, token: token }).data;
     var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, entityId, token);
     // Queries
     var billingDetails = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.billingDetailsKey(entityId, token),
+        queryKey: common.QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
     }).data;
     // Local state
     var _g = react.useState(false), showModal = _g[0], setShowModal = _g[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
         });
         setShowModal(false);
         showSuccessNotification("Your payment method has been saved");
@@ -19787,16 +19774,13 @@ var Checkout = function (_a) {
     }), taxationRequiredAccountFields = _f.data, isLoadingTaxationRequiredAccountFields = _f.isLoading;
     var _g = reactQuery.useQuery({
         queryKey: ["account", quote === null || quote === void 0 ? void 0 : quote.accountId],
-        queryFn: function () {
-            return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, token: token, apiHost: apiHost });
-        },
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
-            ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+        queryFn: function () { return (quote === null || quote === void 0 ? void 0 : quote.accountId) && common.getAccount({ id: quote.accountId, token: token, apiHost: apiHost }); },
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
     }), account = _g.data, isLoadingAccount = _g.isLoading;
     reactQuery.useQuery({
-        queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id, token),
+        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({ id: quote === null || quote === void 0 ? void 0 : quote.id, token: token }),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var updatedQuote;
+            var updatedQuote, quoteKey, calculatedPricesKey;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -19809,8 +19793,14 @@ var Checkout = function (_a) {
                     case 1:
                         updatedQuote = _a.sent();
                         if (updatedQuote) {
-                            queryClient.setQueryData(queryKeyFactory.createObjectKey("editingQuote", updatedQuote.id), updatedQuote);
-                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey(quantity, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, token), updatedQuote);
+                            quoteKey = queryKeyFactory.createObjectKey({ objectName: "editingQuote", id: updatedQuote.id, token: token });
+                            calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
+                                quantity: quantity,
+                                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+                                token: token,
+                            });
+                            queryClient.setQueryData(quoteKey, updatedQuote);
+                            queryClient.setQueryData(calculatedPricesKey, updatedQuote);
                         }
                         _a.label = 2;
                     case 2: return [2 /*return*/, {}];
@@ -19974,7 +19964,11 @@ function Signup(_a) {
     var _h = react.useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
     var _j = react.useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
     var _k = react.useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
-    var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient, entityId, token).data;
+    var paymentMethod = usePaymentMethod({
+        entityId: entityId,
+        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        token: token,
+    }).data;
     var queryClient = reactQuery.useQueryClient();
     // Queries
     var priceListData = reactQuery.useQuery({
@@ -20009,7 +20003,7 @@ function Signup(_a) {
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
-                            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+                            queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
                         });
                         setProceedingToPayment(false);
                         setQuote(data.quote);
@@ -20068,9 +20062,7 @@ function Signup(_a) {
         var children = _a.children, className = _a.className, style = _a.style;
         return isCardEnabled ? (jsxRuntime.jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsxRuntime.jsx("div", __assign({ className: className, style: style }, { children: children })));
     };
-    return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile
-                        ? "items-center justify-center my-12"
-                        : "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
+    return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-center my-12" : "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -20616,12 +20608,16 @@ var Subscriptions = function (_a) {
     var token = useToken();
     // Queries
     var _d = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createTableKey("subscriptions", token),
+        queryKey: common.QueryKeyFactory.default.createTableKey({
+            filterString: "entityId=".concat(entityId),
+            pluralType: "subscriptions",
+            token: token,
+        }),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
     }), rawSubscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
     var _e = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.planChangeOptionsKey(token),
+        queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
         queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
         enabled: Boolean(onChangePlanClick),
     }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
@@ -20631,8 +20627,7 @@ var Subscriptions = function (_a) {
         if (subscriptions)
             onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);
     }, [subscriptions]);
-    if (subscriptionsAreLoading ||
-        (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
+    if (subscriptionsAreLoading || (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: gap,
@@ -20686,7 +20681,7 @@ function BillingDetailsSection(_a) {
     var showSuccessNotification = common.useSuccessNotification();
     // Queries
     var _d = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.billingDetailsKey(entityId, token),
+        queryKey: common.QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
     }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
     var _e = reactQuery.useMutation({
@@ -20710,7 +20705,7 @@ function BillingDetailsSection(_a) {
                         })];
                     case 1:
                         updatedBillingDetails = _a.sent();
-                        queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey(entityId, token), function (old) {
+                        queryClient.setQueryData(common.QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }), function (old) {
                             return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
                         });
                         return [2 /*return*/, updatedBillingDetails];
@@ -20720,7 +20715,7 @@ function BillingDetailsSection(_a) {
         onSuccess: function () {
             showSuccessNotification("Your account details have been saved");
             queryClient.invalidateQueries({
-                queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey(entityId, token),
+                queryKey: common.QueryKeyFactory.default.taxationRequiredAccountFieldsKey({ entityId: entityId, token: token }),
             });
         },
     }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
@@ -20801,9 +20796,7 @@ function BillingDetailsSection(_a) {
         });
     }); };
     var filteredCountryList = react.useMemo(function () {
-        return countryListFilter
-            ? common.Lists.COUNTRY_LIST.filter(countryListFilter)
-            : common.Lists.COUNTRY_LIST;
+        return countryListFilter ? common.Lists.COUNTRY_LIST.filter(countryListFilter) : common.Lists.COUNTRY_LIST;
     }, [countryListFilter]);
     return (jsxRuntime.jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsxRuntime.jsx(antd.Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Account name", name: "name", rules: [{ required: true, message: "Account name is required" }] }, { children: jsxRuntime.jsx(antd.Input, {}) })), 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: "flex gap-4" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "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: "flex-1" }, { children: jsxRuntime.jsx(antd.Input, {}) }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1", rules: [
                                         {
@@ -20811,12 +20804,8 @@ function BillingDetailsSection(_a) {
                                         },
                                     ] }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsxRuntime.jsx(antd.Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                                             var _a, _b;
-                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
-                                                .toLowerCase()
-                                                .includes(input.toLowerCase()) ||
-                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
-                                                    .toLowerCase()
-                                                    .includes(input.toLowerCase());
+                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
+                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
                                         } }) }))] })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
                                 {
                                     required: true,

package/dist/cjs/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/cjs/src/components/PaymentForm/useRemovePaymentMethod.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/index.js

@@ -204,9 +204,7 @@ function ContextualWrapper(_a) {
     var entityBranding = useMemo(function () {
         var _a;
         // This is to determine if the secondary color should be white or black
-        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor)
-            ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16))
-            : DEFAULT_BRAND_COLOR;
+        var brandColor = (branding === null || branding === void 0 ? void 0 : branding.brandColor) ? "#" + ((_a = branding === null || branding === void 0 ? void 0 : branding.brandColor) === null || _a === void 0 ? void 0 : _a.toString(16)) : DEFAULT_BRAND_COLOR;
         var secondaryColor = DEFAULT_SECONDARY_COLOR;
         if (!isMobile && isColorTooDark(branding === null || branding === void 0 ? void 0 : branding.accentColor))
             secondaryColor = "#ffffff";
@@ -241,17 +239,11 @@ function ContextualWrapper(_a) {
                             boxShadowSecondary: "none",
                             fontWeight: "normal",
                             contentFontSizeLG: 14,
-                            colorBgContainerDisabled: darkMode
-                                ? "var(--row-background-dark)"
-                                : "#eef0f2",
-                            borderColorDisabled: darkMode
-                                ? "var(--row-background-dark)"
-                                : "#eef0f2",
+                            colorBgContainerDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
+                            borderColorDisabled: darkMode ? "var(--row-background-dark)" : "#eef0f2",
                         },
                         Drawer: {
-                            colorBgElevated: darkMode
-                                ? "var(--row-background-dark)"
-                                : SLATE_50,
+                            colorBgElevated: darkMode ? "var(--row-background-dark)" : SLATE_50,
                         },
                         Divider: {
                             colorSplit: darkMode ? SLATE_400 : SLATE_200,
@@ -419,9 +411,10 @@ function InvoicePDF(_a) {
 }
 
 var paymentMethodsQuery = "query paymentMethods ($filter: String, $first: Int, $sort: String) {\n  paymentMethods (filter: $filter, first: $first, sort: $sort) {\n    nodes {\n      id\n      disabled\n      pluginId\n      accountId\n      expirationDate\n      plugin {\n        guid\n        id\n      }\n      state\n      metadata {\n        issuer\n        identifier\n        kind\n        description\n        icon\n      }\n    }\n  }\n}";
-var usePaymentMethod = function (graphQLClient, entityId, token, accountId) {
-    var _a = useQuery({
-        queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
+var usePaymentMethod = function (_a) {
+    var accountId = _a.accountId, entityId = _a.entityId, graphQLClient = _a.graphQLClient, token = _a.token;
+    var _b = useQuery({
+        queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token, accountId: accountId }),
         queryFn: function () {
             return graphQLClient
                 .request(paymentMethodsQuery, {
@@ -435,7 +428,7 @@ var usePaymentMethod = function (graphQLClient, entityId, token, accountId) {
                 return paymentMethod;
             });
         },
-    }), data = _a.data, isLoading = _a.isLoading;
+    }), data = _b.data, isLoading = _b.isLoading;
     return { data: data, isLoading: isLoading };
 };
 
@@ -1301,7 +1294,7 @@ function useRemovePaymentMethod(paymentPlugins, apiHost, entityId, token, accoun
                         })
                             .then(function () {
                             showSuccessNotification("Payment method was removed", "Success");
-                            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId), null);
+                            queryClient.setQueryData(QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token, accountId: accountId }), null);
                         })
                             .catch(function (error) {
                             showErrorNotification(error.message, "Error removing payment method");
@@ -1324,14 +1317,17 @@ var PaymentForm = function (_a) {
     var _d = useState(), selectedPaymentMethod = _d[0], setSelectedPaymentMethod = _d[1];
     var _e = useState(false), showPaymentMethodForm = _e[0], setShowPaymentMethodForm = _e[1];
     var paying = !!(quote || invoice);
-    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) ||
-        (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) ||
-        currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+    var currencyId = (_b = ((quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId) || currencyIdFromProps)) === null || _b === void 0 ? void 0 : _b.toLowerCase();
     // Hooks
     var apiHost = useContext(BunnyContext).apiHost;
     var tokenFromContexts = useToken();
     var token = overrideToken || tokenFromContexts;
-    var _f = usePaymentMethod(graphQLClient, entityId, token, accountId), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
+    var _f = usePaymentMethod({
+        accountId: accountId,
+        entityId: entityId,
+        graphQLClient: graphQLClient,
+        token: token,
+    }), storedPaymentMethod = _f.data, isPaymentMethodLoading = _f.isLoading;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
     var _g = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }), allPaymentMethodAllowedPlugins = _g.paymentMethodAllowedPlugins, allPaymentPlugins = _g.paymentPlugins, arePluginsFetched = _g.isFetched;
     var paymentMethodAllowedPlugins = useMemo(function () {
@@ -1344,9 +1340,7 @@ var PaymentForm = function (_a) {
     var queryClient = useQueryClient();
     // Set default plugin
     useEffect(function () {
-        if (!arePluginsFetched ||
-            !isPaymentMethodFetched ||
-            selectedPaymentMethod) {
+        if (!arePluginsFetched || !isPaymentMethodFetched || selectedPaymentMethod) {
             return;
         }
         var pluginPaymentMethod = paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.find(function (plugin) { var _a, _b, _c; return ((_a = plugin.id) === null || _a === void 0 ? void 0 : _a.toString()) === ((_c = (_b = storedPaymentMethod === null || storedPaymentMethod === void 0 ? void 0 : storedPaymentMethod.plugin) === null || _b === void 0 ? void 0 : _b.id) === null || _c === void 0 ? void 0 : _c.toString()); });
@@ -1375,7 +1369,7 @@ var PaymentForm = function (_a) {
     };
     var handleSavePaymentMethod = function () {
         queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token, accountId),
+            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ accountId: accountId, entityId: entityId, token: token }),
         });
         onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
         setShowPaymentMethodForm(false);
@@ -1420,7 +1414,7 @@ function Invoice(_a) {
 function ActualInvoice() {
     // Context
     var queryClient = useQueryClient();
-    var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, className = _a.className;
+    var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, onPaymentSuccess = _a.onPaymentSuccess, className = _a.className;
     var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
     var _c = useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
@@ -1429,7 +1423,7 @@ function ActualInvoice() {
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
     // Queries
     var formattedInvoice = useQuery({
-        queryKey: QueryKeyFactory.default.createFormattedInvoiceKey(id, token),
+        queryKey: QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
         queryFn: function () { return getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
     }).data;
     // Derived state
@@ -1438,12 +1432,13 @@ function ActualInvoice() {
     var isMobile = useIsMobile(isInvoicePayable ? BreakpointNumbers.lg : undefined);
     var onSuccess = function () {
         queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.transactionsKey(token),
+            queryKey: QueryKeyFactory.default.transactionsKey({ token: token }),
         });
         queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.createFormattedInvoiceKey(id, token),
+            queryKey: QueryKeyFactory.default.createFormattedInvoiceKey({ id: id, token: token }),
         });
         showSuccessNotification("Your invoice has been paid", "Payment successful");
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess();
     };
     var onFail = function (error) {
         handleAllErrorFormats(error.message);
@@ -1483,11 +1478,7 @@ var getFormattedQuote = function (_a) {
 };
 
 var filterSigningPlugins = function (plugins) {
-    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) {
-        var _a, _b;
-        return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "signing" &&
-            ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid";
-    });
+    return plugins === null || plugins === void 0 ? void 0 : plugins.filter(function (plugin) { var _a, _b; return ((_a = plugin.type) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "signing" && ((_b = plugin.status) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === "valid"; });
 };
 var useSigningPlugins = function (_a) {
     var entityId = _a.entityId, apiHost = _a.apiHost, token = _a.token;
@@ -1548,10 +1539,10 @@ var useSendAcceptQuote = function (_a) {
                     });
                     client.on("sign", function (data) {
                         queryClient.refetchQueries({
-                            queryKey: QueryKeyFactory.default.createQuoteKey(quoteId, token),
+                            queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                         });
                         queryClient.refetchQueries({
-                            queryKey: QueryKeyFactory.default.createQuoteKey(token),
+                            queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                         });
                     });
                     // Open the DropboxSign modal
@@ -1572,10 +1563,10 @@ var useSendAcceptQuote = function (_a) {
             else {
                 setAcceptBoxVisible(false);
                 queryClient.invalidateQueries({
-                    queryKey: QueryKeyFactory.default.createQuoteKey(quoteId, token),
+                    queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                 });
                 queryClient.invalidateQueries({
-                    queryKey: QueryKeyFactory.default.createQuoteKey(token),
+                    queryKey: QueryKeyFactory.default.createQuoteKey({ id: quoteId, token: token }),
                 });
             }
         }, token);
@@ -1612,7 +1603,7 @@ var useSigningComplete = function (_a) {
     useEffect(function () {
         if (data && eventParam === "signing_complete") {
             data.state = "ACCEPTED";
-            queryClient.setQueryData(QueryKeyFactory.default.createQuoteKey(token), data);
+            queryClient.setQueryData(QueryKeyFactory.default.createQuoteKey({ id: data === null || data === void 0 ? void 0 : data.id, token: token }), data);
         }
     }, [data, eventParam, queryClient, token]);
 };
@@ -1731,7 +1722,7 @@ function ActualQuote(_a) {
     var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
     // Queries
     var _f = useQuery({
-        queryKey: QueryKeyFactory.default.createQuoteKey(id, token),
+        queryKey: QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             var error_1;
             return __generator(this, function (_a) {
@@ -1776,11 +1767,7 @@ function ActualQuote(_a) {
     var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
-                                    ? "flex w-full justify-end gap-2"
-                                    : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
-                                            return downloadFile(apiHost + "/api/pdf/quote", token);
-                                        } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile ? "flex w-full justify-end gap-2" : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () { return downloadFile(apiHost + "/api/pdf/quote", token); } }, { children: "Download" }))) : null, !isAccepted ? (jsx(Button, __assign({ disabled: isExpired || isAccepting, onClick: function () { return startAcceptance(); }, type: "primary" }, { children: isExpired ? "Quote is expired" : "Accept quote" }))) : null] })))] })), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "flex flex-col items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
@@ -19500,18 +19487,18 @@ var PaymentMethod = function (_a) {
     var paymentPlugins = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: token }).paymentPlugins;
     var showSuccessNotification = useSuccessNotification();
     var handleAllErrorFormats = useAllErrorFormats(onTokenExpired);
-    var data = usePaymentMethod(graphQLClient, entityId, token).data;
+    var data = usePaymentMethod({ entityId: entityId, graphQLClient: graphQLClient, token: token }).data;
     var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], apiHost, entityId, token);
     // Queries
     var billingDetails = useQuery({
-        queryKey: QueryKeyFactory.default.billingDetailsKey(entityId, token),
+        queryKey: QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
     }).data;
     // Local state
     var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
-            queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
         });
         setShowModal(false);
         showSuccessNotification("Your payment method has been saved");
@@ -19759,16 +19746,13 @@ var Checkout = function (_a) {
     }), 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 });
-        },
-        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) &&
-            ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
+        queryFn: function () { return (quote === null || quote === void 0 ? void 0 : quote.accountId) && getAccount({ id: quote.accountId, token: token, apiHost: apiHost }); },
+        enabled: Boolean(quote === null || quote === void 0 ? void 0 : quote.accountId) && ((taxationRequiredAccountFields === null || taxationRequiredAccountFields === void 0 ? void 0 : taxationRequiredAccountFields.length) || 0) > 0,
     }), account = _g.data, isLoadingAccount = _g.isLoading;
     useQuery({
-        queryKey: queryKeyFactory.createQuoteTaxCalculateKey(quote === null || quote === void 0 ? void 0 : quote.id, token),
+        queryKey: queryKeyFactory.createQuoteTaxCalculateKey({ id: quote === null || quote === void 0 ? void 0 : quote.id, token: token }),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var updatedQuote;
+            var updatedQuote, quoteKey, calculatedPricesKey;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -19781,8 +19765,14 @@ var Checkout = function (_a) {
                     case 1:
                         updatedQuote = _a.sent();
                         if (updatedQuote) {
-                            queryClient.setQueryData(queryKeyFactory.createObjectKey("editingQuote", updatedQuote.id), updatedQuote);
-                            queryClient.setQueryData(queryKeyFactory.calculatedPricesKey(quantity, selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id, token), updatedQuote);
+                            quoteKey = queryKeyFactory.createObjectKey({ objectName: "editingQuote", id: updatedQuote.id, token: token });
+                            calculatedPricesKey = queryKeyFactory.calculatedPricesKey({
+                                quantity: quantity,
+                                priceListId: selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id,
+                                token: token,
+                            });
+                            queryClient.setQueryData(quoteKey, updatedQuote);
+                            queryClient.setQueryData(calculatedPricesKey, updatedQuote);
                         }
                         _a.label = 2;
                     case 2: return [2 /*return*/, {}];
@@ -19946,7 +19936,11 @@ function Signup(_a) {
     var _h = useState(false), proceedingToPayment = _h[0], setProceedingToPayment = _h[1];
     var _j = useState(false), purchaseSucceeded = _j[0], setPurchaseSucceeded = _j[1];
     var _k = useState(undefined), paymentMethodGraphQLClient = _k[0], setPaymentMethodGraphQLClient = _k[1];
-    var paymentMethod = usePaymentMethod(paymentMethodGraphQLClient || graphQLClient, entityId, token).data;
+    var paymentMethod = usePaymentMethod({
+        entityId: entityId,
+        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        token: token,
+    }).data;
     var queryClient = useQueryClient();
     // Queries
     var priceListData = useQuery({
@@ -19981,7 +19975,7 @@ function Signup(_a) {
                         // We must invalidate the accountPaymentMethodKey query in order to clear payment methods from the provided api token,
                         // to instead use paymentMethods from portalSessionToken.
                         queryClient.invalidateQueries({
-                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey(entityId, token),
+                            queryKey: QueryKeyFactory.default.accountPaymentMethodKey({ entityId: entityId, token: token }),
                         });
                         setProceedingToPayment(false);
                         setQuote(data.quote);
@@ -20040,9 +20034,7 @@ function Signup(_a) {
         var children = _a.children, className = _a.className, style = _a.style;
         return isCardEnabled ? (jsx(Card, __assign({ className: className, style: style }, { children: children }))) : (jsx("div", __assign({ className: className, style: style }, { children: children })));
     };
-    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile
-                        ? "items-center justify-center my-12"
-                        : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
+    return (jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsx(Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsx("div", __assign({ className: "flex ".concat(isMobile ? "items-center justify-center my-12" : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
@@ -20588,12 +20580,16 @@ var Subscriptions = function (_a) {
     var token = useToken();
     // Queries
     var _d = useQuery({
-        queryKey: QueryKeyFactory.default.createTableKey("subscriptions", token),
+        queryKey: QueryKeyFactory.default.createTableKey({
+            filterString: "entityId=".concat(entityId),
+            pluralType: "subscriptions",
+            token: token,
+        }),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
     }), rawSubscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
     var _e = useQuery({
-        queryKey: QueryKeyFactory.default.planChangeOptionsKey(token),
+        queryKey: QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
         queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
         enabled: Boolean(onChangePlanClick),
     }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
@@ -20603,8 +20599,7 @@ var Subscriptions = function (_a) {
         if (subscriptions)
             onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);
     }, [subscriptions]);
-    if (subscriptionsAreLoading ||
-        (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
+    if (subscriptionsAreLoading || (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
         return jsx(Fragment, {});
     return (jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: gap,
@@ -20658,7 +20653,7 @@ function BillingDetailsSection(_a) {
     var showSuccessNotification = useSuccessNotification();
     // Queries
     var _d = useQuery({
-        queryKey: QueryKeyFactory.default.billingDetailsKey(entityId, token),
+        queryKey: QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }),
         queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
     }), billingDetails = _d.data, isLoadingBillingDetails = _d.isLoading;
     var _e = useMutation({
@@ -20682,7 +20677,7 @@ function BillingDetailsSection(_a) {
                         })];
                     case 1:
                         updatedBillingDetails = _a.sent();
-                        queryClient.setQueryData(QueryKeyFactory.default.billingDetailsKey(entityId, token), function (old) {
+                        queryClient.setQueryData(QueryKeyFactory.default.billingDetailsKey({ entityId: entityId, token: token }), function (old) {
                             return __assign(__assign({}, old), updatedBillingDetails.billingDetails);
                         });
                         return [2 /*return*/, updatedBillingDetails];
@@ -20692,7 +20687,7 @@ function BillingDetailsSection(_a) {
         onSuccess: function () {
             showSuccessNotification("Your account details have been saved");
             queryClient.invalidateQueries({
-                queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey(entityId, token),
+                queryKey: QueryKeyFactory.default.taxationRequiredAccountFieldsKey({ entityId: entityId, token: token }),
             });
         },
     }), updateBillingDetails = _e.mutate, isUpdatingBillingDetails = _e.isPending;
@@ -20773,9 +20768,7 @@ function BillingDetailsSection(_a) {
         });
     }); };
     var filteredCountryList = useMemo(function () {
-        return countryListFilter
-            ? Lists.COUNTRY_LIST.filter(countryListFilter)
-            : Lists.COUNTRY_LIST;
+        return countryListFilter ? Lists.COUNTRY_LIST.filter(countryListFilter) : Lists.COUNTRY_LIST;
     }, [countryListFilter]);
     return (jsxs("div", __assign({ className: "".concat(isMobile || hidePaymentMethodForm ? "w-full" : "w-1/2", " px-4") }, { children: [jsx(Skeleton, __assign({ loading: isLoadingBillingDetails }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical", disabled: isUpdatingBillingDetails, autoComplete: "off" }, { children: [jsx(Form.Item, __assign({ label: "Account name", name: "name", rules: [{ required: true, message: "Account name is required" }] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Street address", name: "billingStreet", rules: [{ required: true, message: "Street address is required" }] }, { children: jsx(Input, {}) })), jsxs("div", __assign({ className: "flex gap-4" }, { children: [jsx(Form.Item, __assign({ label: "City", name: "billingCity", rules: [{ required: true, message: "City is required" }], className: "flex-1" }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Zipcode", name: "billingZip", rules: [{ required: true, message: "Zipcode is required" }], className: "flex-1" }, { children: jsx(Input, {}) }))] })), jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col pb-2" : "flex-row", " gap-4") }, { children: [jsx(Form.Item, __assign({ label: "State", name: "billingState", className: "flex-1", rules: [
                                         {
@@ -20783,12 +20776,8 @@ function BillingDetailsSection(_a) {
                                         },
                                     ] }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Country", name: "billingCountry", className: "flex-1", rules: [{ required: true, message: "Country is required" }] }, { children: jsx(Select, { options: filteredCountryList, placeholder: "Select a country", showSearch: true, filterOption: function (input, option) {
                                             var _a, _b;
-                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "")
-                                                .toLowerCase()
-                                                .includes(input.toLowerCase()) ||
-                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "")
-                                                    .toLowerCase()
-                                                    .includes(input.toLowerCase());
+                                            return ((_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : "").toLowerCase().includes(input.toLowerCase()) ||
+                                                ((_b = option === null || option === void 0 ? void 0 : option.value) !== null && _b !== void 0 ? _b : "").toLowerCase().includes(input.toLowerCase());
                                         } }) }))] })), jsx(Form.Item, __assign({ label: "Email", name: "billingContactEmail", rules: [
                                 {
                                     required: true,

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/PaymentForm/useRemovePaymentMethod.d.ts

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

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

@@ -4,7 +4,7 @@ declare const useSendAcceptQuote: ({ entityId, onTokenExpired, quoteId, apiHost,
     onTokenExpired?: (() => void) | undefined;
     quoteId?: string | undefined;
     apiHost: string;
-    token?: string | undefined;
+    token: string;
 }) => {
     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 | undefined;
+    token: string;
 }) => void;
 export default useSigningComplete;

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

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

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

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

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

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

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

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

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

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

package/dist/index.d.ts

@@ -144,7 +144,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;
@@ -226,7 +226,12 @@ declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hid
     }) => boolean) | undefined;
 }) => react_jsx_runtime.JSX.Element;
 
-declare const usePaymentMethod: (graphQLClient: GraphQLClient, entityId?: string, token?: string, accountId?: string) => {
+declare const usePaymentMethod: ({ accountId, entityId, graphQLClient, token, }: {
+    accountId?: string | undefined;
+    entityId?: string | undefined;
+    graphQLClient: GraphQLClient;
+    token: string;
+}) => {
     data: any;
     isLoading: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -63,7 +63,7 @@
     "vite": "^6.2.1"
   },
   "peerDependencies": {
-    "@bunnyapp/common": "^1.0.45",
+    "@bunnyapp/common": "^1.0.47",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",