@bunnyapp/components 1.0.27 → 1.0.29

package/dist/cjs/index.js

@@ -2070,7 +2070,7 @@ var ActualCheckoutFooter = function (_a) {
     var _b = React.useState(false), isPaying = _b[0], setIsPaying = _b[1];
     var storedPaymentMethod = React.useContext(PaymentContext).storedPaymentMethod;
     var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
+    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
     // Payment hooks
     var payDemoPay = usePay$1({
         onPaymentSuccess: onPaymentSuccess,
@@ -2504,13 +2504,12 @@ var fetchStripeKey = function (plugin, token, apiHost, accountId) { return __awa
     });
 }); };
 pure.loadStripe.setLoadParameters({ advancedFraudSignals: false });
-var useStripePlugin = function (plugin, token, apiHost, accountId) {
+var useStripePlugin = function (plugin, token, apiHost, currencyId, accountId) {
     var _a = React.useState(null), stripe = _a[0], setStripe = _a[1];
     var showErrorNotification = common.useErrorNotification();
     var options = {
         mode: "setup",
-        // TODO: Fetch currency from the entity/account
-        currency: "usd",
+        currency: currencyId,
         setupFutureUsage: "off_session",
     };
     React.useEffect(function () {
@@ -2742,17 +2741,21 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
 
 var Panel = antd.Collapse.Panel;
 var PaymentForm = function (_a) {
-    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction;
+    var _b;
+    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
     // Local state
-    var _b = React.useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
-    var _c = React.useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
+    var _c = React.useState(), selectedPaymentMethod = _c[0], setSelectedPaymentMethod = _c[1];
+    var _d = React.useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[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();
     // Hooks
     var apiHost = React.useContext(BunnyContext).apiHost;
     var token = useToken();
     var storedPaymentMethod = usePaymentMethod(graphQLClient, entityId, overrideToken || token).data;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
+    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
     var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, entityId, accountId);
     var queryClient = reactQuery.useQueryClient();
     // Set default plugin
@@ -2799,15 +2802,15 @@ var PaymentForm = function (_a) {
             overrideToken: overrideToken,
             storedPaymentMethod: storedPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
+        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsxRuntime.jsx("div", __assign({ className: "px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
                         //if not paying and payment method is saved, show Collapse
                         jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? "1" : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "pt-2" }, { children: jsxRuntime.jsxs(antd.Button, __assign({ onClick: function () {
                                                 setShowPaymentMethodForm(true);
                                             }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsx("div", { children: selectedPaymentMethod ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsxRuntime.jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
 };
 function StripeWrapper(_a) {
-    var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
-    var _b = useStripePlugin(plugin, token, apiHost, accountId), stripe = _b.stripe, options = _b.options;
+    var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
+    var _b = useStripePlugin(plugin, token, apiHost, currencyId || "usd", accountId), stripe = _b.stripe, options = _b.options;
     return (jsxRuntime.jsx(reactStripeJs.Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
 
@@ -3635,9 +3638,37 @@ var DrawerHeader = function (_a) {
     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 })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
+// TODO: move this to common
+var billingDetailsQuery = function () {
+    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
+};
+var getBillingDetails = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        query: billingDetailsQuery(),
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    if (response === null || response === void 0 ? void 0 : response.errors) {
+                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
+                    }
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
+            }
+        });
+    });
+};
+
 var PaymentMethod = function (_a) {
-    var entityId = _a.entityId, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
-    var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
+    var _b;
+    var entityId = _a.entityId, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
+    var _e = React.useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient, onTokenExpired = _e.onTokenExpired;
     var token = useToken();
     // Hooks
     var queryClient = reactQuery.useQueryClient();
@@ -3647,8 +3678,13 @@ var PaymentMethod = function (_a) {
     var isMobile = common.useIsMobile();
     var data = usePaymentMethod(graphQLClient, entityId, token).data;
     var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], token, apiHost, entityId);
+    // Queries
+    var _f = reactQuery.useQuery({
+        queryKey: common.QueryKeyFactory.default.billingDetailsKey(token, entityId),
+        queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
+    }), billingDetails = _f.data; _f.isLoading;
     // Local state
-    var _e = React.useState(false), showModal = _e[0], setShowModal = _e[1];
+    var _g = React.useState(false), showModal = _g[0], setShowModal = _g[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.accountPaymentMethodKey(token, entityId),
@@ -3677,7 +3713,7 @@ var PaymentMethod = function (_a) {
                         handleAllErrorFormats(error);
                     }, onPaymentSuccess: function () {
                         onSuccess();
-                    }, graphQLClient: graphQLClient }) }))] })));
+                    }, graphQLClient: graphQLClient, currencyId: (_b = billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.currency) === null || _b === void 0 ? void 0 : _b.id }) }))] })));
 };
 
 var pageWrapperClassName = function (isMobile) {
@@ -4050,8 +4086,8 @@ function InitialSignupForm(_a) {
 
 var Title = antd.Typography.Title, Text$4 = antd.Typography.Text;
 function PaymentSuccessDisplay(_a) {
-    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
 var Text$3 = antd.Typography.Text;
@@ -4171,7 +4207,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(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (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
+    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 }) })) }))] }))) })));
 }
@@ -4830,33 +4866,6 @@ var billingDetailsUpdate = function (_a) {
     });
 };
 
-// TODO: move this to common
-var billingDetailsQuery = function () {
-    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n  }\n}";
-};
-var getBillingDetails = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: billingDetailsQuery(),
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _c.sent();
-                    if (response === null || response === void 0 ? void 0 : response.errors) {
-                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
-                    }
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
-            }
-        });
-    });
-};
-
 var BillingDetails = function (_a) {
     var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
     var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;

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

@@ -1,6 +1,6 @@
 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, }: {
+export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, }: {
     entityId: string;
     invoice?: FormattedInvoice | undefined;
     quote?: Quote | undefined;
@@ -11,4 +11,5 @@ export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess
     overrideToken?: string | undefined;
     graphQLClient: GraphQLClient;
     customCheckoutFunction?: ((plugin: PluginData | undefined) => Promise<any>) | undefined;
+    currencyId?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ export declare const createPaymentIntent: ({ payable, savePaymentMethod, memo, p
     token: string;
     apiHost: string;
 }) => Promise<any>;
-export declare const useStripePlugin: (plugin: PluginData | undefined, token: string, apiHost: string, accountId?: string) => {
+export declare const useStripePlugin: (plugin: PluginData | undefined, token: string, apiHost: string, currencyId: string, accountId?: string) => {
     stripe: Stripe | null;
     options: {
         mode: "setup";

package/dist/cjs/src/components/Signup/PaymentSuccess.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-export default function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, }: {
+export default function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, currencyId, }: {
     amountPaid: number;
     className: string;
     companyName: string;
     returnUrl?: string;
     style?: React.CSSProperties;
+    currencyId: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/types/billingDetails.d.ts

@@ -1,3 +1,4 @@
+import { Currency } from "@bunnyapp/common";
 export default interface BillingDetails {
     name?: string;
     billingCity?: string;
@@ -9,4 +10,5 @@ export default interface BillingDetails {
     billingStreet?: string;
     billingZip?: string;
     taxNumber?: string;
+    currency?: Currency;
 }

package/dist/esm/index.js

@@ -2042,7 +2042,7 @@ var ActualCheckoutFooter = function (_a) {
     var _b = useState(false), isPaying = _b[0], setIsPaying = _b[1];
     var storedPaymentMethod = useContext(PaymentContext).storedPaymentMethod;
     var amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
-    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency);
+    var currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
     // Payment hooks
     var payDemoPay = usePay$1({
         onPaymentSuccess: onPaymentSuccess,
@@ -2476,13 +2476,12 @@ var fetchStripeKey = function (plugin, token, apiHost, accountId) { return __awa
     });
 }); };
 loadStripe.setLoadParameters({ advancedFraudSignals: false });
-var useStripePlugin = function (plugin, token, apiHost, accountId) {
+var useStripePlugin = function (plugin, token, apiHost, currencyId, accountId) {
     var _a = useState(null), stripe = _a[0], setStripe = _a[1];
     var showErrorNotification = useErrorNotification();
     var options = {
         mode: "setup",
-        // TODO: Fetch currency from the entity/account
-        currency: "usd",
+        currency: currencyId,
         setupFutureUsage: "off_session",
     };
     useEffect(function () {
@@ -2714,17 +2713,21 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
 
 var Panel = Collapse.Panel;
 var PaymentForm = function (_a) {
-    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction;
+    var _b;
+    var entityId = _a.entityId, invoice = _a.invoice, onFail = _a.onFail, onPaymentSuccess = _a.onPaymentSuccess, quote = _a.quote, accountId = _a.accountId, onSavePaymentMethod = _a.onSavePaymentMethod, overrideToken = _a.overrideToken, graphQLClient = _a.graphQLClient, customCheckoutFunction = _a.customCheckoutFunction, currencyIdFromProps = _a.currencyId;
     // Local state
-    var _b = useState(), selectedPaymentMethod = _b[0], setSelectedPaymentMethod = _b[1];
-    var _c = useState(false), showPaymentMethodForm = _c[0], setShowPaymentMethodForm = _c[1];
+    var _c = useState(), selectedPaymentMethod = _c[0], setSelectedPaymentMethod = _c[1];
+    var _d = useState(false), showPaymentMethodForm = _d[0], setShowPaymentMethodForm = _d[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();
     // Hooks
     var apiHost = useContext(BunnyContext).apiHost;
     var token = useToken();
     var storedPaymentMethod = usePaymentMethod(graphQLClient, entityId, overrideToken || token).data;
     var isPaymentMethodFetched = storedPaymentMethod !== undefined;
-    var _d = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _d.paymentMethodAllowedPlugins, arePluginsFetched = _d.isFetched;
+    var _e = usePaymentPlugins({ entityId: entityId, apiHost: apiHost, token: overrideToken || token }), paymentMethodAllowedPlugins = _e.paymentMethodAllowedPlugins, arePluginsFetched = _e.isFetched;
     var onClickRemove = useRemovePaymentMethod(paymentMethodAllowedPlugins || [], overrideToken || token, apiHost, entityId, accountId);
     var queryClient = useQueryClient();
     // Set default plugin
@@ -2771,15 +2774,15 @@ var PaymentForm = function (_a) {
             overrideToken: overrideToken,
             storedPaymentMethod: storedPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, accountId: accountId }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "px-4" }, { children: jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
+        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectedPaymentMethod, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "flex flex-col gap-0 w-full" }, { children: jsxs(Fragment, { children: [jsx("div", __assign({ className: "px-4" }, { children: jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(storedPaymentMethod); }, paymentMethodData: storedPaymentMethod }) })), paying && storedPaymentMethod ? (jsx("div", __assign({ className: "px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, plugin: selectedPaymentMethod }) }))) : (
                         //if not paying and payment method is saved, show Collapse
                         jsx(Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? "1" : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsx(Panel, __assign({ header: jsx(Fragment, { children: !showPaymentMethodForm ? (jsx("div", __assign({ className: "pt-2" }, { children: jsxs(Button, __assign({ onClick: function () {
                                                 setShowPaymentMethodForm(true);
                                             }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsx("div", { children: selectedPaymentMethod ? (jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsx("div", __assign({ className: "flex flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
 };
 function StripeWrapper(_a) {
-    var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
-    var _b = useStripePlugin(plugin, token, apiHost, accountId), stripe = _b.stripe, options = _b.options;
+    var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
+    var _b = useStripePlugin(plugin, token, apiHost, currencyId || "usd", accountId), stripe = _b.stripe, options = _b.options;
     return (jsx(Elements, __assign({ options: options, stripe: stripe }, { children: children })));
 }
 
@@ -3607,9 +3610,37 @@ var DrawerHeader = function (_a) {
     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 })), jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsx(CloseOutlined$1, {}) }))] })), description && jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
+// TODO: move this to common
+var billingDetailsQuery = function () {
+    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n    currency {\n      id\n    }\n  }\n}";
+};
+var getBillingDetails = function (_a) {
+    var token = _a.token, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, gqlRequest({
+                        query: billingDetailsQuery(),
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _c.sent();
+                    if (response === null || response === void 0 ? void 0 : response.errors) {
+                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
+                    }
+                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
+            }
+        });
+    });
+};
+
 var PaymentMethod = function (_a) {
-    var entityId = _a.entityId, className = _a.className, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient, onTokenExpired = _d.onTokenExpired;
+    var _b;
+    var entityId = _a.entityId, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
+    var _e = useContext(BunnyContext), apiHost = _e.apiHost, graphQLClient = _e.graphQLClient, onTokenExpired = _e.onTokenExpired;
     var token = useToken();
     // Hooks
     var queryClient = useQueryClient();
@@ -3619,8 +3650,13 @@ var PaymentMethod = function (_a) {
     var isMobile = useIsMobile();
     var data = usePaymentMethod(graphQLClient, entityId, token).data;
     var onClickRemove = useRemovePaymentMethod(paymentPlugins || [], token, apiHost, entityId);
+    // Queries
+    var _f = useQuery({
+        queryKey: QueryKeyFactory.default.billingDetailsKey(token, entityId),
+        queryFn: function () { return getBillingDetails({ token: token, apiHost: apiHost }); },
+    }), billingDetails = _f.data; _f.isLoading;
     // Local state
-    var _e = useState(false), showModal = _e[0], setShowModal = _e[1];
+    var _g = useState(false), showModal = _g[0], setShowModal = _g[1];
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.accountPaymentMethodKey(token, entityId),
@@ -3649,7 +3685,7 @@ var PaymentMethod = function (_a) {
                         handleAllErrorFormats(error);
                     }, onPaymentSuccess: function () {
                         onSuccess();
-                    }, graphQLClient: graphQLClient }) }))] })));
+                    }, graphQLClient: graphQLClient, currencyId: (_b = billingDetails === null || billingDetails === void 0 ? void 0 : billingDetails.currency) === null || _b === void 0 ? void 0 : _b.id }) }))] })));
 };
 
 var pageWrapperClassName = function (isMobile) {
@@ -4022,8 +4058,8 @@ function InitialSignupForm(_a) {
 
 var Title = Typography.Title, Text$4 = Typography.Text;
 function PaymentSuccessDisplay(_a) {
-    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style;
-    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, "USD"), " successful"] })), returnUrl && (jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
+    return (jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsx(CheckCircleFilled$1, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
 var Text$3 = Typography.Text;
@@ -4143,7 +4179,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(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl })) : (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
+    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 }) })) }))] }))) })));
 }
@@ -4802,33 +4838,6 @@ var billingDetailsUpdate = function (_a) {
     });
 };
 
-// TODO: move this to common
-var billingDetailsQuery = function () {
-    return "\nquery BillingDetails {\n  billingDetails {\n    billingCity\n    billingContact {\n      email\n    }\n    billingCountry\n    billingState\n    billingStreet\n    billingZip\n    name\n    taxNumber\n  }\n}";
-};
-var getBillingDetails = function (_a) {
-    var token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        var _b;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0: return [4 /*yield*/, gqlRequest({
-                        query: billingDetailsQuery(),
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _c.sent();
-                    if (response === null || response === void 0 ? void 0 : response.errors) {
-                        throw new Error((_b = response === null || response === void 0 ? void 0 : response.errors[0]) === null || _b === void 0 ? void 0 : _b.message);
-                    }
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.billingDetails];
-            }
-        });
-    });
-};
-
 var BillingDetails = function (_a) {
     var entityId = _a.entityId, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, className = _a.className, hidePaymentMethodForm = _a.hidePaymentMethodForm, countryListFilter = _a.countryListFilter;
     var _d = useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired, graphQLClient = _d.graphQLClient;

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

@@ -1,6 +1,6 @@
 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, }: {
+export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess, quote, accountId, onSavePaymentMethod, overrideToken, graphQLClient, customCheckoutFunction, currencyId: currencyIdFromProps, }: {
     entityId: string;
     invoice?: FormattedInvoice | undefined;
     quote?: Quote | undefined;
@@ -11,4 +11,5 @@ export declare const PaymentForm: ({ entityId, invoice, onFail, onPaymentSuccess
     overrideToken?: string | undefined;
     graphQLClient: GraphQLClient;
     customCheckoutFunction?: ((plugin: PluginData | undefined) => Promise<any>) | undefined;
+    currencyId?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,7 +16,7 @@ export declare const createPaymentIntent: ({ payable, savePaymentMethod, memo, p
     token: string;
     apiHost: string;
 }) => Promise<any>;
-export declare const useStripePlugin: (plugin: PluginData | undefined, token: string, apiHost: string, accountId?: string) => {
+export declare const useStripePlugin: (plugin: PluginData | undefined, token: string, apiHost: string, currencyId: string, accountId?: string) => {
     stripe: Stripe | null;
     options: {
         mode: "setup";

package/dist/esm/src/components/Signup/PaymentSuccess.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-export default function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, }: {
+export default function PaymentSuccessDisplay({ amountPaid, className, companyName, returnUrl, style, currencyId, }: {
     amountPaid: number;
     className: string;
     companyName: string;
     returnUrl?: string;
     style?: React.CSSProperties;
+    currencyId: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/types/billingDetails.d.ts

@@ -1,3 +1,4 @@
+import { Currency } from "@bunnyapp/common";
 export default interface BillingDetails {
     name?: string;
     billingCity?: string;
@@ -9,4 +10,5 @@ export default interface BillingDetails {
     billingStreet?: string;
     billingZip?: string;
     taxNumber?: string;
+    currency?: Currency;
 }

package/package.json

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