@bunnyapp/components 1.0.23 → 1.0.25

package/dist/cjs/index.js

@@ -12,7 +12,6 @@ var reactQuery = require('@tanstack/react-query');
 var theme = require('antd/lib/theme');
 var recoil = require('recoil');
 var request = import('graphql-request');
-var reactHelmetAsync = require('react-helmet-async');
 var reactStripeJs = require('@stripe/react-stripe-js');
 var pure = require('@stripe/stripe-js/pure');
 var lodash = require('lodash');
@@ -1820,14 +1819,6 @@ var InvoiceQuoteView = function (_a) {
 };
 var templateObject_1$7;
 
-var quoteMetaDescription = function (vendorName) {
-    return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
-};
-var quoteMetaTitle = function (_a) {
-    var documentName = _a.documentName, vendorName = _a.vendorName;
-    return vendorName + " " + documentName;
-};
-
 var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
     var response;
     return __generator(this, function (_a) {
@@ -2849,26 +2840,27 @@ function StripeWrapper(_a) {
 }
 
 function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
-    return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
-                id: id,
-                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
-                backButtonName: backButtonName,
-                onBackButtonClick: onBackButtonClick,
-                onInvoiceDownloadError: onInvoiceDownloadError,
-                onPaymentSuccess: onPaymentSuccess,
-                entityId: entityId,
-                shadow: shadow,
-                className: className,
-                hideDownloadButton: hideDownloadButton,
-            } }, { children: jsxRuntime.jsx(ActualInvoice, {}) })) }));
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
+    return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+            id: id,
+            invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+            backButtonName: backButtonName,
+            onBackButtonClick: onBackButtonClick,
+            onInvoiceDownloadError: onInvoiceDownloadError,
+            onPaymentSuccess: onPaymentSuccess,
+            entityId: entityId,
+            shadow: shadow,
+            className: className,
+            hideDownloadButton: hideDownloadButton,
+            onInvoiceLoaded: onInvoiceLoaded,
+        } }, { children: jsxRuntime.jsx(ActualInvoice, {}) })));
 }
 function ActualInvoice() {
     // Context
     var queryClient = reactQuery.useQueryClient();
     var _a = React.useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, className = _a.className;
     var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
-    var hideDownloadButton = React.useContext(InvoiceQuoteContext).hideDownloadButton;
+    var _c = React.useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
     // Hooks
     var showSuccessNotification = common.useSuccessNotification();
@@ -2882,8 +2874,6 @@ function ActualInvoice() {
     var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
     // Local state
     var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
-    if (!formattedInvoice)
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: common.QueryKeyFactory.default.transactionsKey(),
@@ -2896,10 +2886,14 @@ function ActualInvoice() {
     var onFail = function (error) {
         handleAllErrorFormats(error.message);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [jsxRuntime.jsxs("title", { children: [formattedInvoice.vendorName, " ", common.DOCUMENT_NAME.INVOICE] }), jsxRuntime.jsx("meta", { name: "description", content: quoteMetaDescription(formattedInvoice.vendorName) }), jsxRuntime.jsx("meta", { property: "og:type", content: "website" }), jsxRuntime.jsx("meta", { property: "og:title", content: quoteMetaTitle({
-                            vendorName: formattedInvoice.vendorName,
-                            documentName: common.DOCUMENT_NAME.INVOICE,
-                        }) }), jsxRuntime.jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] }))] }));
+    React.useEffect(function () {
+        if (formattedInvoice) {
+            onInvoiceLoaded === null || onInvoiceLoaded === void 0 ? void 0 : onInvoiceLoaded(formattedInvoice);
+        }
+    }, [formattedInvoice]);
+    if (!formattedInvoice)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) }));
 }
 
 var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\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  }"; };
@@ -3148,27 +3142,21 @@ var AcceptQuoteModal = function (_a) {
         }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
 };
 
-var DOCUMENT_NAME;
-(function (DOCUMENT_NAME) {
-    DOCUMENT_NAME["INVOICE"] = "invoice";
-    DOCUMENT_NAME["QUOTE"] = "quote";
-})(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
-
 var Text$b = antd.Typography.Text;
-var documentName = DOCUMENT_NAME.QUOTE;
 styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
-    return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
-                id: id,
-                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
-                onInvoiceDownloadError: onInvoiceDownloadError,
-                onPaymentSuccess: onPaymentSuccess,
-                entityId: entityId,
-                shadow: shadow,
-                className: className,
-                hideDownloadButton: hideDownloadButton,
-            } }, { children: jsxRuntime.jsx(ActualQuote, { entityId: entityId }) })) }));
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
+    return (jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+            id: id,
+            invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+            onInvoiceDownloadError: onInvoiceDownloadError,
+            onPaymentSuccess: onPaymentSuccess,
+            entityId: entityId,
+            shadow: shadow,
+            className: className,
+            hideDownloadButton: hideDownloadButton,
+            onQuoteLoaded: onQuoteLoaded,
+        } }, { children: jsxRuntime.jsx(ActualQuote, { entityId: entityId }) })));
 }
 function ActualQuote(_a) {
     var _this = this;
@@ -3178,7 +3166,7 @@ function ActualQuote(_a) {
     var _d = React.useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
     var token = useToken();
     var entityBranding = React.useContext(BrandContext);
-    var _e = React.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton;
+    var _e = React.useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
     // Queries
     var _f = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createQuoteKey(token, id),
@@ -3214,15 +3202,17 @@ function ActualQuote(_a) {
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = common.useIsMobile();
     var showErrorNotification = common.useErrorNotification();
+    React.useEffect(function () {
+        if (formattedQuote) {
+            onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
+        }
+    }, [formattedQuote]);
     if (!formattedQuote || isLoading) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
     // Derived state
     var isAccepted = formattedQuote.state === "ACCEPTED";
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(reactHelmetAsync.Helmet, { children: [jsxRuntime.jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsxRuntime.jsx("meta", { name: "description", content: quoteMetaDescription(formattedQuote.vendorName) }), jsxRuntime.jsx("meta", { property: "og:type", content: "website" }), jsxRuntime.jsx("meta", { property: "og:title", content: quoteMetaTitle({
-                            vendorName: formattedQuote.vendorName,
-                            documentName: documentName,
-                        }) }), jsxRuntime.jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
                         } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
                                     ? "flex w-full justify-end gap-2"
@@ -4214,6 +4204,36 @@ function Signup(_a) {
                         : "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
+// WARNING: There is a preview button on APP that will need to be changed if this query is changed
+var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\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        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\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        productId\n      }\n    }\n  }";
+var getPlanChangeOptions = function (_a) {
+    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, planChangeOptions;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        isInPreviewMode: isInPreviewMode,
+                        query: PLAN_CHANGE_OPTIONS_QUERY,
+                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    planChangeOptions = response.planChangeOptions;
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
+                        throw planChangeOptions.errors;
+                    // Sort planChangeOptions.plans by position
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
+                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
+                    }
+                    return [2 /*return*/, planChangeOptions];
+            }
+        });
+    });
+};
+
 var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
@@ -4307,6 +4327,8 @@ var ErrorView = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
+var SubscriptionsContext = React.createContext({});
+
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -4502,8 +4524,6 @@ var FeatureBarChart = function (_a) {
 var StyledBarChart = styled__default["default"](recharts.BarChart)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
 var templateObject_1;
 
-var SubscriptionsContext = React.createContext({});
-
 var isSubscriptionNotActive = function (subscription) {
     var _a, _b;
     return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
@@ -4548,13 +4568,14 @@ var SubscriptionCardHeader = function (_a) {
     var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
     var darkMode = React.useContext(BunnyContext).darkMode;
     var brandColor = React.useContext(BrandContext).brandColor;
+    var subscriptionProductNameStyle = React.useContext(SubscriptionsContext).subscriptionProductNameStyle;
     var isMobile = common.useIsMobile();
     // Derived state
     var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
     return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
             backgroundColor: darkMode ? "var(--row-background-dark)" : "",
-        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "11px", color: brandColor } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx("div", __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: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
                         planChangeOptions &&
                         onChangePlanClick &&
                         onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
@@ -4770,41 +4791,15 @@ var SubscriptionsList = function (_a) {
         }) }));
 };
 
-// WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\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        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\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        productId\n      }\n    }\n  }";
-var getPlanChangeOptions = function (_a) {
-    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, planChangeOptions;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        isInPreviewMode: isInPreviewMode,
-                        query: PLAN_CHANGE_OPTIONS_QUERY,
-                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    planChangeOptions = response.planChangeOptions;
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
-                        throw planChangeOptions.errors;
-                    // Sort planChangeOptions.plans by position
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
-                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
-                    }
-                    return [2 /*return*/, planChangeOptions];
-            }
-        });
-    });
-};
-
 var Subscriptions = function (_a) {
     var className = _a.className, companyName = _a.companyName, entityId = _a.entityId, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, onSubscriptionsLoaded = _a.onSubscriptionsLoaded, _c = _a.styles, styles = _c === void 0 ? {
         gap: 4,
         shadow: "sm",
-    } : _c;
+        subscriptionProductNameStyle: {
+            fontSize: "11px",
+            fontWeight: 500,
+        },
+    } : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent;
     var gap = styles.gap, shadow = styles.shadow;
     // Context
     var apiHost = React.useContext(BunnyContext).apiHost;
@@ -4832,7 +4827,8 @@ var Subscriptions = function (_a) {
     return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: gap,
             shadow: shadow,
-        } }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })) })));
+            subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
+        } }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) })) })));
 };
 
 var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";

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

@@ -1,3 +1,3 @@
-import { InvoiceQuoteContextProps } from "./InvoiceQuoteContext";
 import "../../styles/index.less";
-export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;
+import { InvoiceQuoteContextProps } from "./InvoiceQuoteContext";
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onInvoiceLoaded, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ShadowType } from "../../types/shadowType";
+import { FormattedInvoice, FormattedQuote } from "@bunnyapp/common";
 export type InvoiceQuoteContextProps = {
     id?: string;
     invoiceQuoteViewComponent?: React.ReactNode;
@@ -11,5 +12,7 @@ export type InvoiceQuoteContextProps = {
     shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
+    onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;
+    onQuoteLoaded?: (formattedQuote: FormattedQuote) => void;
 };
 export declare const InvoiceQuoteContext: import("react").Context<InvoiceQuoteContextProps>;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InvoiceQuoteContextProps } from "../Invoice/InvoiceQuoteContext";
 export declare const MarkupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;
+export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onQuoteLoaded, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/components/Quote/Quote.stories.d.ts

@@ -15,6 +15,8 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -26,6 +28,8 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -38,6 +42,8 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -49,6 +55,8 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -61,6 +69,8 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -72,6 +82,8 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -84,6 +96,8 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -95,6 +109,8 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const HideDownloadButton: Story;
 export declare const AcceptedQuote: Story;
@@ -110,6 +126,8 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -121,4 +139,6 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;

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

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { Subscription } from "@bunnyapp/common";
 import "../../styles/index.less";
 export type EditingQuoteDataType = {
     id: string;
     isTrial: boolean;
 };
-declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, }: {
+declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, noSubscriptionsComponent, }: {
     className?: string | undefined;
     companyName: string;
     entityId: string;
@@ -15,6 +16,8 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     styles?: {
         gap?: number | undefined;
         shadow?: "none" | "lg" | "md" | "sm" | undefined;
+        subscriptionProductNameStyle?: import("react").CSSProperties | undefined;
     } | undefined;
+    noSubscriptionsComponent?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Subscriptions;

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

@@ -3,5 +3,6 @@ export type SubscriptionsContextValues = {
     gap?: number;
     shadow?: "none" | "sm" | "md" | "lg";
     showTitle?: boolean;
+    subscriptionProductNameStyle?: React.CSSProperties;
 };
 export declare const SubscriptionsContext: import("react").Context<SubscriptionsContextValues>;

package/dist/esm/index.js

@@ -4,12 +4,11 @@ import React__default, { createContext, useContext, useEffect, useState, useMemo
 import { Markup } from 'interweave';
 import { ConfigProvider, Button, Typography, Tag, Divider, Popconfirm, Input, Checkbox, Collapse, Modal, Form, Drawer, Card as Card$1, Select, Image, Dropdown, Skeleton } from 'antd';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, DEFAULT_CONFIG, useErrorNotification, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, DOCUMENT_NAME as DOCUMENT_NAME$1, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, PricingModel, ChargeType } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, QueryKeyFactory, useIsMobile, isColorTooDark, MARK_PRO, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, getPlugins, DEFAULT_CONFIG, useErrorNotification, formatCurrency, invokePlugin, GRAY_500, GRAY_200, useSuccessNotification, useAllErrorFormats, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, useGraphQLmutation, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, Lists, getAccount, SubscriptionChargeKind, SubscriptionState as SubscriptionState$2, MODAL_MAX_HEIGHT, SLATE_500, StringUtils, DataInterval, TAG_COLORS, PricingModel, ChargeType } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, keepPreviousData, useMutation } from '@tanstack/react-query';
 import theme from 'antd/lib/theme';
 import { RecoilRoot } from 'recoil';
 import request, { GraphQLClient } from 'graphql-request';
-import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { useElements, useStripe, PaymentElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js/pure';
 import { capitalize, startCase, cloneDeep, omit } from 'lodash';
@@ -1791,14 +1790,6 @@ var InvoiceQuoteView = function (_a) {
 };
 var templateObject_1$7;
 
-var quoteMetaDescription = function (vendorName) {
-    return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
-};
-var quoteMetaTitle = function (_a) {
-    var documentName = _a.documentName, vendorName = _a.vendorName;
-    return vendorName + " " + documentName;
-};
-
 var fetchPDF = function (apiEndpoint, invoiceUuid, token) { return __awaiter(void 0, void 0, void 0, function () {
     var response;
     return __generator(this, function (_a) {
@@ -2820,26 +2811,27 @@ function StripeWrapper(_a) {
 }
 
 function Invoice(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
-    return (jsx(HelmetProvider, { children: jsx(InvoiceQuoteContext.Provider, __assign({ value: {
-                id: id,
-                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
-                backButtonName: backButtonName,
-                onBackButtonClick: onBackButtonClick,
-                onInvoiceDownloadError: onInvoiceDownloadError,
-                onPaymentSuccess: onPaymentSuccess,
-                entityId: entityId,
-                shadow: shadow,
-                className: className,
-                hideDownloadButton: hideDownloadButton,
-            } }, { children: jsx(ActualInvoice, {}) })) }));
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onInvoiceLoaded = _a.onInvoiceLoaded;
+    return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+            id: id,
+            invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+            backButtonName: backButtonName,
+            onBackButtonClick: onBackButtonClick,
+            onInvoiceDownloadError: onInvoiceDownloadError,
+            onPaymentSuccess: onPaymentSuccess,
+            entityId: entityId,
+            shadow: shadow,
+            className: className,
+            hideDownloadButton: hideDownloadButton,
+            onInvoiceLoaded: onInvoiceLoaded,
+        } }, { children: jsx(ActualInvoice, {}) })));
 }
 function ActualInvoice() {
     // Context
     var queryClient = useQueryClient();
     var _a = useContext(InvoiceQuoteContext), id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, entityId = _a.entityId, className = _a.className;
     var _b = useContext(BunnyContext), apiHost = _b.apiHost, onTokenExpired = _b.onTokenExpired, graphQLClient = _b.graphQLClient;
-    var hideDownloadButton = useContext(InvoiceQuoteContext).hideDownloadButton;
+    var _c = useContext(InvoiceQuoteContext), hideDownloadButton = _c.hideDownloadButton, onInvoiceLoaded = _c.onInvoiceLoaded;
     var token = useToken();
     // Hooks
     var showSuccessNotification = useSuccessNotification();
@@ -2853,8 +2845,6 @@ function ActualInvoice() {
     var isInvoicePayable = PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
     // Local state
     var isMobile = useIsMobile(isInvoicePayable ? BreakpointNumbers.lg : undefined);
-    if (!formattedInvoice)
-        return jsx(Fragment, {});
     var onSuccess = function () {
         queryClient.invalidateQueries({
             queryKey: QueryKeyFactory.default.transactionsKey(),
@@ -2867,10 +2857,14 @@ function ActualInvoice() {
     var onFail = function (error) {
         handleAllErrorFormats(error.message);
     };
-    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedInvoice.vendorName, " ", DOCUMENT_NAME$1.INVOICE] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedInvoice.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
-                            vendorName: formattedInvoice.vendorName,
-                            documentName: DOCUMENT_NAME$1.INVOICE,
-                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] }))] }));
+    useEffect(function () {
+        if (formattedInvoice) {
+            onInvoiceLoaded === null || onInvoiceLoaded === void 0 ? void 0 : onInvoiceLoaded(formattedInvoice);
+        }
+    }, [formattedInvoice]);
+    if (!formattedInvoice)
+        return jsx(Fragment, {});
+    return (jsx(Fragment, { children: jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] })) }));
 }
 
 var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\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  }"; };
@@ -3119,27 +3113,21 @@ var AcceptQuoteModal = function (_a) {
         }, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxs(Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsx(Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsx(Input, { autoFocus: true, ref: firstInputRef }) })), jsx(Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsx(Input, {}) })), jsx(Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsx(Input, {}) })), taxNumberRequired && (jsx(Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsx(Input, {}) })))] })) })));
 };
 
-var DOCUMENT_NAME;
-(function (DOCUMENT_NAME) {
-    DOCUMENT_NAME["INVOICE"] = "invoice";
-    DOCUMENT_NAME["QUOTE"] = "quote";
-})(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
-
 var Text$b = Typography.Text;
-var documentName = DOCUMENT_NAME.QUOTE;
 styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
-    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
-    return (jsx(HelmetProvider, { children: jsx(InvoiceQuoteContext.Provider, __assign({ value: {
-                id: id,
-                invoiceQuoteViewComponent: invoiceQuoteViewComponent,
-                onInvoiceDownloadError: onInvoiceDownloadError,
-                onPaymentSuccess: onPaymentSuccess,
-                entityId: entityId,
-                shadow: shadow,
-                className: className,
-                hideDownloadButton: hideDownloadButton,
-            } }, { children: jsx(ActualQuote, { entityId: entityId }) })) }));
+    var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
+    return (jsx(InvoiceQuoteContext.Provider, __assign({ value: {
+            id: id,
+            invoiceQuoteViewComponent: invoiceQuoteViewComponent,
+            onInvoiceDownloadError: onInvoiceDownloadError,
+            onPaymentSuccess: onPaymentSuccess,
+            entityId: entityId,
+            shadow: shadow,
+            className: className,
+            hideDownloadButton: hideDownloadButton,
+            onQuoteLoaded: onQuoteLoaded,
+        } }, { children: jsx(ActualQuote, { entityId: entityId }) })));
 }
 function ActualQuote(_a) {
     var _this = this;
@@ -3149,7 +3137,7 @@ function ActualQuote(_a) {
     var _d = useContext(BunnyContext), apiHost = _d.apiHost, onTokenExpired = _d.onTokenExpired;
     var token = useToken();
     var entityBranding = useContext(BrandContext);
-    var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton;
+    var _e = useContext(InvoiceQuoteContext), className = _e.className, id = _e.id, hideDownloadButton = _e.hideDownloadButton, onQuoteLoaded = _e.onQuoteLoaded;
     // Queries
     var _f = useQuery({
         queryKey: QueryKeyFactory.default.createQuoteKey(token, id),
@@ -3185,15 +3173,17 @@ function ActualQuote(_a) {
     useSigningComplete({ data: formattedQuote, token: token });
     var isMobile = useIsMobile();
     var showErrorNotification = useErrorNotification();
+    useEffect(function () {
+        if (formattedQuote) {
+            onQuoteLoaded === null || onQuoteLoaded === void 0 ? void 0 : onQuoteLoaded(formattedQuote);
+        }
+    }, [formattedQuote]);
     if (!formattedQuote || isLoading) {
         return jsx(Fragment, {});
     }
     // Derived state
     var isAccepted = formattedQuote.state === "ACCEPTED";
-    return (jsxs(Fragment, { children: [jsxs(Helmet, { children: [jsxs("title", { children: [formattedQuote.vendorName, " ", documentName] }), jsx("meta", { name: "description", content: quoteMetaDescription(formattedQuote.vendorName) }), jsx("meta", { property: "og:type", content: "website" }), jsx("meta", { property: "og:title", content: quoteMetaTitle({
-                            vendorName: formattedQuote.vendorName,
-                            documentName: documentName,
-                        }) }), jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
+    return (jsxs(Fragment, { children: [jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
                         } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsx(Text$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxs("div", __assign({ className: isMobile
                                     ? "flex w-full justify-end gap-2"
@@ -4185,6 +4175,36 @@ function Signup(_a) {
                         : "w-1/2 items-center justify-center my-12") }, { children: jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
+// WARNING: There is a preview button on APP that will need to be changed if this query is changed
+var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\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        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\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        productId\n      }\n    }\n  }";
+var getPlanChangeOptions = function (_a) {
+    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, planChangeOptions;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, gqlRequest$1({
+                        isInPreviewMode: isInPreviewMode,
+                        query: PLAN_CHANGE_OPTIONS_QUERY,
+                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    planChangeOptions = response.planChangeOptions;
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
+                        throw planChangeOptions.errors;
+                    // Sort planChangeOptions.plans by position
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
+                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
+                    }
+                    return [2 /*return*/, planChangeOptions];
+            }
+        });
+    });
+};
+
 var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isAmendment\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
     var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
@@ -4278,6 +4298,8 @@ var ErrorView = function (_a) {
     return (jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
+var SubscriptionsContext = createContext({});
+
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -4473,8 +4495,6 @@ var FeatureBarChart = function (_a) {
 var StyledBarChart = styled(BarChart)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .recharts-surface {\n    overflow: visible;\n  }\n"], ["\n  .recharts-surface {\n    overflow: visible;\n  }\n"])));
 var templateObject_1;
 
-var SubscriptionsContext = createContext({});
-
 var isSubscriptionNotActive = function (subscription) {
     var _a, _b;
     return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === SubscriptionState$2.EXPIRED ||
@@ -4519,13 +4539,14 @@ var SubscriptionCardHeader = function (_a) {
     var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
     var darkMode = useContext(BunnyContext).darkMode;
     var brandColor = useContext(BrandContext).brandColor;
+    var subscriptionProductNameStyle = useContext(SubscriptionsContext).subscriptionProductNameStyle;
     var isMobile = useIsMobile();
     // Derived state
     var trialDaysLeft = dayjs(subscription.trialEndDate).diff(dayjs(), "days");
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$2.TRIAL;
     return (jsxs("div", __assign({ className: "flex items-center justify-between", style: {
             backgroundColor: darkMode ? "var(--row-background-dark)" : "",
-        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx("div", __assign({ className: "font-medium", style: { fontSize: "11px", color: brandColor } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxs(Tag, __assign({ className: "ant-tag-".concat(TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
+        } }, { children: [jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsx("div", __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: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxs(Tag, __assign({ className: "ant-tag-".concat(TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
                         planChangeOptions &&
                         onChangePlanClick &&
                         onCancelSubscriptionClick && (jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
@@ -4741,41 +4762,15 @@ var SubscriptionsList = function (_a) {
         }) }));
 };
 
-// WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\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        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\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        productId\n      }\n    }\n  }";
-var getPlanChangeOptions = function (_a) {
-    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, planChangeOptions;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, gqlRequest$1({
-                        isInPreviewMode: isInPreviewMode,
-                        query: PLAN_CHANGE_OPTIONS_QUERY,
-                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    planChangeOptions = response.planChangeOptions;
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
-                        throw planChangeOptions.errors;
-                    // Sort planChangeOptions.plans by position
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
-                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
-                    }
-                    return [2 /*return*/, planChangeOptions];
-            }
-        });
-    });
-};
-
 var Subscriptions = function (_a) {
     var className = _a.className, companyName = _a.companyName, entityId = _a.entityId, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, onSubscriptionsLoaded = _a.onSubscriptionsLoaded, _c = _a.styles, styles = _c === void 0 ? {
         gap: 4,
         shadow: "sm",
-    } : _c;
+        subscriptionProductNameStyle: {
+            fontSize: "11px",
+            fontWeight: 500,
+        },
+    } : _c, noSubscriptionsComponent = _a.noSubscriptionsComponent;
     var gap = styles.gap, shadow = styles.shadow;
     // Context
     var apiHost = useContext(BunnyContext).apiHost;
@@ -4803,7 +4798,8 @@ var Subscriptions = function (_a) {
     return (jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: gap,
             shadow: shadow,
-        } }, { children: jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })) })));
+            subscriptionProductNameStyle: styles.subscriptionProductNameStyle,
+        } }, { children: jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (noSubscriptionsComponent || (jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) })) })));
 };
 
 var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";

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

@@ -1,3 +1,3 @@
-import { InvoiceQuoteContextProps } from "./InvoiceQuoteContext";
 import "../../styles/index.less";
-export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;
+import { InvoiceQuoteContextProps } from "./InvoiceQuoteContext";
+export default function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onInvoiceLoaded, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { ShadowType } from "../../types/shadowType";
+import { FormattedInvoice, FormattedQuote } from "@bunnyapp/common";
 export type InvoiceQuoteContextProps = {
     id?: string;
     invoiceQuoteViewComponent?: React.ReactNode;
@@ -11,5 +12,7 @@ export type InvoiceQuoteContextProps = {
     shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
+    onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;
+    onQuoteLoaded?: (formattedQuote: FormattedQuote) => void;
 };
 export declare const InvoiceQuoteContext: import("react").Context<InvoiceQuoteContextProps>;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { InvoiceQuoteContextProps } from "../Invoice/InvoiceQuoteContext";
 export declare const MarkupContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;
+export default function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onQuoteLoaded, }: InvoiceQuoteContextProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/Quote/Quote.stories.d.ts

@@ -15,6 +15,8 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -26,6 +28,8 @@ export declare const Default: import("@storybook/csf").StoryAnnotations<import("
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -38,6 +42,8 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -49,6 +55,8 @@ export declare const NoShadow: import("@storybook/csf").StoryAnnotations<import(
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -61,6 +69,8 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -72,6 +82,8 @@ export declare const Mobile: import("@storybook/csf").StoryAnnotations<import("@
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<import("@storybook/react/dist/types-a5624094").R, {
     id?: string | undefined;
@@ -84,6 +96,8 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -95,6 +109,8 @@ export declare const CustomClassName: import("@storybook/csf").StoryAnnotations<
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;
 export declare const HideDownloadButton: Story;
 export declare const AcceptedQuote: Story;
@@ -110,6 +126,8 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
     shadow?: import("../../types/shadowType").ShadowType | undefined;
     className?: string | undefined;
     hideDownloadButton?: boolean | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }, {
     backButtonName?: string | undefined;
     onBackButtonClick?: (() => void) | undefined;
@@ -121,4 +139,6 @@ export declare const DarkMode: import("@storybook/csf").StoryAnnotations<import(
     onPaymentSuccess?: ((savePaymentMethod?: boolean | undefined) => void) | undefined;
     invoiceQuoteViewComponent?: import("react").ReactNode;
     onInvoiceDownloadError?: (() => void) | undefined;
+    onInvoiceLoaded?: ((formattedInvoice: import("@bunnyapp/common").FormattedInvoice) => void) | undefined;
+    onQuoteLoaded?: ((formattedQuote: import("@bunnyapp/common").FormattedQuote) => void) | undefined;
 }>;

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

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { Subscription } from "@bunnyapp/common";
 import "../../styles/index.less";
 export type EditingQuoteDataType = {
     id: string;
     isTrial: boolean;
 };
-declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, }: {
+declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, noSubscriptionsComponent, }: {
     className?: string | undefined;
     companyName: string;
     entityId: string;
@@ -15,6 +16,8 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     styles?: {
         gap?: number | undefined;
         shadow?: "none" | "lg" | "md" | "sm" | undefined;
+        subscriptionProductNameStyle?: import("react").CSSProperties | undefined;
     } | undefined;
+    noSubscriptionsComponent?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Subscriptions;

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

@@ -3,5 +3,6 @@ export type SubscriptionsContextValues = {
     gap?: number;
     shadow?: "none" | "sm" | "md" | "lg";
     showTitle?: boolean;
+    subscriptionProductNameStyle?: React.CSSProperties;
 };
 export declare const SubscriptionsContext: import("react").Context<SubscriptionsContextValues>;

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FrontendTransaction, FormattedInvoice, Quote as Quote$1, PriceList, PaymentMethod as PaymentMethod$1, TransactionKind, Subscription } from '@bunnyapp/common';
+import { FormattedInvoice, FormattedQuote, FrontendTransaction, Quote as Quote$1, PriceList, PaymentMethod as PaymentMethod$1, TransactionKind, Subscription } from '@bunnyapp/common';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeConfig } from 'antd';
-import react from 'react';
+import * as react from 'react';
+import react__default from 'react';
 import * as _tanstack_react_query_build_legacy_types from '@tanstack/react-query/build/legacy/types';
 import { GraphQLClient } from 'graphql-request';
 
@@ -20,9 +21,11 @@ type InvoiceQuoteContextProps = {
     shadow?: ShadowType;
     className?: string;
     hideDownloadButton?: boolean;
+    onInvoiceLoaded?: (formattedInvoice: FormattedInvoice) => void;
+    onQuoteLoaded?: (formattedQuote: FormattedQuote) => void;
 };
 
-declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): react_jsx_runtime.JSX.Element;
+declare function Invoice({ id, invoiceQuoteViewComponent, backButtonName, onBackButtonClick, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onInvoiceLoaded, }: InvoiceQuoteContextProps): react_jsx_runtime.JSX.Element;
 
 declare global {
     interface Window {
@@ -32,7 +35,7 @@ declare global {
     }
 }
 
-declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, }: InvoiceQuoteContextProps): react_jsx_runtime.JSX.Element;
+declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, entityId, shadow, className, hideDownloadButton, onQuoteLoaded, }: InvoiceQuoteContextProps): react_jsx_runtime.JSX.Element;
 
 type TransactionListColumnType = "date-and-title" | "state" | "amount" | "download";
 
@@ -134,7 +137,7 @@ type TransactionDateType = "createdAt" | "issuedAt" | "dueAt";
 
 declare function Transactions({ transactionComponent, showSearchBar, showTitle, title, columns, className, shadow, searchBarClassName, useModal, onTransactionClick, suppressTransactionDisplay, kindsToShow, style, filter, noTransactionsMessage, entityId, filterTransactions, sortTransactions, transactionDateType, }: {
     /** A custom component to render instead of the default invoice component */
-    transactionComponent?: react.ReactNode;
+    transactionComponent?: react__default.ReactNode;
     /** Whether to show the search bar */
     showSearchBar?: boolean;
     /** Whether to show the title */
@@ -158,7 +161,7 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
     /** The kinds of transactions to show */
     kindsToShow?: TransactionKind[];
     /** A custom style to apply to the component */
-    style?: react.CSSProperties;
+    style?: react__default.CSSProperties;
     /** A filter to apply to the transactions. Docs on filter: https://docs.bunny.com/developer/getting-started/using-filters-in-queries
      * Filtering is applied on the api side, potentially speeding up the transactions query
      */
@@ -178,7 +181,7 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
     transactionDateType?: TransactionDateType;
 }): react_jsx_runtime.JSX.Element;
 
-declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, }: {
+declare const Subscriptions: ({ className, companyName, entityId, hideExpired, onCancelSubscriptionClick, onChangePlanClick, onSubscriptionsLoaded, styles, noSubscriptionsComponent, }: {
     className?: string | undefined;
     companyName: string;
     entityId: string;
@@ -189,7 +192,9 @@ declare const Subscriptions: ({ className, companyName, entityId, hideExpired, o
     styles?: {
         gap?: number | undefined;
         shadow?: "none" | "lg" | "md" | "sm" | undefined;
+        subscriptionProductNameStyle?: react.CSSProperties | undefined;
     } | undefined;
+    noSubscriptionsComponent?: React.ReactNode;
 }) => react_jsx_runtime.JSX.Element;
 
 declare const BillingDetails: ({ entityId, isCardEnabled, shadow, className, hidePaymentMethodForm, countryListFilter, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -79,7 +79,6 @@
     "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-helmet-async": "^2.0.5",
     "recharts": "^2.15.0",
     "recoil": "^0.7.7",
     "styled-components": "^6.1.13"

package/dist/cjs/src/components/Quote/DocumentNameEnum.d.ts

@@ -1,4 +0,0 @@
-export declare enum DOCUMENT_NAME {
-    INVOICE = "invoice",
-    QUOTE = "quote"
-}

package/dist/esm/src/components/Quote/DocumentNameEnum.d.ts

@@ -1,4 +0,0 @@
-export declare enum DOCUMENT_NAME {
-    INVOICE = "invoice",
-    QUOTE = "quote"
-}