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

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.21';
 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'
@@ -20827,6 +20856,8 @@ function PaymentHoldDisplay({ paymentHold, currency, amount, }) {
     return (jsx(Tooltip, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted. Hold will be released on ${expirationDate} if not accepted.`, children: jsx(Fragment, { children: jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
 }
 
+const TransactionsListContext = createContext({});
+
 const QUOTES_QUERY = (filter) => `
   query quotes {
     quotes ${filter ? `(${filter})` : ''} {
@@ -20863,8 +20894,6 @@ const getQuotes = async ({ token, apiHost, filter, }) => {
     return response === null || response === void 0 ? void 0 : response.quotes;
 };
 
-const TransactionsListContext = createContext({});
-
 const transactionMutation = (filter) => `
 query transactions {
   transactions ${filter ? `(${filter})` : ''} {
@@ -21188,7 +21217,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
                         }, children: isMobile ? (jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) })] }), useModal ? (jsx(Modal, { title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null, children: jsx(Invoice, { id: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm }) })) : (jsx(Drawer, { title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH, children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsx(Invoice, { id: selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm })) : (jsxs(Card$1, { className: "bunny-shadow-md", children: [jsx(Typography.Title, { level: 2, className: "bunny-mb-4", children: "Transaction Details" }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Amount:" }), ' ', jsx(Typography.Text, { children: formatCurrency$1((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Description:" }), ' ', jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "Kind:" }), ' ', jsx(Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxs(Typography.Paragraph, { children: [jsx("strong", { children: "State:" }), ' ', jsx(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 } = useContext(BunnyContext);
     const [component, setComponent] = useState(null);
     const contextValues = {
@@ -21238,8 +21267,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(jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
@@ -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: {}};