@bunnyapp/components 1.0.28 → 1.0.31

package/dist/cjs/index.js

@@ -2742,12 +2742,14 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
 var Panel = antd.Collapse.Panel;
 var PaymentForm = function (_a) {
     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;
+    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 _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))) === 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 token = useToken();
@@ -2794,9 +2796,6 @@ var PaymentForm = function (_a) {
         onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
         setShowPaymentMethodForm(false);
     };
-    if (!currencyId) {
-        return jsxRuntime.jsx("div", { children: "No currency id found from quote or invoice" });
-    }
     return (jsxRuntime.jsx(PaymentContext.Provider, __assign({ value: {
             onClickCancel: function () { return setShowPaymentMethodForm(false); },
             accountId: accountId,
@@ -2811,7 +2810,7 @@ var PaymentForm = function (_a) {
 };
 function StripeWrapper(_a) {
     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, accountId), stripe = _b.stripe, options = _b.options;
+    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 })));
 }
 
@@ -3639,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();
@@ -3651,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),
@@ -3681,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) {
@@ -4572,9 +4604,11 @@ var SubscriptionChargeTotal = function (_a) {
     var currencyId = subscription.currencyId;
     var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
     var formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
-    return (jsxRuntime.jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
-            ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
-            : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.chargeType === common.ChargeType.USAGE || charge.trial
+            ? "-"
+            : charge.kind === common.SubscriptionChargeKind.DISCOUNT
+                ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
+                : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
 
 var SubscriptionChargeUnitPrice = function (_a) {
@@ -4585,19 +4619,21 @@ var SubscriptionChargeUnitPrice = function (_a) {
     var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === common.SubscriptionChargeKind.DISCOUNT;
     if (displayPriceTiers)
         return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
-                var _a, _b;
+                var _a;
                 return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 p-2", style: {
                         backgroundColor: darkMode
                             ? "var(--row-background-dark)"
                             : "var(--row-background)",
-                    } }, { children: jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b.map(function (tier, index) {
-                            var _a, _b, _c, _d, _e;
-                            var ends = ((_c = (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b[index + 1]) === null || _c === void 0 ? void 0 : _c.starts)
-                                ? ((_e = (_d = charge.priceListCharge) === null || _d === void 0 ? void 0 : _d.priceListChargeTiers[index + 1]) === null || _e === void 0 ? void 0 : _e.starts) - 1
+                    } }, { children: jsxRuntime.jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
+                            var _a, _b, _c;
+                            var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
+                                ? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
                                 : "∞";
-                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
+                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
                         }) })) })));
             }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
+    else if (charge.chargeType === common.ChargeType.USAGE || charge.trial)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "-" });
     else if (isDiscount)
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
     else
@@ -4834,33 +4870,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/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

@@ -4,7 +4,7 @@ import React__default, { createContext, useContext, useEffect, useState, useMemo
 import { Markup } from 'interweave';
 import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown, Skeleton } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, PricingModel, ChargeType } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, useAllErrorFormats, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useErrorNotification, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, ChargeType, PricingModel } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme';
 import { RecoilRoot } from 'recoil';
@@ -2714,12 +2714,14 @@ function useRemovePaymentMethod(paymentPlugins, token, apiHost, entityId, accoun
 var Panel = Collapse.Panel;
 var PaymentForm = function (_a) {
     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;
+    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 _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))) === 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 token = useToken();
@@ -2766,9 +2768,6 @@ var PaymentForm = function (_a) {
         onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod();
         setShowPaymentMethodForm(false);
     };
-    if (!currencyId) {
-        return jsx("div", { children: "No currency id found from quote or invoice" });
-    }
     return (jsx(PaymentContext.Provider, __assign({ value: {
             onClickCancel: function () { return setShowPaymentMethodForm(false); },
             accountId: accountId,
@@ -2783,7 +2782,7 @@ var PaymentForm = function (_a) {
 };
 function StripeWrapper(_a) {
     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, accountId), stripe = _b.stripe, options = _b.options;
+    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 })));
 }
 
@@ -3611,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();
@@ -3623,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),
@@ -3653,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) {
@@ -4544,9 +4576,11 @@ var SubscriptionChargeTotal = function (_a) {
     var currencyId = subscription.currencyId;
     var formattedDiscountedPrice = formatCurrency(charge.price, currencyId);
     var formattedPeriodPrice = formatCurrency(charge.periodPrice, currencyId);
-    return (jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.kind === SubscriptionChargeKind.DISCOUNT
-            ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
-            : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
+    return (jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.chargeType === ChargeType.USAGE || charge.trial
+            ? "-"
+            : charge.kind === SubscriptionChargeKind.DISCOUNT
+                ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
+                : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
 
 var SubscriptionChargeUnitPrice = function (_a) {
@@ -4557,19 +4591,21 @@ var SubscriptionChargeUnitPrice = function (_a) {
     var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === SubscriptionChargeKind.DISCOUNT;
     if (displayPriceTiers)
         return (jsx(Dropdown, __assign({ dropdownRender: function () {
-                var _a, _b;
+                var _a;
                 return (jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 p-2", style: {
                         backgroundColor: darkMode
                             ? "var(--row-background-dark)"
                             : "var(--row-background)",
-                    } }, { children: jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b.map(function (tier, index) {
-                            var _a, _b, _c, _d, _e;
-                            var ends = ((_c = (_b = (_a = charge.priceListCharge) === null || _a === void 0 ? void 0 : _a.priceListChargeTiers) === null || _b === void 0 ? void 0 : _b[index + 1]) === null || _c === void 0 ? void 0 : _c.starts)
-                                ? ((_e = (_d = charge.priceListCharge) === null || _d === void 0 ? void 0 : _d.priceListChargeTiers[index + 1]) === null || _e === void 0 ? void 0 : _e.starts) - 1
+                    } }, { children: jsx("div", __assign({ className: "grid grid-cols-2", style: { columnGap: "0.5rem" } }, { children: (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a.map(function (tier, index) {
+                            var _a, _b, _c;
+                            var ends = ((_b = (_a = charge.priceTiers) === null || _a === void 0 ? void 0 : _a[index + 1]) === null || _b === void 0 ? void 0 : _b.starts)
+                                ? ((_c = charge.priceTiers[index + 1]) === null || _c === void 0 ? void 0 : _c.starts) - 1
                                 : "∞";
-                            return (jsxs("div", __assign({ className: "contents" }, { children: [jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
+                            return (jsxs("div", __assign({ className: "contents" }, { children: [jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " :"] })), jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
                         }) })) })));
             }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
+    else if (charge.chargeType === ChargeType.USAGE || charge.trial)
+        return jsx(Fragment, { children: "-" });
     else if (isDiscount)
         return (jsxs(Fragment, { children: ["-", formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
     else
@@ -4806,33 +4842,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/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.28",
+  "version": "1.0.31",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",