@bunnyapp/components 1.8.0-beta.23 → 1.8.0-beta.24

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 (13) hide show
  1. package/dist/cjs/index.js +86 -49
  2. package/dist/cjs/types/src/components/Signup/components/LoadingOverlay.d.ts +4 -0
  3. package/dist/cjs/types/src/components/Signup/consts.d.ts +1 -0
  4. package/dist/cjs/types/src/components/Signup/signup-quote/SignupQuote.d.ts +1 -1
  5. package/dist/cjs/types/src/utils/QueryKeyFactory.d.ts +5 -1
  6. package/dist/esm/index.js +86 -49
  7. package/dist/esm/types/src/components/Signup/components/LoadingOverlay.d.ts +4 -0
  8. package/dist/esm/types/src/components/Signup/consts.d.ts +1 -0
  9. package/dist/esm/types/src/components/Signup/signup-quote/SignupQuote.d.ts +1 -1
  10. package/dist/esm/types/src/utils/QueryKeyFactory.d.ts +5 -1
  11. package/package.json +1 -1
  12. package/dist/cjs/types/src/components/Signup/hooks/useQuoteAccountSignupOnExit.d.ts +0 -46
  13. package/dist/esm/types/src/components/Signup/hooks/useQuoteAccountSignupOnExit.d.ts +0 -46
package/dist/cjs/index.js CHANGED
@@ -1277,7 +1277,15 @@ const QueryKeyFactory = {
1277
1277
  ],
1278
1278
  paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
1279
1279
  // Keys for <Signup />
1280
- accountForSignup: (token) => ['accountForSignup', ...(token ? [token] : [])],
1280
+ signupAccount: (token) => ['signupAccount', ...(token ? [token] : [])],
1281
+ signupPriceList: (code, token) => [
1282
+ 'signupPriceList',
1283
+ ...(code ? [code] : []),
1284
+ ...(token ? [token] : []),
1285
+ ],
1286
+ };
1287
+ const MutationKeyFactory = {
1288
+ quoteAccountSignup: ['quoteAccountSignup'],
1281
1289
  };
1282
1290
 
1283
1291
  const InvoiceQuoteContext = react.createContext({});
@@ -1291,7 +1299,7 @@ const DEFAULT_CONFIG = {
1291
1299
  };
1292
1300
 
1293
1301
  // This will be replaced at build time by rollup-plugin-replace
1294
- const PACKAGE_VERSION = '1.8.0-beta.22';
1302
+ const PACKAGE_VERSION = '1.8.0-beta.23';
1295
1303
  const createRequestHeaders = (token) => {
1296
1304
  const headers = createClientDevHeaders({ token });
1297
1305
  // Add the components version header
@@ -19787,7 +19795,7 @@ function CardImage({ paymentMethod: maskedPaymentMethod, }) {
19787
19795
  }
19788
19796
  }
19789
19797
 
19790
- const { Text: Text$E } = antd.Typography;
19798
+ const { Text: Text$F } = antd.Typography;
19791
19799
  const MiniCreditCard_PaymentMethodFragment = t(`
19792
19800
  fragment MiniCreditCard_PaymentMethodFragment on PaymentMethod {
19793
19801
  ...CardImage_PaymentMethodFragment
@@ -19817,7 +19825,7 @@ function MiniCreditCard({ className, buttons, hideDropdownMenu = false, hideDefa
19817
19825
  }, [darkMode]);
19818
19826
  const isDefault = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault;
19819
19827
  const isFailed = (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.state) === 'FAILED';
19820
- return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: paymentMethod ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsxRuntime.jsx(CardImage, { paymentMethod: paymentMethod }), jsxRuntime.jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsxRuntime.jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-1", children: [isDefault && !hideDefaultTag && (jsxRuntime.jsx(antd.Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })), isFailed && (jsxRuntime.jsx(FailedTag, { failureReason: paymentMethod.failureReason, forceOpenTooltip: isHovering }))] })] }) }), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$E, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] })) }));
19828
+ return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: paymentMethod ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsxRuntime.jsx(CardImage, { paymentMethod: paymentMethod }), jsxRuntime.jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsxRuntime.jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-1", children: [isDefault && !hideDefaultTag && (jsxRuntime.jsx(antd.Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })), isFailed && (jsxRuntime.jsx(FailedTag, { failureReason: paymentMethod.failureReason, forceOpenTooltip: isHovering }))] })] }) }), buttons ? (buttons) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !hideDropdownMenu && (jsxRuntime.jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$F, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" }), buttons] })) }));
19821
19829
  }
19822
19830
  function FailedTag({ failureReason, forceOpenTooltip }) {
19823
19831
  const tag = (jsxRuntime.jsx(antd.Tag, { bordered: false, color: "red", children: "Failed" }));
@@ -19831,15 +19839,15 @@ const Identifier = ({ type, identifier, }) => {
19831
19839
  return null;
19832
19840
  }
19833
19841
  if (type === 'cashapp') {
19834
- return jsxRuntime.jsx(Text$E, { children: "Cashapp" });
19842
+ return jsxRuntime.jsx(Text$F, { children: "Cashapp" });
19835
19843
  }
19836
- return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$E, { className: "relative -top-0.5", children: "****" }), jsxRuntime.jsx(Text$E, { children: identifier })] }));
19844
+ return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$F, { className: "relative -top-0.5", children: "****" }), jsxRuntime.jsx(Text$F, { children: identifier })] }));
19837
19845
  };
19838
19846
  const Issuer = ({ issuer }) => {
19839
19847
  const list = ['visa', 'link', 'jcb', 'discover', 'sepa'];
19840
19848
  if (!issuer || issuer.length == 0 || list.includes(issuer === null || issuer === void 0 ? void 0 : issuer.toLowerCase()))
19841
19849
  return null;
19842
- return jsxRuntime.jsx(Text$E, { children: lodashExports.capitalize(issuer) });
19850
+ return jsxRuntime.jsx(Text$F, { children: lodashExports.capitalize(issuer) });
19843
19851
  };
19844
19852
  const DropdownMenu = ({ setDefault, remove, isDefault, id, }) => {
19845
19853
  const { brandColor } = useBrand();
@@ -21106,7 +21114,7 @@ const DemoPayExpiry = ({ autoFocus, onChange, placeholder, value, }) => {
21106
21114
  return (jsxRuntime.jsx("div", { className: "bunny-grow", children: jsxRuntime.jsx(antd.Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) }));
21107
21115
  };
21108
21116
 
21109
- const { Text: Text$D } = antd.Typography;
21117
+ const { Text: Text$E } = antd.Typography;
21110
21118
  const DemoPayForm = () => {
21111
21119
  const { darkMode } = react.useContext(BunnyContext);
21112
21120
  const [cardDetails, setCardDetails] = useDemoPayCardDetails();
@@ -21119,7 +21127,7 @@ const DemoPayForm = () => {
21119
21127
  const onCardCvcChange = (cvc) => {
21120
21128
  setCardDetails(prev => ({ ...prev, cvc }));
21121
21129
  };
21122
- return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxRuntime.jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsxRuntime.jsx(Text$D, { children: "DemoPay is for testing only." })] }));
21130
+ return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxRuntime.jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsxRuntime.jsx(Text$E, { children: "DemoPay is for testing only." })] }));
21123
21131
  };
21124
21132
  const StyledInputs = defaultStyled.div `
21125
21133
  .ant-input {
@@ -21161,7 +21169,7 @@ const CardIcon = ({ className }) => {
21161
21169
  return (jsxRuntime.jsxs("svg", { className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
21162
21170
  };
21163
21171
 
21164
- const { Text: Text$C } = antd.Typography;
21172
+ const { Text: Text$D } = antd.Typography;
21165
21173
  const PaymentMethodSelector = () => {
21166
21174
  const { paymentPlugins } = usePaymentPlugins();
21167
21175
  const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
@@ -21175,7 +21183,7 @@ const PaymentOption = ({ selected, paymentPluginId, onClick, name, disabled, })
21175
21183
  const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
21176
21184
  return (jsxRuntime.jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
21177
21185
  ? `var(--row-background-dark) border-gray-500`
21178
- : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$C, { children: name })] }), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] }));
21186
+ : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsxRuntime.jsx(Text$D, { children: name })] }), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" })) : (jsxRuntime.jsx(CardIcon, { className: "bunny-pr-4" }))] }));
21179
21187
  };
21180
21188
  const PaymentOptionContainer = defaultStyled.div `
21181
21189
  transition: border 0.3s ease;
@@ -21641,10 +21649,10 @@ const useDownloadFile = (id, onError) => {
21641
21649
  };
21642
21650
  };
21643
21651
 
21644
- const { Text: Text$B } = antd.Typography;
21652
+ const { Text: Text$C } = antd.Typography;
21645
21653
  function BackButton({ onClick, title }) {
21646
21654
  const { brandColor } = useBrand();
21647
- return (jsxRuntime.jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { className: "pt-0.5", icon: freeSolidSvgIcons.faArrowLeft }), jsxRuntime.jsx(Text$B, { className: "bunny-text-sm bunny-text-gray-400 bunny-text-nowrap", children: title || 'back' })] }));
21655
+ return (jsxRuntime.jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { className: "pt-0.5", icon: freeSolidSvgIcons.faArrowLeft }), jsxRuntime.jsx(Text$C, { className: "bunny-text-sm bunny-text-gray-400 bunny-text-nowrap", children: title || 'back' })] }));
21648
21656
  }
21649
21657
  const StyledBackButton = styled.button.withConfig({
21650
21658
  shouldForwardProp: prop => !['brandColor'].includes(prop),
@@ -22083,7 +22091,7 @@ const AcceptQuoteModal = ({ acceptBoxVisible, formattedQuote: maskedFormattedQuo
22083
22091
  }, open: acceptBoxVisible, title: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) ? 'Start signing' : 'Accept quote', width: 400, children: jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: acceptBoxVisible, formattedQuote: formattedQuote, form: form }) }));
22084
22092
  };
22085
22093
 
22086
- const { Title: Title$3, Text: Text$A } = antd.Typography;
22094
+ const { Title: Title$3, Text: Text$B } = antd.Typography;
22087
22095
  const showSuccessNotification$1 = useSuccessNotification();
22088
22096
  const showErrorNotification$3 = useErrorNotification();
22089
22097
  const PaymentHoldModal_FormattedQuoteFragment = t(`
@@ -22109,7 +22117,7 @@ const PaymentHoldModal = ({ visible, setVisible, formattedQuote: maskedFormatted
22109
22117
  const [form] = antd.Form.useForm();
22110
22118
  return (jsxRuntime.jsx(StyledModal$2, { centered: true, onCancel: () => {
22111
22119
  setVisible(false);
22112
- }, footer: null, open: visible, width: 900, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsxRuntime.jsx(Title$3, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxRuntime.jsxs(Text$A, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-p-4 bunny-pb-6", children: noSigningPlugins ? jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsxRuntime.jsx(VerticalDivider, { className: "bunny-m-4" }), jsxRuntime.jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsxRuntime.jsx(PaymentForm, { quote: formattedQuote.quote, paymentHold: {
22120
+ }, footer: null, open: visible, width: 900, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsxRuntime.jsx(Title$3, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxRuntime.jsxs(Text$B, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-p-4 bunny-pb-6", children: noSigningPlugins ? jsxRuntime.jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsxRuntime.jsx(VerticalDivider, { className: "bunny-m-4" }), jsxRuntime.jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsxRuntime.jsx(PaymentForm, { quote: formattedQuote.quote, paymentHold: {
22113
22121
  quoteId: formattedQuote.quote.id, // TODO: fix hack. We assume the quote id is always present, but may not be the case
22114
22122
  amountToHold: formattedQuote.amount,
22115
22123
  }, onPaymentSuccess: () => {
@@ -22246,9 +22254,9 @@ function PaymentHoldDisplay({ paymentHold: maskedPaymentHold, currency, amount,
22246
22254
  return (jsxRuntime.jsx(antd.Tooltip, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted.Hold will be released on ${expirationDate} if not accepted.`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
22247
22255
  }
22248
22256
 
22249
- const { Text: Text$z } = antd.Typography;
22257
+ const { Text: Text$A } = antd.Typography;
22250
22258
  const QuoteIsAcceptedLabel = ({ acceptedByName, acceptedAt }) => {
22251
- return (jsxRuntime.jsx(Text$z, { children: `Quote was accepted by ${String(acceptedByName !== null && acceptedByName !== void 0 ? acceptedByName : '')} on ${formatDate(acceptedAt)}` }));
22259
+ return (jsxRuntime.jsx(Text$A, { children: `Quote was accepted by ${String(acceptedByName !== null && acceptedByName !== void 0 ? acceptedByName : '')} on ${formatDate(acceptedAt)}` }));
22252
22260
  };
22253
22261
 
22254
22262
  const QuoteButtons_FormattedQuoteFragment = t(`
@@ -22852,9 +22860,9 @@ const getColor = (state) => {
22852
22860
  }
22853
22861
  };
22854
22862
 
22855
- const { Text: Text$y } = antd.Typography;
22863
+ const { Text: Text$z } = antd.Typography;
22856
22864
  const TransactionDate = ({ date }) => {
22857
- return jsxRuntime.jsx(Text$y, { className: "bunny-text-sm", children: formatDate(date) });
22865
+ return jsxRuntime.jsx(Text$z, { className: "bunny-text-sm", children: formatDate(date) });
22858
22866
  };
22859
22867
 
22860
22868
  const ArrowDownToLine = ({ className, color = SLATE_600, }) => {
@@ -22898,13 +22906,13 @@ const TransactionGridCell = defaultStyled.div.withConfig({
22898
22906
  min-width: 48px;
22899
22907
  `;
22900
22908
 
22901
- const { Text: Text$x } = antd.Typography;
22909
+ const { Text: Text$y } = antd.Typography;
22902
22910
  const TransactionsEmptyState = () => {
22903
22911
  const { noTransactionsMessage } = react.useContext(TransactionsListContext);
22904
- return (jsxRuntime.jsx(Text$x, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
22912
+ return (jsxRuntime.jsx(Text$y, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
22905
22913
  };
22906
22914
 
22907
- const { Text: Text$w } = antd.Typography;
22915
+ const { Text: Text$x } = antd.Typography;
22908
22916
  const isInvoice = (transaction) => {
22909
22917
  return transaction.kind === 'INVOICE';
22910
22918
  };
@@ -22912,7 +22920,7 @@ const TransactionRowTitle = ({ transaction }) => {
22912
22920
  if (!isInvoice(transaction)) {
22913
22921
  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
22914
22922
  }
22915
- return (jsxRuntime.jsx(Text$w, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
22923
+ return (jsxRuntime.jsx(Text$x, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
22916
22924
  };
22917
22925
 
22918
22926
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -22930,7 +22938,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
22930
22938
  }
22931
22939
  }
22932
22940
 
22933
- const { Text: Text$v } = antd.Typography;
22941
+ const { Text: Text$w } = antd.Typography;
22934
22942
  const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
22935
22943
  const { columns, transactionDateType } = react.useContext(TransactionsListContext);
22936
22944
  const { apiHost, darkMode } = react.useContext(BunnyContext);
@@ -22958,11 +22966,11 @@ const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
22958
22966
  !showState &&
22959
22967
  !showAmount &&
22960
22968
  !showDownload &&
22961
- !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$v, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(Text$v, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(Text$v, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, { right: true, children: jsxRuntime.jsx(Text$v, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
22969
+ !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$w, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsxRuntime.jsx(Text$w, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(Text$w, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, { right: false, children: jsxRuntime.jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, { right: true, children: jsxRuntime.jsx(Text$w, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
22962
22970
  }) }));
22963
22971
  };
22964
22972
 
22965
- const { Text: Text$u } = antd.Typography;
22973
+ const { Text: Text$v } = antd.Typography;
22966
22974
  const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
22967
22975
  const { columns, transactionDateType } = react.useContext(TransactionsListContext);
22968
22976
  const { apiHost, darkMode } = react.useContext(BunnyContext);
@@ -22984,11 +22992,11 @@ const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
22984
22992
  backgroundColor: index % 2 === 0
22985
22993
  ? `var(--row-background${darkMode ? '-dark' : ''})`
22986
22994
  : `var(--row-background-alternate${darkMode ? '-dark' : ''})`,
22987
- }, children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$u, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsxRuntime.jsx(Text$u, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$u, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$u, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$u, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { right: true, children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
22995
+ }, children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$v, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] })), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsxRuntime.jsx(Text$v, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$v, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$v, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$v, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { right: true, children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
22988
22996
  }) }));
22989
22997
  };
22990
22998
 
22991
- const { Text: Text$t } = antd.Typography;
22999
+ const { Text: Text$u } = antd.Typography;
22992
23000
  const DISPLAY_WIDTH = 1200;
22993
23001
  function Transactions({ transactionComponent, showSearchBar = true, showTitle = true, title = 'Past transactions', columns = ['date', 'title', 'state', 'amount', 'download'], className, shadow = 'shadow-md', searchBarClassName, useModal = false, onTransactionClick, suppressTransactionDisplay = false, kindsToShow = [
22994
23002
  TransactionKind.INVOICE,
@@ -23092,7 +23100,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
23092
23100
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
23093
23101
  setDrawerOpen(false);
23094
23102
  }
23095
- return (jsxRuntime.jsxs("div", { style: style, children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsxRuntime.jsx(Text$t, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
23103
+ return (jsxRuntime.jsxs("div", { style: style, children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsxRuntime.jsx(Text$u, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
23096
23104
  ), showSearchBar && (jsxRuntime.jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
23097
23105
  const value = e.target.value;
23098
23106
  // Allow empty string, numbers, and decimal point
@@ -23413,7 +23421,7 @@ const BunnyFooterIcon = ({ color }) => {
23413
23421
  return (jsxRuntime.jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntime.jsxs("g", { clipPath: "url(#clip0_6_851)", children: [jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsxRuntime.jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_6_851", children: jsxRuntime.jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
23414
23422
  };
23415
23423
 
23416
- const { Text: Text$s } = antd.Typography;
23424
+ const { Text: Text$t } = antd.Typography;
23417
23425
  const Footer = ({ className }) => {
23418
23426
  const token = useToken();
23419
23427
  const { currentUser } = useCurrentUserData(token);
@@ -23424,7 +23432,7 @@ const Footer = ({ className }) => {
23424
23432
  const BunnyMarketingLink = () => {
23425
23433
  const [isHovered, setIsHovered] = react.useState(false);
23426
23434
  const isMobile = useIsMobile();
23427
- return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsxRuntime.jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx(Text$s, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsxRuntime.jsx("div", { style: { paddingTop: '5px' }, children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
23435
+ return (jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsxRuntime.jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsxRuntime.jsx(Text$t, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsxRuntime.jsx("div", { style: { paddingTop: '5px' }, children: jsxRuntime.jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
23428
23436
  };
23429
23437
  const StyedLink = styled.a `
23430
23438
  color: ${SLATE_400};
@@ -23733,7 +23741,7 @@ function checkoutSummaryTotalsFromPriceList(priceList, willBeTrial) {
23733
23741
  };
23734
23742
  }
23735
23743
 
23736
- const { Text: Text$r } = antd.Typography;
23744
+ const { Text: Text$s } = antd.Typography;
23737
23745
  function CheckoutSummary({ quote: maskedQuote, className, priceList: maskedPriceList, defaultCouponCode, }) {
23738
23746
  var _a, _b, _c, _d, _e, _f, _g, _h;
23739
23747
  const { enableTrial } = useSignupOptions();
@@ -23786,7 +23794,7 @@ function CheckoutSummary({ quote: maskedQuote, className, priceList: maskedPrice
23786
23794
  : priceList
23787
23795
  ? checkoutSummaryTotalsFromPriceList(priceList, willBeTrial)
23788
23796
  : null;
23789
- return (jsxRuntime.jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxRuntime.jsxs(Text$r, { children: [jsxRuntime.jsxs("div", { className: "bunny-space-y-4", children: [!quote && priceList && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = priceList.charges) === null || _g === void 0 ? void 0 : _g.filter(charge => !charge.deprecated && !charge.featureAddon).map(charge => (jsxRuntime.jsx(CheckoutSummaryLineItem, { charge: {
23797
+ return (jsxRuntime.jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxRuntime.jsxs(Text$s, { children: [jsxRuntime.jsxs("div", { className: "bunny-space-y-4", children: [!quote && priceList && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = priceList.charges) === null || _g === void 0 ? void 0 : _g.filter(charge => !charge.deprecated && !charge.featureAddon).map(charge => (jsxRuntime.jsx(CheckoutSummaryLineItem, { charge: {
23790
23798
  name: charge.name,
23791
23799
  quantity: charge.quantityMin,
23792
23800
  subtotal: charge.basePrice,
@@ -23859,7 +23867,7 @@ const billingPeriodConverter = (period) => {
23859
23867
  return 12;
23860
23868
  };
23861
23869
 
23862
- const { Text: Text$q } = antd.Typography;
23870
+ const { Text: Text$r } = antd.Typography;
23863
23871
  const PriceListDisplay_PriceListFragment = t(`
23864
23872
  fragment PriceListDisplay_PriceListFragment on PriceList {
23865
23873
  product {
@@ -23882,7 +23890,7 @@ function PriceListDisplay({ priceList: maskedPriceList }) {
23882
23890
  const willBeTrial = (priceList === null || priceList === void 0 ? void 0 : priceList.trialAllowed) && enableTrial;
23883
23891
  if (!priceList)
23884
23892
  return null;
23885
- return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-0", children: [jsxRuntime.jsxs(Text$q, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxRuntime.jsxs(Text$q, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / ", periodLabel] })] }), willBeTrial ? (jsxRuntime.jsx("div", { className: "bunny-flex", children: jsxRuntime.jsx(CustomizedTag, { color: TAG_COLORS["TRIAL"], children: `${(_b = priceList.trialLengthDays) !== null && _b !== void 0 ? _b : 'N/A'} day trial` }) })) : null] }));
23893
+ return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-0", children: [jsxRuntime.jsxs(Text$r, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxRuntime.jsxs(Text$r, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / ", periodLabel] })] }), willBeTrial ? (jsxRuntime.jsx("div", { className: "bunny-flex", children: jsxRuntime.jsx(CustomizedTag, { color: TAG_COLORS["TRIAL"], children: `${(_b = priceList.trialLengthDays) !== null && _b !== void 0 ? _b : 'N/A'} day trial` }) })) : null] }));
23886
23894
  }
23887
23895
 
23888
23896
  const mutation$f = t(`
@@ -23939,6 +23947,7 @@ function useQuoteAccountSignupMutation({ priceListCode, enableTrial, priceList,
23939
23947
  const { apiHost } = react.useContext(BunnyContext);
23940
23948
  const token = useToken();
23941
23949
  return reactQuery.useMutation({
23950
+ mutationKey: MutationKeyFactory.quoteAccountSignup,
23942
23951
  mutationFn: ({ formData, accountCode, }) => {
23943
23952
  return quoteAccountSignup({
23944
23953
  token,
@@ -24323,7 +24332,7 @@ function useExistingAccount({ onAccountLoaded, } = {}) {
24323
24332
  const token = useToken();
24324
24333
  const { apiHost } = react.useContext(BunnyContext);
24325
24334
  const { data, isLoading } = reactQuery.useQuery({
24326
- queryKey: QueryKeyFactory.accountForSignup(token),
24335
+ queryKey: QueryKeyFactory.signupAccount(token),
24327
24336
  queryFn: async () => {
24328
24337
  var _a;
24329
24338
  const response = await getCurrentUserAccountForSignup({ apiHost, token });
@@ -24501,12 +24510,12 @@ const SuccessIcon = () => {
24501
24510
  }, children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faCheck, style: { color: '#16a34a', fontSize: 24 } }) }));
24502
24511
  };
24503
24512
 
24504
- const { Text: Text$p } = antd.Typography;
24513
+ const { Text: Text$q } = antd.Typography;
24505
24514
  const ViewPortalSubscription = ({ returnUrl }) => {
24506
24515
  if (!returnUrl) {
24507
24516
  return null;
24508
24517
  }
24509
- return (jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: "View subscription" }));
24518
+ return (jsxRuntime.jsx(Text$q, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: "View subscription" }));
24510
24519
  };
24511
24520
 
24512
24521
  function SignupSuccessDisplay({ returnUrl, className, children, }) {
@@ -24520,7 +24529,7 @@ function createPortalReturnUrl({ apiHost, token }) {
24520
24529
  return `${apiHost}/portal/subscriptions?token=${encodeURIComponent(token)}`;
24521
24530
  }
24522
24531
 
24523
- const { Text: Text$o, Title } = antd.Typography;
24532
+ const { Text: Text$p, Title } = antd.Typography;
24524
24533
  const SuccessDisplay = ({ quote: maskedQuote, currencyId, returnUrl, className, }) => {
24525
24534
  var _a, _b;
24526
24535
  const { apiHost } = react.useContext(BunnyContext);
@@ -24532,15 +24541,15 @@ const SuccessDisplay = ({ quote: maskedQuote, currencyId, returnUrl, className,
24532
24541
  const isAccepted = (quote === null || quote === void 0 ? void 0 : quote.state) === 'ACCEPTED';
24533
24542
  const isTrial = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.some(change => change.isTrial === true);
24534
24543
  if (!isPayToAccept && isTrial) {
24535
- return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$o, { className: "bunny-text-slate-500", children: "Trial subscription created" })] }));
24544
+ return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500", children: "Trial subscription created" })] }));
24536
24545
  }
24537
24546
  if (isPayToAccept && isAccepted && isTrial) {
24538
- return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$o, { className: "bunny-text-slate-500", children: "Quote accepted. Trial subscription created" })] }));
24547
+ return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500", children: "Quote accepted. Trial subscription created" })] }));
24539
24548
  }
24540
24549
  if (isPayToAccept && isAccepted) {
24541
- return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$o, { className: "bunny-text-slate-500", children: "Quote accepted. Subscription created" }), currencyId ? jsxRuntime.jsx(Text$o, { className: "bunny-text-slate-500", children: formatCurrency(amountDue, currencyId) }) : null] }));
24550
+ return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500", children: "Quote accepted. Subscription created" }), currencyId ? jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500", children: formatCurrency(amountDue, currencyId) }) : null] }));
24542
24551
  }
24543
- return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$o, { className: "bunny-text-slate-500", children: "Payment successful. Subscription created" })] }));
24552
+ return (jsxRuntime.jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsxRuntime.jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsxRuntime.jsx(Text$p, { className: "bunny-text-slate-500", children: "Payment successful. Subscription created" })] }));
24544
24553
  };
24545
24554
 
24546
24555
  const SelfServiceBuyWarning_PriceListFragment = t(`
@@ -24599,12 +24608,40 @@ const SignupQuote = () => {
24599
24608
  const [documentPreviewFullscreenApi, setDocumentPreviewFullscreenApi] = react.useState(null);
24600
24609
  const quote = readFragment(SignupQuote_QuoteFragment, signupQuoteFromCache);
24601
24610
  const isAccepted = (quote === null || quote === void 0 ? void 0 : quote.state) === 'ACCEPTED';
24602
- if (!quote)
24603
- return null;
24604
- return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-h-full", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-end bunny-gap-2", children: [isAccepted && (jsxRuntime.jsx(QuoteIsAcceptedLabel, { acceptedByName: quote === null || quote === void 0 ? void 0 : quote.acceptedByName, acceptedAt: quote === null || quote === void 0 ? void 0 : quote.acceptedAt })), documentPreviewFullscreenApi ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.FullscreenOutlined, {}), onClick: () => documentPreviewFullscreenApi.toggleFullScreen(), children: "Fullscreen" })) : null, jsxRuntime.jsx(DownloadQuoteButton, { id: quote === null || quote === void 0 ? void 0 : quote.id })] }), jsxRuntime.jsx(InvoiceQuoteView, { html: (_b = (_a = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _a === void 0 ? void 0 : _a.html) !== null && _b !== void 0 ? _b : null, targetUrl: (quote === null || quote === void 0 ? void 0 : quote.documentTemplateId) ? `/pdf/quote/${quote === null || quote === void 0 ? void 0 : quote.id}` : undefined, onDocumentPreviewFullscreenApiChange: setDocumentPreviewFullscreenApi })] }));
24611
+ return (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-h-full", children: [jsxRuntime.jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-end bunny-gap-2", children: [isAccepted && (jsxRuntime.jsx(QuoteIsAcceptedLabel, { acceptedByName: quote === null || quote === void 0 ? void 0 : quote.acceptedByName, acceptedAt: quote === null || quote === void 0 ? void 0 : quote.acceptedAt })), documentPreviewFullscreenApi ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.FullscreenOutlined, {}), onClick: () => documentPreviewFullscreenApi.toggleFullScreen(), children: "Fullscreen" })) : null, (quote === null || quote === void 0 ? void 0 : quote.id) ? jsxRuntime.jsx(DownloadQuoteButton, { id: quote === null || quote === void 0 ? void 0 : quote.id }) : null] }), jsxRuntime.jsx(InvoiceQuoteView, { html: (_b = (_a = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _a === void 0 ? void 0 : _a.html) !== null && _b !== void 0 ? _b : null, targetUrl: (quote === null || quote === void 0 ? void 0 : quote.documentTemplateId) ? `/pdf/quote/${quote === null || quote === void 0 ? void 0 : quote.id}` : undefined, onDocumentPreviewFullscreenApiChange: setDocumentPreviewFullscreenApi })] }));
24605
24612
  };
24606
24613
 
24607
- const BACKGROUND_COLOR = '#f8fafc';
24614
+ const SIGNUP_BACKGROUND_COLOR = '#f8fafc';
24615
+
24616
+ const { Text: Text$o } = antd.Typography;
24617
+ function LoadingOverlay({ style }) {
24618
+ const queryClient = reactQuery.useQueryClient();
24619
+ const isAccountFetching = reactQuery.useIsFetching({ queryKey: QueryKeyFactory.signupAccount() }) > 0;
24620
+ const isPriceListFetching = reactQuery.useIsFetching({ queryKey: QueryKeyFactory.signupPriceList() }) > 0;
24621
+ const isPluginsFetching = reactQuery.useIsFetching({ queryKey: QueryKeyFactory.pluginsKey() }) > 0;
24622
+ const isBrandingFetching = reactQuery.useIsFetching({ queryKey: QueryKeyFactory.brandingKey() }) > 0;
24623
+ const isQuoteCreating = reactQuery.useIsMutating({ mutationKey: MutationKeyFactory.quoteAccountSignup }) > 0;
24624
+ const signupAccountQueries = queryClient.getQueriesData({ queryKey: QueryKeyFactory.signupAccount() });
24625
+ const isAccountUnresolved = signupAccountQueries.every(([, data]) => data === undefined);
24626
+ const hasExistingAccount = signupAccountQueries.some(([, data]) => { var _a, _b; return ((_b = (_a = data === null || data === void 0 ? void 0 : data.currentUser) === null || _a === void 0 ? void 0 : _a.account) === null || _b === void 0 ? void 0 : _b.id) !== undefined; });
24627
+ const visible = isAccountFetching || isAccountUnresolved || isPriceListFetching || isPluginsFetching || isBrandingFetching || (isQuoteCreating && hasExistingAccount);
24628
+ const label = isQuoteCreating ? 'Loading quote...' : 'Setting up signup...';
24629
+ if (!visible)
24630
+ return null;
24631
+ return (jsxRuntime.jsxs("div", { "aria-hidden": "true", style: {
24632
+ position: 'absolute',
24633
+ inset: 0,
24634
+ backgroundColor: SIGNUP_BACKGROUND_COLOR,
24635
+ display: 'flex',
24636
+ flexDirection: 'column',
24637
+ alignItems: 'center',
24638
+ justifyContent: 'center',
24639
+ gap: 12,
24640
+ zIndex: 10,
24641
+ ...style,
24642
+ }, children: [jsxRuntime.jsx(antd.Spin, { indicator: jsxRuntime.jsx(icons.LoadingOutlined, { spin: true, style: { fontSize: 72 } }) }), jsxRuntime.jsx(Text$o, { type: "secondary", children: label })] }));
24643
+ }
24644
+
24608
24645
  function SignupContent({ priceListCode, defaultFormValues, documentTemplateId, requiredBillingDetails, returnUrl: returnUrlProp, style, }) {
24609
24646
  const [purchaseSucceeded] = useSignupPurchaseSucceeded();
24610
24647
  const { apiHost } = react.useContext(BunnyContext);
@@ -24612,14 +24649,14 @@ function SignupContent({ priceListCode, defaultFormValues, documentTemplateId, r
24612
24649
  const signupQuoteFromCache = useSignupQuoteQueryData({ tokenOverride: token });
24613
24650
  const { account } = useExistingAccount();
24614
24651
  const { data: maskedPriceList } = reactQuery.useQuery({
24615
- queryKey: ['priceList', priceListCode],
24652
+ queryKey: QueryKeyFactory.signupPriceList(priceListCode, token),
24616
24653
  queryFn: () => getPriceList({ token, apiHost, code: priceListCode }),
24617
24654
  });
24618
24655
  // Derived state
24619
24656
  const priceList = readFragment(Signup_PriceListFragment, maskedPriceList);
24620
24657
  const quote = readFragment(Signup_QuoteFragment, signupQuoteFromCache);
24621
24658
  const hasExistingAccount = (account === null || account === void 0 ? void 0 : account.id) !== undefined;
24622
- return (jsxRuntime.jsx("div", { style: { backgroundColor: BACKGROUND_COLOR, ...style }, children: jsxRuntime.jsx(SignupSplitScreenContainer, { left: jsxRuntime.jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-items-start bunny-justify-between bunny-gap-4 bunny-py-24 bunny-overflow-y-auto", children: [jsxRuntime.jsx(Logo, {}), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-min-h-0 bunny-w-full bunny-flex-1 bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsx(PriceListDisplay, { priceList: priceList }), jsxRuntime.jsx(CheckoutSummary, { quote: quote !== null && quote !== void 0 ? quote : undefined, priceList: priceList }), jsxRuntime.jsx(SignupQuote, {})] }), jsxRuntime.jsx(Footer, {})] }), right: jsxRuntime.jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-py-24 bunny-overflow-y-auto", children: [jsxRuntime.jsx(SignupForm, { priceListCode: priceListCode, priceList: priceList, defaultFormValues: defaultFormValues, documentTemplateId: documentTemplateId, requiredBillingDetails: requiredBillingDetails }), !quote && !hasExistingAccount && (jsxRuntime.jsx("div", { className: "bunny-pt-4", children: jsxRuntime.jsx(QuoteCreateButton, { priceListCode: priceListCode, priceList: priceList, documentTemplateId: documentTemplateId }) })), !purchaseSucceeded && quote && (jsxRuntime.jsx("div", { className: "bunny-pt-4", children: jsxRuntime.jsx(SignupPaymentForm, { quote: quote, priceList: priceList }) })), purchaseSucceeded && (jsxRuntime.jsx(SuccessDisplay, { quote: quote, currencyId: priceList === null || priceList === void 0 ? void 0 : priceList.currencyId, returnUrl: returnUrlProp, className: "bunny-p-4" }))] }) }) }));
24659
+ return (jsxRuntime.jsxs("div", { style: { backgroundColor: SIGNUP_BACKGROUND_COLOR, position: 'relative', ...style }, children: [jsxRuntime.jsx(LoadingOverlay, { style: style }), jsxRuntime.jsx(SignupSplitScreenContainer, { left: jsxRuntime.jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-items-start bunny-justify-between bunny-gap-4 bunny-py-24 bunny-overflow-y-auto", children: [jsxRuntime.jsx(Logo, {}), jsxRuntime.jsxs("div", { className: "bunny-flex bunny-min-h-0 bunny-w-full bunny-flex-1 bunny-flex-col bunny-gap-4", children: [jsxRuntime.jsx(PriceListDisplay, { priceList: priceList }), jsxRuntime.jsx(CheckoutSummary, { quote: quote !== null && quote !== void 0 ? quote : undefined, priceList: priceList }), jsxRuntime.jsx(SignupQuote, {})] }), jsxRuntime.jsx(Footer, {})] }), right: jsxRuntime.jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-py-24 bunny-overflow-y-auto", children: [jsxRuntime.jsx(SignupForm, { priceListCode: priceListCode, priceList: priceList, defaultFormValues: defaultFormValues, documentTemplateId: documentTemplateId, requiredBillingDetails: requiredBillingDetails }), !quote && !hasExistingAccount && (jsxRuntime.jsx("div", { className: "bunny-pt-4", children: jsxRuntime.jsx(QuoteCreateButton, { priceListCode: priceListCode, priceList: priceList, documentTemplateId: documentTemplateId }) })), !purchaseSucceeded && quote && (jsxRuntime.jsx("div", { className: "bunny-pt-4", children: jsxRuntime.jsx(SignupPaymentForm, { quote: quote, priceList: priceList }) })), purchaseSucceeded && (jsxRuntime.jsx(SuccessDisplay, { quote: quote, currencyId: priceList === null || priceList === void 0 ? void 0 : priceList.currencyId, returnUrl: returnUrlProp, className: "bunny-p-4" }))] }) })] }));
24623
24660
  }
24624
24661
 
24625
24662
  function SignupQuoteProviderContainer({ children }) {
package/dist/cjs/types/src/components/Signup/components/LoadingOverlay.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export default function LoadingOverlay({ style }: {
3
+ style?: React.CSSProperties;
4
+ }): import("react/jsx-runtime").JSX.Element | null;
package/dist/cjs/types/src/components/Signup/consts.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const SIGNUP_BACKGROUND_COLOR = "#f8fafc";
package/dist/cjs/types/src/components/Signup/signup-quote/SignupQuote.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const SignupQuote: () => import("react/jsx-runtime").JSX.Element | null;
1
+ declare const SignupQuote: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default SignupQuote;
package/dist/cjs/types/src/utils/QueryKeyFactory.d.ts CHANGED
@@ -106,6 +106,10 @@ declare const QueryKeyFactory: {
106
106
  token?: string;
107
107
  }) => string[];
108
108
  paymentPluginsKey: (token?: string) => string[];
109
- accountForSignup: (token?: string) => string[];
109
+ signupAccount: (token?: string) => string[];
110
+ signupPriceList: (code?: string, token?: string) => string[];
110
111
  };
111
112
  export default QueryKeyFactory;
113
+ export declare const MutationKeyFactory: {
114
+ quoteAccountSignup: readonly ["quoteAccountSignup"];
115
+ };
package/dist/esm/index.js CHANGED
@@ -1275,7 +1275,15 @@ const QueryKeyFactory = {
1275
1275
  ],
1276
1276
  paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
1277
1277
  // Keys for <Signup />
1278
- accountForSignup: (token) => ['accountForSignup', ...(token ? [token] : [])],
1278
+ signupAccount: (token) => ['signupAccount', ...(token ? [token] : [])],
1279
+ signupPriceList: (code, token) => [
1280
+ 'signupPriceList',
1281
+ ...(code ? [code] : []),
1282
+ ...(token ? [token] : []),
1283
+ ],
1284
+ };
1285
+ const MutationKeyFactory = {
1286
+ quoteAccountSignup: ['quoteAccountSignup'],
1279
1287
  };
1280
1288
 
1281
1289
  const InvoiceQuoteContext = createContext({});
@@ -1289,7 +1297,7 @@ const DEFAULT_CONFIG = {
1289
1297
  };
1290
1298
 
1291
1299
  // This will be replaced at build time by rollup-plugin-replace
1292
- const PACKAGE_VERSION = '1.8.0-beta.22';
1300
+ const PACKAGE_VERSION = '1.8.0-beta.23';
1293
1301
  const createRequestHeaders = (token) => {
1294
1302
  const headers = createClientDevHeaders({ token });
1295
1303
  // Add the components version header
@@ -19785,7 +19793,7 @@ function CardImage({ paymentMethod: maskedPaymentMethod, }) {
19785
19793
  }
19786
19794
  }
19787
19795
 
19788
- const { Text: Text$E } = Typography;
19796
+ const { Text: Text$F } = Typography;
19789
19797
  const MiniCreditCard_PaymentMethodFragment = t(`
19790
19798
  fragment MiniCreditCard_PaymentMethodFragment on PaymentMethod {
19791
19799
  ...CardImage_PaymentMethodFragment
@@ -19815,7 +19823,7 @@ function MiniCreditCard({ className, buttons, hideDropdownMenu = false, hideDefa
19815
19823
  }, [darkMode]);
19816
19824
  const isDefault = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.isDefault;
19817
19825
  const isFailed = (paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.state) === 'FAILED';
19818
- return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: paymentMethod ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethod: paymentMethod }), jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-1", children: [isDefault && !hideDefaultTag && (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })), isFailed && (jsx(FailedTag, { failureReason: paymentMethod.failureReason, forceOpenTooltip: isHovering }))] })] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$E, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
19826
+ return (jsx("div", { className: `bunny-flex bunny-flex-row bunny-justify-between bunny-items-center bunny-p-1 bunny-px-3 bunny-border-solid ${backgroundColor} bunny-${borderColor} bunny-rounded-md bunny-border ${className}`, id: id, onMouseEnter: () => setIsHovering(true), onMouseLeave: () => setIsHovering(false), children: paymentMethod ? (jsxs(Fragment, { children: [jsx("div", { className: "bunny-flex bunny-flex-row bunny-gap-4", children: jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2 bunny-space-between bunny-w-full", children: [jsx(CardImage, { paymentMethod: paymentMethod }), jsx(Issuer, { issuer: (_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _a === void 0 ? void 0 : _a.issuer }), jsx(Identifier, { type: (_b = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _b === void 0 ? void 0 : _b.type, identifier: (_c = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.metadata) === null || _c === void 0 ? void 0 : _c.identifier }), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-1", children: [isDefault && !hideDefaultTag && (jsx(Tag, { bordered: false, style: { color: brandColor, backgroundColor: `${brandColor}30` }, children: "Default" })), isFailed && (jsx(FailedTag, { failureReason: paymentMethod.failureReason, forceOpenTooltip: isHovering }))] })] }) }), buttons ? (buttons) : (jsx(Fragment, { children: !hideDropdownMenu && (jsx(DropdownMenu, { setDefault: onClickSetDefault, remove: onClickRemove, isDefault: isDefault !== null && isDefault !== void 0 ? isDefault : false, id: `credit-card-dropdown-${paymentMethod.id}` })) }))] })) : (jsxs("div", { className: "bunny-flex bunny-flex-row bunny-items-center justify-between w-full", children: [jsxs("div", { className: "bunny-flex bunny-flex-row bunny-gap-2 bunny-items-center", children: [jsx(CreditCardOutlined, {}), jsx(Text$F, { className: "bunny-text-slate-400 bunny-text-sm", children: "No payment methods" })] }), jsx(Button, { disabled: true, type: "link" }), buttons] })) }));
19819
19827
  }
19820
19828
  function FailedTag({ failureReason, forceOpenTooltip }) {
19821
19829
  const tag = (jsx(Tag, { bordered: false, color: "red", children: "Failed" }));
@@ -19829,15 +19837,15 @@ const Identifier = ({ type, identifier, }) => {
19829
19837
  return null;
19830
19838
  }
19831
19839
  if (type === 'cashapp') {
19832
- return jsx(Text$E, { children: "Cashapp" });
19840
+ return jsx(Text$F, { children: "Cashapp" });
19833
19841
  }
19834
- return (jsxs("div", { children: [jsx(Text$E, { className: "relative -top-0.5", children: "****" }), jsx(Text$E, { children: identifier })] }));
19842
+ return (jsxs("div", { children: [jsx(Text$F, { className: "relative -top-0.5", children: "****" }), jsx(Text$F, { children: identifier })] }));
19835
19843
  };
19836
19844
  const Issuer = ({ issuer }) => {
19837
19845
  const list = ['visa', 'link', 'jcb', 'discover', 'sepa'];
19838
19846
  if (!issuer || issuer.length == 0 || list.includes(issuer === null || issuer === void 0 ? void 0 : issuer.toLowerCase()))
19839
19847
  return null;
19840
- return jsx(Text$E, { children: lodashExports.capitalize(issuer) });
19848
+ return jsx(Text$F, { children: lodashExports.capitalize(issuer) });
19841
19849
  };
19842
19850
  const DropdownMenu = ({ setDefault, remove, isDefault, id, }) => {
19843
19851
  const { brandColor } = useBrand();
@@ -21104,7 +21112,7 @@ const DemoPayExpiry = ({ autoFocus, onChange, placeholder, value, }) => {
21104
21112
  return (jsx("div", { className: "bunny-grow", children: jsx(Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) }));
21105
21113
  };
21106
21114
 
21107
- const { Text: Text$D } = Typography;
21115
+ const { Text: Text$E } = Typography;
21108
21116
  const DemoPayForm = () => {
21109
21117
  const { darkMode } = useContext(BunnyContext);
21110
21118
  const [cardDetails, setCardDetails] = useDemoPayCardDetails();
@@ -21117,7 +21125,7 @@ const DemoPayForm = () => {
21117
21125
  const onCardCvcChange = (cvc) => {
21118
21126
  setCardDetails(prev => ({ ...prev, cvc }));
21119
21127
  };
21120
- return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$D, { children: "DemoPay is for testing only." })] }));
21128
+ return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [jsxs(StyledInputs, { className: "bunny-flex bunny-flex-col bunny-gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false, children: [jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxs("div", { className: "bunny-flex bunny-gap-2", children: [jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] })] }), jsx(Text$E, { children: "DemoPay is for testing only." })] }));
21121
21129
  };
21122
21130
  const StyledInputs = defaultStyled.div `
21123
21131
  .ant-input {
@@ -21159,7 +21167,7 @@ const CardIcon = ({ className }) => {
21159
21167
  return (jsxs("svg", { className: className, width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M1.5 7.5H16.5", stroke: SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
21160
21168
  };
21161
21169
 
21162
- const { Text: Text$C } = Typography;
21170
+ const { Text: Text$D } = Typography;
21163
21171
  const PaymentMethodSelector = () => {
21164
21172
  const { paymentPlugins } = usePaymentPlugins();
21165
21173
  const [selectedPluginId, setSelectedPluginId] = useSelectedPluginId();
@@ -21173,7 +21181,7 @@ const PaymentOption = ({ selected, paymentPluginId, onClick, name, disabled, })
21173
21181
  const isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes('card');
21174
21182
  return (jsxs(PaymentOptionContainer, { "$brandColor": brandColor, "$selected": selected, className: `bunny-flex bunny-justify-between bunny-items-center bunny-cursor-pointer bunny-py-2 bunny-rounded bunny-border-solid ${darkMode
21175
21183
  ? `var(--row-background-dark) border-gray-500`
21176
- : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$C, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
21184
+ : 'bunny-bg-slate-50 bunny-border-slate-200'} bunny-border`, onClick: () => !disabled && onClick(paymentPluginId), children: [jsxs("div", { className: "bunny-flex bunny-gap-2 bunny-items-center bunny-pl-4", children: [jsx(Checkbox, { checked: selected, className: darkMode ? 'border-gray-400' : '' }), jsx(Text$D, { children: name })] }), isAch ? (jsx(BankOutlined, { className: "bunny-pr-4" })) : isCard ? (jsx(CardIcon, { className: "bunny-pr-4" })) : (jsx(CardIcon, { className: "bunny-pr-4" }))] }));
21177
21185
  };
21178
21186
  const PaymentOptionContainer = defaultStyled.div `
21179
21187
  transition: border 0.3s ease;
@@ -21639,10 +21647,10 @@ const useDownloadFile = (id, onError) => {
21639
21647
  };
21640
21648
  };
21641
21649
 
21642
- const { Text: Text$B } = Typography;
21650
+ const { Text: Text$C } = Typography;
21643
21651
  function BackButton({ onClick, title }) {
21644
21652
  const { brandColor } = useBrand();
21645
- return (jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsx(FontAwesomeIcon, { className: "pt-0.5", icon: faArrowLeft }), jsx(Text$B, { className: "bunny-text-sm bunny-text-gray-400 bunny-text-nowrap", children: title || 'back' })] }));
21653
+ return (jsxs(StyledBackButton, { brandColor: brandColor, className: "bunny-flex bunny-items-center bunny-gap-2 bunny-p-0 bunny-text-gray-400", onClick: onClick, children: [jsx(FontAwesomeIcon, { className: "pt-0.5", icon: faArrowLeft }), jsx(Text$C, { className: "bunny-text-sm bunny-text-gray-400 bunny-text-nowrap", children: title || 'back' })] }));
21646
21654
  }
21647
21655
  const StyledBackButton = styled.button.withConfig({
21648
21656
  shouldForwardProp: prop => !['brandColor'].includes(prop),
@@ -22081,7 +22089,7 @@ const AcceptQuoteModal = ({ acceptBoxVisible, formattedQuote: maskedFormattedQuo
22081
22089
  }, open: acceptBoxVisible, title: (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length) ? 'Start signing' : 'Accept quote', width: 400, children: jsx(NoSigningPluginsForm, { isVisible: acceptBoxVisible, formattedQuote: formattedQuote, form: form }) }));
22082
22090
  };
22083
22091
 
22084
- const { Title: Title$3, Text: Text$A } = Typography;
22092
+ const { Title: Title$3, Text: Text$B } = Typography;
22085
22093
  const showSuccessNotification$1 = useSuccessNotification();
22086
22094
  const showErrorNotification$3 = useErrorNotification();
22087
22095
  const PaymentHoldModal_FormattedQuoteFragment = t(`
@@ -22107,7 +22115,7 @@ const PaymentHoldModal = ({ visible, setVisible, formattedQuote: maskedFormatted
22107
22115
  const [form] = Form.useForm();
22108
22116
  return (jsx(StyledModal$2, { centered: true, onCancel: () => {
22109
22117
  setVisible(false);
22110
- }, footer: null, open: visible, width: 900, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsx(Title$3, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxs(Text$A, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-p-4 bunny-pb-6", children: noSigningPlugins ? jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsx(VerticalDivider, { className: "bunny-m-4" }), jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsx(PaymentForm, { quote: formattedQuote.quote, paymentHold: {
22118
+ }, footer: null, open: visible, width: 900, className: 'bunny-flex bunny-flex-row bunny-gap-4', children: jsxs("div", { className: "bunny-flex bunny-flex-row", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-w-1/2", children: [jsxs("div", { className: "bunny-mt-5 bunny-mx-4", children: [jsx(Title$3, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxs(Text$B, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', formatCurrency(formattedQuote.amount, formattedQuote.currency || 'null'), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-p-4 bunny-pb-6", children: noSigningPlugins ? jsx(NoSigningPluginsForm, { isVisible: visible, formattedQuote: formattedQuote, form: form }) : null })] }), jsx(VerticalDivider, { className: "bunny-m-4" }), jsx("div", { className: "bunny-mb-3 bunny-w-1/2 bunny-pt-6", children: jsx(PaymentForm, { quote: formattedQuote.quote, paymentHold: {
22111
22119
  quoteId: formattedQuote.quote.id, // TODO: fix hack. We assume the quote id is always present, but may not be the case
22112
22120
  amountToHold: formattedQuote.amount,
22113
22121
  }, onPaymentSuccess: () => {
@@ -22244,9 +22252,9 @@ function PaymentHoldDisplay({ paymentHold: maskedPaymentHold, currency, amount,
22244
22252
  return (jsx(Tooltip$1, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted.Hold will be released on ${expirationDate} if not accepted.`, children: jsx(Fragment, { children: jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
22245
22253
  }
22246
22254
 
22247
- const { Text: Text$z } = Typography;
22255
+ const { Text: Text$A } = Typography;
22248
22256
  const QuoteIsAcceptedLabel = ({ acceptedByName, acceptedAt }) => {
22249
- return (jsx(Text$z, { children: `Quote was accepted by ${String(acceptedByName !== null && acceptedByName !== void 0 ? acceptedByName : '')} on ${formatDate(acceptedAt)}` }));
22257
+ return (jsx(Text$A, { children: `Quote was accepted by ${String(acceptedByName !== null && acceptedByName !== void 0 ? acceptedByName : '')} on ${formatDate(acceptedAt)}` }));
22250
22258
  };
22251
22259
 
22252
22260
  const QuoteButtons_FormattedQuoteFragment = t(`
@@ -22850,9 +22858,9 @@ const getColor = (state) => {
22850
22858
  }
22851
22859
  };
22852
22860
 
22853
- const { Text: Text$y } = Typography;
22861
+ const { Text: Text$z } = Typography;
22854
22862
  const TransactionDate = ({ date }) => {
22855
- return jsx(Text$y, { className: "bunny-text-sm", children: formatDate(date) });
22863
+ return jsx(Text$z, { className: "bunny-text-sm", children: formatDate(date) });
22856
22864
  };
22857
22865
 
22858
22866
  const ArrowDownToLine = ({ className, color = SLATE_600, }) => {
@@ -22896,13 +22904,13 @@ const TransactionGridCell = defaultStyled.div.withConfig({
22896
22904
  min-width: 48px;
22897
22905
  `;
22898
22906
 
22899
- const { Text: Text$x } = Typography;
22907
+ const { Text: Text$y } = Typography;
22900
22908
  const TransactionsEmptyState = () => {
22901
22909
  const { noTransactionsMessage } = useContext(TransactionsListContext);
22902
- return (jsx(Text$x, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
22910
+ return (jsx(Text$y, { className: "bunny-flex bunny-justify-center bunny-p-4 bunny-text-base", children: noTransactionsMessage || 'There are no transactions' }));
22903
22911
  };
22904
22912
 
22905
- const { Text: Text$w } = Typography;
22913
+ const { Text: Text$x } = Typography;
22906
22914
  const isInvoice = (transaction) => {
22907
22915
  return transaction.kind === 'INVOICE';
22908
22916
  };
@@ -22910,7 +22918,7 @@ const TransactionRowTitle = ({ transaction }) => {
22910
22918
  if (!isInvoice(transaction)) {
22911
22919
  return jsx(Fragment, {});
22912
22920
  }
22913
- return (jsx(Text$w, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
22921
+ return (jsx(Text$x, { className: "bunny-text-slate-400", style: { fontSize: '11px' }, children: transaction.transactionable.number }));
22914
22922
  };
22915
22923
 
22916
22924
  function transactionDateToDisplay(transaction, transactionDateType) {
@@ -22928,7 +22936,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
22928
22936
  }
22929
22937
  }
22930
22938
 
22931
- const { Text: Text$v } = Typography;
22939
+ const { Text: Text$w } = Typography;
22932
22940
  const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
22933
22941
  const { columns, transactionDateType } = useContext(TransactionsListContext);
22934
22942
  const { apiHost, darkMode } = useContext(BunnyContext);
@@ -22956,11 +22964,11 @@ const TransactionsListDesktop = ({ transactions, onTransactionClick, }) => {
22956
22964
  !showState &&
22957
22965
  !showAmount &&
22958
22966
  !showDownload &&
22959
- !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$v, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, { right: false, children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsx(Text$v, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsx(TransactionGridCell, { right: false, children: jsx(Text$v, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, { right: false, children: jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsx(TransactionGridCell, { right: true, children: jsx(Text$v, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
22967
+ !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$w, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, { right: false, children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, { right: false, className: "bunny-flex bunny-items-center bunny-gap-2", children: [jsx(Text$w, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] }) })), showAccountName && (jsx(TransactionGridCell, { right: false, children: jsx(Text$w, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) })), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, { right: false, children: jsx(StateTag, { state: transaction.state }) })) : null, showAmount && (jsx(TransactionGridCell, { right: true, children: jsx(Text$w, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) }))] }, index));
22960
22968
  }) }));
22961
22969
  };
22962
22970
 
22963
- const { Text: Text$u } = Typography;
22971
+ const { Text: Text$v } = Typography;
22964
22972
  const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
22965
22973
  const { columns, transactionDateType } = useContext(TransactionsListContext);
22966
22974
  const { apiHost, darkMode } = useContext(BunnyContext);
@@ -22982,11 +22990,11 @@ const TransactionsListMobile = ({ transactions, onTransactionClick, }) => {
22982
22990
  backgroundColor: index % 2 === 0
22983
22991
  ? `var(--row-background${darkMode ? '-dark' : ''})`
22984
22992
  : `var(--row-background-alternate${darkMode ? '-dark' : ''})`,
22985
- }, children: [jsx(TransactionGridCell, { children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$u, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsx(Text$u, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$u, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$u, { children: "\u00B7" }), showAmount && (jsx(Text$u, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsx(TransactionGridCell, { right: true, children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
22993
+ }, children: [jsx(TransactionGridCell, { children: jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2", children: [(showTitle || showState) && (jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$v, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] })), jsxs("div", { className: "bunny-flex bunny-items-center bunny-gap-2", children: [showAccountName && jsx(Text$v, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$v, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$v, { children: "\u00B7" }), showAmount && (jsx(Text$v, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] })] }) }), showDownload && (jsx(TransactionGridCell, { right: true, children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) }))] }, index));
22986
22994
  }) }));
22987
22995
  };
22988
22996
 
22989
- const { Text: Text$t } = Typography;
22997
+ const { Text: Text$u } = Typography;
22990
22998
  const DISPLAY_WIDTH = 1200;
22991
22999
  function Transactions({ transactionComponent, showSearchBar = true, showTitle = true, title = 'Past transactions', columns = ['date', 'title', 'state', 'amount', 'download'], className, shadow = 'shadow-md', searchBarClassName, useModal = false, onTransactionClick, suppressTransactionDisplay = false, kindsToShow = [
22992
23000
  TransactionKind.INVOICE,
@@ -23090,7 +23098,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
23090
23098
  onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
23091
23099
  setDrawerOpen(false);
23092
23100
  }
23093
- return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$t, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
23101
+ return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$u, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
23094
23102
  ), showSearchBar && (jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
23095
23103
  const value = e.target.value;
23096
23104
  // Allow empty string, numbers, and decimal point
@@ -23411,7 +23419,7 @@ const BunnyFooterIcon = ({ color }) => {
23411
23419
  return (jsxs("svg", { width: "45", height: "15", viewBox: "0 0 39 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxs("g", { clipPath: "url(#clip0_6_851)", children: [jsx("path", { className: "bunny-icon-path", d: "M14.5898 7.19708C14.5898 9.35053 13.0926 10.325 11.2495 10.325C9.39955 10.325 7.90234 9.35001 7.90234 7.18967V3.26221H10.1125V7.00052C10.1125 7.87719 10.5855 8.27725 11.2495 8.27725C11.9061 8.27725 12.3865 7.87719 12.3865 7.00052V3.26221H14.5898V7.19708Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M31.8943 12.9625H29.4793L31.8523 8.62816L28.9355 3.26221H31.4708L33.0457 6.35524L34.5924 3.26221H37.0075L31.8943 12.9625Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M15.1602 5.96827C15.1602 3.8148 16.6574 2.84033 18.5005 2.84033C20.3504 2.84033 21.8476 3.81533 21.8476 5.97568V10.1473H19.6374V6.16483C19.6374 5.28815 19.1645 4.8881 18.5005 4.8881C17.8439 4.8881 17.3634 5.28815 17.3634 6.16483V10.1473H15.1602V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M22.4316 5.96827C22.4316 3.8148 23.9289 2.84033 25.7719 2.84033C27.6219 2.84033 29.1191 3.81533 29.1191 5.97568V10.1473H26.9089V6.16483C26.9089 5.28815 26.4359 4.8881 25.7719 4.8881C25.1154 4.8881 24.6349 5.28815 24.6349 6.16483V10.1473H22.4316V5.96827Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M7.40511 6.68957C7.40511 8.7236 6.02815 10.3227 4.17816 10.3227C3.23907 10.3227 2.61071 9.94378 2.19358 9.40371V10.1404H0.0605469V0.0405273H2.26381V3.91939C2.68041 3.42158 3.28802 3.07069 4.17763 3.07069C6.02759 3.07069 7.40511 4.66981 7.40511 6.68957ZM2.17229 6.69642C2.17229 7.60802 2.77937 8.2744 3.64823 8.2744C4.53783 8.2744 5.13107 7.59372 5.13107 6.69642C5.13107 5.79912 4.53783 5.11844 3.64823 5.11844C2.77937 5.11844 2.17229 5.78482 2.17229 6.69642Z", fill: color }), jsx("path", { className: "bunny-icon-path", d: "M38.966 8.94801C38.966 9.76181 38.2668 10.4631 37.4618 10.4631C36.6499 10.4631 35.9434 9.76181 35.9434 8.94801C35.9434 8.14846 36.6494 7.46094 37.4618 7.46094C38.2668 7.46094 38.966 8.14846 38.966 8.94801Z", fill: color })] }), jsx("defs", { children: jsx("clipPath", { id: "clip0_6_851", children: jsx("rect", { width: "39", height: "13", fill: "white" }) }) })] }));
23412
23420
  };
23413
23421
 
23414
- const { Text: Text$s } = Typography;
23422
+ const { Text: Text$t } = Typography;
23415
23423
  const Footer = ({ className }) => {
23416
23424
  const token = useToken();
23417
23425
  const { currentUser } = useCurrentUserData(token);
@@ -23422,7 +23430,7 @@ const Footer = ({ className }) => {
23422
23430
  const BunnyMarketingLink = () => {
23423
23431
  const [isHovered, setIsHovered] = useState(false);
23424
23432
  const isMobile = useIsMobile();
23425
- return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$s, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
23433
+ return (jsx("div", { className: `bunny-flex bunny-items-end bunny-justify-end ${isMobile ? '' : 'grow'}`, children: jsx(StyledBunnyLink, { className: "bunny-flex bunny-items-end bunny-justify-end bunny-text-slate-400", href: "https://bunny.com/", rel: "noopener noreferrer", target: "_blank", children: jsxs("div", { className: "bunny-flex bunny-items-center", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [jsx(Text$t, { className: "bunny-text-slate-400", children: "Powered by\u00A0" }), jsx("div", { style: { paddingTop: '5px' }, children: jsx(BunnyFooterIcon, { color: isHovered ? PRIMARY_COLOR : SLATE_400 }) })] }) }) }));
23426
23434
  };
23427
23435
  const StyedLink = styled.a `
23428
23436
  color: ${SLATE_400};
@@ -23731,7 +23739,7 @@ function checkoutSummaryTotalsFromPriceList(priceList, willBeTrial) {
23731
23739
  };
23732
23740
  }
23733
23741
 
23734
- const { Text: Text$r } = Typography;
23742
+ const { Text: Text$s } = Typography;
23735
23743
  function CheckoutSummary({ quote: maskedQuote, className, priceList: maskedPriceList, defaultCouponCode, }) {
23736
23744
  var _a, _b, _c, _d, _e, _f, _g, _h;
23737
23745
  const { enableTrial } = useSignupOptions();
@@ -23784,7 +23792,7 @@ function CheckoutSummary({ quote: maskedQuote, className, priceList: maskedPrice
23784
23792
  : priceList
23785
23793
  ? checkoutSummaryTotalsFromPriceList(priceList, willBeTrial)
23786
23794
  : null;
23787
- return (jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxs(Text$r, { children: [jsxs("div", { className: "bunny-space-y-4", children: [!quote && priceList && (jsx(Fragment, { children: (_g = priceList.charges) === null || _g === void 0 ? void 0 : _g.filter(charge => !charge.deprecated && !charge.featureAddon).map(charge => (jsx(CheckoutSummaryLineItem, { charge: {
23795
+ return (jsxs("div", { className: `${className} bunny-space-y-4`, children: [jsxs(Text$s, { children: [jsxs("div", { className: "bunny-space-y-4", children: [!quote && priceList && (jsx(Fragment, { children: (_g = priceList.charges) === null || _g === void 0 ? void 0 : _g.filter(charge => !charge.deprecated && !charge.featureAddon).map(charge => (jsx(CheckoutSummaryLineItem, { charge: {
23788
23796
  name: charge.name,
23789
23797
  quantity: charge.quantityMin,
23790
23798
  subtotal: charge.basePrice,
@@ -23857,7 +23865,7 @@ const billingPeriodConverter = (period) => {
23857
23865
  return 12;
23858
23866
  };
23859
23867
 
23860
- const { Text: Text$q } = Typography;
23868
+ const { Text: Text$r } = Typography;
23861
23869
  const PriceListDisplay_PriceListFragment = t(`
23862
23870
  fragment PriceListDisplay_PriceListFragment on PriceList {
23863
23871
  product {
@@ -23880,7 +23888,7 @@ function PriceListDisplay({ priceList: maskedPriceList }) {
23880
23888
  const willBeTrial = (priceList === null || priceList === void 0 ? void 0 : priceList.trialAllowed) && enableTrial;
23881
23889
  if (!priceList)
23882
23890
  return null;
23883
- return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-0", children: [jsxs(Text$q, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxs(Text$q, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / ", periodLabel] })] }), willBeTrial ? (jsx("div", { className: "bunny-flex", children: jsx(CustomizedTag, { color: TAG_COLORS["TRIAL"], children: `${(_b = priceList.trialLengthDays) !== null && _b !== void 0 ? _b : 'N/A'} day trial` }) })) : null] }));
23891
+ return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-4", children: [jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-0", children: [jsxs(Text$r, { className: "bunny-text-slate-500 bunny-font-bold bunny-text-lg", children: [(_a = priceList.product) === null || _a === void 0 ? void 0 : _a.name, " ", priceList.name] }), jsxs(Text$r, { className: "bunny-font-bold bunny-text-xl", children: [formatCurrency(priceList.basePrice, priceList.currencyId), " / ", periodLabel] })] }), willBeTrial ? (jsx("div", { className: "bunny-flex", children: jsx(CustomizedTag, { color: TAG_COLORS["TRIAL"], children: `${(_b = priceList.trialLengthDays) !== null && _b !== void 0 ? _b : 'N/A'} day trial` }) })) : null] }));
23884
23892
  }
23885
23893
 
23886
23894
  const mutation$f = t(`
@@ -23937,6 +23945,7 @@ function useQuoteAccountSignupMutation({ priceListCode, enableTrial, priceList,
23937
23945
  const { apiHost } = useContext(BunnyContext);
23938
23946
  const token = useToken();
23939
23947
  return useMutation({
23948
+ mutationKey: MutationKeyFactory.quoteAccountSignup,
23940
23949
  mutationFn: ({ formData, accountCode, }) => {
23941
23950
  return quoteAccountSignup({
23942
23951
  token,
@@ -24321,7 +24330,7 @@ function useExistingAccount({ onAccountLoaded, } = {}) {
24321
24330
  const token = useToken();
24322
24331
  const { apiHost } = useContext(BunnyContext);
24323
24332
  const { data, isLoading } = useQuery({
24324
- queryKey: QueryKeyFactory.accountForSignup(token),
24333
+ queryKey: QueryKeyFactory.signupAccount(token),
24325
24334
  queryFn: async () => {
24326
24335
  var _a;
24327
24336
  const response = await getCurrentUserAccountForSignup({ apiHost, token });
@@ -24499,12 +24508,12 @@ const SuccessIcon = () => {
24499
24508
  }, children: jsx(FontAwesomeIcon, { icon: faCheck, style: { color: '#16a34a', fontSize: 24 } }) }));
24500
24509
  };
24501
24510
 
24502
- const { Text: Text$p } = Typography;
24511
+ const { Text: Text$q } = Typography;
24503
24512
  const ViewPortalSubscription = ({ returnUrl }) => {
24504
24513
  if (!returnUrl) {
24505
24514
  return null;
24506
24515
  }
24507
- return (jsx(Text$p, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: "View subscription" }));
24516
+ return (jsx(Text$q, { className: "bunny-text-slate-500 bunny-cursor-pointer bunny-underline", onClick: () => (window.location.href = returnUrl), children: "View subscription" }));
24508
24517
  };
24509
24518
 
24510
24519
  function SignupSuccessDisplay({ returnUrl, className, children, }) {
@@ -24518,7 +24527,7 @@ function createPortalReturnUrl({ apiHost, token }) {
24518
24527
  return `${apiHost}/portal/subscriptions?token=${encodeURIComponent(token)}`;
24519
24528
  }
24520
24529
 
24521
- const { Text: Text$o, Title } = Typography;
24530
+ const { Text: Text$p, Title } = Typography;
24522
24531
  const SuccessDisplay = ({ quote: maskedQuote, currencyId, returnUrl, className, }) => {
24523
24532
  var _a, _b;
24524
24533
  const { apiHost } = useContext(BunnyContext);
@@ -24530,15 +24539,15 @@ const SuccessDisplay = ({ quote: maskedQuote, currencyId, returnUrl, className,
24530
24539
  const isAccepted = (quote === null || quote === void 0 ? void 0 : quote.state) === 'ACCEPTED';
24531
24540
  const isTrial = (_b = quote === null || quote === void 0 ? void 0 : quote.quoteChanges) === null || _b === void 0 ? void 0 : _b.some(change => change.isTrial === true);
24532
24541
  if (!isPayToAccept && isTrial) {
24533
- return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$o, { className: "bunny-text-slate-500", children: "Trial subscription created" })] }));
24542
+ return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$p, { className: "bunny-text-slate-500", children: "Trial subscription created" })] }));
24534
24543
  }
24535
24544
  if (isPayToAccept && isAccepted && isTrial) {
24536
- return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$o, { className: "bunny-text-slate-500", children: "Quote accepted. Trial subscription created" })] }));
24545
+ return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$p, { className: "bunny-text-slate-500", children: "Quote accepted. Trial subscription created" })] }));
24537
24546
  }
24538
24547
  if (isPayToAccept && isAccepted) {
24539
- return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$o, { className: "bunny-text-slate-500", children: "Quote accepted. Subscription created" }), currencyId ? jsx(Text$o, { className: "bunny-text-slate-500", children: formatCurrency(amountDue, currencyId) }) : null] }));
24548
+ return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$p, { className: "bunny-text-slate-500", children: "Quote accepted. Subscription created" }), currencyId ? jsx(Text$p, { className: "bunny-text-slate-500", children: formatCurrency(amountDue, currencyId) }) : null] }));
24540
24549
  }
24541
- return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$o, { className: "bunny-text-slate-500", children: "Payment successful. Subscription created" })] }));
24550
+ return (jsxs(SignupSuccessDisplay, { returnUrl: resolvedReturnUrl, className: className, children: [jsx(Title, { level: 3, className: "bunny-m-0", children: "Signup successful!" }), jsx(Text$p, { className: "bunny-text-slate-500", children: "Payment successful. Subscription created" })] }));
24542
24551
  };
24543
24552
 
24544
24553
  const SelfServiceBuyWarning_PriceListFragment = t(`
@@ -24597,12 +24606,40 @@ const SignupQuote = () => {
24597
24606
  const [documentPreviewFullscreenApi, setDocumentPreviewFullscreenApi] = useState(null);
24598
24607
  const quote = readFragment(SignupQuote_QuoteFragment, signupQuoteFromCache);
24599
24608
  const isAccepted = (quote === null || quote === void 0 ? void 0 : quote.state) === 'ACCEPTED';
24600
- if (!quote)
24601
- return null;
24602
- return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-h-full", children: [jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-end bunny-gap-2", children: [isAccepted && (jsx(QuoteIsAcceptedLabel, { acceptedByName: quote === null || quote === void 0 ? void 0 : quote.acceptedByName, acceptedAt: quote === null || quote === void 0 ? void 0 : quote.acceptedAt })), documentPreviewFullscreenApi ? (jsx(Button, { icon: jsx(FullscreenOutlined, {}), onClick: () => documentPreviewFullscreenApi.toggleFullScreen(), children: "Fullscreen" })) : null, jsx(DownloadQuoteButton, { id: quote === null || quote === void 0 ? void 0 : quote.id })] }), jsx(InvoiceQuoteView, { html: (_b = (_a = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _a === void 0 ? void 0 : _a.html) !== null && _b !== void 0 ? _b : null, targetUrl: (quote === null || quote === void 0 ? void 0 : quote.documentTemplateId) ? `/pdf/quote/${quote === null || quote === void 0 ? void 0 : quote.id}` : undefined, onDocumentPreviewFullscreenApiChange: setDocumentPreviewFullscreenApi })] }));
24609
+ return (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-h-full", children: [jsxs("div", { className: "bunny-flex bunny-items-center bunny-justify-end bunny-gap-2", children: [isAccepted && (jsx(QuoteIsAcceptedLabel, { acceptedByName: quote === null || quote === void 0 ? void 0 : quote.acceptedByName, acceptedAt: quote === null || quote === void 0 ? void 0 : quote.acceptedAt })), documentPreviewFullscreenApi ? (jsx(Button, { icon: jsx(FullscreenOutlined, {}), onClick: () => documentPreviewFullscreenApi.toggleFullScreen(), children: "Fullscreen" })) : null, (quote === null || quote === void 0 ? void 0 : quote.id) ? jsx(DownloadQuoteButton, { id: quote === null || quote === void 0 ? void 0 : quote.id }) : null] }), jsx(InvoiceQuoteView, { html: (_b = (_a = quote === null || quote === void 0 ? void 0 : quote.formattedQuote) === null || _a === void 0 ? void 0 : _a.html) !== null && _b !== void 0 ? _b : null, targetUrl: (quote === null || quote === void 0 ? void 0 : quote.documentTemplateId) ? `/pdf/quote/${quote === null || quote === void 0 ? void 0 : quote.id}` : undefined, onDocumentPreviewFullscreenApiChange: setDocumentPreviewFullscreenApi })] }));
24603
24610
  };
24604
24611
 
24605
- const BACKGROUND_COLOR = '#f8fafc';
24612
+ const SIGNUP_BACKGROUND_COLOR = '#f8fafc';
24613
+
24614
+ const { Text: Text$o } = Typography;
24615
+ function LoadingOverlay({ style }) {
24616
+ const queryClient = useQueryClient();
24617
+ const isAccountFetching = useIsFetching({ queryKey: QueryKeyFactory.signupAccount() }) > 0;
24618
+ const isPriceListFetching = useIsFetching({ queryKey: QueryKeyFactory.signupPriceList() }) > 0;
24619
+ const isPluginsFetching = useIsFetching({ queryKey: QueryKeyFactory.pluginsKey() }) > 0;
24620
+ const isBrandingFetching = useIsFetching({ queryKey: QueryKeyFactory.brandingKey() }) > 0;
24621
+ const isQuoteCreating = useIsMutating({ mutationKey: MutationKeyFactory.quoteAccountSignup }) > 0;
24622
+ const signupAccountQueries = queryClient.getQueriesData({ queryKey: QueryKeyFactory.signupAccount() });
24623
+ const isAccountUnresolved = signupAccountQueries.every(([, data]) => data === undefined);
24624
+ const hasExistingAccount = signupAccountQueries.some(([, data]) => { var _a, _b; return ((_b = (_a = data === null || data === void 0 ? void 0 : data.currentUser) === null || _a === void 0 ? void 0 : _a.account) === null || _b === void 0 ? void 0 : _b.id) !== undefined; });
24625
+ const visible = isAccountFetching || isAccountUnresolved || isPriceListFetching || isPluginsFetching || isBrandingFetching || (isQuoteCreating && hasExistingAccount);
24626
+ const label = isQuoteCreating ? 'Loading quote...' : 'Setting up signup...';
24627
+ if (!visible)
24628
+ return null;
24629
+ return (jsxs("div", { "aria-hidden": "true", style: {
24630
+ position: 'absolute',
24631
+ inset: 0,
24632
+ backgroundColor: SIGNUP_BACKGROUND_COLOR,
24633
+ display: 'flex',
24634
+ flexDirection: 'column',
24635
+ alignItems: 'center',
24636
+ justifyContent: 'center',
24637
+ gap: 12,
24638
+ zIndex: 10,
24639
+ ...style,
24640
+ }, children: [jsx(Spin, { indicator: jsx(LoadingOutlined, { spin: true, style: { fontSize: 72 } }) }), jsx(Text$o, { type: "secondary", children: label })] }));
24641
+ }
24642
+
24606
24643
  function SignupContent({ priceListCode, defaultFormValues, documentTemplateId, requiredBillingDetails, returnUrl: returnUrlProp, style, }) {
24607
24644
  const [purchaseSucceeded] = useSignupPurchaseSucceeded();
24608
24645
  const { apiHost } = useContext(BunnyContext);
@@ -24610,14 +24647,14 @@ function SignupContent({ priceListCode, defaultFormValues, documentTemplateId, r
24610
24647
  const signupQuoteFromCache = useSignupQuoteQueryData({ tokenOverride: token });
24611
24648
  const { account } = useExistingAccount();
24612
24649
  const { data: maskedPriceList } = useQuery({
24613
- queryKey: ['priceList', priceListCode],
24650
+ queryKey: QueryKeyFactory.signupPriceList(priceListCode, token),
24614
24651
  queryFn: () => getPriceList({ token, apiHost, code: priceListCode }),
24615
24652
  });
24616
24653
  // Derived state
24617
24654
  const priceList = readFragment(Signup_PriceListFragment, maskedPriceList);
24618
24655
  const quote = readFragment(Signup_QuoteFragment, signupQuoteFromCache);
24619
24656
  const hasExistingAccount = (account === null || account === void 0 ? void 0 : account.id) !== undefined;
24620
- return (jsx("div", { style: { backgroundColor: BACKGROUND_COLOR, ...style }, children: jsx(SignupSplitScreenContainer, { left: jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-items-start bunny-justify-between bunny-gap-4 bunny-py-24 bunny-overflow-y-auto", children: [jsx(Logo, {}), jsxs("div", { className: "bunny-flex bunny-min-h-0 bunny-w-full bunny-flex-1 bunny-flex-col bunny-gap-4", children: [jsx(PriceListDisplay, { priceList: priceList }), jsx(CheckoutSummary, { quote: quote !== null && quote !== void 0 ? quote : undefined, priceList: priceList }), jsx(SignupQuote, {})] }), jsx(Footer, {})] }), right: jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-py-24 bunny-overflow-y-auto", children: [jsx(SignupForm, { priceListCode: priceListCode, priceList: priceList, defaultFormValues: defaultFormValues, documentTemplateId: documentTemplateId, requiredBillingDetails: requiredBillingDetails }), !quote && !hasExistingAccount && (jsx("div", { className: "bunny-pt-4", children: jsx(QuoteCreateButton, { priceListCode: priceListCode, priceList: priceList, documentTemplateId: documentTemplateId }) })), !purchaseSucceeded && quote && (jsx("div", { className: "bunny-pt-4", children: jsx(SignupPaymentForm, { quote: quote, priceList: priceList }) })), purchaseSucceeded && (jsx(SuccessDisplay, { quote: quote, currencyId: priceList === null || priceList === void 0 ? void 0 : priceList.currencyId, returnUrl: returnUrlProp, className: "bunny-p-4" }))] }) }) }));
24657
+ return (jsxs("div", { style: { backgroundColor: SIGNUP_BACKGROUND_COLOR, position: 'relative', ...style }, children: [jsx(LoadingOverlay, { style: style }), jsx(SignupSplitScreenContainer, { left: jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-items-start bunny-justify-between bunny-gap-4 bunny-py-24 bunny-overflow-y-auto", children: [jsx(Logo, {}), jsxs("div", { className: "bunny-flex bunny-min-h-0 bunny-w-full bunny-flex-1 bunny-flex-col bunny-gap-4", children: [jsx(PriceListDisplay, { priceList: priceList }), jsx(CheckoutSummary, { quote: quote !== null && quote !== void 0 ? quote : undefined, priceList: priceList }), jsx(SignupQuote, {})] }), jsx(Footer, {})] }), right: jsxs("div", { className: "bunny-box-border bunny-flex bunny-h-full bunny-min-h-0 bunny-w-4/5 bunny-flex-col bunny-py-24 bunny-overflow-y-auto", children: [jsx(SignupForm, { priceListCode: priceListCode, priceList: priceList, defaultFormValues: defaultFormValues, documentTemplateId: documentTemplateId, requiredBillingDetails: requiredBillingDetails }), !quote && !hasExistingAccount && (jsx("div", { className: "bunny-pt-4", children: jsx(QuoteCreateButton, { priceListCode: priceListCode, priceList: priceList, documentTemplateId: documentTemplateId }) })), !purchaseSucceeded && quote && (jsx("div", { className: "bunny-pt-4", children: jsx(SignupPaymentForm, { quote: quote, priceList: priceList }) })), purchaseSucceeded && (jsx(SuccessDisplay, { quote: quote, currencyId: priceList === null || priceList === void 0 ? void 0 : priceList.currencyId, returnUrl: returnUrlProp, className: "bunny-p-4" }))] }) })] }));
24621
24658
  }
24622
24659
 
24623
24660
  function SignupQuoteProviderContainer({ children }) {
package/dist/esm/types/src/components/Signup/components/LoadingOverlay.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ export default function LoadingOverlay({ style }: {
3
+ style?: React.CSSProperties;
4
+ }): import("react/jsx-runtime").JSX.Element | null;
package/dist/esm/types/src/components/Signup/consts.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const SIGNUP_BACKGROUND_COLOR = "#f8fafc";
package/dist/esm/types/src/components/Signup/signup-quote/SignupQuote.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const SignupQuote: () => import("react/jsx-runtime").JSX.Element | null;
1
+ declare const SignupQuote: () => import("react/jsx-runtime").JSX.Element;
2
2
  export default SignupQuote;
package/dist/esm/types/src/utils/QueryKeyFactory.d.ts CHANGED
@@ -106,6 +106,10 @@ declare const QueryKeyFactory: {
106
106
  token?: string;
107
107
  }) => string[];
108
108
  paymentPluginsKey: (token?: string) => string[];
109
- accountForSignup: (token?: string) => string[];
109
+ signupAccount: (token?: string) => string[];
110
+ signupPriceList: (code?: string, token?: string) => string[];
110
111
  };
111
112
  export default QueryKeyFactory;
113
+ export declare const MutationKeyFactory: {
114
+ quoteAccountSignup: readonly ["quoteAccountSignup"];
115
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bunnyapp/components",
3
- "version": "1.8.0-beta.23",
3
+ "version": "1.8.0-beta.24",
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",
package/dist/cjs/types/src/components/Signup/hooks/useQuoteAccountSignupOnExit.d.ts DELETED
@@ -1,46 +0,0 @@
1
- import { FormInstance } from 'antd';
2
- import type { InitialSignupFormData } from '../components/InitialSignupFormFields';
3
- import { FragmentOf } from 'gql.tada';
4
- import { Signup_QuoteFragment } from '../fragments/Signup_QuoteFragment';
5
- type UseQuoteAccountSignupOnExitParams = {
6
- form: FormInstance<InitialSignupFormData>;
7
- priceListCode: string;
8
- enableTrial: boolean;
9
- priceList: {
10
- trialAllowed?: boolean;
11
- plan?: {
12
- selfServiceBuy?: boolean;
13
- };
14
- } | null | undefined;
15
- paymentRequiredToAcceptQuote?: boolean;
16
- documentTemplateId?: string | undefined;
17
- /** When set, account + quote already exist — do not run signup again. */
18
- quoteAccountId: string | null | undefined;
19
- onQuoteAccountSignupSuccess: (portalSessionToken: string, accountId: string, quote: FragmentOf<typeof Signup_QuoteFragment> | null) => void;
20
- handleShowSelfServiceBuyWarning: () => void;
21
- };
22
- /** Runs `quoteAccountSignup` when the account form is exited (focus leaves the wrapper) or on page hide / tab switch. */
23
- export declare function useQuoteAccountSignupOnExit({ form, priceListCode, enableTrial, priceList, paymentRequiredToAcceptQuote, documentTemplateId, quoteAccountId, onQuoteAccountSignupSuccess, handleShowSelfServiceBuyWarning, }: UseQuoteAccountSignupOnExitParams): {
24
- onSignupFormBlur: () => Promise<void>;
25
- quoteAccountSignupMutate: import("@tanstack/react-query").UseMutateFunction<{
26
- account: {
27
- id: string;
28
- } | null;
29
- quote: {
30
- [$tada.fragmentRefs]: {
31
- Signup_QuoteFragment: "Quote";
32
- };
33
- id: string | null;
34
- } | null;
35
- tenant: {
36
- code: string | null;
37
- } | null;
38
- portalSessionToken: string | null;
39
- errors: string[] | null;
40
- } | null, Error, {
41
- formData?: InitialSignupFormData;
42
- accountCode?: string;
43
- }, unknown>;
44
- isSigningUp: boolean;
45
- };
46
- export {};
package/dist/esm/types/src/components/Signup/hooks/useQuoteAccountSignupOnExit.d.ts DELETED
@@ -1,46 +0,0 @@
1
- import { FormInstance } from 'antd';
2
- import type { InitialSignupFormData } from '../components/InitialSignupFormFields';
3
- import { FragmentOf } from 'gql.tada';
4
- import { Signup_QuoteFragment } from '../fragments/Signup_QuoteFragment';
5
- type UseQuoteAccountSignupOnExitParams = {
6
- form: FormInstance<InitialSignupFormData>;
7
- priceListCode: string;
8
- enableTrial: boolean;
9
- priceList: {
10
- trialAllowed?: boolean;
11
- plan?: {
12
- selfServiceBuy?: boolean;
13
- };
14
- } | null | undefined;
15
- paymentRequiredToAcceptQuote?: boolean;
16
- documentTemplateId?: string | undefined;
17
- /** When set, account + quote already exist — do not run signup again. */
18
- quoteAccountId: string | null | undefined;
19
- onQuoteAccountSignupSuccess: (portalSessionToken: string, accountId: string, quote: FragmentOf<typeof Signup_QuoteFragment> | null) => void;
20
- handleShowSelfServiceBuyWarning: () => void;
21
- };
22
- /** Runs `quoteAccountSignup` when the account form is exited (focus leaves the wrapper) or on page hide / tab switch. */
23
- export declare function useQuoteAccountSignupOnExit({ form, priceListCode, enableTrial, priceList, paymentRequiredToAcceptQuote, documentTemplateId, quoteAccountId, onQuoteAccountSignupSuccess, handleShowSelfServiceBuyWarning, }: UseQuoteAccountSignupOnExitParams): {
24
- onSignupFormBlur: () => Promise<void>;
25
- quoteAccountSignupMutate: import("@tanstack/react-query").UseMutateFunction<{
26
- account: {
27
- id: string;
28
- } | null;
29
- quote: {
30
- [$tada.fragmentRefs]: {
31
- Signup_QuoteFragment: "Quote";
32
- };
33
- id: string | null;
34
- } | null;
35
- tenant: {
36
- code: string | null;
37
- } | null;
38
- portalSessionToken: string | null;
39
- errors: string[] | null;
40
- } | null, Error, {
41
- formData?: InitialSignupFormData;
42
- accountCode?: string;
43
- }, unknown>;
44
- isSigningUp: boolean;
45
- };
46
- export {};