@bunnyapp/components 1.7.0-beta.24 → 1.7.0-beta.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/index.js +71 -44
  2. package/dist/cjs/types/src/components/PaymentForm/PaymentForm.d.ts +2 -2
  3. package/dist/cjs/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts +1 -1
  4. package/dist/esm/index.js +71 -44
  5. package/dist/esm/types/src/components/PaymentForm/PaymentForm.d.ts +2 -2
  6. package/dist/esm/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts +1 -1
  7. package/dist/index.d.ts +2 -2
  8. package/package.json +1 -1
package/dist/cjs/index.js CHANGED
@@ -1283,7 +1283,7 @@ const DEFAULT_CONFIG = {
1283
1283
  };
1284
1284
 
1285
1285
  // This will be replaced at build time by rollup-plugin-replace
1286
- const PACKAGE_VERSION = '1.7.0-beta.23';
1286
+ const PACKAGE_VERSION = '1.7.0-beta.25';
1287
1287
  const createRequestHeaders = (token) => {
1288
1288
  const headers = createClientDevHeaders({ token });
1289
1289
  // Add the components version header
@@ -20267,36 +20267,63 @@ const useStripePlugin = (plugin, currencyId, accountId) => {
20267
20267
  // Hooks
20268
20268
  const showErrorNotification = useErrorNotification();
20269
20269
  const { token: antdToken } = useAntdToken$1();
20270
- function getFontFamily() {
20271
- if (antdToken.fontFamily === 'Inter') {
20270
+ const fontFamily = react.useMemo(() => {
20271
+ const baseFontFamily = antdToken.fontFamily;
20272
+ // If it's the default Inter font, use the CSS variable with fallbacks
20273
+ if (baseFontFamily === 'Inter') {
20272
20274
  return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
20273
20275
  }
20274
- return antdToken.fontFamily;
20275
- }
20276
- const fontFamily = getFontFamily();
20277
- const appearance = {
20278
- variables: {
20279
- fontFamily: fontFamily,
20280
- fontLineHeight: antdToken.lineHeight.toString(),
20281
- borderRadius: antdToken.borderRadius.toString() + 'px',
20282
- colorBackground: 'white',
20283
- colorPrimary: antdToken.colorPrimary,
20284
- },
20285
- rules: {
20286
- '.Input': {
20276
+ // For custom fonts, ensure we have proper fallbacks
20277
+ // Check if the font family already includes fallbacks (contains a comma)
20278
+ if (baseFontFamily.includes(',')) {
20279
+ return baseFontFamily;
20280
+ }
20281
+ // Add system font fallbacks for custom fonts
20282
+ return `${baseFontFamily}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
20283
+ }, [antdToken.fontFamily]);
20284
+ const options = react.useMemo(() => {
20285
+ const appearance = {
20286
+ variables: {
20287
20287
  fontFamily: fontFamily,
20288
+ fontLineHeight: antdToken.lineHeight.toString(),
20289
+ borderRadius: antdToken.borderRadius.toString() + 'px',
20290
+ colorBackground: 'white',
20291
+ colorPrimary: antdToken.colorPrimary,
20288
20292
  },
20289
- '.Label': {
20290
- fontFamily: fontFamily,
20293
+ rules: {
20294
+ '.Input': {
20295
+ fontFamily: fontFamily,
20296
+ },
20297
+ '.Label': {
20298
+ fontFamily: fontFamily,
20299
+ },
20300
+ '.Text': {
20301
+ fontFamily: fontFamily,
20302
+ },
20303
+ '.Tab': {
20304
+ fontFamily: fontFamily,
20305
+ },
20306
+ '.TabLabel': {
20307
+ fontFamily: fontFamily,
20308
+ },
20309
+ '.Error': {
20310
+ fontFamily: fontFamily,
20311
+ },
20291
20312
  },
20292
- },
20293
- };
20294
- const options = {
20295
- mode: 'setup',
20296
- currency: currencyId,
20297
- setupFutureUsage: 'off_session',
20298
- appearance,
20299
- };
20313
+ };
20314
+ return {
20315
+ mode: 'setup',
20316
+ currency: currencyId,
20317
+ setupFutureUsage: 'off_session',
20318
+ appearance,
20319
+ };
20320
+ }, [
20321
+ fontFamily,
20322
+ antdToken.lineHeight,
20323
+ antdToken.borderRadius,
20324
+ antdToken.colorPrimary,
20325
+ currencyId,
20326
+ ]);
20300
20327
  react.useEffect(() => {
20301
20328
  var _a, _b;
20302
20329
  if (!plugin)
@@ -20438,8 +20465,8 @@ function usePay({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, })
20438
20465
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
20439
20466
  }
20440
20467
  else {
20441
- if (!quoteId) {
20442
- showErrorNotification$8('Quote ID is required');
20468
+ if (!quoteId && !(invoice === null || invoice === void 0 ? void 0 : invoice.id)) {
20469
+ showErrorNotification$8('Quote ID or Invoice ID is required');
20443
20470
  return;
20444
20471
  }
20445
20472
  const response = await checkout({
@@ -21148,7 +21175,7 @@ function usePayableCurrency({ payableCurrencyId, accountCurrencyId }) {
21148
21175
  return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
21149
21176
  }
21150
21177
 
21151
- function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21178
+ function useRemovePaymentMethod(onPaymentMethodRemoved, onError) {
21152
21179
  const queryClient = reactQuery.useQueryClient();
21153
21180
  const showErrorNotification = useErrorNotification();
21154
21181
  const showSuccessNotification = useSuccessNotification();
@@ -21177,7 +21204,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21177
21204
  accountId,
21178
21205
  }),
21179
21206
  });
21180
- onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(data);
21207
+ onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(data);
21181
21208
  })
21182
21209
  .catch((error) => {
21183
21210
  showErrorNotification(error.message, 'Error removing payment method');
@@ -21191,7 +21218,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21191
21218
  });
21192
21219
  onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
21193
21220
  }
21194
- }, [paymentPlugins, token, apiHost, queryClient, onRemovePaymentMethod, accountId, onError]);
21221
+ }, [paymentPlugins, token, apiHost, queryClient, onPaymentMethodRemoved, accountId, onError]);
21195
21222
  return removePaymentMethod;
21196
21223
  }
21197
21224
 
@@ -21262,7 +21289,7 @@ const PaymentForm_QuoteFragment = t(`
21262
21289
  ...PaymentProvider_QuoteFragment
21263
21290
  }
21264
21291
  `, [PaymentProvider_QuoteFragment]);
21265
- function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
21292
+ function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
21266
21293
  var _a;
21267
21294
  // Read fragments
21268
21295
  const quote = readFragment(PaymentForm_QuoteFragment, maskedQuote);
@@ -21283,9 +21310,9 @@ function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuot
21283
21310
  [ShowPaymentDetailsProvider, { value: undefined }],
21284
21311
  [CustomCheckoutFunctionProvider, { value: customCheckoutFunction }],
21285
21312
  ];
21286
- return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), jsxRuntime.jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsxRuntime.jsx(SelectedPluginProvider, { accountId: accountId, children: jsxRuntime.jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsxRuntime.jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsxRuntime.jsx(PaymentFormContent, { onRemovePaymentMethod: onRemovePaymentMethod, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
21313
+ return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), jsxRuntime.jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsxRuntime.jsx(SelectedPluginProvider, { accountId: accountId, children: jsxRuntime.jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsxRuntime.jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsxRuntime.jsx(PaymentFormContent, { onPaymentMethodRemoved: onPaymentMethodRemoved, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
21287
21314
  }
21288
- function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod, }) {
21315
+ function PaymentFormContent({ onPaymentMethodRemoved, onSetDefaultPaymentMethod, }) {
21289
21316
  // Context
21290
21317
  const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
21291
21318
  const paymentType = usePaymentType();
@@ -21312,7 +21339,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
21312
21339
  setDefaultPaymentMethodLoading,
21313
21340
  enabled: !!paymentPlugins,
21314
21341
  });
21315
- const onClickRemove = useRemovePaymentMethod(onRemovePaymentMethod, message => {
21342
+ const onClickRemove = useRemovePaymentMethod(onPaymentMethodRemoved, message => {
21316
21343
  showErrorNotification$5(message, 'Error removing payment method');
21317
21344
  });
21318
21345
  function handleClickAddPaymentMethod() {
@@ -21540,9 +21567,9 @@ function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonCl
21540
21567
  className,
21541
21568
  hideDownloadButton,
21542
21569
  onInvoiceLoaded,
21543
- }, children: jsxRuntime.jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onRemovePaymentMethod: onPaymentMethodRemoved }) }));
21570
+ }, children: jsxRuntime.jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onPaymentMethodRemoved: onPaymentMethodRemoved }) }));
21544
21571
  }
21545
- function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMethod }) {
21572
+ function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onPaymentMethodRemoved, }) {
21546
21573
  // Context
21547
21574
  const queryClient = reactQuery.useQueryClient();
21548
21575
  const { id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onPaymentSuccess, className, } = react.useContext(InvoiceQuoteContext);
@@ -21580,10 +21607,10 @@ function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMe
21580
21607
  }, [formattedInvoice]);
21581
21608
  if (!formattedInvoice)
21582
21609
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
21583
- return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: (paymentMethodId) => {
21610
+ return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: paymentMethodId => {
21584
21611
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(paymentMethodId);
21585
- }, onRemovePaymentMethod: (paymentMethod) => {
21586
- onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(paymentMethod.id);
21612
+ }, onPaymentMethodRemoved: paymentMethod => {
21613
+ onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id);
21587
21614
  } }) }))] }) }));
21588
21615
  }
21589
21616
 
@@ -23606,7 +23633,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
23606
23633
  }
23607
23634
  if (taxationRequiredAccountFields)
23608
23635
  return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsxRuntime.jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
23609
- return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
23636
+ return (jsxRuntime.jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: upgradingSubscription &&
23610
23637
  shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsxRuntime.jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsxRuntime.jsx(antd.Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
23611
23638
  couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
23612
23639
  var _a;
@@ -23697,13 +23724,13 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
23697
23724
  return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
23698
23725
  bunny-overflow-auto bunny-height-full`, style: {
23699
23726
  zIndex: 1001,
23700
- }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
23727
+ }, children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsxRuntime.jsx(icons.CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsxRuntime.jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsxRuntime.jsx(antd.Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsxRuntime.jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsxRuntime.jsx(QuoteCheckout, { account: account, onFail: error => {
23701
23728
  onFail(error);
23702
23729
  }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
23703
23730
  if (recalculateTaxesEnabled) {
23704
23731
  await recalculateTaxes();
23705
23732
  }
23706
- } })) : (jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
23733
+ } })) : (jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsxRuntime.jsx(Footer, { className: "bunny-px-12" })] }) }));
23707
23734
  };
23708
23735
 
23709
23736
  function canEditChargeQuantity(charge) {
@@ -29619,7 +29646,7 @@ const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSave
29619
29646
  // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
29620
29647
  // and work with both stripe and demo pay requests
29621
29648
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response.savedPaymentMethodResponse.paymentMethodId);
29622
- }, onRemovePaymentMethod: (response) => {
29649
+ }, onPaymentMethodRemoved: response => {
29623
29650
  onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(response.id);
29624
29651
  } }) }));
29625
29652
  };
package/dist/cjs/types/src/components/PaymentForm/PaymentForm.d.ts CHANGED
@@ -14,14 +14,14 @@ export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentN
14
14
  on: "Quote";
15
15
  masked: true;
16
16
  }>;
17
- export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
17
+ export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
18
18
  currencyId?: string;
19
19
  invoice?: FormattedInvoice | Invoice;
20
20
  quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
21
21
  onPaymentSuccess?: (response: any) => void;
22
22
  onPaymentHoldSuccess?: (response: any) => void;
23
23
  onSavePaymentMethod?: (response: any) => void;
24
- onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
24
+ onPaymentMethodRemoved?: (paymentMethod: PaymentMethodFragment) => void;
25
25
  onSetDefaultPaymentMethod?: () => void;
26
26
  accountId?: string;
27
27
  overrideToken?: string;
package/dist/cjs/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ResultOf } from 'gql.tada';
2
2
  import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
3
3
  type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
4
- declare function useRemovePaymentMethod(onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
4
+ declare function useRemovePaymentMethod(onPaymentMethodRemoved?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
5
5
  export default useRemovePaymentMethod;
package/dist/esm/index.js CHANGED
@@ -1281,7 +1281,7 @@ const DEFAULT_CONFIG = {
1281
1281
  };
1282
1282
 
1283
1283
  // This will be replaced at build time by rollup-plugin-replace
1284
- const PACKAGE_VERSION = '1.7.0-beta.23';
1284
+ const PACKAGE_VERSION = '1.7.0-beta.25';
1285
1285
  const createRequestHeaders = (token) => {
1286
1286
  const headers = createClientDevHeaders({ token });
1287
1287
  // Add the components version header
@@ -20265,36 +20265,63 @@ const useStripePlugin = (plugin, currencyId, accountId) => {
20265
20265
  // Hooks
20266
20266
  const showErrorNotification = useErrorNotification();
20267
20267
  const { token: antdToken } = useAntdToken$1();
20268
- function getFontFamily() {
20269
- if (antdToken.fontFamily === 'Inter') {
20268
+ const fontFamily = useMemo(() => {
20269
+ const baseFontFamily = antdToken.fontFamily;
20270
+ // If it's the default Inter font, use the CSS variable with fallbacks
20271
+ if (baseFontFamily === 'Inter') {
20270
20272
  return 'var(--font-inter, Inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
20271
20273
  }
20272
- return antdToken.fontFamily;
20273
- }
20274
- const fontFamily = getFontFamily();
20275
- const appearance = {
20276
- variables: {
20277
- fontFamily: fontFamily,
20278
- fontLineHeight: antdToken.lineHeight.toString(),
20279
- borderRadius: antdToken.borderRadius.toString() + 'px',
20280
- colorBackground: 'white',
20281
- colorPrimary: antdToken.colorPrimary,
20282
- },
20283
- rules: {
20284
- '.Input': {
20274
+ // For custom fonts, ensure we have proper fallbacks
20275
+ // Check if the font family already includes fallbacks (contains a comma)
20276
+ if (baseFontFamily.includes(',')) {
20277
+ return baseFontFamily;
20278
+ }
20279
+ // Add system font fallbacks for custom fonts
20280
+ return `${baseFontFamily}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
20281
+ }, [antdToken.fontFamily]);
20282
+ const options = useMemo(() => {
20283
+ const appearance = {
20284
+ variables: {
20285
20285
  fontFamily: fontFamily,
20286
+ fontLineHeight: antdToken.lineHeight.toString(),
20287
+ borderRadius: antdToken.borderRadius.toString() + 'px',
20288
+ colorBackground: 'white',
20289
+ colorPrimary: antdToken.colorPrimary,
20286
20290
  },
20287
- '.Label': {
20288
- fontFamily: fontFamily,
20291
+ rules: {
20292
+ '.Input': {
20293
+ fontFamily: fontFamily,
20294
+ },
20295
+ '.Label': {
20296
+ fontFamily: fontFamily,
20297
+ },
20298
+ '.Text': {
20299
+ fontFamily: fontFamily,
20300
+ },
20301
+ '.Tab': {
20302
+ fontFamily: fontFamily,
20303
+ },
20304
+ '.TabLabel': {
20305
+ fontFamily: fontFamily,
20306
+ },
20307
+ '.Error': {
20308
+ fontFamily: fontFamily,
20309
+ },
20289
20310
  },
20290
- },
20291
- };
20292
- const options = {
20293
- mode: 'setup',
20294
- currency: currencyId,
20295
- setupFutureUsage: 'off_session',
20296
- appearance,
20297
- };
20311
+ };
20312
+ return {
20313
+ mode: 'setup',
20314
+ currency: currencyId,
20315
+ setupFutureUsage: 'off_session',
20316
+ appearance,
20317
+ };
20318
+ }, [
20319
+ fontFamily,
20320
+ antdToken.lineHeight,
20321
+ antdToken.borderRadius,
20322
+ antdToken.colorPrimary,
20323
+ currencyId,
20324
+ ]);
20298
20325
  useEffect(() => {
20299
20326
  var _a, _b;
20300
20327
  if (!plugin)
@@ -20436,8 +20463,8 @@ function usePay({ onPaymentSuccess, onPaymentError, quoteId, invoice, plugin, })
20436
20463
  onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
20437
20464
  }
20438
20465
  else {
20439
- if (!quoteId) {
20440
- showErrorNotification$8('Quote ID is required');
20466
+ if (!quoteId && !(invoice === null || invoice === void 0 ? void 0 : invoice.id)) {
20467
+ showErrorNotification$8('Quote ID or Invoice ID is required');
20441
20468
  return;
20442
20469
  }
20443
20470
  const response = await checkout({
@@ -21146,7 +21173,7 @@ function usePayableCurrency({ payableCurrencyId, accountCurrencyId }) {
21146
21173
  return { currencyId, isCurrencyIdLoading: isCurrentUserDataLoading };
21147
21174
  }
21148
21175
 
21149
- function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21176
+ function useRemovePaymentMethod(onPaymentMethodRemoved, onError) {
21150
21177
  const queryClient = useQueryClient();
21151
21178
  const showErrorNotification = useErrorNotification();
21152
21179
  const showSuccessNotification = useSuccessNotification();
@@ -21175,7 +21202,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21175
21202
  accountId,
21176
21203
  }),
21177
21204
  });
21178
- onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(data);
21205
+ onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(data);
21179
21206
  })
21180
21207
  .catch((error) => {
21181
21208
  showErrorNotification(error.message, 'Error removing payment method');
@@ -21189,7 +21216,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
21189
21216
  });
21190
21217
  onError === null || onError === void 0 ? void 0 : onError(`Either the payment method was not found or the plugin was not present. Available plugins: ${availablePlugins === null || availablePlugins === void 0 ? void 0 : availablePlugins.join(', ')}`);
21191
21218
  }
21192
- }, [paymentPlugins, token, apiHost, queryClient, onRemovePaymentMethod, accountId, onError]);
21219
+ }, [paymentPlugins, token, apiHost, queryClient, onPaymentMethodRemoved, accountId, onError]);
21193
21220
  return removePaymentMethod;
21194
21221
  }
21195
21222
 
@@ -21260,7 +21287,7 @@ const PaymentForm_QuoteFragment = t(`
21260
21287
  ...PaymentProvider_QuoteFragment
21261
21288
  }
21262
21289
  `, [PaymentProvider_QuoteFragment]);
21263
- function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
21290
+ function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }) {
21264
21291
  var _a;
21265
21292
  // Read fragments
21266
21293
  const quote = readFragment(PaymentForm_QuoteFragment, maskedQuote);
@@ -21281,9 +21308,9 @@ function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuot
21281
21308
  [ShowPaymentDetailsProvider, { value: undefined }],
21282
21309
  [CustomCheckoutFunctionProvider, { value: customCheckoutFunction }],
21283
21310
  ];
21284
- return (jsx(Fragment, { children: providers.reduceRight((acc, [Provider, props]) => createElement(Provider, props, acc), jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsx(SelectedPluginProvider, { accountId: accountId, children: jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsx(PaymentFormContent, { onRemovePaymentMethod: onRemovePaymentMethod, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
21311
+ return (jsx(Fragment, { children: providers.reduceRight((acc, [Provider, props]) => createElement(Provider, props, acc), jsx(OverrideTokenContext.Provider, { value: { overrideToken }, children: jsx(SelectedPluginProvider, { accountId: accountId, children: jsx(StripeWrapper, { currencyId: currencyId, accountId: accountId, children: jsx(PaymentProvider, { quote: quote, invoice: invoice, accountId: accountId, onPaymentHoldSuccess: onPaymentHoldSuccess, onPaymentSuccess: onPaymentSuccess, paymentHoldOptions: paymentHoldOptions !== null && paymentHoldOptions !== void 0 ? paymentHoldOptions : {}, onSavePaymentMethod: onSavePaymentMethod, children: jsx(PaymentFormContent, { onPaymentMethodRemoved: onPaymentMethodRemoved, onSetDefaultPaymentMethod: onSetDefaultPaymentMethod }) }) }) }) })) }));
21285
21312
  }
21286
- function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod, }) {
21313
+ function PaymentFormContent({ onPaymentMethodRemoved, onSetDefaultPaymentMethod, }) {
21287
21314
  // Context
21288
21315
  const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
21289
21316
  const paymentType = usePaymentType();
@@ -21310,7 +21337,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
21310
21337
  setDefaultPaymentMethodLoading,
21311
21338
  enabled: !!paymentPlugins,
21312
21339
  });
21313
- const onClickRemove = useRemovePaymentMethod(onRemovePaymentMethod, message => {
21340
+ const onClickRemove = useRemovePaymentMethod(onPaymentMethodRemoved, message => {
21314
21341
  showErrorNotification$5(message, 'Error removing payment method');
21315
21342
  });
21316
21343
  function handleClickAddPaymentMethod() {
@@ -21538,9 +21565,9 @@ function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonCl
21538
21565
  className,
21539
21566
  hideDownloadButton,
21540
21567
  onInvoiceLoaded,
21541
- }, children: jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onRemovePaymentMethod: onPaymentMethodRemoved }) }));
21568
+ }, children: jsx(ActualInvoice, { hidePaymentForm: hidePaymentForm, onSavePaymentMethod: onPaymentMethodSaved, onPaymentMethodRemoved: onPaymentMethodRemoved }) }));
21542
21569
  }
21543
- function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMethod }) {
21570
+ function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onPaymentMethodRemoved, }) {
21544
21571
  // Context
21545
21572
  const queryClient = useQueryClient();
21546
21573
  const { id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onPaymentSuccess, className, } = useContext(InvoiceQuoteContext);
@@ -21578,10 +21605,10 @@ function ActualInvoice({ hidePaymentForm, onSavePaymentMethod, onRemovePaymentMe
21578
21605
  }, [formattedInvoice]);
21579
21606
  if (!formattedInvoice)
21580
21607
  return jsx(Fragment, {});
21581
- return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: (paymentMethodId) => {
21608
+ return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice, onSavePaymentMethod: paymentMethodId => {
21582
21609
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(paymentMethodId);
21583
- }, onRemovePaymentMethod: (paymentMethod) => {
21584
- onRemovePaymentMethod === null || onRemovePaymentMethod === void 0 ? void 0 : onRemovePaymentMethod(paymentMethod.id);
21610
+ }, onPaymentMethodRemoved: paymentMethod => {
21611
+ onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id);
21585
21612
  } }) }))] }) }));
21586
21613
  }
21587
21614
 
@@ -23604,7 +23631,7 @@ const QuoteCheckout = ({ account, onSuccess, onFail, quote: maskedQuote, taxatio
23604
23631
  }
23605
23632
  if (taxationRequiredAccountFields)
23606
23633
  return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: jsx(TaxationForm, { account: account, accountId: quote.accountId }) }));
23607
- return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
23634
+ return (jsx(PaymentFormWrapper, { setMaxHeight: false, children: paymentRequired ? (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-w-full", children: [jsx(PaymentForm, { onPaymentSuccess: onSuccess, quote: quote, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }), (couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.length) === 0 ? (jsx(Fragment, { children: upgradingSubscription &&
23608
23635
  shouldShowCouponEditor(quote, activeCouponsExist, upgradingSubscription) && (jsx(CouponEditor, { className: "bunny-px-4 bunny-pt-1", onAddCoupon: addCoupon, isAddingCoupon: isAddingCoupon, couponCode: couponCode, setCouponCode: setCouponCode })) })) : (jsx(Button, { type: "link", loading: isRemovingCoupon, onClick: () => {
23609
23636
  couponsOnQuote === null || couponsOnQuote === void 0 ? void 0 : couponsOnQuote.forEach(couponCharge => {
23610
23637
  var _a;
@@ -23695,13 +23722,13 @@ const Checkout = ({ onCancel, onSuccess, onFail, onRecalculateTaxes, invoice, op
23695
23722
  return (jsx("div", { className: `bunny-flex bunny-flex-col bunny-fixed bunny-top-0 bunny-left-0 bunny-right-0 bunny-bottom-0 bunny-bg-slate-50
23696
23723
  bunny-overflow-auto bunny-height-full`, style: {
23697
23724
  zIndex: 1001,
23698
- }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
23725
+ }, children: jsxs("div", { className: `bunny-flex bunny-flex-col bunny-grow bunny-pt-4 ${isMobile ? 'bunny-pb-4' : 'bunny-pb-8'} bunny-content-container`, children: [jsx("div", { className: "bunny-flex bunny-justify-end bunny-w-full bunny-pr-4", children: jsx(CloseOutlined, { className: "bunny-text-base bunny-shadow-padding-xb", onClick: onCancel }) }), jsxs("div", { className: `bunny-flex bunny-justify-end bunny-pt-4 bunny-gap-4 ${isMobile ? 'bunny-flex-col' : 'bunny-shadow-padding-xb'}`, children: [((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_b = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _b === void 0 ? void 0 : _b.html)) && (jsx(InvoiceQuoteView, { html: invoice ? invoice.html : (_d = (_c = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _c === void 0 ? void 0 : _c.html) !== null && _d !== void 0 ? _d : '' })), !isMobile && ((invoice === null || invoice === void 0 ? void 0 : invoice.html) || ((_e = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _e === void 0 ? void 0 : _e.html)) && (jsx(Divider, { className: "bunny-h-full", type: "vertical" })), invoice ? (jsx("div", { className: "bunny-w-full bunny-pt-12", children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: invoice, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }) })) : quote ? (jsx(QuoteCheckout, { account: account, onFail: error => {
23699
23726
  onFail(error);
23700
23727
  }, onSuccess: onSuccess, quote: quote, taxationRequiredAccountFields: taxationRequiredAccountFields, token: token, onRecalculateTaxes: async () => {
23701
23728
  if (recalculateTaxesEnabled) {
23702
23729
  await recalculateTaxes();
23703
23730
  }
23704
- } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onRemovePaymentMethod: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
23731
+ } })) : (jsx(PaymentForm, { onPaymentSuccess: onSuccess, onSavePaymentMethod: (paymentMethod) => onPaymentMethodSaved === null || onPaymentMethodSaved === void 0 ? void 0 : onPaymentMethodSaved(paymentMethod.savedPaymentMethodResponse.paymentMethodId), onPaymentMethodRemoved: (paymentMethod) => onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(paymentMethod.id) }))] }), jsx(Footer, { className: "bunny-px-12" })] }) }));
23705
23732
  };
23706
23733
 
23707
23734
  function canEditChargeQuantity(charge) {
@@ -29617,7 +29644,7 @@ const PaymentFormSection = ({ hideBillingDetailsForm, isUpgradeFromTrial, onSave
29617
29644
  // TODO: onSavePaymentMethod(response: any) should be cleaned up to have a response type (not any)
29618
29645
  // and work with both stripe and demo pay requests
29619
29646
  onSavePaymentMethod === null || onSavePaymentMethod === void 0 ? void 0 : onSavePaymentMethod(response.savedPaymentMethodResponse.paymentMethodId);
29620
- }, onRemovePaymentMethod: (response) => {
29647
+ }, onPaymentMethodRemoved: response => {
29621
29648
  onPaymentMethodRemoved === null || onPaymentMethodRemoved === void 0 ? void 0 : onPaymentMethodRemoved(response.id);
29622
29649
  } }) }));
29623
29650
  };
package/dist/esm/types/src/components/PaymentForm/PaymentForm.d.ts CHANGED
@@ -14,14 +14,14 @@ export declare const PaymentForm_QuoteFragment: import("gql.tada").TadaDocumentN
14
14
  on: "Quote";
15
15
  masked: true;
16
16
  }>;
17
- export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
17
+ export declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
18
18
  currencyId?: string;
19
19
  invoice?: FormattedInvoice | Invoice;
20
20
  quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
21
21
  onPaymentSuccess?: (response: any) => void;
22
22
  onPaymentHoldSuccess?: (response: any) => void;
23
23
  onSavePaymentMethod?: (response: any) => void;
24
- onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
24
+ onPaymentMethodRemoved?: (paymentMethod: PaymentMethodFragment) => void;
25
25
  onSetDefaultPaymentMethod?: () => void;
26
26
  accountId?: string;
27
27
  overrideToken?: string;
package/dist/esm/types/src/components/PaymentForm/hooks/useRemovePaymentMethod.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ResultOf } from 'gql.tada';
2
2
  import { PaymentForm_PaymentMethodsFragment } from '../fragments/PaymentForm_PaymentMethodsFragment';
3
3
  type PaymentMethodFragment = ResultOf<typeof PaymentForm_PaymentMethodsFragment>;
4
- declare function useRemovePaymentMethod(onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
4
+ declare function useRemovePaymentMethod(onPaymentMethodRemoved?: (paymentMethod: PaymentMethodFragment) => void, onError?: (message: string) => void): (data: PaymentMethodFragment) => Promise<void>;
5
5
  export default useRemovePaymentMethod;
package/dist/index.d.ts CHANGED
@@ -107,14 +107,14 @@ declare const PaymentForm_QuoteFragment: gql_tada.TadaDocumentNode<{
107
107
  on: "Quote";
108
108
  masked: true;
109
109
  }>;
110
- declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
110
+ declare function PaymentForm({ currencyId: accountCurrencyId, invoice, quote: maskedQuote, onPaymentSuccess, onPaymentHoldSuccess, accountId, onSavePaymentMethod, onPaymentMethodRemoved, onSetDefaultPaymentMethod, overrideToken, customCheckoutFunction, paymentHoldOptions, }: {
111
111
  currencyId?: string;
112
112
  invoice?: FormattedInvoice | Invoice$1;
113
113
  quote?: FragmentOf<typeof PaymentForm_QuoteFragment>;
114
114
  onPaymentSuccess?: (response: any) => void;
115
115
  onPaymentHoldSuccess?: (response: any) => void;
116
116
  onSavePaymentMethod?: (response: any) => void;
117
- onRemovePaymentMethod?: (paymentMethod: PaymentMethodFragment) => void;
117
+ onPaymentMethodRemoved?: (paymentMethod: PaymentMethodFragment) => void;
118
118
  onSetDefaultPaymentMethod?: () => void;
119
119
  accountId?: string;
120
120
  overrideToken?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bunnyapp/components",
3
- "version": "1.7.0-beta.24",
3
+ "version": "1.7.0-beta.26",
4
4
  "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",