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

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.20';
 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'
@@ -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/graphql/queries/getFormattedQuote.d.ts

@@ -2,5 +2,143 @@ declare const getFormattedQuote: ({ token, apiHost, id, }: {
     apiHost: string;
     token?: string;
     id?: string;
-}) => Promise<any>;
+}) => Promise<{
+    quote: {
+        documentTemplateId: string | null;
+        documents: {
+            id: string;
+            filename: string;
+            size: string;
+            date: unknown;
+            url: string;
+        }[] | null;
+        firstInvoice: {
+            id: string | null;
+            state: "FAILED" | "DRAFT" | "NOT_DUE" | "DUE" | "UNPAID" | "PAID" | "VOIDED" | "READY" | "PREPARING" | "PROCESSING_PAYMENT" | "MERGED" | "QUEUED" | "CONSOLIDATED";
+        } | null;
+        payableId: string | null;
+        id: string | null;
+        payToAccept: boolean | null;
+        currentPaymentHold: {
+            createdAt: unknown;
+            expiresAt: unknown;
+            id: string | null;
+            updatedAt: unknown;
+            paymentMethod: {
+                accountId: string | null;
+                createdAt: unknown;
+                expirationDate: unknown;
+                failureCode: string | null;
+                id: string;
+                isDefault: boolean | null;
+                lastSuccess: unknown;
+                paymentType: "ach" | "card" | "other" | "wire" | null;
+                pluginId: string | null;
+                state: "UNKNOWN" | "SUCCESS" | "FAILED" | null;
+                updatedAt: unknown;
+                metadata: {
+                    description: string | null;
+                    expiration: unknown;
+                    icon: string | null;
+                    identifier: string | null;
+                    issuer: string | null;
+                    kind: string | null;
+                } | null;
+            } | null;
+        } | null;
+    };
+    payableId: string | null;
+    acceptedAt: unknown;
+    acceptedByName: string | null;
+    amount: number;
+    amountDue: number;
+    amountsByPeriod: {
+        id: string | null;
+        name: string | null;
+        amount: number | null;
+    }[];
+    billingCity: string | null;
+    billingCountry: string | null;
+    billingState: string | null;
+    billingStreet: string | null;
+    billingZip: string | null;
+    contactName: string | null;
+    currency: string | null;
+    customerBillingCity: string | null;
+    customerBillingCountry: string | null;
+    customerBillingState: string | null;
+    customerBillingStreet: string | null;
+    customerBillingZip: string | null;
+    customerName: string | null;
+    discount: number;
+    discountValue: number;
+    duration: string | null;
+    endDate: unknown;
+    expiresAt: unknown;
+    html: string | null;
+    formattedLines: {
+        amount: number;
+        amountsByPeriod: {
+            quantity: number | null;
+            id: string | null;
+            name: string | null;
+            startDate: unknown;
+            endDate: unknown;
+            amount: number | null;
+            amountsByTier: {
+                id: string | null;
+                tier: {
+                    starts: number | null;
+                    ends: number | null;
+                    price: number | null;
+                } | null;
+                quantity: number | null;
+                amount: number | null;
+            }[] | null;
+            prorationRate: number | null;
+        }[];
+        billingPeriodEnd: string | null;
+        billingPeriodStart: string | null;
+        chargeType: string;
+        discount: number | null;
+        frequency: string;
+        isRamp: boolean;
+        periods: number;
+        planName: string;
+        position: number;
+        price: number | null;
+        priceDecimals: number | null;
+        priceListChargeId: string | null;
+        priceListChargeName: string | null;
+        priceListId: string;
+        priceListName: string | null;
+        priceTiers: {
+            price: number | null;
+            starts: number;
+        }[] | null;
+        pricingModel: string;
+        productName: string;
+        prorationRate: number | null;
+        quantity: number | null;
+        showProductNameOnLineItem: boolean;
+        taxCode: string | null;
+        trialEndDate: unknown;
+        trialStartDate: unknown;
+        unitOfMeasure: string;
+        vatCode: string | null;
+    }[];
+    netPaymentDays: number | null;
+    notes: string | null;
+    number: string | null;
+    poNumberRequired: boolean | null;
+    salesContactEmail: string | null;
+    sharedAt: unknown;
+    startDate: unknown;
+    state: "DRAFT" | "SHARED" | "VIEWED" | "ACCEPTED" | "IN_APPROVAL" | "APPROVED" | "REJECTED" | "UNDONE";
+    subtotal: number;
+    taxAmount: number;
+    taxNumberLabel: string | null;
+    taxNumberRequired: boolean | null;
+    vendorName: string | null;
+}>;
 export default getFormattedQuote;

package/dist/esm/index.js

@@ -1,8 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, createElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
-import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, StringUtils, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
-import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Image, Popconfirm, Table, Radio, Space, Switch } from 'antd';
+import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
+import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { Markup } from 'interweave';
 import request from 'graphql-request';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
@@ -141,7 +141,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.20';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -927,7 +927,7 @@ function readFragment(...r) {
 
 var t = initGraphQLTada();
 
-const query$6 = t(`
+const query$7 = t(`
   query entityBranding {
     entityBranding {
       accentColor
@@ -937,7 +937,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 = createContext({});
@@ -1144,7 +1144,7 @@ const InvoiceQuoteView = ({ children, formattedInvoice, html, backButtonName, on
                 }, children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))] }));
 };
 
-const MUTATION$a = `
+const MUTATION$9 = `
 query FormattedInvoice($id: ID) {
   formattedInvoice(id: $id) {
     amount
@@ -1212,7 +1212,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,
@@ -18730,7 +18730,7 @@ const QueryKeyFactory = {
     paymentPluginsKey: (token) => ['paymentPlugins', ...(token ? [token] : [])],
 };
 
-const query$5 = t(`
+const query$6 = t(`
     query PaymentMethods($accountId: ID) {
       paymentMethods(accountId: $accountId) {
         nodes {
@@ -18759,7 +18759,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 : [];
 };
@@ -19005,7 +19005,7 @@ function useSave$1({ onSaveSuccess, onSaveError, accountId, }) {
     return { save, isSaving };
 }
 
-const MUTATION$9 = `
+const MUTATION$8 = `
   mutation checkout(
     $invoiceId: ID,
     $quoteId: ID,
@@ -19054,7 +19054,7 @@ const checkout = async ({ quoteId, invoiceId, paymentMethodId, paymentMethodData
         };
     }
     const response = await gqlRequest({
-        query: MUTATION$9,
+        query: MUTATION$8,
         token,
         vars: mutationVars,
         apiHost: apiHost,
@@ -19342,14 +19342,20 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const { apiHost } = useContext(BunnyContext);
     const token = useToken();
+    // State
+    const [isPaid, setIsPaid] = 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 ? formatCurrency$1(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);
         },
@@ -19358,7 +19364,7 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
         plugin,
     });
     const { pay: payStripe, isPaying: isPayingStripe } = usePay({
-        onPaymentSuccess,
+        onPaymentSuccess: handlePaymentSuccess,
         onPaymentError: error => {
             handleAllErrorFormats$2(error);
         },
@@ -19430,6 +19436,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)
@@ -19452,6 +19462,7 @@ const useHandlePayment = ({ quote, invoice, onPaymentSuccess, onPaymentHoldSucce
             isPayingStripe ||
             isApprovingHoldDemoPay ||
             isApprovingHoldStripe,
+        isPaid,
         paymentType: paymentHoldOptions.payToAccept ? PaymentType.APPROVE_HOLD : PaymentType.PAY,
         formattedAmountDue: formattedAmountDue(),
     };
@@ -19539,11 +19550,13 @@ const [ShowPaymentDetailsProvider, useShowPaymentDetails] = createStateContext(u
 const handleAllErrorFormats$1 = useAllErrorFormats$1();
 const showErrorNotification$5 = 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, }) {
@@ -19554,7 +19567,7 @@ function PaymentProvider({ children, accountId, quote, invoice, onPaymentSuccess
     // Hooks
     const queryClient = 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) => {
@@ -19660,11 +19673,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 (jsx(Fragment, { children: providers.reduceRight((acc, [Provider, props]) => createElement(Provider, props, acc), children) }));
@@ -19675,33 +19689,49 @@ function StripeWrapper({ children, currencyId, accountId, }) {
     return (jsx(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 (jsx(Button, { className: "bunny-w-full", disabled: isPaying, onClick: () => onPaymentFormSubmit(), size: isMobile ? 'large' : 'middle', type: "primary", children: `${isPaying ? isPayingButtonText : buttonText} ${formattedAmountDue}` }));
+    return (jsx(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 = useIsMobile$1();
     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 (jsxs("div", { className: `bunny-flex bunny-justify-end bunny-gap-2 ${noPadding ? '' : 'pt-6'}`, children: [jsx(Button, { className: "bunny-w-full", size: isMobile ? 'large' : 'middle', onClick: () => setShowPaymentMethodForm(false), children: "Cancel" }), jsx(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) => {
@@ -19902,7 +19932,7 @@ const useAutoSetDefaultPaymentMethod = ({ handleSetDefault, setDefaultPaymentMet
     ]);
 };
 
-const query$4 = t(`
+const query$5 = t(`
   query GetCurrentUserData {
     company {
       name
@@ -19925,7 +19955,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,
@@ -20084,7 +20114,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();
@@ -20131,7 +20161,7 @@ function PaymentFormContent({ onRemovePaymentMethod, onSetDefaultPaymentMethod,
                             label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", children: "Add payment method" }) })) : null,
                             children: (jsxs("div", { className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2", children: [jsx(PaymentMethodSelector, {}), selectedPlugin && (jsx("div", { className: "bunny-flex bunny-flex-col", children: jsx(PaymentMethodDetails, {}) }))] })),
                         },
-                    ] }), amountDue !== undefined && !showPaymentMethodForm && (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, {}) }))] })) : (jsx(Button, { style: { margin: '0 16px' }, loading: isPaying, onClick: () => onPaymentFormSubmit(), type: "primary", children: isPaying ? 'Processing...' : 'Complete Order' })) }));
+                    ] }), formattedAmountDue !== undefined && !showPaymentMethodForm && (jsx("div", { className: "bunny-px-4", children: jsx(CheckoutFooter, {}) }))] })) : (jsx(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, }) {
@@ -20166,7 +20196,7 @@ function ActualInvoice({ hidePaymentForm }) {
     const isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || '');
     // Local state
     const isMobile = useIsMobile$1(isInvoicePayable ? BreakpointNumbers$1.lg : undefined);
-    const onSuccess = () => {
+    const handlePaymentSuccess = () => {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory$1.default.transactionsKey({ token }),
         });
@@ -20186,15 +20216,21 @@ function ActualInvoice({ hidePaymentForm }) {
     }, [formattedInvoice]);
     if (!formattedInvoice)
         return jsx(Fragment, {});
-    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, invoice: formattedInvoice }) }))] }) }));
+    return (jsx("div", { className: "bunny-invoice-container", children: jsxs("div", { className: `bunny-flex bunny-gap-6 ${isMobile ? 'bunny-flex-col bunny-w-full' : ''} ${className}`, children: [formattedInvoice.isLegacy ? (jsx("div", { className: "bunny-flex bunny-justify-center bunny-w-full", children: jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) })) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && !hidePaymentForm && (jsx("div", { className: `bunny-w-full ${hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12'}`, children: jsx(PaymentForm, { onPaymentSuccess: handlePaymentSuccess, invoice: formattedInvoice }) }))] }) }));
 }
 
-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
@@ -20324,17 +20360,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;
 };
 
@@ -20669,7 +20698,7 @@ const PaymentHoldModal = ({ visible, setVisible, quote, }) => {
     const token = useToken();
     return (jsxs(StyledModal$2, { centered: true, onCancel: () => {
             setVisible(false);
-        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay now" }), 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", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
+        }, footer: null, open: visible, width: 600, children: [jsxs("div", { className: "bunny-mt-5 bunny-pb-4 bunny-mx-4", children: [jsx(Title$2, { className: "bunny-mt-0", level: 5, children: "Pay and sign" }), 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", ' ', formatCurrency$1(quote.amount, quote.currency), ". This amount will be charged to your payment method once the quote is signed."] })] }), jsx("div", { className: "bunny-mb-3", children: jsx(PaymentForm, { quote: {
                         amount: quote.amount,
                         currencyId: quote.currency,
                         id: quote.quote.id,
@@ -20764,7 +20793,7 @@ function ActualQuote({ onQuoteAccepted }) {
         },
         placeholderData: 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,
@@ -20811,7 +20840,7 @@ function QuoteButtons({ isAccepted, formattedQuote, isMobile, hideDownloadButton
     const signingPlugins = useSigningPlugins({ apiHost, token });
     return (jsxs("div", { className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
             color: secondaryColor,
-        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay now" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$v, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${formatDate(formattedQuote.acceptedAt)}` })) : null, (!isMobile || !isAccepted) && (jsxs("div", { className: isMobile ? 'flex w-full justify-end gap-2' : 'flex items-center justify-end gap-2', children: [paymentHold ? (jsx(PaymentHoldDisplay, { paymentHold: paymentHold, currency: formattedQuote.currency, amount: formattedQuote.amount })) : null, !isMobile && !hideDownloadButton ? (jsx(Button, { icon: jsx(DownloadOutlined, {}), onClick: () => downloadFile(apiHost + '/api/pdf/quote', token), children: "Download" })) : null, shouldDoPaymentHold && !paymentHoldCompleted ? (jsx(Button, { disabled: isExpired, onClick: () => setPaymentHoldModalVisible(true), type: "primary", children: "Pay and sign" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
                                 ? 'Quote is expired'
                                 : (signingPlugins === null || signingPlugins === void 0 ? void 0 : signingPlugins.length)
                                     ? 'Start signing'
@@ -22173,12 +22202,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 = (StringUtils.isStringPluralized(featureName) || !featureName
-        ? featureName
-        : StringUtils.pluralizeEntityName(featureName)) || '';
-    return (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 (jsx(Text$n, { className: "bunny-text-slate-500 bunny-font-medium bunny-text-nowrap", style: { fontSize: '11px' }, children: chargeName.toUpperCase() }));
 };
 
 const periodMonthsConverter = (period) => {
@@ -22707,11 +22732,8 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
         token,
     });
     const { mutate: recalculateTaxesMutation } = 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')) {
@@ -22760,8 +22782,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;
@@ -22799,7 +22820,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: () => {
@@ -22807,7 +22828,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
@@ -22841,18 +22862,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 (jsx(Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsx("div", { className: "bunny-w-screen bunny-absolute bunny-top-0 bunny-left-0 bunny-flex bunny-items-start bunny-pt-[25vh]", children: 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 }) })) : (jsx("div", { children: "No currency ID found from Quote" })) }));
     }
-    return (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: [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: 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: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx(Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false })) }), data ? (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 })) : (jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) })), jsx(Footer, {})] }) }), 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 (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: [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: 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: [jsx("div", { children: topNavImageUrl.length > 0 && (jsx("img", { alt: "Logo", src: topNavImageUrl, style: { width: 'auto', height: '28px' } })) }), data ? (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 })) : (jsx("div", { className: "bunny-h-full", children: isLoadingPriceList ? (jsx(Skeleton, { active: true })) : (jsx(PriceListDisplay, { priceListData: priceListData })) })), jsx(Footer, {})] }) }), 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 ? (jsx(Skeleton, { active: true, className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24` })) : (jsx("div", { className: `bunny-flex bunny-flex-col bunny-w-3/5 bunny-mt-24`, children: jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handleSubmit: handleSubmit, proceedingToPayment: isSigningUp || isLoadingQuote, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction, defaultValues: defaultValues }) })) })] }));
 }
@@ -24621,7 +24645,7 @@ function doesPriceListHaveFlatFeeCharges(maskedPriceList) {
 function priceDescriptionString({ unitName, showPriceAsMonthly, periodMonths, priceListHasFlatFeeCharges, }) {
     const periodMonthsConverted = periodMonthsConverter(periodMonths);
     const periodLabel = periodMonthsConverted ? 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/esm/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/esm/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/esm/types/src/components/PaymentForm/hooks/usePaymentButtonText.d.ts

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

package/dist/esm/types/src/graphql/queries/getFormattedQuote.d.ts

@@ -2,5 +2,143 @@ declare const getFormattedQuote: ({ token, apiHost, id, }: {
     apiHost: string;
     token?: string;
     id?: string;
-}) => Promise<any>;
+}) => Promise<{
+    quote: {
+        documentTemplateId: string | null;
+        documents: {
+            id: string;
+            filename: string;
+            size: string;
+            date: unknown;
+            url: string;
+        }[] | null;
+        firstInvoice: {
+            id: string | null;
+            state: "FAILED" | "DRAFT" | "NOT_DUE" | "DUE" | "UNPAID" | "PAID" | "VOIDED" | "READY" | "PREPARING" | "PROCESSING_PAYMENT" | "MERGED" | "QUEUED" | "CONSOLIDATED";
+        } | null;
+        payableId: string | null;
+        id: string | null;
+        payToAccept: boolean | null;
+        currentPaymentHold: {
+            createdAt: unknown;
+            expiresAt: unknown;
+            id: string | null;
+            updatedAt: unknown;
+            paymentMethod: {
+                accountId: string | null;
+                createdAt: unknown;
+                expirationDate: unknown;
+                failureCode: string | null;
+                id: string;
+                isDefault: boolean | null;
+                lastSuccess: unknown;
+                paymentType: "ach" | "card" | "other" | "wire" | null;
+                pluginId: string | null;
+                state: "UNKNOWN" | "SUCCESS" | "FAILED" | null;
+                updatedAt: unknown;
+                metadata: {
+                    description: string | null;
+                    expiration: unknown;
+                    icon: string | null;
+                    identifier: string | null;
+                    issuer: string | null;
+                    kind: string | null;
+                } | null;
+            } | null;
+        } | null;
+    };
+    payableId: string | null;
+    acceptedAt: unknown;
+    acceptedByName: string | null;
+    amount: number;
+    amountDue: number;
+    amountsByPeriod: {
+        id: string | null;
+        name: string | null;
+        amount: number | null;
+    }[];
+    billingCity: string | null;
+    billingCountry: string | null;
+    billingState: string | null;
+    billingStreet: string | null;
+    billingZip: string | null;
+    contactName: string | null;
+    currency: string | null;
+    customerBillingCity: string | null;
+    customerBillingCountry: string | null;
+    customerBillingState: string | null;
+    customerBillingStreet: string | null;
+    customerBillingZip: string | null;
+    customerName: string | null;
+    discount: number;
+    discountValue: number;
+    duration: string | null;
+    endDate: unknown;
+    expiresAt: unknown;
+    html: string | null;
+    formattedLines: {
+        amount: number;
+        amountsByPeriod: {
+            quantity: number | null;
+            id: string | null;
+            name: string | null;
+            startDate: unknown;
+            endDate: unknown;
+            amount: number | null;
+            amountsByTier: {
+                id: string | null;
+                tier: {
+                    starts: number | null;
+                    ends: number | null;
+                    price: number | null;
+                } | null;
+                quantity: number | null;
+                amount: number | null;
+            }[] | null;
+            prorationRate: number | null;
+        }[];
+        billingPeriodEnd: string | null;
+        billingPeriodStart: string | null;
+        chargeType: string;
+        discount: number | null;
+        frequency: string;
+        isRamp: boolean;
+        periods: number;
+        planName: string;
+        position: number;
+        price: number | null;
+        priceDecimals: number | null;
+        priceListChargeId: string | null;
+        priceListChargeName: string | null;
+        priceListId: string;
+        priceListName: string | null;
+        priceTiers: {
+            price: number | null;
+            starts: number;
+        }[] | null;
+        pricingModel: string;
+        productName: string;
+        prorationRate: number | null;
+        quantity: number | null;
+        showProductNameOnLineItem: boolean;
+        taxCode: string | null;
+        trialEndDate: unknown;
+        trialStartDate: unknown;
+        unitOfMeasure: string;
+        vatCode: string | null;
+    }[];
+    netPaymentDays: number | null;
+    notes: string | null;
+    number: string | null;
+    poNumberRequired: boolean | null;
+    salesContactEmail: string | null;
+    sharedAt: unknown;
+    startDate: unknown;
+    state: "DRAFT" | "SHARED" | "VIEWED" | "ACCEPTED" | "IN_APPROVAL" | "APPROVED" | "REJECTED" | "UNDONE";
+    subtotal: number;
+    taxAmount: number;
+    taxNumberLabel: string | null;
+    taxNumberRequired: boolean | null;
+    vendorName: string | null;
+}>;
 export default getFormattedQuote;

package/package.json

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