@bunnyapp/components 1.6.0-beta.20 → 1.6.0-beta.22

package/dist/cjs/index.js

@@ -143,7 +143,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.19';
+const PACKAGE_VERSION = '1.6.0-beta.21';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -929,7 +929,7 @@ function readFragment(...r) {
 
 var t = initGraphQLTada();
 
-const query$6 = t(`
+const query$7 = t(`
   query entityBranding {
     entityBranding {
       accentColor
@@ -939,7 +939,7 @@ const query$6 = t(`
   }
 `);
 const getBranding = async ({ token, apiHost }) => {
-    return await execute(query$6, { apiHost, token }, {});
+    return await execute(query$7, { apiHost, token }, {});
 };
 
 const BunnyContext = react.createContext({});
@@ -1146,7 +1146,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] }))] }));
 };
 
-const MUTATION$a = `
+const MUTATION$9 = `
 query FormattedInvoice($id: ID) {
   formattedInvoice(id: $id) {
     amount
@@ -1214,7 +1214,7 @@ query FormattedInvoice($id: ID) {
 const getFormattedInvoice = async ({ id, token, apiHost, }) => {
     const vars = { id };
     const response = await gqlRequest({
-        query: MUTATION$a,
+        query: MUTATION$9,
         token,
         vars,
         apiHost,
@@ -18732,7 +18732,7 @@ const QueryKeyFactory = {
     paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
 };
 
-const query$5 = t(`
+const query$6 = t(`
     query PaymentMethods($accountId: ID) {
       paymentMethods(accountId: $accountId) {
         nodes {
@@ -18761,7 +18761,7 @@ const query$5 = t(`
   `, [PaymentForm_PaymentMethodsFragment]);
 const getPaymentMethods = async ({ apiHost, token, accountId, }) => {
     var _a, _b, _c;
-    const response = await execute(query$5, { apiHost, token }, { accountId });
+    const response = await execute(query$6, { apiHost, token }, { accountId });
     // Filter out null values that are technically possible due to api schema
     return (_c = (_b = (_a = response === null || response === void 0 ? void 0 : response.paymentMethods) === null || _a === void 0 ? void 0 : _a.nodes) === null || _b === void 0 ? void 0 : _b.filter(paymentMethod => paymentMethod !== null)) !== null && _c !== void 0 ? _c : [];
 };
@@ -19007,7 +19007,7 @@ function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
     return { save, isSaving };
 }
 
-const MUTATION$9 = `
+const MUTATION$8 = `
   mutation checkout(
     $invoiceId: ID,
     $quoteId: ID,
@@ -19056,7 +19056,7 @@ const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData
         };
     }
     const response = await gqlRequest({
-        query: MUTATION$9,
+        query: MUTATION$8,
         token,
         vars: mutationVars,
         apiHost: apiHost,
@@ -19344,14 +19344,20 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const { apiHost } = react.useContext(BunnyContext);
     const token = useToken();
+    // State
+    const [isPaid, setIsPaid] = react.useState(false);
     const formattedAmountDue = () => {
         const amountDue = quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
         const currencyId = (quote === null || quote === void 0 ? void 0 : quote.currencyId) || (invoice === null || invoice === void 0 ? void 0 : invoice.currencyId);
         return amountDue && currencyId ? common.formatCurrency(amountDue, currencyId).toString() : undefined;
     };
+    // Validation checks
+    if (quote !== undefined && invoice !== undefined) {
+        throw new Error('Either quote or invoice must be provided, not both');
+    }
     // Payment hooks
     const { pay: payDemoPay, isPaying: isPayingDemoPay } = usePay$1({
-        onPaymentSuccess,
+        onPaymentSuccess: handlePaymentSuccess,
         onPaymentError: error => {
             handleAllErrorFormats$2(error);
         },
@@ -19360,7 +19366,7 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
         plugin,
     });
     const { pay: payStripe, isPaying: isPayingStripe } = usePay({
-        onPaymentSuccess,
+        onPaymentSuccess: handlePaymentSuccess,
         onPaymentError: error => {
             handleAllErrorFormats$2(error);
         },
@@ -19432,6 +19438,10 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
                 break;
         }
     };
+    function handlePaymentSuccess(response) {
+        setIsPaid(true);
+        onPaymentSuccess === null || onPaymentSuccess === void 0 ? void 0 : onPaymentSuccess(response);
+    }
     const handlePayment = async (overridePaymentMethodId) => {
         var _a, _b;
         if (!plugin)
@@ -19454,6 +19464,7 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
             isPayingStripe ||
             isApprovingHoldDemoPay ||
             isApprovingHoldStripe,
+        isPaid,
         paymentType: paymentHoldOptions.payToAccept ? PaymentType.APPROVE_HOLD : PaymentType.PAY,
         formattedAmountDue: formattedAmountDue(),
     };
@@ -19541,11 +19552,13 @@ const [ShowPaymentDetailsProvider, useShowPaymentDetails] = createStateContext(u
 const handleAllErrorFormats$1 = common.useAllErrorFormats();
 const showErrorNotification$5 = common.useErrorNotification();
 // Contexts
-const [AmountDueProvider, useAmountDue] = createValueContext();
+const [FormattedAmountDueProvider, useFormattedAmountDue] = createValueContext();
 const [PaymentTypeProvider, usePaymentType] = createValueContext();
 const [IsPayingProvider, useIsPaying] = createValueContext();
 const [HandlePaymentFormSubmitProvider, useHandlePaymentFormSubmit] = createValueContext();
 const [IsSavingProvider, useIsSaving] = createValueContext();
+// Used for PaymentMethodFooter to disable pay button if payment is already successful
+const [IsPaidProvider, useIsPaid] = createValueContext();
 // Used for Signup component. Signup uses an apiClient token which api can't infer an account from, so accountId must be used
 const [AccountIdProvider, useAccountId] = createValueContext();
 function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldOptions, onSavePaymentMethod, }) {
@@ -19556,7 +19569,7 @@ function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess
     // Hooks
     const queryClient = reactQuery.useQueryClient();
     const token = useToken();
-    const { handlePayment, handleApproveHold, handleCheckoutNoPayment, isPaying, paymentType, formattedAmountDue, } = useHandlePayment({
+    const { handlePayment, handleApproveHold, handleCheckoutNoPayment, isPaying, isPaid, paymentType, formattedAmountDue, } = useHandlePayment({
         quote,
         invoice,
         onPaymentSuccess: (response) => {
@@ -19662,11 +19675,12 @@ function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess
         }
     };
     const providers = [
-        [AmountDueProvider, { value: formattedAmountDue }],
+        [FormattedAmountDueProvider, { value: formattedAmountDue }],
         [PaymentTypeProvider, { value: paymentType }],
         [IsPayingProvider, { value: isPaying }],
         [HandlePaymentFormSubmitProvider, { value: handlePaymentFormSubmit }],
         [IsSavingProvider, { value: isSavingDemoPay || isSavingStripe }],
+        [IsPaidProvider, { value: isPaid }],
         [AccountIdProvider, { value: accountId }],
     ];
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: providers.reduceRight((acc, [Provider, props]) => react.createElement(Provider, props, acc), children) }));
@@ -19677,33 +19691,49 @@ function StripeWrapper({ children, currencyId, accountId, }) {
     return (jsxRuntime.jsx(reactStripeJs.Elements, { options: options, stripe: stripe, children: children }));
 }
 
+function usePaymentButtonText() {
+    const formattedAmountDue = useFormattedAmountDue();
+    const paymentType = usePaymentType();
+    const isPaid = useIsPaid();
+    const isSaving = useIsSaving();
+    const isPaying = useIsPaying();
+    const isProcessing = isSaving || isPaying;
+    // If payment is already successful, show the amount paid
+    if (isPaid) {
+        return 'Paid ' + (formattedAmountDue !== null && formattedAmountDue !== void 0 ? formattedAmountDue : '');
+    }
+    const paymentTypeText = isProcessing
+        ? paymentType === PaymentType.APPROVE_HOLD
+            ? 'Approving hold for'
+            : 'Paying'
+        : paymentType === PaymentType.APPROVE_HOLD
+            ? 'Approve hold for'
+            : 'Pay';
+    return paymentTypeText + ' ' + (formattedAmountDue !== null && formattedAmountDue !== void 0 ? formattedAmountDue : '');
+}
+
 const CheckoutFooter = () => {
+    const isPaid = useIsPaid();
     const isMobile = useIsMobile();
-    const paymentType = usePaymentType();
     const isPaying = useIsPaying();
-    const formattedAmountDue = useAmountDue();
+    const paymentButtonText = usePaymentButtonText();
     const onPaymentFormSubmit = useHandlePaymentFormSubmit();
-    const buttonText = paymentType === PaymentType.APPROVE_HOLD ? 'Approve hold for' : 'Pay';
-    const isPayingButtonText = paymentType === PaymentType.APPROVE_HOLD ? 'Approving hold for' : 'Paying';
-    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying, onClick: () => onPaymentFormSubmit(), size: isMobile ? 'large' : 'middle', type: "primary", children: `${isPaying ? isPayingButtonText : buttonText} ${formattedAmountDue}` }));
+    return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying || isPaid, onClick: () => onPaymentFormSubmit(), size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
 };
 
 function PaymentMethodFooter({ onSubmit, noPadding, }) {
     const isPaying = useIsPaying();
     const isSaving = useIsSaving();
-    const buttonText = useSubmitButtonText();
+    const formattedAmountDue = useFormattedAmountDue();
+    const paymentButtonText = usePaymentButtonText();
     const isMobile = common.useIsMobile();
     const [, setShowPaymentMethodForm] = useShowPaymentDetails();
+    // If amount due is undefined, show the save button
+    const payableAvailable = formattedAmountDue !== undefined;
+    const saveButtonText = isSaving ? 'Saving' : 'Save';
+    const buttonText = payableAvailable ? paymentButtonText : saveButtonText;
     return (jsxRuntime.jsxs("div", { className: `bunny-flex bunny-justify-end bunny-gap-2 ${noPadding ? '' : 'pt-6'}`, children: [jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }), jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isSaving || isPaying, loading: isSaving || isPaying, onClick: onSubmit, size: isMobile ? 'large' : 'middle', type: "primary", children: buttonText })] }));
 }
-function useSubmitButtonText() {
-    const amountDue = useAmountDue();
-    const paymentType = usePaymentType();
-    const payableAvailable = amountDue !== undefined;
-    const paymentTypeText = paymentType === PaymentType.APPROVE_HOLD ? 'approve hold for' : 'pay';
-    const buttonTextPrefix = payableAvailable ? paymentTypeText : 'save';
-    return lodashExports.capitalize(buttonTextPrefix) + ' ' + (amountDue !== null && amountDue !== void 0 ? amountDue : '');
-}
 
 const DemoPayCardCvc = ({ autoFocus, onChange, placeholder, value, }) => {
     const onKeyPress = (event) => {
@@ -19904,7 +19934,7 @@ const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMet
     ]);
 };
 
-const query$4 = t(`
+const query$5 = t(`
   query GetCurrentUserData {
     company {
       name
@@ -19927,7 +19957,7 @@ const query$4 = t(`
 `);
 const getCurrentUserData = async ({ token, apiHost }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    const response = await execute(query$4, { apiHost, token }, {});
+    const response = await execute(query$5, { apiHost, token }, {});
     return {
         authObjectName: (_a = response === null || response === void 0 ? void 0 : response.currentUser) === null || _a === void 0 ? void 0 : _a.authObjectName,
         account: (_b = response === null || response === void 0 ? void 0 : response.currentUser) === null || _b === void 0 ? void 0 : _b.account,
@@ -20086,7 +20116,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
     const [showPaymentMethodForm, setShowPaymentMethodForm] = useShowPaymentDetails();
     const paymentType = usePaymentType();
     const isPaying = useIsPaying();
-    const amountDue = useAmountDue();
+    const formattedAmountDue = useFormattedAmountDue();
     const selectedPlugin = useSelectedPlugin();
     const onPaymentFormSubmit = useHandlePaymentFormSubmit();
     const accountId = useAccountId();
@@ -20133,7 +20163,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
                             label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
                             children: (jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsxRuntime.jsx(PaymentMethodSelector, {}), selectedPlugin && (jsxRuntime.jsx("div", { className: "bunny-flex bunny-flex-col", children: jsxRuntime.jsx(PaymentMethodDetails, {}) }))] })),
                         },
-                    ] }), amountDue !== undefined && !showPaymentMethodForm && (jsxRuntime.jsx("div", { className: "bunny-px-4", children: jsxRuntime.jsx(CheckoutFooter, {}) }))] })) : (jsxRuntime.jsx(antd.Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
+                    ] }), formattedAmountDue !== undefined && !showPaymentMethodForm && (jsxRuntime.jsx("div", { className: "bunny-px-4", children: jsxRuntime.jsx(CheckoutFooter, {}) }))] })) : (jsxRuntime.jsx(antd.Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
 }
 
 function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, shadow = 'shadow-md', className, hideDownloadButton = false, hidePaymentForm = false, onInvoiceLoaded, }) {
@@ -20168,7 +20198,7 @@ function ActualInvoice({ hidePaymentForm }) {
     const isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
     // Local state
     const isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
-    const onSuccess = () => {
+    const handlePaymentSuccess = () => {
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.transactionsKey({ token }),
         });
@@ -20188,15 +20218,21 @@ function ActualInvoice({ hidePaymentForm }) {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: formattedInvoice }) }))] }) }));
+    return (jsxRuntime.jsx("div", { className: "bunny-invoice-container", children: jsxRuntime.jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsxRuntime.jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice }) }))] }) }));
 }
 
-const MUTATION$8 = () => `
-  query formattedQuote ($id: ID) {
-    formattedQuote (id: $id) {
+const query$4 = t(`
+  query formattedQuote($id: ID) {
+    formattedQuote(id: $id) {
       quote {
         documentTemplateId
-        documents { id filename size date url }
+        documents {
+          id
+          filename
+          size
+          date
+          url
+        }
         firstInvoice {
           id
           state
@@ -20326,17 +20362,10 @@ const MUTATION$8 = () => `
       taxNumberRequired
       vendorName
     }
-  }`;
+  }
+`);
 const getFormattedQuote = async ({ token, apiHost, id, }) => {
-    const response = await gqlRequest({
-        query: MUTATION$8(),
-        token,
-        apiHost,
-        vars: { id },
-    });
-    if (response.errors && response.errors.length > 0) {
-        throw new Error(response.errors[0].message);
-    }
+    const response = await execute(query$4, { apiHost, token }, { id });
     return response === null || response === void 0 ? void 0 : response.formattedQuote;
 };
 
@@ -20671,7 +20700,7 @@ const PaymentHoldModal = ({ visible, setVisible, quote, }) => {
     const token = useToken();
     return (jsxRuntime.jsxs(StyledModal$2, { centered: true, onCancel: () => {
             setVisible(false);
-        }, footer: null, open: visible, width: 600, children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsxRuntime.jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay now" }), jsxRuntime.jsxs(Text$w, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', common.formatCurrency(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-mb-3", children: jsxRuntime.jsx(PaymentForm, { quote: {
+        }, footer: null, open: visible, width: 600, children: [jsxRuntime.jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsxRuntime.jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), jsxRuntime.jsxs(Text$w, { className: "bunny-bt-2 bunny-text-sm/5 bunny-text-gray-500", children: ["To accept this quote, approve a payment hold for", ' ', common.formatCurrency(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsxRuntime.jsx("div", { className: "bunny-mb-3", children: jsxRuntime.jsx(PaymentForm, { quote: {
                         amount: quote.amount,
                         currencyId: quote.currency,
                         id: quote.quote.id,
@@ -20766,7 +20795,7 @@ function ActualQuote({ onQuoteAccepted }) {
         },
         placeholderData: reactQuery.keepPreviousData,
     });
-    const formattedQuote = data;
+    const formattedQuote = data; // TODO: fix to use the correct type
     // Hooks
     const { acceptBoxVisible, isAccepting, sendAccept, setAcceptBoxVisible, setIsAccepting, startAcceptance, pandadocPollingModalVisible, setPandadocPollingModalVisible, isSendAcceptPending, } = useSendAcceptQuote({
         token,
@@ -20813,7 +20842,7 @@ function QuoteButtons({ isAccepted, formattedQuote, isMobile, hideDownloadButton
     const signingPlugins = useSigningPlugins({ apiHost, token });
     return (jsxRuntime.jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
             color: secondaryColor,
-        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${common.formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay now" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${common.formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsxRuntime.jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, { icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay and sign" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted ? (jsxRuntime.jsx(antd.Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
                                 ? 'Quote is expired'
                                 : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
                                     ? 'Start signing'
@@ -20829,6 +20858,8 @@ function PaymentHoldDisplay({ paymentHold, currency, amount, }) {
     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] }) }) }));
 }
 
+const TransactionsListContext = react.createContext({});
+
 const QUOTES_QUERY = (filter) => `
   query quotes {
     quotes ${filter ? `(${filter})` : ''} {
@@ -20865,8 +20896,6 @@ const getQuotes = async ({ token, apiHost, filter, }) => {
     return response === null || response === void 0 ? void 0 : response.quotes;
 };
 
-const TransactionsListContext = react.createContext({});
-
 const transactionMutation = (filter) => `
 query transactions {
   transactions ${filter ? `(${filter})` : ''} {
@@ -21190,7 +21219,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
                         }, children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) })] }), useModal ? (jsxRuntime.jsx(antd.Modal, { title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null, children: jsxRuntime.jsx(Invoice, { id: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm }) })) : (jsxRuntime.jsx(antd.Drawer, { title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH, children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm })) : (jsxRuntime.jsxs(antd.Card, { className: "bunny-shadow-md", children: [jsxRuntime.jsx(antd.Typography.Title, { level: 2, className: "bunny-mb-4", children: "Transaction Details" }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] })) }))] }));
 }
 
-function Quotes({ className, columns = ['date', 'title', 'amount', 'download', 'state'], filter, filterQuotes, sort = (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), noQuotesMessage = 'There are no quotes', onQuoteClick, quoteComponent, searchBarClassName, shadow = 'shadow-md', showSearchBar = true, showTitle = true, title = 'Past quotes', style, suppressQuoteDisplay = false, useModal = false, }) {
+function Quotes({ className, columns = ['date', 'title', 'amount', 'download', 'state'], filter, filterQuotes, sort = (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), noQuotesMessage = 'There are no quotes', onQuoteClick, renderQuote, searchBarClassName, shadow = 'shadow-md', showSearchBar = true, showTitle = true, title = 'Past quotes', style, suppressQuoteDisplay = false, useModal = false, }) {
     const { apiHost } = react.useContext(BunnyContext);
     const [component, setComponent] = react.useState(null);
     const contextValues = {
@@ -21240,8 +21269,8 @@ function Quotes({ className, columns = ['date', 'title', 'amount', 'download', '
     }
     function handleQuoteClick(quote) {
         onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
-        if (quoteComponent) {
-            setComponent(quoteComponent);
+        if (renderQuote !== undefined) {
+            setComponent(renderQuote(quote));
         }
         else {
             setComponent(jsxRuntime.jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
@@ -22175,12 +22204,8 @@ const CheckoutBarInput = ({ disabled, priceListCharge, quantity, onQuantityChang
                     }, min: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMin, max: priceListCharge === null || priceListCharge === void 0 ? void 0 : priceListCharge.quantityMax, style: { minWidth: '120px' }, type: "number", value: quantity, required: true }) })] }));
 };
 const QuantityLabel = ({ activeCharge }) => {
-    var _a;
-    const featureName = (_a = activeCharge.feature) === null || _a === void 0 ? void 0 : _a.name;
-    const pluralizedFeatureName = (common.StringUtils.isStringPluralized(featureName) || !featureName
-        ? featureName
-        : common.StringUtils.pluralizeEntityName(featureName)) || '';
-    return (jsxRuntime.jsx(Text$n, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: pluralizedFeatureName.toUpperCase() }));
+    const chargeName = activeCharge.name;
+    return (jsxRuntime.jsx(Text$n, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
 };
 
 const periodMonthsConverter = (period) => {
@@ -22709,11 +22734,8 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
         token,
     });
     const { mutate: recalculateTaxesMutation } = reactQuery.useMutation({
-        mutationFn: () => {
-            if (!(quote === null || quote === void 0 ? void 0 : quote.id)) {
-                throw new Error('Quote ID is required');
-            }
-            return quoteRecalculateTaxes({ token, apiHost, quoteId: quote.id });
+        mutationFn: (quoteId) => {
+            return quoteRecalculateTaxes({ token, apiHost, quoteId });
         },
         onError: (error) => {
             if (!error[0].message.includes('Ensure that you have a taxation plugin')) {
@@ -22762,8 +22784,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 }),
             });
             setInitialQuote(data.quote);
-            console.log('handleRecalculateTaxes in quoteAccountSignupMutate');
-            handleRecalculateTaxes();
+            handleRecalculateTaxes(data.quote.id);
         },
         onError: (error) => {
             const errorMessage = error.response.errors[0].message;
@@ -22801,7 +22822,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
             showSuccessNotification('Coupon applied');
-            handleRecalculateTaxes();
+            handleRecalculateTaxes(quote === null || quote === void 0 ? void 0 : quote.id);
             setCouponEditorCouponCode('');
         },
         onCouponRemoved: () => {
@@ -22809,7 +22830,7 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
                 queryKey: ['quote', quote === null || quote === void 0 ? void 0 : quote.id],
             });
             showSuccessNotification('Coupon removed');
-            handleRecalculateTaxes();
+            handleRecalculateTaxes(quote === null || quote === void 0 ? void 0 : quote.id);
         },
     });
     // Handle default coupon application
@@ -22843,18 +22864,21 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             accountId,
         });
     }
-    function handleRecalculateTaxes() {
-        console.log('handleRecalculateTaxes', hasTaxPlugin);
+    function handleRecalculateTaxes(quoteId) {
+        if (!quoteId) {
+            showErrorNotification$1('No quote ID found to recalculate taxes');
+            return;
+        }
         if (!hasTaxPlugin) {
-            console.log('no tax plugin, returning');
+            showErrorNotification$1('No tax plugin found to recalculate taxes');
             return;
         }
-        recalculateTaxesMutation();
+        recalculateTaxesMutation(quoteId);
     }
     if (purchaseSucceeded) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx("div", { className: "bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 bunny-flex bunny-items-start bunny-pt-[25vh]", children: jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "bunny-w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId }) })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) }));
     }
-    return (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col' : 'bunny-flex-row'} bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ${shadow} ${className}`, style: style, children: [jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full'} bunny-justify-center`, children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24", children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsxRuntime.jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) })), jsxRuntime.jsx(Footer, {})] }) }), jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full'} bunny-items-center`, style: {
+    return (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col' : 'bunny-flex-row'} bunny-h-screen bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 ${shadow} ${className}`, style: style, children: [jsxRuntime.jsx("div", { className: `bunny-flex bunny-items-center bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2' : 'bunny-w-1/2 bunny-h-full'} bunny-justify-center`, children: jsxRuntime.jsxs("div", { className: "bunny-flex bunny-flex-col bunny-items-start bunny-justify-between bunny-w-3/5 bunny-h-full bunny-gap-4 bunny-my-24", children: [jsxRuntime.jsx("div", { children: topNavImageUrl.length > 0 && (jsxRuntime.jsx("img", { alt: "Logo", src: topNavImageUrl, style: { width: 'auto', height: '28px' } })) }), data ? (jsxRuntime.jsx(CheckoutSummary, { quote: data, className: "bunny-h-full bunny-w-full", onAddCoupon: addCoupon, onRemoveCoupon: removeCoupon, isRemovingCoupon: isRemovingCoupon, priceListData: priceListData, isAddingCoupon: isAddingCoupon, couponCode: couponEditorCouponCode, setCouponCode: setCouponEditorCouponCode, activeCouponsExist: activeCouponsExist })) : (jsxRuntime.jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true })) : (jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData })) })), jsxRuntime.jsx(Footer, {})] }) }), jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col ${isMobile ? 'bunny-w-full bunny-h-1/2 bunny-overflow-auto' : 'bunny-w-1/2 bunny-h-full'} bunny-items-center`, style: {
                     boxShadow: '-5px 0 20px 0 rgba(0, 0, 0, 0.05)',
                 }, children: isLoadingPriceList ? (jsxRuntime.jsx(antd.Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsxRuntime.jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
 }
@@ -24623,7 +24647,7 @@ function doesPriceListHaveFlatFeeCharges(maskedPriceList) {
 function priceDescriptionString({ unitName, showPriceAsMonthly, periodMonths, priceListHasFlatFeeCharges, }) {
     const periodMonthsConverted = periodMonthsConverter(periodMonths);
     const periodLabel = periodMonthsConverted ? common.PERIOD_LABELS[periodMonthsConverted] : null;
-    return `per ${unitName && !priceListHasFlatFeeCharges ? `${unitName.toLowerCase()} / ` : ''}${showPriceAsMonthly ? 'month' : periodLabel}`;
+    return `Per ${unitName && !priceListHasFlatFeeCharges ? `${unitName.toLowerCase()} / ` : ''}${showPriceAsMonthly ? 'month' : periodLabel}`;
 }
 
 var localizedFormat$2 = {exports: {}};

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

@@ -1,6 +1,6 @@
 import { FormattedInvoice, Invoice, Quote } from '@bunnyapp/common';
 import { PaymentType } from '../types/PaymentType';
-declare const useAmountDue: () => string | undefined;
+declare const useFormattedAmountDue: () => string | undefined;
 declare const usePaymentType: () => PaymentType | undefined;
 declare const useIsPaying: () => boolean | undefined;
 declare const useHandlePaymentFormSubmit: () => (demoPayCardDetails?: {
@@ -9,8 +9,9 @@ declare const useHandlePaymentFormSubmit: () => (demoPayCardDetails?: {
     cvc: string;
 }) => Promise<void>;
 declare const useIsSaving: () => boolean | undefined;
+declare const useIsPaid: () => boolean | undefined;
 declare const useAccountId: () => string | undefined;
-export { useAccountId, useAmountDue, useHandlePaymentFormSubmit, useIsPaying, useIsSaving, usePaymentType, };
+export { useAccountId, useFormattedAmountDue, useHandlePaymentFormSubmit, useIsPaying, useIsSaving, useIsPaid, usePaymentType, };
 export declare function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, paymentHoldOptions, onSavePaymentMethod, }: {
     children: React.ReactNode;
     accountId?: string;

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

@@ -18,6 +18,7 @@ declare const useHandlePayment: ({ quote, invoice, onPaymentSuccess, onPaymentHo
         savePaymentMethod: boolean | undefined;
     }, Error, void, unknown>;
     isPaying: boolean;
+    isPaid: boolean;
     paymentType: PaymentType;
     formattedAmountDue: string | undefined;
 };

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

@@ -0,0 +1 @@
+export declare function usePaymentButtonText(): string;

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

@@ -1,9 +1,9 @@
 import { Transaction } from '@bunnyapp/common';
 import { ShadowType } from '../../types/shadowType';
 import { TransactionListColumnType } from '../Transactions/transactionsList/TransactionsListDesktop';
-declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, quoteComponent, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
-    /** A custom component to render instead of the default invoice component */
-    quoteComponent?: React.ReactNode;
+declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, renderQuote, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
+    /** Render a custom quote component. Receives the quoteId as a parameter. */
+    renderQuote?: (quote: Transaction) => React.ReactNode;
     /** Whether to show the search bar */
     showSearchBar?: boolean;
     /** Whether to show the title */