@bunnyapp/components 1.7.0-beta.23 → 1.7.0-beta.25

package/dist/cjs/index.js

@@ -1283,7 +1283,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.22';
+const PACKAGE_VERSION = '1.7.0-beta.24';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20267,36 +20267,63 @@ const useStripePlugin = (plugin, currencyId, accountId) => {
     // Hooks
     const showErrorNotification = useErrorNotification();
     const { token: antdToken } = useAntdToken$1();
-    function getFontFamily() {
-        if (antdToken.fontFamily === 'Inter') {
+    const fontFamily = react.useMemo(() => {
+        const baseFontFamily = antdToken.fontFamily;
+        // If it's the default Inter font, use the CSS variable with fallbacks
+        if (baseFontFamily === 'Inter') {
             return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
         }
-        return antdToken.fontFamily;
-    }
-    const fontFamily = getFontFamily();
-    const appearance = {
-        variables: {
-            fontFamily: fontFamily,
-            fontLineHeight: antdToken.lineHeight.toString(),
-            borderRadius: antdToken.borderRadius.toString() + 'px',
-            colorBackground: 'white',
-            colorPrimary: antdToken.colorPrimary,
-        },
-        rules: {
-            '.Input': {
+        // For custom fonts, ensure we have proper fallbacks
+        // Check if the font family already includes fallbacks (contains a comma)
+        if (baseFontFamily.includes(',')) {
+            return baseFontFamily;
+        }
+        // Add system font fallbacks for custom fonts
+        return `${baseFontFamily}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
+    }, [antdToken.fontFamily]);
+    const options = react.useMemo(() => {
+        const appearance = {
+            variables: {
                 fontFamily: fontFamily,
+                fontLineHeight: antdToken.lineHeight.toString(),
+                borderRadius: antdToken.borderRadius.toString() + 'px',
+                colorBackground: 'white',
+                colorPrimary: antdToken.colorPrimary,
             },
-            '.Label': {
-                fontFamily: fontFamily,
+            rules: {
+                '.Input': {
+                    fontFamily: fontFamily,
+                },
+                '.Label': {
+                    fontFamily: fontFamily,
+                },
+                '.Text': {
+                    fontFamily: fontFamily,
+                },
+                '.Tab': {
+                    fontFamily: fontFamily,
+                },
+                '.TabLabel': {
+                    fontFamily: fontFamily,
+                },
+                '.Error': {
+                    fontFamily: fontFamily,
+                },
             },
-        },
-    };
-    const options = {
-        mode: 'setup',
-        currency: currencyId,
-        setupFutureUsage: 'off_session',
-        appearance,
-    };
+        };
+        return {
+            mode: 'setup',
+            currency: currencyId,
+            setupFutureUsage: 'off_session',
+            appearance,
+        };
+    }, [
+        fontFamily,
+        antdToken.lineHeight,
+        antdToken.borderRadius,
+        antdToken.colorPrimary,
+        currencyId,
+    ]);
     react.useEffect(() => {
         var _a, _b;
         if (!plugin)
@@ -20438,8 +20465,8 @@ function usePay({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, })
                 onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
             }
             else {
-                if (!quoteId) {
-                    showErrorNotification$8('Quote ID is required');
+                if (!quoteId && !(invoice === null || invoice === void 0 ? void 0 : invoice.id)) {
+                    showErrorNotification$8('Quote ID or Invoice ID is required');
                     return;
                 }
                 const response = await checkout({
@@ -21138,12 +21165,13 @@ const useCurrentUserData = (token) => {
     return { currentUser, isCurrentUserDataLoading };
 };
 
-function usePayableCurrency({ payableCurrencyId }) {
+function usePayableCurrency({ payableCurrencyId, accountCurrencyId }) {
+    var _a;
     const token = useToken();
     const { currentUser, isCurrentUserDataLoading } = useCurrentUserData(token);
     const account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
-    const accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
-    const currencyId = react.useMemo(() => { var _a; return (_a = (accountCurrencyId || payableCurrencyId)) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, payableCurrencyId]);
+    const accountCurrencyIdValue = (_a = account === null || account === void 0 ? void 0 : account.currencyId) !== null && _a !== void 0 ? _a : accountCurrencyId;
+    const currencyId = react.useMemo(() => { var _a; return (_a = (accountCurrencyIdValue !== null && accountCurrencyIdValue !== void 0 ? accountCurrencyIdValue : payableCurrencyId)) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyIdValue, payableCurrencyId]);
     return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
 }
 
@@ -21261,11 +21289,13 @@ const PaymentForm_QuoteFragment = t(`
       ...PaymentProvider_QuoteFragment
     }
   `, [PaymentProvider_QuoteFragment]);
-function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
+function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
+    var _a;
     // Read fragments
     const quote = readFragment(PaymentForm_QuoteFragment, maskedQuote);
     const { currencyId, isCurrencyIdLoading } = usePayableCurrency({
-        payableCurrencyId: (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId),
+        payableCurrencyId: (_a = quote === null || quote === void 0 ? void 0 : quote.currencyId) !== null && _a !== void 0 ? _a : invoice === null || invoice === void 0 ? void 0 : invoice.currencyId,
+        accountCurrencyId,
     });
     // Return early because PaymentForm should not be rendered without a valid currency ID.
     // For example, sepa / iDeal may not show for Dutch customer if no currencyId

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

@@ -14,7 +14,8 @@ export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentN
     on: "Quote";
     masked: true;
 }>;
-export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+    currencyId?: string;
     invoice?: FormattedInvoice | Invoice;
     quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
     onPaymentSuccess?: (response: any) => void;

package/dist/cjs/types/src/components/PaymentForm/hooks/usePayableCurrency.d.ts

@@ -1,5 +1,6 @@
-export declare function usePayableCurrency({ payableCurrencyId }: {
+export declare function usePayableCurrency({ payableCurrencyId, accountCurrencyId }: {
     payableCurrencyId?: string;
+    accountCurrencyId?: string;
 }): {
     currencyId: string | undefined;
     isCurrencyIdLoading: boolean;

package/dist/esm/index.js

@@ -1281,7 +1281,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.7.0-beta.22';
+const PACKAGE_VERSION = '1.7.0-beta.24';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20265,36 +20265,63 @@ const useStripePlugin = (plugin, currencyId, accountId) => {
     // Hooks
     const showErrorNotification = useErrorNotification();
     const { token: antdToken } = useAntdToken$1();
-    function getFontFamily() {
-        if (antdToken.fontFamily === 'Inter') {
+    const fontFamily = useMemo(() => {
+        const baseFontFamily = antdToken.fontFamily;
+        // If it's the default Inter font, use the CSS variable with fallbacks
+        if (baseFontFamily === 'Inter') {
             return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
         }
-        return antdToken.fontFamily;
-    }
-    const fontFamily = getFontFamily();
-    const appearance = {
-        variables: {
-            fontFamily: fontFamily,
-            fontLineHeight: antdToken.lineHeight.toString(),
-            borderRadius: antdToken.borderRadius.toString() + 'px',
-            colorBackground: 'white',
-            colorPrimary: antdToken.colorPrimary,
-        },
-        rules: {
-            '.Input': {
+        // For custom fonts, ensure we have proper fallbacks
+        // Check if the font family already includes fallbacks (contains a comma)
+        if (baseFontFamily.includes(',')) {
+            return baseFontFamily;
+        }
+        // Add system font fallbacks for custom fonts
+        return `${baseFontFamily}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
+    }, [antdToken.fontFamily]);
+    const options = useMemo(() => {
+        const appearance = {
+            variables: {
                 fontFamily: fontFamily,
+                fontLineHeight: antdToken.lineHeight.toString(),
+                borderRadius: antdToken.borderRadius.toString() + 'px',
+                colorBackground: 'white',
+                colorPrimary: antdToken.colorPrimary,
             },
-            '.Label': {
-                fontFamily: fontFamily,
+            rules: {
+                '.Input': {
+                    fontFamily: fontFamily,
+                },
+                '.Label': {
+                    fontFamily: fontFamily,
+                },
+                '.Text': {
+                    fontFamily: fontFamily,
+                },
+                '.Tab': {
+                    fontFamily: fontFamily,
+                },
+                '.TabLabel': {
+                    fontFamily: fontFamily,
+                },
+                '.Error': {
+                    fontFamily: fontFamily,
+                },
             },
-        },
-    };
-    const options = {
-        mode: 'setup',
-        currency: currencyId,
-        setupFutureUsage: 'off_session',
-        appearance,
-    };
+        };
+        return {
+            mode: 'setup',
+            currency: currencyId,
+            setupFutureUsage: 'off_session',
+            appearance,
+        };
+    }, [
+        fontFamily,
+        antdToken.lineHeight,
+        antdToken.borderRadius,
+        antdToken.colorPrimary,
+        currencyId,
+    ]);
     useEffect(() => {
         var _a, _b;
         if (!plugin)
@@ -20436,8 +20463,8 @@ function usePay({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, })
                 onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
             }
             else {
-                if (!quoteId) {
-                    showErrorNotification$8('Quote ID is required');
+                if (!quoteId && !(invoice === null || invoice === void 0 ? void 0 : invoice.id)) {
+                    showErrorNotification$8('Quote ID or Invoice ID is required');
                     return;
                 }
                 const response = await checkout({
@@ -21136,12 +21163,13 @@ const useCurrentUserData = (token) => {
     return { currentUser, isCurrentUserDataLoading };
 };
 
-function usePayableCurrency({ payableCurrencyId }) {
+function usePayableCurrency({ payableCurrencyId, accountCurrencyId }) {
+    var _a;
     const token = useToken();
     const { currentUser, isCurrentUserDataLoading } = useCurrentUserData(token);
     const account = currentUser === null || currentUser === void 0 ? void 0 : currentUser.account;
-    const accountCurrencyId = account === null || account === void 0 ? void 0 : account.currencyId;
-    const currencyId = useMemo(() => { var _a; return (_a = (accountCurrencyId || payableCurrencyId)) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyId, payableCurrencyId]);
+    const accountCurrencyIdValue = (_a = account === null || account === void 0 ? void 0 : account.currencyId) !== null && _a !== void 0 ? _a : accountCurrencyId;
+    const currencyId = useMemo(() => { var _a; return (_a = (accountCurrencyIdValue !== null && accountCurrencyIdValue !== void 0 ? accountCurrencyIdValue : payableCurrencyId)) === null || _a === void 0 ? void 0 : _a.toLowerCase(); }, [accountCurrencyIdValue, payableCurrencyId]);
     return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
 }
 
@@ -21259,11 +21287,13 @@ const PaymentForm_QuoteFragment = t(`
       ...PaymentProvider_QuoteFragment
     }
   `, [PaymentProvider_QuoteFragment]);
-function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
+function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
+    var _a;
     // Read fragments
     const quote = readFragment(PaymentForm_QuoteFragment, maskedQuote);
     const { currencyId, isCurrencyIdLoading } = usePayableCurrency({
-        payableCurrencyId: (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId),
+        payableCurrencyId: (_a = quote === null || quote === void 0 ? void 0 : quote.currencyId) !== null && _a !== void 0 ? _a : invoice === null || invoice === void 0 ? void 0 : invoice.currencyId,
+        accountCurrencyId,
     });
     // Return early because PaymentForm should not be rendered without a valid currency ID.
     // For example, sepa / iDeal may not show for Dutch customer if no currencyId

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

@@ -14,7 +14,8 @@ export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentN
     on: "Quote";
     masked: true;
 }>;
-export declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+    currencyId?: string;
     invoice?: FormattedInvoice | Invoice;
     quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
     onPaymentSuccess?: (response: any) => void;

package/dist/esm/types/src/components/PaymentForm/hooks/usePayableCurrency.d.ts

@@ -1,5 +1,6 @@
-export declare function usePayableCurrency({ payableCurrencyId }: {
+export declare function usePayableCurrency({ payableCurrencyId, accountCurrencyId }: {
     payableCurrencyId?: string;
+    accountCurrencyId?: string;
 }): {
     currencyId: string | undefined;
     isCurrencyIdLoading: boolean;

package/dist/index.d.ts

@@ -107,7 +107,8 @@ declare const PaymentForm_QuoteFragment: gql_tada.TadaDocumentNode<{
     on: "Quote";
     masked: true;
 }>;
-declare function PaymentForm({ invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
+    currencyId?: string;
     invoice?: FormattedInvoice | Invoice$1;
     quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
     onPaymentSuccess?: (response: any) => void;

package/package.json

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