@bunnyapp/components 1.8.0-beta.13 → 1.8.0-beta.15

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.12';
+const PACKAGE_VERSION = '1.8.0-beta.14';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -22165,6 +22170,7 @@ const QuoteButtons_FormattedQuoteFragment = t(`
       currency
       amount
       expiresAt
+      state
     }
   `);
 const PaymentHoldDisplay_QuoteButtonsFragment = t(`
@@ -22181,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'
@@ -22984,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
@@ -23002,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,
@@ -23054,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, {}) }));
@@ -23068,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,
     });
@@ -23830,15 +23840,6 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             setInitialQuote(data === null || data === void 0 ? void 0 : data.quote);
             handleRecalculateTaxes((_b = data === null || data === void 0 ? void 0 : data.quote) === null || _b === void 0 ? void 0 : _b.id);
         },
-        onError: (error) => {
-            const errorMessage = error.response.errors[0].message;
-            if (errorMessage.includes("Address couldn't be validated")) {
-                showErrorNotification$2('Please enter a valid billing address');
-            }
-            else {
-                showErrorNotification$2(errorMessage);
-            }
-        },
     });
     // Queries
     const { data: maskedPriceList, isLoading: isLoadingPriceList } = reactQuery.useQuery({

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.12';
+const PACKAGE_VERSION = '1.8.0-beta.14';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -22163,6 +22168,7 @@ const QuoteButtons_FormattedQuoteFragment = t(`
       currency
       amount
       expiresAt
+      state
     }
   `);
 const PaymentHoldDisplay_QuoteButtonsFragment = t(`
@@ -22179,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'
@@ -22982,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
@@ -23000,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,
@@ -23052,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, {}) }));
@@ -23066,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,
     });
@@ -23828,15 +23838,6 @@ function Signup({ companyName, priceListCode, returnUrl, couponCode, className,
             setInitialQuote(data === null || data === void 0 ? void 0 : data.quote);
             handleRecalculateTaxes((_b = data === null || data === void 0 ? void 0 : data.quote) === null || _b === void 0 ? void 0 : _b.id);
         },
-        onError: (error) => {
-            const errorMessage = error.response.errors[0].message;
-            if (errorMessage.includes("Address couldn't be validated")) {
-                showErrorNotification$2('Please enter a valid billing address');
-            }
-            else {
-                showErrorNotification$2(errorMessage);
-            }
-        },
     });
     // Queries
     const { data: maskedPriceList, isLoading: isLoadingPriceList } = useQuery({

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.13",
+  "version": "1.8.0-beta.15",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",