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

package/dist/cjs/index.js

@@ -143,7 +143,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.20';
+const PACKAGE_VERSION = '1.6.0-beta.22';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -18916,6 +18916,37 @@ function Content({ children, accountId }) {
     return jsxRuntime.jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
 }
 
+const invokePlugin = async ({ method, payload, plugin, token, apiHost, componentsVersion, }) => {
+    var _a, _b, _c, _d;
+    const backendComponent = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b[0];
+    if (!((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.length))
+        throw new Error('The provided plugin is not invokable');
+    if (!(backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.access.includes(method)))
+        throw new Error(`Method ${method} is not invokable`);
+    const body = JSON.stringify({
+        guid: plugin.guid,
+        class: backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.name,
+        method,
+        payload,
+    });
+    const headers = createClientDevHeaders({
+        token,
+        componentsVersion: componentsVersion || PACKAGE_VERSION,
+    });
+    const response = await common.request({
+        method: 'POST',
+        apiHost,
+        endpoint: `/plugins/invoke`,
+        body,
+        token,
+        headers,
+    });
+    if (response.ok)
+        return response.json();
+    const error = await response.json();
+    throw new Error(error.message);
+};
+
 const DIGIT_REGEX = /\d/;
 const isDigit = (char) => DIGIT_REGEX.test(char);
 const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
@@ -18950,7 +18981,7 @@ const unformatCardNumber = (cardNumber) => {
 };
 const storePayment = async (options, plugin, apiHost, accountId) => {
     const { testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token } = options;
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         method: 'store_payment_method',
         plugin,
         payload: {
@@ -19075,7 +19106,7 @@ const getQuoteAmountDue = (quote) => {
 
 const { useToken: useAntdToken } = antd.theme;
 const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, accountId, }) => {
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'store_payment_method',
         payload: {
@@ -19090,7 +19121,7 @@ const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, ac
     return response;
 };
 const createSetupIntent = (plugin, apiHost, token, accountId) => {
-    return common.invokePlugin({
+    return invokePlugin({
         plugin,
         method: 'create_setup_intent',
         token,
@@ -19106,7 +19137,7 @@ const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodI
         amount: quote.amount,
         payment_method_id: paymentMethodId,
     };
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'create_payment_hold',
         payload,
@@ -19118,7 +19149,7 @@ const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodI
     return response;
 };
 const fetchStripeKey = async (plugin, apiHost, token, accountId) => {
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'retrieve_config',
         token,
@@ -20000,7 +20031,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
     const removePaymentMethod = react.useCallback(async (data) => {
         const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
         if (data && plugin) {
-            await common.invokePlugin({
+            await invokePlugin({
                 plugin: plugin, // TODO: type the plugin
                 method: 'remove_payment_method',
                 payload: {
@@ -20054,7 +20085,7 @@ function useSetDefaultPaymentMethod(onError, onSuccess) {
         const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.plugin) === null || _a === void 0 ? void 0 : _a.id); }); // TODO: type the response to PluginData
         if (plugin) {
             setLoading(true);
-            await common.invokePlugin({
+            await invokePlugin({
                 plugin: plugin,
                 method: 'assign_default_payment_method',
                 payload: {
@@ -20383,10 +20414,18 @@ const usePlugins = ({ apiHost, token }) => {
     return response;
 };
 const getPlugins = async ({ token, apiHost }) => {
+    const baseHeaders = createClientDevHeaders({
+        token,
+        componentsVersion: PACKAGE_VERSION,
+    });
+    const requestHeaders = {
+        ...baseHeaders,
+    };
     const response = await common.request({
         endpoint: `/plugins`,
         token,
         apiHost,
+        headers: requestHeaders,
     });
     if (response.ok) {
         const plugins = await response.json();
@@ -20858,6 +20897,8 @@ function PaymentHoldDisplay({ paymentHold, currency, amount, }) {
     return (jsxRuntime.jsx(antd.Tooltip, { title: `${formattedAmount} will be charged to ${paymentMethod} once the quote is accepted. Hold will be released on ${expirationDate} if not accepted.`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(CustomizedTag, { color: 'orange', className: "rounded-md", style: { padding: 6 }, children: ["Hold of ", formattedAmount, " on ****", paymentMethod] }) }) }));
 }
 
+const TransactionsListContext = react.createContext({});
+
 const QUOTES_QUERY = (filter) => `
   query quotes {
     quotes ${filter ? `(${filter})` : ''} {
@@ -20894,8 +20935,6 @@ const getQuotes = async ({ token, apiHost, filter, }) => {
     return response === null || response === void 0 ? void 0 : response.quotes;
 };
 
-const TransactionsListContext = react.createContext({});
-
 const transactionMutation = (filter) => `
 query transactions {
   transactions ${filter ? `(${filter})` : ''} {
@@ -21219,7 +21258,7 @@ function TransactionsDisplay({ transactions, onSearchValueChanged, search, }) {
                         }, children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) })] }), useModal ? (jsxRuntime.jsx(antd.Modal, { title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null, children: jsxRuntime.jsx(Invoice, { id: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm }) })) : (jsxRuntime.jsx(antd.Drawer, { title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH, children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === 'INVOICE' ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId, hidePaymentForm: hidePaymentForm })) : (jsxRuntime.jsxs(antd.Card, { className: "bunny-shadow-md", children: [jsxRuntime.jsx(antd.Typography.Title, { level: 2, className: "bunny-mb-4", children: "Transaction Details" }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || 'USD') })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), ' ', jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] })) }))] }));
 }
 
-function Quotes({ className, columns = ['date', 'title', 'amount', 'download', 'state'], filter, filterQuotes, sort = (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), noQuotesMessage = 'There are no quotes', onQuoteClick, quoteComponent, searchBarClassName, shadow = 'shadow-md', showSearchBar = true, showTitle = true, title = 'Past quotes', style, suppressQuoteDisplay = false, useModal = false, }) {
+function Quotes({ className, columns = ['date', 'title', 'amount', 'download', 'state'], filter, filterQuotes, sort = (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(), noQuotesMessage = 'There are no quotes', onQuoteClick, renderQuote, searchBarClassName, shadow = 'shadow-md', showSearchBar = true, showTitle = true, title = 'Past quotes', style, suppressQuoteDisplay = false, useModal = false, }) {
     const { apiHost } = react.useContext(BunnyContext);
     const [component, setComponent] = react.useState(null);
     const contextValues = {
@@ -21269,8 +21308,8 @@ function Quotes({ className, columns = ['date', 'title', 'amount', 'download', '
     }
     function handleQuoteClick(quote) {
         onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
-        if (quoteComponent) {
-            setComponent(quoteComponent);
+        if (renderQuote !== undefined) {
+            setComponent(renderQuote(quote));
         }
         else {
             setComponent(jsxRuntime.jsx(Quote, { id: quote === null || quote === void 0 ? void 0 : quote.transactionableId }));

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

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

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 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, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
+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, 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';
@@ -141,7 +141,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.20';
+const PACKAGE_VERSION = '1.6.0-beta.22';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -18914,6 +18914,37 @@ function Content({ children, accountId }) {
     return jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
 }
 
+const invokePlugin = async ({ method, payload, plugin, token, apiHost, componentsVersion, }) => {
+    var _a, _b, _c, _d;
+    const backendComponent = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b[0];
+    if (!((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.length))
+        throw new Error('The provided plugin is not invokable');
+    if (!(backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.access.includes(method)))
+        throw new Error(`Method ${method} is not invokable`);
+    const body = JSON.stringify({
+        guid: plugin.guid,
+        class: backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.name,
+        method,
+        payload,
+    });
+    const headers = createClientDevHeaders({
+        token,
+        componentsVersion: componentsVersion || PACKAGE_VERSION,
+    });
+    const response = await request$1({
+        method: 'POST',
+        apiHost,
+        endpoint: `/plugins/invoke`,
+        body,
+        token,
+        headers,
+    });
+    if (response.ok)
+        return response.json();
+    const error = await response.json();
+    throw new Error(error.message);
+};
+
 const DIGIT_REGEX = /\d/;
 const isDigit = (char) => DIGIT_REGEX.test(char);
 const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
@@ -20381,10 +20412,18 @@ const usePlugins = ({ apiHost, token }) => {
     return response;
 };
 const getPlugins = async ({ token, apiHost }) => {
+    const baseHeaders = createClientDevHeaders({
+        token,
+        componentsVersion: PACKAGE_VERSION,
+    });
+    const requestHeaders = {
+        ...baseHeaders,
+    };
     const response = await request$1({
         endpoint: `/plugins`,
         token,
         apiHost,
+        headers: requestHeaders,
     });
     if (response.ok) {
         const plugins = await response.json();
@@ -20856,6 +20895,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})` : ''} {
@@ -20892,8 +20933,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})` : ''} {
@@ -21217,7 +21256,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 = {
@@ -21267,8 +21306,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 }));

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

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

package/dist/index.d.ts

@@ -41,9 +41,9 @@ declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError,
 
 type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
 
-declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, quoteComponent, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
-    /** A custom component to render instead of the default invoice component */
-    quoteComponent?: React.ReactNode;
+declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, renderQuote, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
+    /** Render a custom quote component. Receives the quoteId as a parameter. */
+    renderQuote?: (quote: Transaction) => React.ReactNode;
     /** Whether to show the search bar */
     showSearchBar?: boolean;
     /** Whether to show the title */

package/package.json

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