@bunnyapp/components 1.0.40 → 1.0.42

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

@@ -1322,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");
@@ -1345,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), 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 () {
@@ -1365,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()); });
@@ -1396,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);
@@ -1441,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();
@@ -1450,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
@@ -1459,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);
@@ -1504,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;
@@ -1569,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
@@ -1593,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);
@@ -1752,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) {
@@ -1797,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 })] }));
 }
@@ -19504,7 +19498,7 @@ var getBillingDetails = function (_a) {
 var Text$5 = antd.Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19521,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).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");
@@ -19561,7 +19555,7 @@ var PaymentMethodDisplay = function (_a) {
                 body: {
                     padding: "1rem 0 0 0",
                 },
-            }, title: jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(DrawerHeader, { title: "New payment method", onClose: function () { return setShowModal(false); }, closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200" }) })), footer: null }, { children: children })));
+            }, title: jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(DrawerHeader, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), footer: null }, { children: children })));
     }
     return (jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
             body: {
@@ -19970,7 +19964,12 @@ 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).data;
+    var paymentMethod = usePaymentMethod({
+        accountId: accountId,
+        entityId: entityId,
+        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        token: token,
+    }).data;
     var queryClient = reactQuery.useQueryClient();
     // Queries
     var priceListData = reactQuery.useQuery({
@@ -20001,11 +20000,14 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost || "", data.portalSessionToken));
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
                         // 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);
@@ -20042,6 +20044,9 @@ function Signup(_a) {
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }
+                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                            throw new Error("Payment method ID is required");
+                        }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
@@ -20612,12 +20617,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;
@@ -20627,8 +20636,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,

package/dist/cjs/src/components/Card.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Card: ({ children, className, style, }: {
     children: React.ReactNode;
     className?: string | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormattedInvoice, PluginData, Quote } from "@bunnyapp/common";
 import { GraphQLClient } from "graphql-request";
 export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {

package/dist/cjs/src/components/PaymentForm/PaymentMethodDetails.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PaymentMethod, PluginData } from "@bunnyapp/common";
 declare const PaymentMethodDetails: ({ onFail, paymentMethod, onSavePaymentMethod, customPaymentForms, }: {
     onFail: (error: any) => void;

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/components/Quote/Quote.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Meta, StoryObj } from "@storybook/react";
 import Quote from "./Quote";
 declare const meta: Meta<typeof Quote>;
@@ -17,16 +18,16 @@ export declare const Default: import("@storybook/core/csf").StoryAnnotations<imp
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -44,16 +45,16 @@ export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<im
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -71,16 +72,16 @@ export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<impo
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -98,16 +99,16 @@ export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotat
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -128,16 +129,16 @@ export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<im
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;

package/dist/cjs/src/components/Subscriptions/Subscriptions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Subscription } from "@bunnyapp/common";
 import "../../styles/index.less";
 export type EditingQuoteDataType = {
@@ -14,7 +15,7 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     onSubscriptionsLoaded?: ((subscriptions: Subscription[]) => void) | undefined;
     styles?: {
         gap?: number | undefined;
-        shadow?: "none" | "sm" | "md" | "lg" | undefined;
+        shadow?: "none" | "lg" | "md" | "sm" | undefined;
         subscriptionProductNameStyle?: import("react").CSSProperties | undefined;
     } | undefined;
     noSubscriptionsComponent?: React.ReactNode;

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const useSendAcceptQuote: ({ entityId, onTokenExpired, quoteId, apiHost, token, }: {
     entityId: string;
     onTokenExpired?: (() => void) | undefined;
     quoteId?: string | undefined;
     apiHost: string;
-    token?: string | undefined;
+    token: string;
 }) => {
     acceptBoxVisible: boolean;
     isAccepting: 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/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/index.js

@@ -1294,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");
@@ -1317,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), 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 () {
@@ -1337,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()); });
@@ -1368,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);
@@ -1413,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();
@@ -1422,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
@@ -1431,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);
@@ -1476,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;
@@ -1541,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
@@ -1565,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);
@@ -1724,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) {
@@ -1769,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 })] }));
 }
@@ -19476,7 +19470,7 @@ var getBillingDetails = function (_a) {
 var Text$5 = Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsx(Text$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsx(CloseOutlined, {}) }))) : null] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19493,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).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");
@@ -19533,7 +19527,7 @@ var PaymentMethodDisplay = function (_a) {
                 body: {
                     padding: "1rem 0 0 0",
                 },
-            }, title: jsx("div", __assign({ className: "px-4" }, { children: jsx(DrawerHeader, { title: "New payment method", onClose: function () { return setShowModal(false); }, closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200" }) })), footer: null }, { children: children })));
+            }, title: jsx("div", __assign({ className: "px-4" }, { children: jsx(DrawerHeader, { closeButtonClassName: "bg-transparent border-none cursor-pointer hover:bg-gray-100 p-2 rounded-sm transition-all duration-200", onClose: function () { return setShowModal(false); }, title: "New payment method" }) })), footer: null }, { children: children })));
     }
     return (jsx(Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
             body: {
@@ -19942,7 +19936,12 @@ 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).data;
+    var paymentMethod = usePaymentMethod({
+        accountId: accountId,
+        entityId: entityId,
+        graphQLClient: paymentMethodGraphQLClient || graphQLClient,
+        token: token,
+    }).data;
     var queryClient = useQueryClient();
     // Queries
     var priceListData = useQuery({
@@ -19973,11 +19972,14 @@ function Signup(_a) {
                         data = _a.sent();
                         setAccountId(data.account.id);
                         setPortalSessionToken(data.portalSessionToken);
-                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost || "", data.portalSessionToken));
+                        setPaymentMethodGraphQLClient(createGraphQLClient(apiHost, data.portalSessionToken));
                         // 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);
@@ -20014,6 +20016,9 @@ function Signup(_a) {
                         if (!(plugin === null || plugin === void 0 ? void 0 : plugin.id)) {
                             throw new Error("Plugin ID is required");
                         }
+                        if (!(paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.id)) {
+                            throw new Error("Payment method ID is required");
+                        }
                         return [4 /*yield*/, accountSignup({
                                 token: portalSessionToken,
                                 apiHost: apiHost,
@@ -20584,12 +20589,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;
@@ -20599,8 +20608,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,

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const Card: ({ children, className, style, }: {
     children: React.ReactNode;
     className?: string | undefined;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { FormattedInvoice, PluginData, Quote } from "@bunnyapp/common";
 import { GraphQLClient } from "graphql-request";
 export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, customPaymentForms, useAllPaymentPlugins, }: {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PaymentMethod, PluginData } from "@bunnyapp/common";
 declare const PaymentMethodDetails: ({ onFail, paymentMethod, onSavePaymentMethod, customPaymentForms, }: {
     onFail: (error: any) => void;

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/components/Quote/Quote.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Meta, StoryObj } from "@storybook/react";
 import Quote from "./Quote";
 declare const meta: Meta<typeof Quote>;
@@ -17,16 +18,16 @@ export declare const Default: import("@storybook/core/csf").StoryAnnotations<imp
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -44,16 +45,16 @@ export declare const NoShadow: import("@storybook/core/csf").StoryAnnotations<im
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -71,16 +72,16 @@ export declare const Mobile: import("@storybook/core/csf").StoryAnnotations<impo
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -98,16 +99,16 @@ export declare const CustomClassName: import("@storybook/core/csf").StoryAnnotat
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
@@ -128,16 +129,16 @@ export declare const DarkMode: import("@storybook/core/csf").StoryAnnotations<im
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
-    className?: string | undefined;
-    entityId?: string | undefined;
+    backButtonName?: string | undefined;
+    onBackButtonClick?: (() => void) | undefined;
     shadow?: import("../../types/shadowType").ShadowType | undefined;
+    hideDownloadButton?: boolean | undefined;
     id?: string | undefined;
+    className?: string | undefined;
+    entityId?: string | undefined;
+    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
-    backButtonName?: string | undefined;
-    onBackButtonClick?: (() => void) | undefined;
     onInvoiceDownloadError?: (() => void) | undefined;
-    onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
-    hideDownloadButton?: boolean | undefined;
     onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
     onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Subscription } from "@bunnyapp/common";
 import "../../styles/index.less";
 export type EditingQuoteDataType = {
@@ -14,7 +15,7 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     onSubscriptionsLoaded?: ((subscriptions: Subscription[]) => void) | undefined;
     styles?: {
         gap?: number | undefined;
-        shadow?: "none" | "sm" | "md" | "lg" | undefined;
+        shadow?: "none" | "lg" | "md" | "sm" | undefined;
         subscriptionProductNameStyle?: import("react").CSSProperties | undefined;
     } | undefined;
     noSubscriptionsComponent?: React.ReactNode;

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const useSendAcceptQuote: ({ entityId, onTokenExpired, quoteId, apiHost, token, }: {
     entityId: string;
     onTokenExpired?: (() => void) | undefined;
     quoteId?: string | undefined;
     apiHost: string;
-    token?: string | undefined;
+    token: string;
 }) => {
     acceptBoxVisible: boolean;
     isAccepting: 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/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/index.d.ts

@@ -207,7 +207,7 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     onSubscriptionsLoaded?: ((subscriptions: Subscription[]) => void) | undefined;
     styles?: {
         gap?: number | undefined;
-        shadow?: "none" | "sm" | "md" | "lg" | undefined;
+        shadow?: "none" | "lg" | "md" | "sm" | undefined;
         subscriptionProductNameStyle?: react.CSSProperties | undefined;
     } | undefined;
     noSubscriptionsComponent?: React.ReactNode;

package/package.json

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