@bunnyapp/components 1.8.0-beta.12 → 1.8.0-beta.14

package/dist/cjs/index.js

@@ -1219,6 +1219,11 @@ const QueryKeyFactory = {
         entityId,
         ...(token ? [token] : []),
     ],
+    quotesKey: (filter, token) => [
+        'quotes',
+        ...(filter ? [filter] : []),
+        ...(token ? [token] : []),
+    ],
     createFormattedInvoiceKey: ({ id, token }) => [
         'formattedInvoice',
         id,
@@ -1283,7 +1288,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.11';
+const PACKAGE_VERSION = '1.8.0-beta.13';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20561,6 +20566,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const invoice = readFragment(PaymentProvider_InvoiceFragment, maskedInvoice);
     // State
     const [isPaid, setIsPaid] = react.useState(false);
+    const [isPaying, setIsPaying] = react.useState(false);
+    const [isApprovingHold, setIsApprovingHold] = react.useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20596,7 +20603,11 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             amountDue: amountDue !== null && amountDue !== void 0 ? amountDue : undefined,
             formattedAmountDue: formattedAmountDueValue,
             isPaid,
-            setIsPaid
+            setIsPaid,
+            isPaying,
+            setIsPaying,
+            isApprovingHold,
+            setIsApprovingHold,
         }, children: children }));
 }
 
@@ -21100,7 +21111,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21175,6 +21186,14 @@ function Pay(props = {}) {
             return;
         }
     }
+    react.useEffect(() => {
+        setIsPaying(isPaying);
+        return () => setIsPaying(false);
+    }, [isPaying, setIsPaying]);
+    react.useEffect(() => {
+        setIsApprovingHold(isApprovingHold);
+        return () => setIsApprovingHold(false);
+    }, [isApprovingHold, setIsApprovingHold]);
     return (jsxRuntime.jsx(antd.Button, { className: "bunny-w-full", disabled: isPaying || isApprovingHold || isSaving || disabled, loading: isPaying || isApprovingHold || isSaving, onClick: handlePayment, size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
 }
 
@@ -21331,6 +21350,7 @@ function PaymentMethodDetailsRoot(props = {}) {
     const accountId = useAccountId();
     const { paymentMethods } = usePaymentMethod({ accountId });
     const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { isPaying, isApprovingHold } = usePayable();
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
             showErrorNotification$6('No payment plugins available', 'Error adding payment method');
@@ -21349,7 +21369,7 @@ function PaymentMethodDetailsRoot(props = {}) {
                 {
                     key: '1',
                     showArrow: false,
-                    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,
+                    label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", { className: "bunny-pt-2", children: jsxRuntime.jsx(antd.Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", disabled: isPaying || isApprovingHold, 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: getPaymentMethodForm((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) })), footer] })),
                 },
             ] }) }));
@@ -22150,6 +22170,7 @@ const QuoteButtons_FormattedQuoteFragment = t(`
       currency
       amount
       expiresAt
+      state
     }
   `);
 const PaymentHoldDisplay_QuoteButtonsFragment = t(`
@@ -22166,10 +22187,11 @@ function QuoteButtons({ isAccepted, formattedQuote: maskedFormattedQuote, isMobi
     const { secondaryColor } = useBrand();
     const downloadFile = useDownloadFile(id);
     const isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
+    const isRejected = (formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.state) === 'REJECTED';
     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$y, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${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", loading: isSendAcceptPending, children: "Pay and sign" })) : (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$y, { children: `Quote was accepted by ${formattedQuote.acceptedByName} on ${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", loading: isSendAcceptPending, children: "Pay and sign" })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isAccepted && !isRejected ? (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'
@@ -22969,7 +22991,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxRuntime.jsxs("div", { style: style, children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsxRuntime.jsx(Text$s, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
+    return (jsxRuntime.jsxs("div", { style: style, children: [jsxRuntime.jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsxRuntime.jsx(Text$s, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsxRuntime.jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
                                         const value = e.target.value;
                                         // Allow empty string, numbers, and decimal point
@@ -22987,6 +23009,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
 
 function Quotes({ className, columns = ['date', 'title', 'amount', 'download', 'state'], filter, filterQuotes, sort = (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), noQuotesMessage = 'There are no quotes', onQuoteClick, renderQuote, searchBarClassName, shadow = 'shadow-md', showSearchBar = true, showTitle = true, title = 'Past quotes', style, suppressQuoteDisplay = false, useModal = false, }) {
     const { apiHost } = react.useContext(BunnyContext);
+    const queryClient = reactQuery.useQueryClient();
     const [component, setComponent] = react.useState(null);
     const contextValues = {
         columns,
@@ -23039,7 +23062,9 @@ function Quotes({ className, columns = ['date', 'title', 'amount', 'download', '
             setComponent(renderQuote(quote));
         }
         else {
-            setComponent(jsxRuntime.jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
+            setComponent(jsxRuntime.jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId, onQuoteAccepted: () => {
+                    queryClient.invalidateQueries({ queryKey: QueryKeyFactory.quotesKey() });
+                } }));
         }
     }
     return (jsxRuntime.jsx(TransactionsListContext.Provider, { value: contextValues, children: jsxRuntime.jsx(QuotesWrapper, {}) }));
@@ -23053,7 +23078,7 @@ function QuotesWrapper() {
     const filter = filterFromContext || (search ? `filter: "quote.id is ${search}"` : '');
     // Queries
     const { data } = reactQuery.useQuery({
-        queryKey: ['quotes', token, filter],
+        queryKey: QueryKeyFactory.quotesKey(filter, token),
         queryFn: () => getQuotes({ token, apiHost, filter }),
         placeholderData: reactQuery.keepPreviousData,
     });

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

@@ -13,6 +13,10 @@ declare const PayableProvider: ({ value, children }: {
         formattedAmountDue: string | undefined;
         isPaid: boolean;
         setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+        isPaying: boolean;
+        setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+        isApprovingHold: boolean;
+        setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -27,6 +31,10 @@ declare const PayableProvider: ({ value, children }: {
     formattedAmountDue: string | undefined;
     isPaid: boolean;
     setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+    isPaying: boolean;
+    setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+    isApprovingHold: boolean;
+    setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export { PayableProvider, usePayable, };
 export declare const PaymentProvider_QuoteFragment: import("gql.tada").TadaDocumentNode<{

package/dist/cjs/types/src/components/Quote/components/QuoteButtons.d.ts

@@ -5,6 +5,7 @@ export declare const QuoteButtons_FormattedQuoteFragment: import("gql.tada").Tad
     currency: string | null;
     amount: number;
     expiresAt: unknown;
+    state: "APPROVED" | "REJECTED" | "DRAFT" | "SHARED" | "VIEWED" | "ACCEPTED" | "IN_APPROVAL" | "UNDONE";
 }, {}, {
     fragment: "QuoteButtons_FormattedQuoteFragment";
     on: "FormattedQuote";

package/dist/cjs/types/src/utils/QueryKeyFactory.d.ts

@@ -78,6 +78,7 @@ declare const QueryKeyFactory: {
     brandingKey: (token?: string) => string[];
     calculatedPricesKey: ({ priceListId, quantity, token }: CalculatedPricesKeyParams) => (string | number)[];
     createEventsKey: ({ entityId, pluralType, token }: EventsKeyParams) => string[];
+    quotesKey: (filter?: string, token?: string) => string[];
     createFormattedInvoiceKey: ({ id, token }: FormattedInvoiceKeyParams) => (string | null | undefined)[];
     createInvoiceKey: ({ id, token }: InvoiceKeyParams) => (string | undefined)[];
     createObjectKey: ({ id, objectName, token }: ObjectKeyParams) => string[];

package/dist/esm/index.js

@@ -1217,6 +1217,11 @@ const QueryKeyFactory = {
         entityId,
         ...(token ? [token] : []),
     ],
+    quotesKey: (filter, token) => [
+        'quotes',
+        ...(filter ? [filter] : []),
+        ...(token ? [token] : []),
+    ],
     createFormattedInvoiceKey: ({ id, token }) => [
         'formattedInvoice',
         id,
@@ -1281,7 +1286,7 @@ const DEFAULT_CONFIG = {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.8.0-beta.11';
+const PACKAGE_VERSION = '1.8.0-beta.13';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -20559,6 +20564,8 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
     const invoice = readFragment(PaymentProvider_InvoiceFragment, maskedInvoice);
     // State
     const [isPaid, setIsPaid] = useState(false);
+    const [isPaying, setIsPaying] = useState(false);
+    const [isApprovingHold, setIsApprovingHold] = useState(false);
     const getAmountDue = () => {
         return quote ? getQuoteAmountDue(quote) : invoice === null || invoice === void 0 ? void 0 : invoice.amountDue;
     };
@@ -20594,7 +20601,11 @@ function PaymentProvider({ children, quote: maskedQuote, invoice: maskedInvoice,
             amountDue: amountDue !== null && amountDue !== void 0 ? amountDue : undefined,
             formattedAmountDue: formattedAmountDueValue,
             isPaid,
-            setIsPaid
+            setIsPaid,
+            isPaying,
+            setIsPaying,
+            isApprovingHold,
+            setIsApprovingHold,
         }, children: children }));
 }
 
@@ -21098,7 +21109,7 @@ function Pay(props = {}) {
     const isMobile = useIsMobile();
     const { onPaymentSuccess, onPaymentHoldSuccess, onSavePaymentMethod, paymentHoldPrecondition } = usePaymentFormCallbacks();
     const selectedPlugin = useSelectedPlugin();
-    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid } = usePayable();
+    const { quoteId, invoiceId, paymentHold, paymentType, setIsPaid, setIsPaying, setIsApprovingHold } = usePayable();
     const accountId = useAccountId();
     const { defaultPaymentMethod } = usePaymentMethod({ accountId });
     const [showPaymentDetailsForm, setShowPaymentDetailsForm] = useShowPaymentDetails();
@@ -21173,6 +21184,14 @@ function Pay(props = {}) {
             return;
         }
     }
+    useEffect(() => {
+        setIsPaying(isPaying);
+        return () => setIsPaying(false);
+    }, [isPaying, setIsPaying]);
+    useEffect(() => {
+        setIsApprovingHold(isApprovingHold);
+        return () => setIsApprovingHold(false);
+    }, [isApprovingHold, setIsApprovingHold]);
     return (jsx(Button, { className: "bunny-w-full", disabled: isPaying || isApprovingHold || isSaving || disabled, loading: isPaying || isApprovingHold || isSaving, onClick: handlePayment, size: isMobile ? 'large' : 'middle', type: "primary", children: paymentButtonText }));
 }
 
@@ -21329,6 +21348,7 @@ function PaymentMethodDetailsRoot(props = {}) {
     const accountId = useAccountId();
     const { paymentMethods } = usePaymentMethod({ accountId });
     const { paymentPlugins } = usePaymentPlugins(accountId);
+    const { isPaying, isApprovingHold } = usePayable();
     function handleClickAddPaymentMethod() {
         if ((paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.length) === 0) {
             showErrorNotification$6('No payment plugins available', 'Error adding payment method');
@@ -21347,7 +21367,7 @@ function PaymentMethodDetailsRoot(props = {}) {
                 {
                     key: '1',
                     showArrow: false,
-                    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,
+                    label: !showPaymentMethodForm ? (jsx("div", { className: "bunny-pt-2", children: jsx(Button, { onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod", disabled: isPaying || isApprovingHold, 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: getPaymentMethodForm((_b = (_a = selectedPlugin.components) === null || _a === void 0 ? void 0 : _a.frontend) === null || _b === void 0 ? void 0 : _b[0].name) })), footer] })),
                 },
             ] }) }));
@@ -22148,6 +22168,7 @@ const QuoteButtons_FormattedQuoteFragment = t(`
       currency
       amount
       expiresAt
+      state
     }
   `);
 const PaymentHoldDisplay_QuoteButtonsFragment = t(`
@@ -22164,10 +22185,11 @@ function QuoteButtons({ isAccepted, formattedQuote: maskedFormattedQuote, isMobi
     const { secondaryColor } = useBrand();
     const downloadFile = useDownloadFile(id);
     const isExpired = useIsExpired(formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.expiresAt);
+    const isRejected = (formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.state) === 'REJECTED';
     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$y, { 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", loading: isSendAcceptPending, children: "Pay and sign" })) : (jsx(Fragment, { children: !isAccepted ? (jsx(Button, { disabled: isExpired || isAccepting, onClick: handleClickAccept, type: "primary", children: isExpired
+        }, children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$y, { 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", loading: isSendAcceptPending, children: "Pay and sign" })) : (jsx(Fragment, { children: !isAccepted && !isRejected ? (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'
@@ -22967,7 +22989,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-shadow-padding-xb bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$s, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
+    return (jsxs("div", { style: style, children: [jsxs("div", { className: `bunny-flex bunny-flex-col bunny-w-full bunny-gap-2 ${isMobile ? 'bunny-overflow-hidden' : ''} ${className}`, children: [showTitle || showSearchBar ? (jsxs("div", { className: `bunny-flex ${isMobile ? 'bunny-flex-col bunny-gap-1' : 'bunny-flex-row bunny-items-center'} bunny-justify-between`, children: [showTitle ? (jsx(Text$s, { className: "bunny-shrink-0 bunny-font-medium", style: { color: darkMode ? undefined : secondaryColor }, children: title })) : (jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsx("div", { className: `${isMobile ? 'bunny-w-full' : ''}`, children: jsx(Input, { className: searchBarClassName ? searchBarClassName : '', onChange: e => {
                                         const value = e.target.value;
                                         // Allow empty string, numbers, and decimal point
@@ -22985,6 +23007,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
 
 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 queryClient = useQueryClient();
     const [component, setComponent] = useState(null);
     const contextValues = {
         columns,
@@ -23037,7 +23060,9 @@ function Quotes({ className, columns = ['date', 'title', 'amount', 'download', '
             setComponent(renderQuote(quote));
         }
         else {
-            setComponent(jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));
+            setComponent(jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId, onQuoteAccepted: () => {
+                    queryClient.invalidateQueries({ queryKey: QueryKeyFactory.quotesKey() });
+                } }));
         }
     }
     return (jsx(TransactionsListContext.Provider, { value: contextValues, children: jsx(QuotesWrapper, {}) }));
@@ -23051,7 +23076,7 @@ function QuotesWrapper() {
     const filter = filterFromContext || (search ? `filter: "quote.id is ${search}"` : '');
     // Queries
     const { data } = useQuery({
-        queryKey: ['quotes', token, filter],
+        queryKey: QueryKeyFactory.quotesKey(filter, token),
         queryFn: () => getQuotes({ token, apiHost, filter }),
         placeholderData: keepPreviousData,
     });

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

@@ -13,6 +13,10 @@ declare const PayableProvider: ({ value, children }: {
         formattedAmountDue: string | undefined;
         isPaid: boolean;
         setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+        isPaying: boolean;
+        setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+        isApprovingHold: boolean;
+        setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
     };
     children?: import("react").ReactNode;
 }) => import("react/jsx-runtime").JSX.Element, usePayable: () => {
@@ -27,6 +31,10 @@ declare const PayableProvider: ({ value, children }: {
     formattedAmountDue: string | undefined;
     isPaid: boolean;
     setIsPaid: React.Dispatch<React.SetStateAction<boolean>>;
+    isPaying: boolean;
+    setIsPaying: React.Dispatch<React.SetStateAction<boolean>>;
+    isApprovingHold: boolean;
+    setIsApprovingHold: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export { PayableProvider, usePayable, };
 export declare const PaymentProvider_QuoteFragment: import("gql.tada").TadaDocumentNode<{

package/dist/esm/types/src/components/Quote/components/QuoteButtons.d.ts

@@ -5,6 +5,7 @@ export declare const QuoteButtons_FormattedQuoteFragment: import("gql.tada").Tad
     currency: string | null;
     amount: number;
     expiresAt: unknown;
+    state: "APPROVED" | "REJECTED" | "DRAFT" | "SHARED" | "VIEWED" | "ACCEPTED" | "IN_APPROVAL" | "UNDONE";
 }, {}, {
     fragment: "QuoteButtons_FormattedQuoteFragment";
     on: "FormattedQuote";

package/dist/esm/types/src/utils/QueryKeyFactory.d.ts

@@ -78,6 +78,7 @@ declare const QueryKeyFactory: {
     brandingKey: (token?: string) => string[];
     calculatedPricesKey: ({ priceListId, quantity, token }: CalculatedPricesKeyParams) => (string | number)[];
     createEventsKey: ({ entityId, pluralType, token }: EventsKeyParams) => string[];
+    quotesKey: (filter?: string, token?: string) => string[];
     createFormattedInvoiceKey: ({ id, token }: FormattedInvoiceKeyParams) => (string | null | undefined)[];
     createInvoiceKey: ({ id, token }: InvoiceKeyParams) => (string | undefined)[];
     createObjectKey: ({ id, objectName, token }: ObjectKeyParams) => string[];

package/package.json

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