@bunnyapp/components 1.0.50 → 1.0.53

package/dist/cjs/index.js

@@ -823,13 +823,13 @@ var PlusIcon = function (_a) {
     return (jsxRuntime.jsxs("svg", __assign({ width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M2.9165 7.5H11.0832", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M7 3.41663V11.5833", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$q = antd.Typography.Text;
+var Text$o = antd.Typography.Text;
 var CreditCard = function (_a) {
     var _b;
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate, paymentMethodData = _a.paymentMethodData, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, _d = _a.cardEnabled, cardEnabled = _d === void 0 ? true : _d;
     var isMobile = common.useIsMobile();
     var Wrapper = cardEnabled ? Card : "div";
-    return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$q, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(CustomizedTag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
+    return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(CustomizedTag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
 };
 var MiniCreditCard = function (_a) {
     var _b, _c;
@@ -844,7 +844,7 @@ var MiniCreditCard = function (_a) {
     function capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1);
     }
-    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$q, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$q, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$q, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] })] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$q, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$o, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$o, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] })] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$o, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
 };
 var CardImage = function (_a) {
     var _b;
@@ -876,7 +876,7 @@ var CardImage = function (_a) {
 };
 var CardAttribute = function (_a) {
     var title = _a.title, value = _a.value;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$q, { children: value })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$o, { children: value })] })));
 };
 var CardActions = function (_a) {
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
@@ -1057,7 +1057,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$p = antd.Typography.Text;
+var Text$n = antd.Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -1118,7 +1118,7 @@ var DemoPayForm = function (_a) {
     var onCardCvcChange = function (cvc) {
         setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
     };
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$p, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$n, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
 var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"], ["\n  .ant-input {\n    background-color: ", " !important;\n  }\n  .ant-input:not(:focus) {\n    border-color: ", " !important;\n  }\n"])), function (_a) {
     var darkMode = _a.darkMode;
@@ -1360,7 +1360,7 @@ var CardIcon = function () {
     return (jsxRuntime.jsxs("svg", __assign({ width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [jsxRuntime.jsx("path", { d: "M15 3.75H3C2.17157 3.75 1.5 4.42157 1.5 5.25V12.75C1.5 13.5784 2.17157 14.25 3 14.25H15C15.8284 14.25 16.5 13.5784 16.5 12.75V5.25C16.5 4.42157 15.8284 3.75 15 3.75Z", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M1.5 7.5H16.5", stroke: common.SLATE_400, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] })));
 };
 
-var Text$o = antd.Typography.Text;
+var Text$m = antd.Typography.Text;
 var PaymentMethodSelector = function (_a) {
     var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
     return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
@@ -1373,7 +1373,7 @@ var PaymentOption = function (_a) {
     var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
     return (jsxRuntime.jsxs(PaymentOptionContainer, __assign({ "$brandColor": brandColor, "$selected": selected, className: "flex justify-between items-center w-full cursor-pointer py-2 px-4 rounded border-solid ".concat(darkMode
             ? "var(--row-background-dark) border-gray-500"
-            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$o, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
+            : "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$m, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
 };
 var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"], ["\n  transition: border 0.3s ease;\n\n  ", "\n\n  &:hover {\n    border-color: ", ";\n  }\n"])), function (_a) {
     var $brandColor = _a.$brandColor, $selected = _a.$selected;
@@ -1839,7 +1839,7 @@ 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 Text$n = antd.Typography.Text;
+var Text$l = antd.Typography.Text;
 defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __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, _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;
@@ -1908,7 +1908,7 @@ function ActualQuote() {
     var isAccepted = formattedQuote.state === "ACCEPTED";
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "bunny-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$n, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
+                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$l, { 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"
                                     : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
                                             return downloadFile(apiHost + "/api/pdf/quote", token);
@@ -19214,10 +19214,10 @@ var getColor = function (state) {
     }
 };
 
-var Text$m = antd.Typography.Text;
+var Text$k = antd.Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsxRuntime.jsx(Text$m, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
+    return jsxRuntime.jsx(Text$k, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
 };
 
 var ArrowDownToLine = function (_a) {
@@ -19254,10 +19254,10 @@ var TransactionGridCell = defaultStyled.div.withConfig({
 }, common.SLATE_600);
 var templateObject_1$6;
 
-var Text$l = antd.Typography.Text;
+var Text$j = antd.Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.jsx(Text$l, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsxRuntime.jsx(Text$j, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 var isInvoice = function (transaction) {
@@ -19290,7 +19290,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
     }
 }
 
-var Text$k = antd.Typography.Text;
+var Text$i = antd.Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19319,11 +19319,11 @@ var TransactionsListDesktop = function (_a) {
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$k, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$k, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$k, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$k, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$i, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
 
-var Text$j = antd.Typography.Text;
+var Text$h = antd.Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
@@ -19346,12 +19346,12 @@ var TransactionsListMobile = function (_a) {
                     backgroundColor: index % 2 === 0
                         ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
                         : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$j, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$j, { children: common.formatCurrency(transaction.transactionable.amount ||
+                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$h, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
                                                 transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
 
-var Text$i = antd.Typography.Text;
+var Text$g = antd.Typography.Text;
 var DISPLAY_WIDTH = 1200;
 function Transactions(_a) {
     var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
@@ -19464,7 +19464,7 @@ function TransactionsDisplay(_a) {
         onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
         setDrawerOpen(false);
     }
-    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full bunny-shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$i, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
+    return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full bunny-shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
                             ), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
                                         ? searchBarClassName
                                         : "border border-slate-200", onChange: function (e) {
@@ -19609,10 +19609,10 @@ var getBillingDetails = function (_a) {
     });
 };
 
-var Text$h = antd.Typography.Text;
+var Text$f = antd.Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$h, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$f, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -19787,18 +19787,18 @@ function InitialSignupForm(_a) {
                         ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
-var Title = antd.Typography.Title, Text$g = antd.Typography.Text;
+var Title = antd.Typography.Title, Text$e = antd.Typography.Text;
 function PaymentSuccessDisplay(_a) {
     var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$g, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$e, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
-var Text$f = antd.Typography.Text;
+var Text$d = antd.Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
     if (!priceListData)
         return null;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$f, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$f, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$f, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$f, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$d, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
 }
 
 var showErrorNotification = common.useErrorNotification();
@@ -20509,13 +20509,13 @@ var billingPeriodConverter = function (period) {
 
 var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
 // Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
-var createPlanDescription = function (plan) {
-    return (plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
+var createPlanDescription = function (priceList) {
+    return (priceList.plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
         return y ? " & " : "";
     });
 };
-var getActivePlanPriceData = function (plan, selectedPriceList) {
-    if (!plan) {
+var getActivePlanPriceData = function (priceList, selectedPriceList) {
+    if (!priceList) {
         return;
     }
     // If a period option is selected, return the charge that matches the selected period option
@@ -20523,33 +20523,28 @@ var getActivePlanPriceData = function (plan, selectedPriceList) {
     // Default to first price list charge
     var lowestPLCharge;
     // Find the lowest price list charge with a billing period that matches the selected period option
-    for (var i = 0; i < plan.priceLists.length; i++) {
-        var priceList = plan.priceLists[i];
-        if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
-            activeBillingPLCharge = priceList.charges[0];
-            break;
-        }
-        for (var j = 0; j < priceList.charges.length; j++) {
-            var charge = priceList.charges[j];
-            if (charge.chargeType === common.ChargeType.USAGE)
-                continue;
-            if (activeBillingPLCharge) {
-                // If we already found a charge with the same billing period check if this charge is lower
-                if (charge.basePrice < activeBillingPLCharge.basePrice &&
-                    charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
-                    activeBillingPLCharge = charge;
-                }
-            }
-            // If a period option is selected, only return the charge if it matches the selected period option
-            else if (selectedPriceList &&
-                charge.billingPeriod ===
-                    periodMonthsConverter(selectedPriceList.periodMonths)) {
+    if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
+        activeBillingPLCharge = priceList.charges[0];
+    }
+    for (var j = 0; j < priceList.charges.length; j++) {
+        var charge = priceList.charges[j];
+        if (charge.chargeType === common.ChargeType.USAGE)
+            continue;
+        if (activeBillingPLCharge) {
+            // If we already found a charge with the same billing period check if this charge is lower
+            if (charge.basePrice < activeBillingPLCharge.basePrice &&
+                charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
                 activeBillingPLCharge = charge;
             }
-            // Otherwise, return the lowest price list charge
-            else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
-                lowestPLCharge = charge;
-            }
+        }
+        // If a period option is selected, only return the charge if it matches the selected period option
+        else if (selectedPriceList &&
+            charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
+            activeBillingPLCharge = charge;
+        }
+        // Otherwise, return the lowest price list charge
+        else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
+            lowestPLCharge = charge;
         }
     }
     return {
@@ -20569,8 +20564,7 @@ var isPriceListDisabled = function (_a) {
     var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
     // Is this plan the one that the user is upgrading from
     var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
-    if ((subscriptionPlan && !isUpgradingPlan) ||
-        isPriceListCurrentSubscription) {
+    if ((subscriptionPlan && !isUpgradingPlan) || isPriceListCurrentSubscription) {
         disableOnClick = true;
     }
     return disableOnClick;
@@ -20595,7 +20589,7 @@ var CheckoutPrice = function (_a) {
 };
 
 var CheckoutBarSummarySection = function (_a) {
-    var _b, _c;
+    var _b;
     var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
     // Context
     var apiHost = react.useContext(BunnyContext).apiHost;
@@ -20620,12 +20614,7 @@ var CheckoutBarSummarySection = function (_a) {
         isFetching ||
         selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
         open);
-    var planChangeOptions = queryClient.getQueryData(common.QueryKeyFactory.default.planChangeOptionsKey({
-        subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-        token: token,
-    }));
-    var selectedPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
-    var activeCharge = (_c = getActivePlanPriceData(selectedPlan, selectedPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
+    var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
     var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
     var hasPaymentMethodsOrIsFree = Boolean(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) ||
         Boolean(quote && getQuoteAmountDue(quote) === 0);
@@ -20767,64 +20756,35 @@ var PlanPickerCheckoutBar = 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;
+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        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      priceLists {\n        basePrice\n        id\n        currencyId\n        periodMonths\n        plan {\n          code\n          contactUsLabel\n          contactUsUrl\n          description\n          id\n          name\n          position\n          pricingDescription\n          pricingStyle\n          planFeatures {\n            featureId\n            value\n            feature {\n              name\n            }\n          }\n        }\n        product {\n          id\n        }\n        charges {\n          basePrice\n          billingPeriod\n          chargeType\n          id\n          name\n          priceDecimals\n          pricingModel\n          quantityMax\n          quantityMin\n          selfServiceQuantity\n          feature {\n            name\n            unitName\n          }\n        }\n      }\n    }\n  }";
+var getPriceListChangeOptions = function (_a) {
+    var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
     return __awaiter(void 0, void 0, void 0, function () {
-        var response, planChangeOptions;
+        var response, priceListChangeOptions;
         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 },
+                        query: PRICE_LIST_CHANGE_OPTIONS_QUERY,
+                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, productId: productId },
                         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;
+                    priceListChangeOptions = response;
+                    if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.errors)
+                        throw priceListChangeOptions.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; });
+                    if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) {
+                        priceListChangeOptions.priceLists.sort(function (a, b) { return a.plan.position - b.plan.position; });
                     }
-                    return [2 /*return*/, planChangeOptions];
+                    return [2 /*return*/, priceListChangeOptions];
             }
         });
     });
 };
 
-var portalPreviewQuery = function (id) { return "\nquery portalPreviewQuery {\n  product(id: ".concat(id, ") {\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(filter:  \"plan.productId is ").concat(id, "\") {\n    nodes {\n\t\t\tcode\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    }\n  }\n}"); };
-var getPortalPreviewData = function (id, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
-    var response;
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, common.gqlRequest({
-                    isInPreviewMode: true,
-                    query: portalPreviewQuery(id),
-                    token: token || "",
-                    apiHost: apiHost,
-                })];
-            case 1:
-                response = _a.sent();
-                if (response.product && response.plans) {
-                    response.plans = response.plans.nodes;
-                    response.products = [response.product];
-                    delete response.product;
-                    // Sort plans by position
-                    if (response.plans) {
-                        response.plans.sort(function (a, b) { return a.position - b.position; });
-                    }
-                    return [2 /*return*/, response];
-                }
-                else
-                    throw response;
-        }
-    });
-}); };
-
 var ErrorView = function (_a) {
     var children = _a.children, message = _a.message;
     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] })));
@@ -20861,105 +20821,57 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
 });
 var templateObject_1$4, templateObject_2;
 
-var NextPriceListButton = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
-    return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
-                    setPriceListStart(function (prev) {
-                        var newValue = prev - 1;
-                        if (newValue < 0) {
-                            return prev;
-                        }
-                        return newValue;
-                    });
-                }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
-                    return setPriceListStart(function (prev) {
-                        var newValue = prev + 1;
-                        if (newValue >= availablePriceLists.length) {
-                            return prev;
-                        }
-                        return newValue;
-                    });
-                }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
-};
-
-var getAvailablePlansAndPriceLists = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart;
-    var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
-    var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (priceList) {
-        var _a;
-        var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
-        return plan;
-    });
-    return {
-        availablePlansArray: availablePlansArray,
-        displayPriceLists: displayPriceLists,
-    };
-};
-var everythingInPlusString = function (_a) {
-    var plan = _a.plan;
-    return "Everything in ".concat(plan.name, ", plus");
-};
-
-var PLAN_GRID_PADDING = 4;
-var PlanPickerGridCell = function (_a) {
-    var children = _a.children, noBorder = _a.noBorder;
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
-            ? {}
-            : __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
-};
-
 var PriceListCardTitle = function (_a) {
-    var plan = _a.plan, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
+    var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
     var isMobile = common.useIsMobile();
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
                     ? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
-                    : " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: plan.name }))] })));
-};
-
-var Text$e = antd.Typography.Text;
-var PriceListCardDescription = function (_a) {
-    var description = _a.description;
-    if (!description)
-        return null;
-    return jsxRuntime.jsx(Text$e, __assign({ className: "text-center" }, { children: description }));
+                    : " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
 };
 
 var PriceListCardPrice = function (_a) {
-    var plan = _a.plan, priceList = _a.priceList;
-    return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !plan.pricingStyle || plan.pricingStyle === common.PricingStyle.PRICED
+    var priceList = _a.priceList;
+    return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
             ? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
-            : plan.pricingStyle === common.PricingStyle.CONTACT_US
+            : priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
                 ? ""
                 : "Free" })));
 };
 
-var Text$d = antd.Typography.Text;
+var Text$c = antd.Typography.Text;
+var PriceListCardDescription = function (_a) {
+    var description = _a.description;
+    if (!description)
+        return null;
+    return jsxRuntime.jsx(Text$c, __assign({ className: "text-center" }, { children: description }));
+};
+
+var Text$b = antd.Typography.Text;
 var PriceListCardPriceDescription = function (_a) {
-    var feature = _a.feature, plan = _a.plan, priceList = _a.priceList;
+    var feature = _a.feature, priceList = _a.priceList;
     var isMobile = common.useIsMobile();
-    var doesPlanHaveFlatFeeCharges = plan.priceLists.some(function (priceList) {
-        return priceList.charges.some(function (charge) {
-            return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0;
-        });
-    });
-    if (priceList.periodMonths <= 0 || plan.pricingStyle !== common.PricingStyle.PRICED)
+    var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
+    if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
         return null;
-    return (jsxRuntime.jsx(Text$d, __assign({ className: "text-center text-gray-900", style: {
+    return (jsxRuntime.jsx(Text$b, __assign({ className: "text-center text-gray-900", style: {
             fontSize: isMobile ? "13px" : "12px",
-        } }, { children: plan.pricingDescription
-            ? plan.pricingDescription
+        } }, { children: priceList.plan.pricingDescription
+            ? priceList.plan.pricingDescription
             : "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
                 ? "".concat(feature.unitName.toLowerCase(), " / ")
                 : "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
 };
 
+var CheckIcon = function (_a) {
+    var backgroundColor = _a.backgroundColor, size = _a.size;
+    return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
+};
+
 var PriceListCardButton = function (_a) {
-    var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, plan = _a.plan, subscriptionPlan = _a.subscriptionPlan;
+    var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
     // Context
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
-    var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === plan.id &&
-        !isPriceListCurrentSubscription;
+    var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
     var createButtonText = function () {
         if (isPriceListCurrentSubscription)
             return "Current";
@@ -20967,8 +20879,8 @@ var PriceListCardButton = function (_a) {
             return "Selected";
         if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
             return "Subscribed";
-        if (plan.pricingStyle === common.PricingStyle.CONTACT_US)
-            return plan.contactUsLabel;
+        if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
+            return priceList.plan.contactUsLabel;
         return "Select";
     };
     return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col grow w-full justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: disableOnClick, style: {
@@ -20978,29 +20890,8 @@ var PriceListCardButton = function (_a) {
 var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  .ant-btn-primary {\n    border-color: transparent !important;\n  }\n  .ant-btn-primary:disabled {\n    background: ", ";\n    color: ", ";\n  }\n"])), common.SLATE_200, common.SLATE_600);
 var templateObject_1$3;
 
-var PriceListCardDesktop = function (_a) {
-    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
-    return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
-                if (!disableOnClick) {
-                    if (plan.pricingStyle === common.PricingStyle.CONTACT_US) {
-                        window.open(plan.contactUsUrl, "_blank");
-                    }
-                    else
-                        onClick(priceList);
-                }
-            }, style: {
-                height: "100%",
-                maxWidth: "440px",
-            } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] })) }));
-};
-
-var CheckIcon = function (_a) {
-    var backgroundColor = _a.backgroundColor, size = _a.size;
-    return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
-};
-
 var PriceListCardMobile = function (_a) {
-    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
+    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
     var brandColor = react.useContext(BrandContext).brandColor;
     return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col border-2 border-solid rounded-lg p-4", onClick: function () {
             if (!disableOnClick)
@@ -21011,22 +20902,44 @@ var PriceListCardMobile = function (_a) {
         } }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "absolute", style: {
                     top: "10px",
                     right: "10px",
-                } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] }))] })));
+                } }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
+};
+
+var PLAN_GRID_PADDING = 4;
+var PlanPickerGridCell = function (_a) {
+    var children = _a.children, noBorder = _a.noBorder;
+    var isMobile = common.useIsMobile();
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
+            ? {}
+            : __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
+};
+
+var PriceListCardDesktop = function (_a) {
+    var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
+    return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
+                if (!disableOnClick) {
+                    if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
+                        window.open(priceList.plan.contactUsUrl, "_blank");
+                    }
+                    else
+                        onClick(priceList);
+                }
+            }, style: {
+                height: "100%",
+                maxWidth: "440px",
+            } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
 };
 
 var PriceListCard = function (_a) {
     var _b;
-    var isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
     // Context
     var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
     var isMobile = common.useIsMobile();
-    if (!plan) {
-        return null;
-    }
     // Derived state
-    var description = createPlanDescription(plan);
+    var description = createPlanDescription(priceList);
     // Get the active price list charge for this plan
-    var activeCharge = (_b = getActivePlanPriceData(plan, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
+    var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
     // Is the price list the current price list for the upgradingSubscription
     var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
     var disableOnClick = isPriceListDisabled({
@@ -21036,7 +20949,7 @@ var PriceListCard = function (_a) {
     });
     var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
         var _a, _b;
-        return subscription.plan.id === plan.id &&
+        return subscription.plan.id === priceList.plan.id &&
             ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
             ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
     });
@@ -21044,50 +20957,48 @@ var PriceListCard = function (_a) {
         return null;
     }
     var feature = activeCharge.feature;
-    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, plan: plan, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
+    return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
 };
 
-var PLANS_TO_DISPLAY = 3;
+var Text$a = antd.Typography.Text;
+var PriceListCardFeature = function (_a) {
+    var index = _a.index, planFeature = _a.planFeature;
+    var brandColor = react.useContext(BrandContext).brandColor;
+    if (planFeature.feature.kind === "GROUP")
+        return jsxRuntime.jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
+};
 
-var Text$c = antd.Typography.Text;
-var filterUniqueFeatures = function (_a) {
-    // Remove any features that in previous plans if everythingInPlus is true
-    var availablePlansArray = _a.availablePlansArray;
-    var uniqueFeatures = new Set();
-    var updatedPlansArray = availablePlansArray.map(function (plan) {
+var getAvailablePlansAndPriceLists = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart;
+    var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
+    var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
         var _a;
-        var updatedPlanFeatures = (_a = plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
-            if (uniqueFeatures.has(feature.featureId)) {
-                return false;
-            }
-            else {
-                uniqueFeatures.add(feature.featureId);
-                return true;
-            }
-        });
-        return __assign(__assign({}, plan), { planFeatures: updatedPlanFeatures });
+        var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
+        return foundPriceList.plan;
     });
-    return updatedPlansArray;
+    return {
+        availablePlansArray: availablePlansArray,
+        displayPriceLists: displayPriceLists,
+    };
 };
-var EverythingPlanFeatures = function (_a) {
-    var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
-    var brandColor = react.useContext(BrandContext).brandColor;
-    var uniquePlanFeatures = filterUniqueFeatures({ availablePlansArray: availablePlansArray });
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
-            var plan = uniquePlanFeatures[planIndex];
-            var prevPlan = availablePlansArray[planIndex - 1];
-            if (!plan)
-                return (jsxRuntime.jsx("div", { style: prevPlan ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
-            if (!plan.planFeatures)
-                return jsxRuntime.jsx("div", {}, planIndex);
-            return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: plan.planFeatures.map(function (planFeature, planFeatureIndex) {
-                    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
-                    return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPlan &&
-                                everythingInPlus &&
-                                planIndex > 0 &&
-                                planFeatureIndex === 0 && (jsxRuntime.jsx(Text$c, __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ plan: prevPlan }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$c, { children: planFeature.feature.name })] }))] }), planFeatureIndex));
-                }) }), planIndex));
-        }) }));
+var everythingInPlusString = function (_a) {
+    var priceList = _a.priceList;
+    return "Everything in ".concat(priceList.plan.name, ", plus");
+};
+
+var PriceListGridMobile = function (_a) {
+    var _b, _c, _d, _e;
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
+    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+    var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
+    var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
+    var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex gap-4 overflow-auto shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
+                    return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                }) })), jsxRuntime.jsx("div", __assign({ className: "text-slate-500 pt-5 pb-4 shadow-padding-x" }, { children: everythingInPlus && prevPriceList
+                    ? everythingInPlusString({ priceList: prevPriceList })
+                    : "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
 };
 
 var shouldColorRow = function (_a) {
@@ -21104,15 +21015,15 @@ var FeatureGridCell = function (_a) {
             : {})) }, { children: children })));
 };
 
-var Text$b = antd.Typography.Text;
+var PLANS_TO_DISPLAY$1 = 3;
+
+var Text$9 = antd.Typography.Text;
 var PlanFeatures = function (_a) {
     var _b;
-    var availablePlansArray = _a.availablePlansArray, plans = _a.plans, selectedProduct = _a.selectedProduct;
+    var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
     var featureGroupCounter = react.useRef(0);
     var visibleFeatureCounter = react.useRef(1);
     var brandColor = react.useContext(BrandContext).brandColor;
-    if (!plans)
-        return null;
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _b === void 0 ? void 0 : _b.map(function (feature, featureIndex) {
             if (!selectedProduct.features)
                 return null;
@@ -21134,7 +21045,7 @@ var PlanFeatures = function (_a) {
             rowIndex = rowIndex + featureGroupCounter.current;
             // Increment the visible feature counter
             visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
-            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, columnIndex) {
+            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY$1), true).map(function (_, columnIndex) {
                         var _a;
                         var plan = availablePlansArray[columnIndex];
                         var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
@@ -21144,91 +21055,115 @@ var PlanFeatures = function (_a) {
                         if (!plan)
                             return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
                         if (isFeatureGroup)
-                            return (jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex));
-                        return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$b, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
+                            return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
+                        return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
                     })] }), rowIndex));
         }) }));
 };
 var FeatureTitle = function (_a) {
     var _b;
     var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
-    return (jsxRuntime.jsx(Text$b, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
+    return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
+};
+
+var NextPriceListButton = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
+    return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    setPriceListStart(function (prev) {
+                        var newValue = prev - 1;
+                        if (newValue < 0) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
+                    return setPriceListStart(function (prev) {
+                        var newValue = prev + 1;
+                        if (newValue >= availablePriceLists.length) {
+                            return prev;
+                        }
+                        return newValue;
+                    });
+                }, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
+};
+
+var filterUniqueFeatures = function (_a) {
+    // Remove any features that in previous plans if everythingInPlus is true
+    var availablePriceLists = _a.availablePriceLists;
+    var uniqueFeatures = new Set();
+    var updatedPriceLists = availablePriceLists.map(function (priceList) {
+        var _a;
+        var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
+            if (uniqueFeatures.has(feature.featureId)) {
+                return false;
+            }
+            else {
+                uniqueFeatures.add(feature.featureId);
+                return true;
+            }
+        });
+        return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
+    });
+    return updatedPriceLists;
+};
+var EverythingPlanFeatures = function (_a) {
+    var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct;
+    var brandColor = react.useContext(BrandContext).brandColor;
+    var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
+            var priceList = uniquePlanFeatures[planIndex];
+            var prevPriceList = availablePriceLists[planIndex - 1];
+            if (!priceList)
+                return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
+            if (!priceList.plan.planFeatures)
+                return jsxRuntime.jsx("div", {}, planIndex);
+            return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
+                    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
+                    return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
+                }) }), planIndex));
+        }) }));
 };
 
+var PLANS_TO_DISPLAY = 3;
 var PriceListGridDesktop = function (_a) {
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
-    // Context
-    var shadow = react.useContext(SubscriptionsContext).shadow;
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
     var _b = react.useMemo(function () {
         return getAvailablePlansAndPriceLists({
             availablePriceLists: availablePriceLists,
-            planChangeOptions: planChangeOptions,
+            priceListChangeOptions: priceListChangeOptions,
             priceListStart: priceListStart,
         });
-    }, [availablePriceLists, planChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
+    }, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
     var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
-    return (jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md overflow-hidden bg-white ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
+    return (jsxRuntime.jsx("div", __assign({ className: "shadow-padding-xb" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md shadow overflow-hidden bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
                         gridTemplateColumns: everythingInPlus
                             ? "repeat(3, minmax(120px, 1fr))"
                             : "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
                     } }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
-                            var _a;
                             var priceList = displayPriceLists[index];
                             var doesPrevPriceListExist = displayPriceLists[index - 1];
                             if (!priceList)
-                                return (jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index));
-                            var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
-                            return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
-                        }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plans: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct: selectedProduct }))] }))] })) })));
-};
-
-var Text$a = antd.Typography.Text;
-var PriceListCardFeature = function (_a) {
-    var feature = _a.feature, index = _a.index;
-    var brandColor = react.useContext(BrandContext).brandColor;
-    if (feature.kind === "GROUP")
-        return jsxRuntime.jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: feature.name }));
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "text-gray-600" }, { children: feature.name }))] }), index));
-};
-
-var Text$9 = antd.Typography.Text;
-var PriceListGridMobile = function (_a) {
-    var _b, _c, _d;
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
-    var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
-    var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id); });
-    var prevPlanId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.plan.id;
-    var prevPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === prevPlanId; });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex gap-4 overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
-                    var _a;
-                    var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
-                    return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
-                }) })), jsxRuntime.jsx(Text$9, __assign({ className: "text-slate-500 pt-5 pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPlan
-                    ? everythingInPlusString({ plan: prevPlan })
-                    : "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto bunny-shadow-padding-x" }, { children: (_d = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _d === void 0 ? void 0 : _d.map(function (feature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { feature: feature, index: index }, index)); }) }))] }));
+                                return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
+                            return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
+                        }), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct }))] }))] })) })));
 };
 
 var PriceListGrid = function (_a) {
     var _b, _c;
-    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
+    var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
     // Hooks
     var isMobile = common.useIsMobile();
     // Derived state
-    var currentPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan.id); });
-    var selectedPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
-    var trialRemainingDays = dayjs(currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.trialEndDate).diff(dayjs(), "days");
-    return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPlan: selectedPlan, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPlan: selectedPlan, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
+    var currentPriceList = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.find(function (priceList) { var _a; return priceList.id === ((_a = upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan) === null || _a === void 0 ? void 0 : _a.id); });
+    var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), "days");
+    return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
 };
 
-var createAvailableBillingPeriods = function (plans, selectedProduct) {
-    return plans === null || plans === void 0 ? void 0 : plans.flatMap(function (plan) {
-        return plan.priceLists
-            .filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); })
-            .map(function (priceList) { return priceList.periodMonths; });
-    }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
+var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
+    return priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); }).map(function (priceList) { return priceList.periodMonths; }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
 };
 var PriceListSelector = function (_a) {
-    var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
+    var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
     // Context
     var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
     // Local state
@@ -21236,32 +21171,22 @@ var PriceListSelector = function (_a) {
     var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
     var _e = react.useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
     // Derived state
-    var availableBillingPeriods = react.useMemo(function () {
-        return createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct);
-    }, [planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct]);
+    var availableBillingPeriods = react.useMemo(function () { return createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct); }, [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
     var availablePriceLists = react.useMemo(function () {
         var _a;
-        return (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.flatMap(function (plan) {
-            return plan.priceLists.filter(function (priceList) {
-                return periodMonthsConverter(priceList.periodMonths) ===
-                    selectedBillingPeriod &&
-                    priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
-            });
+        return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
+            return periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
+                priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
         })) || []);
-    }, [planChangeOptions, selectedBillingPeriod, selectedProduct]);
+    }, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
     // Handlers
     var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
         var _a, _b;
         setSelectedBillingPeriod(billingPeriod);
         setPriceListStart(0);
         if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
-            billingPeriod !==
-                periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
-            var availablePriceLists_1 = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
-                return plan.priceLists.filter(function (priceList) {
-                    return periodMonthsConverter(priceList.periodMonths) === billingPeriod;
-                });
-            })) || [];
+            billingPeriod !== periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
+            var availablePriceLists_1 = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
             var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
                 var _a;
                 return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
@@ -21272,8 +21197,7 @@ var PriceListSelector = function (_a) {
                         upgradingSubscription: upgradingSubscription,
                     });
             });
-            var isPriceListCurrentSubscription = newSelectedPriceList &&
-                (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
+            var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
             if (newSelectedPriceList && !isPriceListCurrentSubscription) {
                 setQuotePreviewData({
                     priceList: newSelectedPriceList,
@@ -21288,32 +21212,30 @@ var PriceListSelector = function (_a) {
         }
     }, [
         quotePreviewData,
-        planChangeOptions,
+        priceListChangeOptions,
         subscriptions,
         upgradingSubscription,
         setQuotePreviewData,
     ]);
     var onChangeProduct = react.useCallback(function (product) {
-        var newAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, product);
+        var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
         if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
-            onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined
-                ? newAvailableBillingPeriods[0]
-                : 1));
+            onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined ? newAvailableBillingPeriods[0] : 1));
         }
         setSelectedProduct(product);
-    }, [planChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
+    }, [priceListChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
     // Default settings
     react.useEffect(function () {
         var _a, _b, _c, _d;
         if (arePlanChangeOptionsLoading ||
             areSubscriptionsLoading ||
-            !planChangeOptions ||
+            !priceListChangeOptions ||
             selectedBillingPeriod ||
             selectedProduct ||
             selectedPriceList)
             return;
-        var initialProduct = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
-        var initialAvailableBillingPeriods = createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, initialProduct);
+        var initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
+        var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
         var initialBillingPeriod;
         if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
             (initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
@@ -21322,12 +21244,9 @@ var PriceListSelector = function (_a) {
         else {
             initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
         }
-        var initialAvailablePriceLists = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
-            return plan.priceLists.filter(function (priceList) {
-                return periodMonthsConverter(priceList.periodMonths) ===
-                    initialBillingPeriod &&
-                    priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
-            });
+        var initialAvailablePriceLists = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) {
+            return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
+                priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
         })) || [];
         var initialPriceList;
         var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
@@ -21354,7 +21273,7 @@ var PriceListSelector = function (_a) {
         arePlanChangeOptionsLoading,
         areSubscriptionsLoading,
         isInPreviewMode,
-        planChangeOptions,
+        priceListChangeOptions,
         selectedBillingPeriod,
         selectedPriceList,
         selectedProduct,
@@ -21362,7 +21281,7 @@ var PriceListSelector = function (_a) {
         subscriptions,
         upgradingSubscription,
     ]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
 };
 
 var PlanPicker = function () {
@@ -21388,27 +21307,16 @@ var PlanPicker = function () {
             token: token,
         }),
         queryFn: function () {
-            return getPlanChangeOptions({
+            return getPriceListChangeOptions({
+                apiHost: apiHost,
                 isInPreviewMode: isInPreviewMode,
+                productId: productId,
                 token: token,
                 upgradingSubscription: upgradingSubscription,
-                apiHost: apiHost,
             });
         },
         enabled: !areSubscriptionsLoading,
-    }), data = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
-    var previewDataQuery = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createTableKey({
-            pluralType: "portalPreview",
-            filterString: productId || "",
-            token: token,
-        }),
-        queryFn: function () { return getPortalPreviewData(productId || "", apiHost, token); },
-        enabled: isInPreviewMode,
-    });
-    var planChangeOptions = react.useMemo(function () {
-        return isInPreviewMode ? previewDataQuery.data : data;
-    }, [isInPreviewMode, previewDataQuery.data, data]);
+    }), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
     // Handlers
     var onChangePriceList = react.useCallback(function (selectedPriceList) {
         if (isInPreviewMode)
@@ -21424,16 +21332,16 @@ var PlanPicker = function () {
             setQuotePreviewData({});
         };
     }, [setQuotePreviewData]);
-    if (queryClient.getQueryData(common.QueryKeyFactory.default.planChangeOptionsKey({
-        subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
-        token: token,
-    })) === undefined) {
+    if (queryClient.isFetching({
+        queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
+            subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
+            token: token,
+        }),
+    }))
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-    else if (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+    else if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
         return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
-    }
-    return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
+    return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
 };
 
 var Text$8 = antd.Typography.Text;
@@ -21480,25 +21388,16 @@ var PlanManager = function (_a) {
             token: token,
         }),
         queryFn: function () {
-            return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
-                ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
-                : undefined;
+            return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
         },
         enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
     }).data;
     react.useEffect(function () {
         if (subscriptionUpgradeId && !upgradingSubscription) {
-            var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
-                return subscription.id === subscriptionUpgradeId;
-            });
+            var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
             setUpgradingSubscription(subscription);
         }
-    }, [
-        setUpgradingSubscription,
-        subscriptionUpgradeId,
-        subscriptions,
-        upgradingSubscription,
-    ]);
+    }, [setUpgradingSubscription, subscriptionUpgradeId, subscriptions, upgradingSubscription]);
     react.useEffect(function () {
         var observer = new IntersectionObserver(function (_a) {
             var entry = _a[0];
@@ -21747,10 +21646,10 @@ var canShowSubscriptionActions = function (subscription) {
 
 var SubscriptionCardActions = function (_a) {
     var _b, _c;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
     // Derived state
     var canShowCancelButton = subscription.plan.selfServiceCancel;
-    var productPlans = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.filter(function (plan) { var _a; return ((_a = plan.priceLists) === null || _a === void 0 ? void 0 : _a.length) > 0 && plan.productId === subscription.product.id; });
+    var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.product.id === subscription.product.id; });
     var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
     return (canShowChangePlanButton || canShowCancelButton) &&
         canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, onConfirm: function () { return onCancelSubscriptionClick === null || onCancelSubscriptionClick === void 0 ? void 0 : onCancelSubscriptionClick(subscription); }, title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return onChangePlanClick(subscription); }, type: "primary" }, { children: "Upgrade" }))) : null;
@@ -21775,7 +21674,7 @@ var getSubscriptionStatusText = function (subscription) {
 };
 var SubscriptionCardHeader = function (_a) {
     var _b, _c, _d, _e, _f;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
     var darkMode = react.useContext(BunnyContext).darkMode;
     var brandColor = react.useContext(BrandContext).brandColor;
     var subscriptionProductNameStyle = react.useContext(SubscriptionsContext).subscriptionProductNameStyle;
@@ -21785,10 +21684,7 @@ var SubscriptionCardHeader = function (_a) {
     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(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "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$7, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
-                        planChangeOptions &&
-                        onChangePlanClick &&
-                        onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
+        } }, { 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(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "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$7, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
 };
 
 var BillingPeriodConverter;
@@ -21882,11 +21778,11 @@ var CARD_COLUMNS = [
 ];
 var SubscriptionCardDesktop = function (_a) {
     var _b;
-    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
     var shadow = react.useContext(SubscriptionsContext).shadow;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
-    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
+    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
                     gridColumn: "1 / 5",
                     width: "calc(100% + 32px)",
                     transform: "translateX(-16px)",
@@ -21993,14 +21889,14 @@ var SubscriptionCard = function (_a) {
 };
 
 var SubscriptionsList = function (_a) {
-    var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscriptions = _a.subscriptions;
+    var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
     var isMobile = common.useIsMobile();
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
             if (hideExpired && isSubscriptionNotActive(subscription))
                 return null;
             if (isMobile)
-                return (jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex));
-            return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }, subscriptionIndex));
+                return jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex);
+            return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex));
         }) }));
 };
 
@@ -22016,13 +21912,13 @@ var SubscriptionsListContainer = function (_a) {
     // Queries
     var _c = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
-        queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
+        queryFn: function () { return getPriceListChangeOptions({ token: token, apiHost: apiHost }); },
         enabled: Boolean(onChangePlanClick),
-    }), planChangeOptions = _c.data, arePlanChangeOptionsLoading = _c.isLoading;
+    }), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
     if (subscriptionsAreLoading ||
-        (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
+        (Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: 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") }) })))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, 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 QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n  quoteChargeCreate(\n    endDate: $endDate\n    price: $price\n    priceListChargeId: $priceListChargeId\n    quantity: $quantity\n    quoteChangeId: $quoteChangeId\n    startDate: $startDate\n    subscriptionChargeId: $subscriptionChargeId\n  ) {\n    quoteCharge {\n      quoteChange {\n        id\n        quoteId\n      }\n    }\n  }\n}\n\n";