@bunnyapp/components 1.0.62-beta.3 → 1.0.62-beta.5

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ var recoil = require('recoil');
 var request = require('graphql-request');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var index_js = require('@stripe/stripe-js/pure/index.js');
+var parse = require('html-react-parser');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var recharts = require('recharts');
@@ -44,6 +45,7 @@ function _interopNamespace(e) {
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var theme__default = /*#__PURE__*/_interopDefaultLegacy(theme);
 var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
+var parse__default = /*#__PURE__*/_interopDefaultLegacy(parse);
 var pkg__default = /*#__PURE__*/_interopDefaultLegacy(pkg);
 
 function styleInject(css, ref) {
@@ -171,7 +173,7 @@ var BrandContext = react.createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.62-beta.3';
+var PACKAGE_VERSION = '1.0.62-beta.5';
 var createRequestHeaders = function (token) {
     var _a;
     var bearerToken = token ? "Bearer ".concat(token) : null;
@@ -416,9 +418,59 @@ function useToken() {
     return overrideToken || tokenFromContext;
 }
 
+var DocumentTemplatePreview = function (_a) {
+    var targetUrl = _a.targetUrl;
+    var _b = react.useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
+    var queryClient = reactQuery.useQueryClient();
+    var queryKey = react.useMemo(function () { return ['documentTemplatePreview', targetUrl]; }, [targetUrl]);
+    // Clear previous data when component mounts or id changes
+    react.useEffect(function () {
+        // Remove any existing data for this query
+        queryClient.removeQueries({ queryKey: queryKey });
+    }, [queryClient, queryKey]);
+    var _c = reactQuery.useQuery({
+        queryKey: queryKey,
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, blob;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(targetUrl)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error('Failed to fetch PDF');
+                        }
+                        return [4 /*yield*/, response.blob()];
+                    case 2:
+                        blob = _a.sent();
+                        return [2 /*return*/, blob];
+                }
+            });
+        }); },
+        enabled: !!targetUrl,
+    }), data = _c.data, isLoading = _c.isLoading;
+    react.useEffect(function () {
+        if (data) {
+            var url_1 = URL.createObjectURL(data);
+            setPdfUrl(url_1);
+            // Cleanup function to revoke the object URL
+            return function () {
+                URL.revokeObjectURL(url_1);
+            };
+        }
+    }, [data]);
+    if (isLoading) {
+        return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsxRuntime.jsx(antd.Spin, {}) })));
+    }
+    if (!pdfUrl) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    return (jsxRuntime.jsx("div", __assign({ className: "document-template-preview max-w-[1280px] mx-auto bg-white rounded p-4" }, { children: jsxRuntime.jsx("iframe", { src: pdfUrl, width: "100%", height: "800px", style: { border: 'none' }, title: "Document Template Preview" }) })));
+};
+
 var MarkupContainer = defaultStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 var InvoiceQuoteView = function (_a) {
-    var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
+    var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError, targetUrl = _a.targetUrl;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
     var secondaryColor = react.useContext(BrandContext).secondaryColor;
     var apiHost = react.useContext(BunnyContext).apiHost;
@@ -430,9 +482,9 @@ var InvoiceQuoteView = function (_a) {
                                 color: secondaryColor,
                             }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
                             return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
-                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] }))) : (jsxRuntime.jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
                     minWidth: '750px',
-                } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
+                } }, { children: [targetUrl ? (jsxRuntime.jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsxRuntime.jsx(interweave.Markup, { content: html })), children] })))] })));
 };
 var templateObject_1$c;
 
@@ -19036,7 +19088,6 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
     return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
 }
 
-var Panel = antd.Collapse.Panel;
 var showErrorNotification$1 = common.useErrorNotification();
 var PaymentForm = function (_a) {
     var _b;
@@ -19119,7 +19170,14 @@ var PaymentForm = function (_a) {
             storedPaymentMethods: storedPaymentMethods,
             defaultPaymentMethod: defaultPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
+        } }, { children: jsxRuntime.jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsxRuntime.jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsxRuntime.jsx(antd.Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
+                                {
+                                    key: '1',
+                                    showArrow: false,
+                                    label: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsxRuntime.jsx(antd.Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
+                                    children: (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
+                                },
+                            ] }), paying && !selectedPaymentPluginIsManualPayment ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsxRuntime.jsx("div", __assign({ className: "bunny-px-4" }, { children: jsxRuntime.jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -19187,7 +19245,7 @@ function ActualInvoice() {
     return (jsxRuntime.jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-justify-center bunny-w-full" }, { children: jsxRuntime.jsx(LegacyDocument, { documentUuid: formattedInvoice.uuid, documentType: "invoice" }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsxRuntime.jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
 
-var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      object {\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      object {\n        documents { id filename size date url }\n        documentTemplateId\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19214,7 +19272,7 @@ var getFormattedQuote = function (_a) {
 var usePlugins = function (_a) {
     var apiHost = _a.apiHost, token = _a.token;
     var response = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.pluginsKey(token || ""),
+        queryKey: common.QueryKeyFactory.default.pluginsKey(token || ''),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
             var plugins;
             return __generator(this, function (_a) {
@@ -19225,7 +19283,6 @@ var usePlugins = function (_a) {
                         })];
                     case 1:
                         plugins = _a.sent();
-                        console.log("plugins in usePlugins: ", plugins);
                         return [2 /*return*/, plugins];
                 }
             });
@@ -19252,9 +19309,7 @@ var getPlugins = function (_a) {
                     plugins = _b.sent();
                     filteredPlugins = plugins.filter(function (plugin) {
                         var _a, _b;
-                        var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
-                            ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
-                            !entityId;
+                        var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
                         return result;
                     });
                     return [2 /*return*/, filteredPlugins];
@@ -19584,14 +19639,13 @@ var useQuotePaymentHold = function (formattedQuote) {
 };
 function ActualQuote() {
     var _this = this;
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // Context
-    var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
+    var _e = react.useContext(BunnyContext), apiHost = _e.apiHost, onTokenExpired = _e.onTokenExpired;
     var token = useToken();
-    react.useContext(BrandContext);
-    var _e = react.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
+    var _f = react.useContext(InvoiceQuoteContext), className = _f.className, id = _f.id, hideDownloadButton = _f.hideDownloadButton, onQuoteLoaded = _f.onQuoteLoaded;
     // Queries
-    var _f = reactQuery.useQuery({
+    var _g = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             var error_1;
@@ -19610,15 +19664,16 @@ function ActualQuote() {
             });
         }); },
         placeholderData: reactQuery.keepPreviousData,
-    }), data = _f.data, isLoading = _f.isLoading;
+    }), data = _g.data, isLoading = _g.isLoading;
     var formattedQuote = data;
+    console.log(data);
     // Hooks
-    var _g = useSendAcceptQuote({
+    var _h = useSendAcceptQuote({
         token: token,
         onTokenExpired: onTokenExpired,
         apiHost: apiHost,
         quoteId: id,
-    }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
+    }), acceptBoxVisible = _h.acceptBoxVisible, isAccepting = _h.isAccepting, sendAccept = _h.sendAccept, setAcceptBoxVisible = _h.setAcceptBoxVisible, setIsAccepting = _h.setIsAccepting, startAcceptance = _h.startAcceptance, pandadocPollingModalVisible = _h.pandadocPollingModalVisible, setPandadocPollingModalVisible = _h.setPandadocPollingModalVisible, isSendAcceptPending = _h.isSendAcceptPending;
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = common.useIsMobile();
     var showErrorNotification = common.useErrorNotification();
@@ -19628,7 +19683,7 @@ function ActualQuote() {
         }
     }, [formattedQuote]);
     // Payment hold stuff here
-    var _h = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _h.paymentHoldModalVisible, setPaymentHoldModalVisible = _h.setPaymentHoldModalVisible, shouldDoPaymentHold = _h.shouldDoPaymentHold, paymentHoldCompleted = _h.paymentHoldCompleted, paymentHold = _h.paymentHold;
+    var _j = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _j.paymentHoldModalVisible, setPaymentHoldModalVisible = _j.setPaymentHoldModalVisible, shouldDoPaymentHold = _j.shouldDoPaymentHold, paymentHoldCompleted = _j.paymentHoldCompleted, paymentHold = _j.paymentHold;
     var handleClickAccept = function () {
         if (shouldDoPaymentHold && !paymentHoldCompleted) {
             setPaymentHoldModalVisible(true);
@@ -19646,7 +19701,7 @@ function ActualQuote() {
     if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
         return jsxRuntime.jsx(Invoice, { id: firstInvoice.id });
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsxRuntime.jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsxRuntime.jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "".concat(apiHost, "/api/pdf/quote") : undefined }, { children: ((_d = (_c = formattedQuote.object) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsxRuntime.jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
@@ -21233,7 +21288,7 @@ var PlanPickerCheckoutBar = function (_a) {
 };
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
+var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        currencyId\n        id\n        monthlyBasePrice\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
 var getPriceListChangeOptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -21339,21 +21394,35 @@ var PriceListCardTitle = function (_a) {
 
 var PriceListCardPrice = function (_a) {
     var priceList = _a.priceList;
-    return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
-            ? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
+    return (jsxRuntime.jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
+            ? common.formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
             : priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
-                ? ""
-                : "Free" })));
+                ? ''
+                : 'Free' })));
 };
 
 var Text$c = antd.Typography.Text;
 var PriceListCardDescription = function (_a) {
     var description = _a.description;
+    var htmlParsedDescription = parse__default["default"](description || '');
     if (!description)
         return null;
-    return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: description }));
+    return jsxRuntime.jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
 };
 
+var BillingPeriodConverter;
+(function (BillingPeriodConverter) {
+    BillingPeriodConverter["ONCE"] = "once";
+    BillingPeriodConverter["MONTHLY"] = "monthly";
+    BillingPeriodConverter["ANNUAL"] = "annually";
+    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
+    BillingPeriodConverter["QUARTERLY"] = "quarterly";
+})(BillingPeriodConverter || (BillingPeriodConverter = {}));
+var BillingPeriodConverter$1 = BillingPeriodConverter;
+
+var isEmptyHtml = function (html) {
+    return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
+};
 var Text$b = antd.Typography.Text;
 var PriceListCardPriceDescription = function (_a) {
     var feature = _a.feature, priceList = _a.priceList;
@@ -21361,13 +21430,11 @@ var PriceListCardPriceDescription = function (_a) {
     var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
     if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
         return null;
-    return (jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
-            fontSize: isMobile ? "13px" : "12px",
-        } }, { children: priceList.plan.pricingDescription
-            ? priceList.plan.pricingDescription
-            : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
-                ? "".concat(feature.unitName.toLowerCase(), " / ")
-                : "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
+                    fontSize: isMobile ? '13px' : '12px',
+                } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsxRuntime.jsx(interweave.Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
+                    ? "".concat(feature.unitName.toLowerCase(), " / ")
+                    : '', "month")) })), priceList.periodMonths > 1 && (jsxRuntime.jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
 };
 
 var CheckIcon = function (_a) {
@@ -22232,17 +22299,9 @@ var SubscriptionCardHeader = function (_a) {
         } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 
-var BillingPeriodConverter;
-(function (BillingPeriodConverter) {
-    BillingPeriodConverter["ONCE"] = "once";
-    BillingPeriodConverter["MONTHLY"] = "monthly";
-    BillingPeriodConverter["ANNUAL"] = "annually";
-    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
-    BillingPeriodConverter["QUARTERLY"] = "quarterly";
-})(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var SubscriptionChargeTotal = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
-    var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
+    var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
     var isMobile = common.useIsMobile();
     var currencyId = subscription.currencyId;
     var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);

package/dist/cjs/src/components/DocumentTemplatePreview.d.ts

@@ -0,0 +1,4 @@
+declare const DocumentTemplatePreview: ({ targetUrl }: {
+    targetUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DocumentTemplatePreview;

package/dist/cjs/src/components/Invoice/InvoiceQuoteView.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { FormattedInvoice } from '@bunnyapp/common';
-declare const InvoiceQuoteView: ({ children, formattedInvoice, html, backButtonName, onBackButtonClick, onDownloadError, }: {
+declare const InvoiceQuoteView: ({ children, formattedInvoice, html, backButtonName, onBackButtonClick, onDownloadError, targetUrl, }: {
     html: string;
     children?: ReactNode;
     formattedInvoice?: FormattedInvoice | undefined;
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
     onDownloadError?: (() => void) | undefined;
+    targetUrl?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default InvoiceQuoteView;

package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts

@@ -1,4 +1,4 @@
-declare const PriceListCardDescription: ({ description, }: {
+declare const PriceListCardDescription: ({ description }: {
     description?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default PriceListCardDescription;

package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts

@@ -1,4 +1,4 @@
-import { PriceList } from "@bunnyapp/common";
+import { PriceList } from '@bunnyapp/common';
 declare const PriceListCardPrice: ({ priceList }: {
     priceList: PriceList;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts

@@ -1,4 +1,4 @@
-import { Feature, PriceList } from "@bunnyapp/common";
+import { Feature, PriceList } from '@bunnyapp/common';
 declare const PriceListCardPriceDescription: ({ feature, priceList, }: {
     feature?: Feature | undefined;
     priceList: PriceList;

package/dist/cjs/src/components/Subscriptions/SubscriptionsListContainer.d.ts

@@ -1,5 +1,5 @@
-import { Subscription } from "@bunnyapp/common";
-import "../../styles/index.less";
+import { Subscription } from '@bunnyapp/common';
+import '../../styles/index.less';
 export type EditingQuoteDataType = {
     id: string;
     isTrial: boolean;

package/dist/cjs/src/enums/BillingPeriodConverter.d.ts

@@ -0,0 +1,8 @@
+declare enum BillingPeriodConverter {
+    ONCE = "once",
+    MONTHLY = "monthly",
+    ANNUAL = "annually",
+    SEMI_ANNUAL = "semi annually",
+    QUARTERLY = "quarterly"
+}
+export default BillingPeriodConverter;

package/dist/cjs/src/hooks/usePlugins.d.ts

@@ -1,4 +1,4 @@
-declare const usePlugins: ({ apiHost, token, }: {
+declare const usePlugins: ({ apiHost, token }: {
     apiHost: string;
     token?: string | undefined;
 }) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<any, Error>;

package/dist/esm/index.js

@@ -1,7 +1,7 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createContext, useEffect, useContext, useMemo, useState, useCallback, useRef } from 'react';
 import { Markup } from 'interweave';
-import { ConfigProvider, Button, Tag, Typography, Dropdown, Input, Checkbox, Collapse, Skeleton, Modal, Form, Tooltip, Drawer, Card as Card$1, Image, Divider, Select, Radio, Space, Popconfirm, Table } from 'antd';
+import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Image, Divider, Select, Radio, Space, Popconfirm, Table } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
 import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR as PRIMARY_COLOR$1, sortSubscriptionCharges, Lists, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, useInfoNotification, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
@@ -11,6 +11,7 @@ import { RecoilRoot } from 'recoil';
 import request, { GraphQLClient } from 'graphql-request';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure/index.js';
+import parse from 'html-react-parser';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { BarChart, ResponsiveContainer, XAxis, Tooltip as Tooltip$1, Bar, Rectangle } from 'recharts';
@@ -142,7 +143,7 @@ var BrandContext = createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.62-beta.3';
+var PACKAGE_VERSION = '1.0.62-beta.5';
 var createRequestHeaders = function (token) {
     var _a;
     var bearerToken = token ? "Bearer ".concat(token) : null;
@@ -387,9 +388,59 @@ function useToken() {
     return overrideToken || tokenFromContext;
 }
 
+var DocumentTemplatePreview = function (_a) {
+    var targetUrl = _a.targetUrl;
+    var _b = useState(null), pdfUrl = _b[0], setPdfUrl = _b[1];
+    var queryClient = useQueryClient();
+    var queryKey = useMemo(function () { return ['documentTemplatePreview', targetUrl]; }, [targetUrl]);
+    // Clear previous data when component mounts or id changes
+    useEffect(function () {
+        // Remove any existing data for this query
+        queryClient.removeQueries({ queryKey: queryKey });
+    }, [queryClient, queryKey]);
+    var _c = useQuery({
+        queryKey: queryKey,
+        queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, blob;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch(targetUrl)];
+                    case 1:
+                        response = _a.sent();
+                        if (!response.ok) {
+                            throw new Error('Failed to fetch PDF');
+                        }
+                        return [4 /*yield*/, response.blob()];
+                    case 2:
+                        blob = _a.sent();
+                        return [2 /*return*/, blob];
+                }
+            });
+        }); },
+        enabled: !!targetUrl,
+    }), data = _c.data, isLoading = _c.isLoading;
+    useEffect(function () {
+        if (data) {
+            var url_1 = URL.createObjectURL(data);
+            setPdfUrl(url_1);
+            // Cleanup function to revoke the object URL
+            return function () {
+                URL.revokeObjectURL(url_1);
+            };
+        }
+    }, [data]);
+    if (isLoading) {
+        return (jsx("div", __assign({ className: "flex items-center justify-center h-96" }, { children: jsx(Spin, {}) })));
+    }
+    if (!pdfUrl) {
+        return jsx(Fragment, {});
+    }
+    return (jsx("div", __assign({ className: "document-template-preview max-w-[1280px] mx-auto bg-white rounded p-4" }, { children: jsx("iframe", { src: pdfUrl, width: "100%", height: "800px", style: { border: 'none' }, title: "Document Template Preview" }) })));
+};
+
 var MarkupContainer = defaultStyled.div(templateObject_1$c || (templateObject_1$c = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 var InvoiceQuoteView = function (_a) {
-    var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
+    var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError, targetUrl = _a.targetUrl;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
     var secondaryColor = useContext(BrandContext).secondaryColor;
     var apiHost = useContext(BunnyContext).apiHost;
@@ -401,9 +452,9 @@ var InvoiceQuoteView = function (_a) {
                                 color: secondaryColor,
                             }, type: "link" }, { children: backButtonName || 'Back' }))) : null }), !hideDownloadButton ? (jsx(Button, __assign({ icon: jsx(DownloadOutlined, {}), onClick: function () {
                             return downloadFile(apiHost + '/api/pdf/invoice/' + formattedInvoice.id, token);
-                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [jsx(Markup, { content: html }), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
+                        } }, { children: "Download" }))) : null] }))) : null, isMobile ? (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-grow bunny-w-full bunny-shadow-padding-xb bunny-overflow-auto" }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] }))) : (jsxs(MarkupContainer, __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 bunny-p-4 bunny-w-full bunny-bg-white ".concat(shadow ? shadow : 'bunny-shadow-md', " bunny-rounded-md"), style: {
                     minWidth: '750px',
-                } }, { children: [jsx(Markup, { content: html }), children] })))] })));
+                } }, { children: [targetUrl ? (jsx(DocumentTemplatePreview, { targetUrl: targetUrl })) : (jsx(Markup, { content: html })), children] })))] })));
 };
 var templateObject_1$c;
 
@@ -19007,7 +19058,6 @@ function useSetDefaultPaymentMethod(paymentPlugins, apiHost, token, accountId, o
     return { setDefaultPaymentMethod: setDefaultPaymentMethod, loading: loading };
 }
 
-var Panel = Collapse.Panel;
 var showErrorNotification$1 = useErrorNotification();
 var PaymentForm = function (_a) {
     var _b;
@@ -19090,7 +19140,14 @@ var PaymentForm = function (_a) {
             storedPaymentMethods: storedPaymentMethods,
             defaultPaymentMethod: defaultPaymentMethod,
             customCheckoutFunction: customCheckoutFunction,
-        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsx(Panel, __assign({ header: jsx(Fragment, { children: !showPaymentMethodForm ? (jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsx(Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null }), showArrow: false }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] })) }), "1") })), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
+        } }, { children: jsx(StripeWrapper, __assign({ plugin: selectorPaymentMethodPlugin, token: token, apiHost: apiHost, currencyId: currencyId, accountId: accountId }, { children: jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-0 bunny-w-full" }, { children: jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-px-4" }, { children: [storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.map(function (paymentMethod) { return (jsx(MiniCreditCard, { onClickRemove: function () { return onClickRemove(paymentMethod); }, onClickSetDefault: function () { return handleSetDefault(paymentMethod); }, paymentMethodData: paymentMethod, id: "payment-method-".concat(paymentMethod.id) }, paymentMethod.id)); }), (storedPaymentMethods === null || storedPaymentMethods === void 0 ? void 0 : storedPaymentMethods.length) === 0 && (jsx(MiniCreditCard, { onClickRemove: function () { }, onClickSetDefault: function () { } }))] })), jsx(Collapse, { bordered: false, activeKey: showPaymentMethodForm ? '1' : undefined, ghost: true, collapsible: "disabled", destroyOnHidden: true, items: [
+                                {
+                                    key: '1',
+                                    showArrow: false,
+                                    label: !showPaymentMethodForm ? (jsx("div", __assign({ className: "bunny-pt-2" }, { children: jsx(Button, __assign({ onClick: handleClickAddPaymentMethod, type: "default", className: "bunny-w-full", id: "addPaymentMethod" }, { children: "Add payment method" })) }))) : null,
+                                    children: (jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2 bunny-mt-2" }, { children: [jsx(PaymentMethodSelector, { onSelect: setSelectorPaymentMethodPlugin, paymentMethodAllowedPlugins: paymentPlugins, value: selectorPaymentMethodPlugin }), selectorPaymentMethodPlugin && (jsx("div", __assign({ className: "bunny-flex bunny-flex-col" }, { children: jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, plugin: selectorPaymentMethodPlugin }) })))] }))),
+                                },
+                            ] }), paying && !selectedPaymentPluginIsManualPayment ? (jsx(Fragment, { children: defaultPaymentMethod && selectedPaymentMethodPlugin ? (jsx("div", __assign({ className: "bunny-px-4" }, { children: jsx(CheckoutFooter, { quote: quote, invoice: invoice, onPaymentSuccess: handlePaymentSuccess, onPaymentHoldSuccess: onPaymentHoldSuccess, plugin: selectedPaymentMethodPlugin, paymentHoldOptions: paymentHoldOptions }) }))) : null })) : null] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, currencyId = _a.currencyId, accountId = _a.accountId;
@@ -19158,7 +19215,7 @@ function ActualInvoice() {
     return (jsx("div", __assign({ className: "bunny-invoice-container" }, { children: jsxs("div", __assign({ className: "bunny-flex bunny-gap-6 bunny-overflow-hidden ".concat(isMobile ? 'bunny-flex-col bunny-w-full' : '', " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ 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 && (jsx("div", __assign({ className: "bunny-w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? '' : 'pt-12') }, { children: jsx(PaymentForm, { onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice }) })))] })) })));
 }
 
-var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      object {\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      object {\n        documents { id filename size date url }\n        documentTemplateId\n        firstInvoice {\n          id\n          state\n        }\n        payableId\n        id\n        payToAccept\n        currentPaymentHold {\n          createdAt\n          expiresAt\n          id\n          updatedAt\n          paymentMethod {\n            accountId\n            createdAt\n            expirationDate\n            failureCode\n            id\n            isDefault\n            lastSuccess\n            paymentType\n            pluginId\n            state\n            updatedAt\n            metadata {\n              description\n              expiration\n              icon\n              identifier\n              issuer\n              kind\n            }\n          }\n        }\n      }\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -19185,7 +19242,7 @@ var getFormattedQuote = function (_a) {
 var usePlugins = function (_a) {
     var apiHost = _a.apiHost, token = _a.token;
     var response = useQuery({
-        queryKey: QueryKeyFactory.default.pluginsKey(token || ""),
+        queryKey: QueryKeyFactory.default.pluginsKey(token || ''),
         queryFn: function () { return __awaiter(void 0, void 0, void 0, function () {
             var plugins;
             return __generator(this, function (_a) {
@@ -19196,7 +19253,6 @@ var usePlugins = function (_a) {
                         })];
                     case 1:
                         plugins = _a.sent();
-                        console.log("plugins in usePlugins: ", plugins);
                         return [2 /*return*/, plugins];
                 }
             });
@@ -19223,9 +19279,7 @@ var getPlugins = function (_a) {
                     plugins = _b.sent();
                     filteredPlugins = plugins.filter(function (plugin) {
                         var _a, _b;
-                        var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) ||
-                            ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 ||
-                            !entityId;
+                        var result = ((_a = plugin.entities) === null || _a === void 0 ? void 0 : _a.includes(Number(entityId))) || ((_b = plugin.entities) === null || _b === void 0 ? void 0 : _b.length) === 0 || !entityId;
                         return result;
                     });
                     return [2 /*return*/, filteredPlugins];
@@ -19555,14 +19609,13 @@ var useQuotePaymentHold = function (formattedQuote) {
 };
 function ActualQuote() {
     var _this = this;
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     // Context
-    var _d = useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
+    var _e = useContext(BunnyContext), apiHost = _e.apiHost, onTokenExpired = _e.onTokenExpired;
     var token = useToken();
-    useContext(BrandContext);
-    var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
+    var _f = useContext(InvoiceQuoteContext), className = _f.className, id = _f.id, hideDownloadButton = _f.hideDownloadButton, onQuoteLoaded = _f.onQuoteLoaded;
     // Queries
-    var _f = useQuery({
+    var _g = useQuery({
         queryKey: QueryKeyFactory.default.createQuoteKey({ id: id, token: token }),
         queryFn: function () { return __awaiter(_this, void 0, void 0, function () {
             var error_1;
@@ -19581,15 +19634,16 @@ function ActualQuote() {
             });
         }); },
         placeholderData: keepPreviousData,
-    }), data = _f.data, isLoading = _f.isLoading;
+    }), data = _g.data, isLoading = _g.isLoading;
     var formattedQuote = data;
+    console.log(data);
     // Hooks
-    var _g = useSendAcceptQuote({
+    var _h = useSendAcceptQuote({
         token: token,
         onTokenExpired: onTokenExpired,
         apiHost: apiHost,
         quoteId: id,
-    }), acceptBoxVisible = _g.acceptBoxVisible, isAccepting = _g.isAccepting, sendAccept = _g.sendAccept, setAcceptBoxVisible = _g.setAcceptBoxVisible, setIsAccepting = _g.setIsAccepting, startAcceptance = _g.startAcceptance, pandadocPollingModalVisible = _g.pandadocPollingModalVisible, setPandadocPollingModalVisible = _g.setPandadocPollingModalVisible, isSendAcceptPending = _g.isSendAcceptPending;
+    }), acceptBoxVisible = _h.acceptBoxVisible, isAccepting = _h.isAccepting, sendAccept = _h.sendAccept, setAcceptBoxVisible = _h.setAcceptBoxVisible, setIsAccepting = _h.setIsAccepting, startAcceptance = _h.startAcceptance, pandadocPollingModalVisible = _h.pandadocPollingModalVisible, setPandadocPollingModalVisible = _h.setPandadocPollingModalVisible, isSendAcceptPending = _h.isSendAcceptPending;
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = useIsMobile();
     var showErrorNotification = useErrorNotification();
@@ -19599,7 +19653,7 @@ function ActualQuote() {
         }
     }, [formattedQuote]);
     // Payment hold stuff here
-    var _h = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _h.paymentHoldModalVisible, setPaymentHoldModalVisible = _h.setPaymentHoldModalVisible, shouldDoPaymentHold = _h.shouldDoPaymentHold, paymentHoldCompleted = _h.paymentHoldCompleted, paymentHold = _h.paymentHold;
+    var _j = useQuotePaymentHold(formattedQuote), paymentHoldModalVisible = _j.paymentHoldModalVisible, setPaymentHoldModalVisible = _j.setPaymentHoldModalVisible, shouldDoPaymentHold = _j.shouldDoPaymentHold, paymentHoldCompleted = _j.paymentHoldCompleted, paymentHold = _j.paymentHold;
     var handleClickAccept = function () {
         if (shouldDoPaymentHold && !paymentHoldCompleted) {
             setPaymentHoldModalVisible(true);
@@ -19617,7 +19671,7 @@ function ActualQuote() {
     if ((firstInvoice === null || firstInvoice === void 0 ? void 0 : firstInvoice.state) === 'PAID' && paymentHoldCompleted) {
         return jsx(Invoice, { id: firstInvoice.id });
     }
-    return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html }, { children: ((_c = (_b = formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documents) === null || _c === void 0 ? void 0 : _c.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
+    return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-4 ".concat(isMobile ? 'bunny-w-full bunny-overflow-hidden' : '', " ").concat(className) }, { children: [jsx(QuoteButtons, { isAccepted: isAccepted, formattedQuote: formattedQuote, isMobile: isMobile, hideDownloadButton: hideDownloadButton, id: id, isAccepting: isAccepting, handleClickAccept: handleClickAccept, setPaymentHoldModalVisible: setPaymentHoldModalVisible, shouldDoPaymentHold: shouldDoPaymentHold, paymentHoldCompleted: paymentHoldCompleted, paymentHold: paymentHold }), jsx(InvoiceQuoteView, __assign({ html: formattedQuote.html, targetUrl: ((_b = formattedQuote === null || formattedQuote === void 0 ? void 0 : formattedQuote.object) === null || _b === void 0 ? void 0 : _b.documentTemplateId) ? "".concat(apiHost, "/api/pdf/quote") : undefined }, { children: ((_d = (_c = formattedQuote.object) === null || _c === void 0 ? void 0 : _c.documents) === null || _d === void 0 ? void 0 : _d.length) > 0 ? (jsx("div", __assign({ className: "bunny-flex bunny-flex-col bunny-items-end" }, { children: formattedQuote.object.documents.map(function (doc, index) {
                                 return (jsx(Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept, isSendAcceptPending: isSendAcceptPending }), jsx(PaymentHoldModal, { visible: paymentHoldModalVisible, setVisible: setPaymentHoldModalVisible, quote: formattedQuote }), jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
@@ -21204,7 +21258,7 @@ var PlanPickerCheckoutBar = function (_a) {
 };
 
 // WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
+var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n  query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n    priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n      products {\n        everythingInPlus\n        id\n        name\n        plansToDisplay\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        currencyId\n        id\n        monthlyBasePrice\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
 var getPriceListChangeOptions = function (_a) {
     var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -21310,21 +21364,35 @@ var PriceListCardTitle = function (_a) {
 
 var PriceListCardPrice = function (_a) {
     var priceList = _a.priceList;
-    return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
-            ? formatCurrency(priceList.basePrice, priceList.currencyId, 0)
+    return (jsx("div", __assign({ className: "bunny-font-medium bunny-text-center bunny-text-gray-900", style: { fontSize: '32px' } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === PricingStyle.PRICED
+            ? formatCurrency(priceList.monthlyBasePrice, priceList.currencyId, 0)
             : priceList.plan.pricingStyle === PricingStyle.CONTACT_US
-                ? ""
-                : "Free" })));
+                ? ''
+                : 'Free' })));
 };
 
 var Text$c = Typography.Text;
 var PriceListCardDescription = function (_a) {
     var description = _a.description;
+    var htmlParsedDescription = parse(description || '');
     if (!description)
         return null;
-    return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: description }));
+    return jsx(Text$c, __assign({ className: "bunny-text-center" }, { children: htmlParsedDescription }));
 };
 
+var BillingPeriodConverter;
+(function (BillingPeriodConverter) {
+    BillingPeriodConverter["ONCE"] = "once";
+    BillingPeriodConverter["MONTHLY"] = "monthly";
+    BillingPeriodConverter["ANNUAL"] = "annually";
+    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
+    BillingPeriodConverter["QUARTERLY"] = "quarterly";
+})(BillingPeriodConverter || (BillingPeriodConverter = {}));
+var BillingPeriodConverter$1 = BillingPeriodConverter;
+
+var isEmptyHtml = function (html) {
+    return /^<[^>]*>(\s*)<\/[^>]*>$/.test(html);
+};
 var Text$b = Typography.Text;
 var PriceListCardPriceDescription = function (_a) {
     var feature = _a.feature, priceList = _a.priceList;
@@ -21332,13 +21400,11 @@ var PriceListCardPriceDescription = function (_a) {
     var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === PricingModel.FLAT && charge.basePrice > 0; });
     if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== PricingStyle.PRICED)
         return null;
-    return (jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
-            fontSize: isMobile ? "13px" : "12px",
-        } }, { children: priceList.plan.pricingDescription
-            ? priceList.plan.pricingDescription
-            : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
-                ? "".concat(feature.unitName.toLowerCase(), " / ")
-                : "").concat(PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
+    return (jsxs(Fragment, { children: [jsx(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: {
+                    fontSize: isMobile ? '13px' : '12px',
+                } }, { children: priceList.plan.pricingDescription && !isEmptyHtml(priceList.plan.pricingDescription) ? (jsx(Markup, { content: priceList.plan.pricingDescription })) : ("per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
+                    ? "".concat(feature.unitName.toLowerCase(), " / ")
+                    : '', "month")) })), priceList.periodMonths > 1 && (jsxs(Text$b, __assign({ className: "bunny-text-center bunny-text-gray-900", style: { fontSize: isMobile ? '12px' : '11px' } }, { children: ["billed ", BillingPeriodConverter$1[periodMonthsConverter(priceList.periodMonths)]] })))] }));
 };
 
 var CheckIcon = function (_a) {
@@ -22203,17 +22269,9 @@ var SubscriptionCardHeader = function (_a) {
         } }, { children: [jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "bunny-flex bunny-grow bunny-items-center bunny-gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsx(Text$7, __assign({ className: "bunny-text-lg" }, { children: subscription.plan.name })), jsxs(CustomizedTag, __assign({ color: TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-6" }, { children: [jsx(Text$7, __assign({ className: "bunny-grow bunny-text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 
-var BillingPeriodConverter;
-(function (BillingPeriodConverter) {
-    BillingPeriodConverter["ONCE"] = "once";
-    BillingPeriodConverter["MONTHLY"] = "monthly";
-    BillingPeriodConverter["ANNUAL"] = "annually";
-    BillingPeriodConverter["SEMI_ANNUAL"] = "semi annually";
-    BillingPeriodConverter["QUARTERLY"] = "quarterly";
-})(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var SubscriptionChargeTotal = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
-    var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
+    var billingPeriod = charge.billingPeriod && BillingPeriodConverter$1[charge.billingPeriod];
     var isMobile = useIsMobile();
     var currencyId = subscription.currencyId;
     var formattedDiscountedPrice = formatCurrency(charge.price, currencyId);

package/dist/esm/src/components/DocumentTemplatePreview.d.ts

@@ -0,0 +1,4 @@
+declare const DocumentTemplatePreview: ({ targetUrl }: {
+    targetUrl: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DocumentTemplatePreview;

package/dist/esm/src/components/Invoice/InvoiceQuoteView.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { FormattedInvoice } from '@bunnyapp/common';
-declare const InvoiceQuoteView: ({ children, formattedInvoice, html, backButtonName, onBackButtonClick, onDownloadError, }: {
+declare const InvoiceQuoteView: ({ children, formattedInvoice, html, backButtonName, onBackButtonClick, onDownloadError, targetUrl, }: {
     html: string;
     children?: ReactNode;
     formattedInvoice?: FormattedInvoice | undefined;
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
     onDownloadError?: (() => void) | undefined;
+    targetUrl?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default InvoiceQuoteView;

package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardDescription.d.ts

@@ -1,4 +1,4 @@
-declare const PriceListCardDescription: ({ description, }: {
+declare const PriceListCardDescription: ({ description }: {
     description?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export default PriceListCardDescription;

package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts

@@ -1,4 +1,4 @@
-import { PriceList } from "@bunnyapp/common";
+import { PriceList } from '@bunnyapp/common';
 declare const PriceListCardPrice: ({ priceList }: {
     priceList: PriceList;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts

@@ -1,4 +1,4 @@
-import { Feature, PriceList } from "@bunnyapp/common";
+import { Feature, PriceList } from '@bunnyapp/common';
 declare const PriceListCardPriceDescription: ({ feature, priceList, }: {
     feature?: Feature | undefined;
     priceList: PriceList;

package/dist/esm/src/components/Subscriptions/SubscriptionsListContainer.d.ts

@@ -1,5 +1,5 @@
-import { Subscription } from "@bunnyapp/common";
-import "../../styles/index.less";
+import { Subscription } from '@bunnyapp/common';
+import '../../styles/index.less';
 export type EditingQuoteDataType = {
     id: string;
     isTrial: boolean;

package/dist/esm/src/enums/BillingPeriodConverter.d.ts

@@ -0,0 +1,8 @@
+declare enum BillingPeriodConverter {
+    ONCE = "once",
+    MONTHLY = "monthly",
+    ANNUAL = "annually",
+    SEMI_ANNUAL = "semi annually",
+    QUARTERLY = "quarterly"
+}
+export default BillingPeriodConverter;

package/dist/esm/src/hooks/usePlugins.d.ts

@@ -1,4 +1,4 @@
-declare const usePlugins: ({ apiHost, token, }: {
+declare const usePlugins: ({ apiHost, token }: {
     apiHost: string;
     token?: string | undefined;
 }) => import("@tanstack/react-query/build/legacy/types").UseQueryResult<any, Error>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.62-beta.3",
+  "version": "1.0.62-beta.5",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -65,7 +65,7 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^5.6.1",
-    "@bunnyapp/common": "^1.0.62-beta.4",
+    "@bunnyapp/common": "^1.0.62-beta.6",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -93,6 +93,7 @@
     ]
   },
   "dependencies": {
+    "html-react-parser": "^5.2.5",
     "msw-storybook-addon": "^2.0.4"
   }
 }

package/dist/cjs/src/graphql/queries/getPlanChangeOptions.d.ts

@@ -1,8 +0,0 @@
-import { Subscription } from '@bunnyapp/common';
-declare const getPlanChangeOptions: ({ isInPreviewMode, token, upgradingSubscription, apiHost, }: {
-    isInPreviewMode?: boolean | undefined;
-    token?: string | undefined;
-    upgradingSubscription?: Subscription | undefined;
-    apiHost: string;
-}) => Promise<any>;
-export default getPlanChangeOptions;

package/dist/esm/src/graphql/queries/getPlanChangeOptions.d.ts

@@ -1,8 +0,0 @@
-import { Subscription } from '@bunnyapp/common';
-declare const getPlanChangeOptions: ({ isInPreviewMode, token, upgradingSubscription, apiHost, }: {
-    isInPreviewMode?: boolean | undefined;
-    token?: string | undefined;
-    upgradingSubscription?: Subscription | undefined;
-    apiHost: string;
-}) => Promise<any>;
-export default getPlanChangeOptions;