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

package/dist/cjs/index.js

@@ -173,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.4';
+var PACKAGE_VERSION = '1.0.62-beta.5';
 var createRequestHeaders = function (token) {
     var _a;
     var bearerToken = token ? "Bearer ".concat(token) : null;
@@ -418,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;
@@ -432,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;
 
@@ -19195,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 () {
@@ -19589,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;
@@ -19615,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();
@@ -19633,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);
@@ -19651,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 })] }));
 }
@@ -21237,7 +21287,6 @@ var PlanPickerCheckoutBar = function (_a) {
                 }) })), jsxRuntime.jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsxRuntime.jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
 };
 
-console.log('PriceListChangeOptionsQuery');
 // 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        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) {

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/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, Skeleton, Collapse, 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';
@@ -143,7 +143,7 @@ var BrandContext = createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.62-beta.4';
+var PACKAGE_VERSION = '1.0.62-beta.5';
 var createRequestHeaders = function (token) {
     var _a;
     var bearerToken = token ? "Bearer ".concat(token) : null;
@@ -388,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;
@@ -402,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;
 
@@ -19165,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 () {
@@ -19559,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;
@@ -19585,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();
@@ -19603,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);
@@ -19621,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 })] }));
 }
@@ -21207,7 +21257,6 @@ var PlanPickerCheckoutBar = function (_a) {
                 }) })), jsx(CheckoutBarSummarySection, { onClickCheckout: function () { return setPayModalVisible(true); }, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, upgradingSubscription: upgradingSubscription, quotePreviewData: quotePreviewData }), jsx(Checkout, { isMobile: isMobile, onCancel: function () { return setPayModalVisible(false); }, onFail: onCheckoutFail, onSuccess: handleCheckoutSuccess, open: payModalVisible, quote: quote, selectedPriceList: selectedPriceList, storedPaymentMethod: defaultPaymentMethod, token: token })] })));
 };
 
-console.log('PriceListChangeOptionsQuery');
 // 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        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) {

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.62-beta.4",
+  "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.5",
+    "@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",