@bunnyapp/components 1.0.19 → 1.0.21

package/dist/cjs/index.js

@@ -1598,7 +1598,7 @@ var BrandContext = React.createContext({
     topNavImageUrl: common.DEFAULT_TOP_NAV_IMAGE_URL,
 });
 
-var MUTATION$9 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
+var MUTATION$8 = "\n  query entityBranding {\n    entityBranding {\n      accentColor\n      brandColor\n      topNavImageUrl\n    }\n  }\n";
 var getBranding = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -1606,7 +1606,7 @@ var getBranding = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$9,
+                        query: MUTATION$8,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -1800,7 +1800,7 @@ function useToken() {
     return overrideToken || tokenFromContext;
 }
 
-var MarkupContainer = styled__default["default"].div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+var MarkupContainer = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 var InvoiceQuoteView = function (_a) {
     var children = _a.children, formattedInvoice = _a.formattedInvoice, html = _a.html, backButtonName = _a.backButtonName, onBackButtonClick = _a.onBackButtonClick, onDownloadError = _a.onDownloadError;
     var downloadFile = useDownloadFile(formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.id, onDownloadError);
@@ -1818,7 +1818,7 @@ var InvoiceQuoteView = function (_a) {
                     minWidth: "750px",
                 } }, { children: [jsxRuntime.jsx(interweave.Markup, { content: html }), children] })))] })));
 };
-var templateObject_1$8;
+var templateObject_1$7;
 
 var quoteMetaDescription = function (vendorName) {
     return "View this quote on the ".concat(vendorName, " customer portal. Powered by Bunny");
@@ -1976,7 +1976,7 @@ var gqlRequest = function (_a) {
     });
 };
 
-var MUTATION$8 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
+var MUTATION$7 = "\n  mutation checkout(\n    $invoiceId: ID,\n    $quoteId: ID,\n    $paymentMethodId: ID,\n    $paymentMethodData: CheckoutPaymentMethodAttributes\n  ) {\n    checkout(\n      invoiceId: $invoiceId,\n      quoteId: $quoteId,\n      paymentMethodId: $paymentMethodId,\n      paymentMethodData: $paymentMethodData\n    ) {\n      invoice {\n        id\n        state\n        amount\n        amountDue\n      }\n      payment {\n        id\n        state\n        amount\n      }\n      paymentApplication {\n        id\n        invoiceId\n        paymentId\n      }\n      transaction {\n        id\n        amount\n      }\n    }\n  }\n";
 var checkout = function (_a) {
     var quoteId = _a.quoteId, invoiceId = _a.invoiceId, paymentMethodId = _a.paymentMethodId, paymentMethodData = _a.paymentMethodData, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -1993,7 +1993,7 @@ var checkout = function (_a) {
                         mutationVars.paymentMethodData = __assign(__assign({}, paymentMethodData), { metadata: paymentMethodData.metadata });
                     }
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$8,
+                            query: MUTATION$7,
                             token: token,
                             vars: mutationVars,
                             apiHost: apiHost,
@@ -2196,13 +2196,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$g = antd.Typography.Text;
+var Text$e = 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$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(antd.Tag, __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$e, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(antd.Tag, __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;
@@ -2214,7 +2214,7 @@ var MiniCreditCard = function (_a) {
     var backgroundColor = React.useMemo(function () {
         return darkMode ? "var(--row-background-alternate)" : "bg-slate-50";
     }, [darkMode]);
-    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-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$g, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier }), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })) })), !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(CreditCardOutlined$1, {}), jsxRuntime.jsx(Text$g, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { 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-4 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$e, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier }), jsxRuntime.jsx(antd.Tag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })) })), !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(CreditCardOutlined$1, {}), jsxRuntime.jsx(Text$e, __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
 };
 var CardImage = function (_a) {
     var _b, _c;
@@ -2233,7 +2233,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$g, { 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$e, { children: value })] })));
 };
 var CardActions = function (_a) {
     var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
@@ -2243,7 +2243,7 @@ var CardActions = function (_a) {
 var EmptyCard = function (_a) {
     var onClick = _a.onClick, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, _c = _a.cardEnabled, cardEnabled = _c === void 0 ? true : _c;
     var brandColor = React.useContext(BrandContext).brandColor;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer ".concat(cardEnabled ? "bg-white ".concat(shadow, " rounded-md") : ""), onClick: onClick }, { children: [jsxRuntime.jsx(LargeCardIcon, {}), jsxRuntime.jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, __assign({ type: "link" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsxRuntime.jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
+    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center w-full pt-8 px-4 pb-6 cursor-pointer ".concat(cardEnabled ? "bg-white ".concat(shadow, " rounded-md") : ""), onClick: onClick }, { children: [jsxRuntime.jsx(LargeCardIcon, {}), jsxRuntime.jsx("div", __assign({ className: "text-slate-400 pt-4 pb-8" }, { children: "No payment methods" })), jsxRuntime.jsx(antd.Button, __assign({ type: "link", id: "openAddPaymentMethodDrawer" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-1" }, { children: [jsxRuntime.jsx(PlusIcon, { color: brandColor }), "Add payment method"] })) }))] })));
 };
 var isExpired = function (paymentMethodData) {
     var expDate = dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate);
@@ -2331,7 +2331,7 @@ var DemoPayCardCvc = function (_a) {
         var cvc = event.target.value.replace(/\D/g, "");
         onChange(cvc);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cvc", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: value, maxLength: 3, placeholder: placeholder || "CVC" }) })));
 };
 
 var CARD_NUMBER_MAX_LENGTH = 19; // Why 19 instead of 16? Because we add spaces
@@ -2348,7 +2348,7 @@ var DemoPayCardNumber = function (_a) {
         var number = event.target.value.replace(/\s/g, "");
         onChange(number);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "cardNumber", autoFocus: autoFocus, maxLength: CARD_NUMBER_MAX_LENGTH, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, placeholder: placeholder || "Card Number", value: formatCardNumber(value) }) })));
 };
 
 var DemoPayExpiry = function (_a) {
@@ -2361,7 +2361,7 @@ var DemoPayExpiry = function (_a) {
         var expiry = event.target.value.replace(/\D/g, "");
         onChange(expiry);
     };
-    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
+    return (jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: jsxRuntime.jsx(antd.Input, { name: "expiry", autoFocus: autoFocus, onKeyDown: onKeyPress, onKeyUp: onKeyPress, onChange: onNumberChange, value: formatCardExpiry(value), maxLength: 5, placeholder: placeholder || "MM/YY" }) })));
 };
 
 function useSave$1(_a) {
@@ -2414,7 +2414,7 @@ function useSave$1(_a) {
     return { save: save, isSaving: isSaving };
 }
 
-var Text$f = antd.Typography.Text;
+var Text$d = antd.Typography.Text;
 var TEST_CARD = "4242424242424242";
 var DemoPayForm = function (_a) {
     var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
@@ -2475,16 +2475,16 @@ 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$f, __assign({ className: "text-xs" }, { 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$d, __assign({ className: "text-xs" }, { children: "DemoPay is for testing only." })), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
 };
-var StyledInputs = styled__default["default"].div(templateObject_1$7 || (templateObject_1$7 = __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 StyledInputs = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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;
     return darkMode ? "var(--row-background-dark)" : "white";
 }, function (_a) {
     var darkMode = _a.darkMode;
     return darkMode ? common.GRAY_500 : common.GRAY_200;
 });
-var templateObject_1$7;
+var templateObject_1$6;
 
 var createPaymentMethod = function (_a) {
     var paymentMethodId = _a.paymentMethodId, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
@@ -2713,7 +2713,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$e = antd.Typography.Text;
+var Text$c = 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)); }) })));
@@ -2726,9 +2726,9 @@ 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$e, { children: name })] })), isAch ? (jsxRuntime.jsx(BankOutlined$1, { 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$c, { children: name })] })), isAch ? (jsxRuntime.jsx(BankOutlined$1, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
 };
-var PaymentOptionContainer = styled__default["default"].div(templateObject_1$6 || (templateObject_1$6 = __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 PaymentOptionContainer = styled__default["default"].div(templateObject_1$5 || (templateObject_1$5 = __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;
     return $selected &&
         "\n    border-color: ".concat($brandColor, ";\n  ");
@@ -2736,34 +2736,44 @@ var PaymentOptionContainer = styled__default["default"].div(templateObject_1$6 |
     var $brandColor = _a.$brandColor;
     return $brandColor;
 });
-var templateObject_1$6;
+var templateObject_1$5;
 
 function useRemovePaymentMethod(paymentPlugins, token, apiHost, accountId) {
+    var _this = this;
     var queryClient = reactQuery.useQueryClient();
     var showErrorNotification = common.useErrorNotification();
     var showSuccessNotification = common.useSuccessNotification();
-    var removePaymentMethod = React.useCallback(function (data) {
-        var plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
-        if (data && plugin) {
-            common.invokePlugin({
-                plugin: plugin,
-                method: "remove_payment_method",
-                payload: {
-                    payment_method_id: data.id,
-                    account_id: accountId,
-                },
-                token: token,
-                apiHost: apiHost,
-            })
-                .then(function () {
-                showSuccessNotification("Payment method was removed", "Success");
-                queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey, null);
-            })
-                .catch(function (error) {
-                showErrorNotification(error.message, "Error removing payment method");
-            });
-        }
-    }, [paymentPlugins, token, apiHost, queryClient]);
+    var removePaymentMethod = React.useCallback(function (data) { return __awaiter(_this, void 0, void 0, function () {
+        var plugin;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(function (paymentPlugin) { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
+                    if (!(data && plugin)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, common.invokePlugin({
+                            plugin: plugin,
+                            method: "remove_payment_method",
+                            payload: {
+                                payment_method_id: data.id,
+                                account_id: accountId,
+                            },
+                            token: token,
+                            apiHost: apiHost,
+                        })
+                            .then(function () {
+                            showSuccessNotification("Payment method was removed", "Success");
+                            queryClient.setQueryData(common.QueryKeyFactory.default.accountPaymentMethodKey, null);
+                        })
+                            .catch(function (error) {
+                            showErrorNotification(error.message, "Error removing payment method");
+                        })];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [paymentPlugins, token, apiHost, queryClient]);
     return removePaymentMethod;
 }
 
@@ -2830,7 +2840,7 @@ var PaymentForm = function (_a) {
                         //if not paying and payment method is saved, show Collapse
                         jsxRuntime.jsx(antd.Collapse, __assign({ bordered: false, activeKey: showPaymentMethodForm ? "1" : undefined, ghost: true, collapsible: "disabled", destroyInactivePanel: true }, { children: jsxRuntime.jsx(Panel, __assign({ header: jsxRuntime.jsx(jsxRuntime.Fragment, { children: !showPaymentMethodForm ? (jsxRuntime.jsx("div", __assign({ className: "pt-2" }, { children: jsxRuntime.jsxs(antd.Button, __assign({ onClick: function () {
                                                 setShowPaymentMethodForm(true);
-                                            }, type: "default", className: "w-full" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsx("div", { children: selectedPaymentMethod ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsxRuntime.jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
+                                            }, type: "default", className: "w-full", id: "addPaymentMethod" }, { children: [storedPaymentMethod ? "Update" : "Add", " payment method"] })) }))) : null }), showArrow: false }, { children: jsxRuntime.jsx("div", { children: selectedPaymentMethod ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2 mt-2" }, { children: [showPaymentMethodSelector && (jsxRuntime.jsx(PaymentMethodSelector, { onSelect: setSelectedPaymentMethod, paymentMethodAllowedPlugins: paymentMethodAllowedPlugins, value: selectedPaymentMethod })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col" }, { children: jsxRuntime.jsx(PaymentMethodDetails, { onFail: onFail, onSavePaymentMethod: handleSavePaymentMethod, paymentMethod: selectedPaymentMethod }) }))] }))) : (jsxRuntime.jsx("div", { children: "No payment method selected" })) }) }), "1") })))] }) })) })) })));
 };
 function StripeWrapper(_a) {
     var children = _a.children, plugin = _a.plugin, token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId;
@@ -2864,17 +2874,14 @@ function ActualInvoice() {
     var showSuccessNotification = common.useSuccessNotification();
     var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
     // Queries
-    var _c = reactQuery.useQuery({
+    var formattedInvoice = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createFormattedInvoiceKey(token, id),
         queryFn: function () { return common.getFormattedInvoice({ id: id, token: token, apiHost: apiHost }); },
-    }), formattedInvoice = _c.data, error = _c.error;
+    }).data;
     // Derived state
     var isInvoicePayable = common.PAYABLE_INVOICE_STATES.includes((formattedInvoice === null || formattedInvoice === void 0 ? void 0 : formattedInvoice.state) || "");
     // Local state
     var isMobile = common.useIsMobile(isInvoicePayable ? common.BreakpointNumbers.lg : undefined);
-    if (error) {
-        return jsxRuntime.jsxs("div", { children: ["Error loading invoice: ", error.message] });
-    }
     if (!formattedInvoice)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     var onSuccess = function () {
@@ -2895,7 +2902,7 @@ function ActualInvoice() {
                         }) }), jsxRuntime.jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedInvoice.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-6 ".concat(isMobile ? "flex-col w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [formattedInvoice.isLegacy ? (jsxRuntime.jsx("div", __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(InvoicePDF, { invoiceUuid: formattedInvoice.uuid, apiHost: apiHost, token: token }) }))) : (invoiceQuoteViewComponent || (jsxRuntime.jsx(InvoiceQuoteView, { html: formattedInvoice.html, formattedInvoice: formattedInvoice, backButtonName: backButtonName, onBackButtonClick: onBackButtonClick }))), isInvoicePayable && (jsxRuntime.jsx("div", __assign({ className: "w-full ".concat(hideDownloadButton || formattedInvoice.isLegacy ? "" : "pt-12") }, { children: jsxRuntime.jsx(PaymentForm, { entityId: entityId, onPaymentSuccess: onSuccess, onFail: onFail, invoice: formattedInvoice, graphQLClient: graphQLClient }) })))] }))] }));
 }
 
-var MUTATION$7 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
+var MUTATION$6 = function (id) { return "\n  query formattedQuote ($id: ID) {\n    formattedQuote (id: $id) {\n      payableId\n      acceptedAt\n      acceptedByName\n      amount\n      amountDue\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      object { documents { id filename size date url } }\n      billingCity\n      billingCountry\n      billingState\n      billingStreet\n      billingZip\n      contactName\n      currency\n      customerBillingCity\n      customerBillingCountry\n      customerBillingState\n      customerBillingStreet\n      customerBillingZip\n      customerName\n      discount\n      discountValue\n      duration\n      endDate\n      expiresAt\n      html\n      formattedLines {\n        amount\n        amountsByPeriod {\n          quantity\n          id\n          name\n          startDate\n          endDate\n          amount\n          amountsByTier {\n            id\n            tier {\n              starts\n              ends\n              price\n            }\n            quantity\n            amount\n          }\n          prorationRate\n        }\n        billingPeriodEnd\n        billingPeriodStart\n        chargeType\n        discount\n        frequency\n        isRamp\n        periods\n        planName\n        position\n        price\n        priceDecimals\n        priceListChargeId\n        priceListChargeName\n        priceListId\n        priceListName\n        priceTiers {\n          price\n          starts\n        }\n        pricingModel\n        productName\n        prorationRate\n        quantity\n        showProductNameOnLineItem\n        taxCode\n        trialEndDate\n        trialStartDate\n        unitOfMeasure\n        vatCode\n      }\n      netPaymentDays\n      notes\n      number\n      poNumberRequired\n      salesContactEmail\n      sharedAt\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxNumberLabel\n      taxNumberRequired\n      vendorName\n    }\n  }"; };
 var getFormattedQuote = function (_a) {
     var id = _a.id, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -2903,7 +2910,7 @@ var getFormattedQuote = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$7(),
+                        query: MUTATION$6(),
                         token: token,
                         apiHost: apiHost,
                         vars: { id: id },
@@ -2957,24 +2964,18 @@ var useSendAcceptQuote = function (_a) {
             if (rsp.errors)
                 console.log("rsp.errors", rsp.errors);
             else {
-                console.log("rsp.data.quoteSigningUrlCreate.pluginShortName === 'pandadoc'", rsp.data.quoteSigningUrlCreate.pluginShortName === "pandadoc");
-                console.log("rsp", rsp);
                 if (rsp.data.quoteSigningUrlCreate.pluginShortName === "dropbox_sign") {
                     openDropboxSignModal(rsp.data.quoteSigningUrlCreate.pluginClientId, rsp.data.quoteSigningUrlCreate.redirectUri);
-                    console.log("dropbox sign is not implemented");
                 }
                 else if (rsp.data.quoteSigningUrlCreate.pluginShortName === "pandadoc") {
                     setPandadocPollingModalVisible(true);
-                    console.log("setPandadocPollingModalVisible");
                 }
                 else {
                     window.location.href = rsp.data.quoteSigningUrlCreate.redirectUri;
-                    console.log("window.location.href", rsp.data.quoteSigningUrlCreate.redirectUri);
                 }
             }
         });
     };
-    // TODO: Fix hellosign-embedded window is undefined bug
     var openDropboxSignModal = function (clientId, url) { return __awaiter(void 0, void 0, void 0, function () {
         var HelloSign, client;
         return __generator(this, function (_a) {
@@ -2990,7 +2991,12 @@ var useSendAcceptQuote = function (_a) {
                         clientId: clientId,
                     });
                     client.on("sign", function (data) {
-                        // Change the UI to show accepted?
+                        queryClient.refetchQueries({
+                            queryKey: common.QueryKeyFactory.default.createQuoteKey(token, quoteId),
+                        });
+                        queryClient.refetchQueries({
+                            queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
+                        });
                     });
                     // Open the DropboxSign modal
                     client.open(url, {
@@ -3001,7 +3007,6 @@ var useSendAcceptQuote = function (_a) {
             }
         });
     }); };
-    // TODO: update useing fetch
     var sendAccept = function (changedFormItems) {
         var mutation = "mutation quoteAccept($name: String!, $title: String!, $poNumber: String, $taxNumber: String, $quoteId: ID) {\n        quoteAccept(name: $name, title: $title, poNumber: $poNumber, taxNumber: $taxNumber, quoteId: $quoteId) {\n          errors\n        }\n      }";
         var variables = __assign(__assign({}, changedFormItems), { quoteId: quoteId });
@@ -3010,6 +3015,9 @@ var useSendAcceptQuote = function (_a) {
                 handleAllErrorFormats(rsp.errors);
             else {
                 setAcceptBoxVisible(false);
+                queryClient.invalidateQueries({
+                    queryKey: common.QueryKeyFactory.default.createQuoteKey(token, quoteId),
+                });
                 queryClient.invalidateQueries({
                     queryKey: common.QueryKeyFactory.default.createQuoteKey(token),
                 });
@@ -3101,11 +3109,11 @@ var PandadocPollingModal = function (_a) {
     return (jsxRuntime.jsxs(antd.Modal, __assign({ title: "Uploading quote to Pandadoc", open: isVisible, closable: false, footer: null }, { children: [jsxRuntime.jsxs("div", __assign({ className: "py-4 text-center" }, { children: ["This may take a few seconds", ".".repeat(numberOfPolls)] })), jsxRuntime.jsx("div", __assign({ className: "text-center" }, { children: infoMessage }))] })));
 };
 
-var ModalOverrideBrandStylings = styled__default["default"](antd.Modal)(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])), common.MARK_PRO);
+var ModalOverrideBrandStylings = styled__default["default"](antd.Modal)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"], ["\n  .ant-modal-content {\n    border-radius: 0.75rem;\n    overflow: hidden;\n    padding: 0 !important;\n  }\n  .ant-modal-title {\n    font-family: ", ";\n  }\n  .ant-modal-header {\n    border-bottom: none;\n    padding: 1.5rem 1.5rem 0;\n    margin: 0 !important;\n  }\n  .ant-modal-body {\n    padding: 1rem 1.5rem 1.5rem;\n  }\n  .ant-modal-footer {\n    border-top: none;\n    padding: 0 1.5rem 1.5rem;\n    margin: 0 !important;\n  }\n"])), common.MARK_PRO);
 var StyledModal$1 = function (props) {
     return jsxRuntime.jsx(ModalOverrideBrandStylings, __assign({ closable: false }, props));
 };
-var templateObject_1$5;
+var templateObject_1$4;
 
 var useFocusFirstInput = function (_a) {
     var firstInputRef = _a.firstInputRef, isVisible = _a.isVisible;
@@ -3146,9 +3154,9 @@ var DOCUMENT_NAME;
     DOCUMENT_NAME["QUOTE"] = "quote";
 })(DOCUMENT_NAME || (DOCUMENT_NAME = {}));
 
-var Text$d = antd.Typography.Text;
+var Text$b = antd.Typography.Text;
 var documentName = DOCUMENT_NAME.QUOTE;
-styled__default["default"].div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
+styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  span {\n    width: 100%;\n  }\n"], ["\n  span {\n    width: 100%;\n  }\n"])));
 function Quote(_a) {
     var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, entityId = _a.entityId, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c;
     return (jsxRuntime.jsx(reactHelmetAsync.HelmetProvider, { children: jsxRuntime.jsx(InvoiceQuoteContext.Provider, __assign({ value: {
@@ -3216,7 +3224,7 @@ function ActualQuote(_a) {
                             documentName: documentName,
                         }) }), jsxRuntime.jsx("meta", { property: "og:description", content: quoteMetaDescription(formattedQuote.vendorName) })] }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
                             color: entityBranding.secondaryColor,
-                        } }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$d, { 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$b, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
                                     ? "flex w-full justify-end gap-2"
                                     : "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(DownloadOutlined$1, {}), onClick: function () {
                                             return downloadFile(apiHost + "/api/pdf/quote", token);
@@ -3224,7 +3232,7 @@ function ActualQuote(_a) {
                                 return (jsxRuntime.jsx(antd.Button, __assign({ download: doc.filename, href: doc.url, type: "link" }, { children: doc.filename }), index));
                             }) }))) : null }))] })), jsxRuntime.jsx(AcceptQuoteModal, { acceptBoxVisible: acceptBoxVisible, formattedQuote: formattedQuote, setAcceptBoxVisible: setAcceptBoxVisible, setIsAccepting: setIsAccepting, sendAccept: sendAccept }), jsxRuntime.jsx(PandadocPollingModal, { isVisible: pandadocPollingModalVisible, setVisible: setPandadocPollingModalVisible, id: id })] }));
 }
-var templateObject_1$4;
+var templateObject_1$3;
 
 var QUOTES_QUERY = function (filter) { return "\n  query quotes {\n    quotes ".concat(filter ? "(".concat(filter, ")") : "", " {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n      nodes {\n        id\n        name\n        account {\n          name\n          id\n        }\n        applicationDate\n        state\n        createdAt\n        expiresAt\n        currencyId\n        amount\n        number\n      }\n    }\n  }"); };
 var getQuotes = function (_a) {
@@ -3247,7 +3255,7 @@ var getQuotes = function (_a) {
     });
 };
 
-var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number }\n      }\n    }\n  }\n}"); };
+var transactionMutation = function (filter) { return "\nquery transactions {\n  transactions ".concat(filter ? "(".concat(filter, ")") : "", " {\n    nodes {\n      amount\n      createdAt\n      currencyId\n      description\n      id\n      kind\n      state\n      transactionableId\n      transactionable {\n        ...on Payment { amount }\n        ...on Invoice { amount number dueAt issuedAt isLegacy }\n        ...on CreditNote { amount number dueAt issuedAt }\n      }\n    }\n  }\n}"); };
 var getTransactions = function (filter, token, apiHost) { return __awaiter(void 0, void 0, void 0, function () {
     var response, _a, data, errors;
     return __generator(this, function (_b) {
@@ -3311,10 +3319,10 @@ var getColor = function (state) {
     }
 };
 
-var Text$c = antd.Typography.Text;
+var Text$a = antd.Typography.Text;
 var TransactionDate = function (_a) {
     var date = _a.date;
-    return jsxRuntime.jsx(Text$c, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
+    return jsxRuntime.jsx(Text$a, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
 };
 
 // TODO: delete
@@ -3345,13 +3353,13 @@ var TransactionGridCell = styled__default["default"].div.withConfig({
     shouldForwardProp: function (prop) {
         return !["gridColumn", "padding", "right"].includes(prop);
     },
-})(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, common.SLATE_600);
-var templateObject_1$3;
+})(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"], ["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n\n  text-align: ", ";\n  white-space: nowrap;\n  font-size: 14px;\n  color: ", ";\n\n  background-color: inherit;\n\n  padding: 1rem;\n  min-width: 48px;\n"])), function (props) { return props.gridColumn && "grid-column: ".concat(props.gridColumn, ";"); }, function (props) { return (props.right ? "flex-end" : "flex-start"); }, function (props) { return (props.right ? "right" : "left"); }, common.SLATE_600);
+var templateObject_1$2;
 
-var Text$b = antd.Typography.Text;
+var Text$9 = antd.Typography.Text;
 var TransactionsEmptyState = function () {
     var noTransactionsMessage = React.useContext(TransactionsListContext).noTransactionsMessage;
-    return (jsxRuntime.jsx(Text$b, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
+    return (jsxRuntime.jsx(Text$9, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
 };
 
 var isInvoice = function (transaction) {
@@ -3368,11 +3376,27 @@ var TransactionRowTitle = function (_a) {
     return (jsxRuntime.jsx("span", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
-var Text$a = antd.Typography.Text;
+function transactionDateToDisplay(transaction, transactionDateType) {
+    var _a, _b;
+    if (transaction.kind === "PAYMENT") {
+        return transaction.createdAt;
+    }
+    else if (transactionDateType === "dueAt") {
+        return (_a = transaction.transactionable) === null || _a === void 0 ? void 0 : _a.dueAt;
+    }
+    else if (transactionDateType === "issuedAt") {
+        return (_b = transaction.transactionable) === null || _b === void 0 ? void 0 : _b.issuedAt;
+    }
+    else {
+        return transaction.createdAt;
+    }
+}
+
+var Text$8 = antd.Typography.Text;
 var TransactionsListDesktop = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var _b = React.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
+    var _c = React.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
@@ -3380,24 +3404,27 @@ var TransactionsListDesktop = function (_a) {
     var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsxRuntime.jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var _a;
-        var isClickable = onTransactionClick !== undefined;
-        return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
-            }, style: {
-                backgroundColor: index % 2 === 0
-                    ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
-                    : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
-            } }, { children: [!showDateAndTitle && !showState && !showAmount && !showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$a, { children: "No columns selected" }) })), showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$a, { children: lodash.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), 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$a, { children: common.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
-    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+            var _a;
+            var isClickable = onTransactionClick !== undefined;
+            return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                    onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
+                }, style: {
+                    backgroundColor: index % 2 === 0
+                        ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                        : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+                } }, { children: [!showDateAndTitle &&
+                        !showState &&
+                        !showAmount &&
+                        !showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$8, { children: "No columns selected" }) })), showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) })), jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$8, { children: lodash.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] }))] })), 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$8, { children: common.formatCurrency(((_a = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _a === void 0 ? void 0 : _a.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+        }) }));
 };
 
-var Text$9 = antd.Typography.Text;
+var Text$7 = antd.Typography.Text;
 var TransactionsListMobile = function (_a) {
     var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
-    var columns = React.useContext(TransactionsListContext).columns;
-    var _b = React.useContext(BunnyContext), apiHost = _b.apiHost, darkMode = _b.darkMode;
+    var _b = React.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
+    var _c = React.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
     var showAmount = columns.includes("amount");
     var showDateAndTitle = columns.includes("date-and-title");
@@ -3405,19 +3432,20 @@ var TransactionsListMobile = function (_a) {
     var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsxRuntime.jsx(TransactionsEmptyState, {});
-    return transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
-        var isClickable = transaction.kind === "INVOICE";
-        return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
-                onTransactionClick(transaction);
-            }, style: {
-                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: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$9, { children: lodash.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: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transaction.createdAt })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$9, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$9, { 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));
-    });
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
+            var isClickable = transaction.kind === "INVOICE";
+            return (jsxRuntime.jsxs("div", __assign({ className: "contents ".concat(isClickable && "cursor-pointer", " show-on-hover-container"), onClick: function () {
+                    onTransactionClick(transaction);
+                }, style: {
+                    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: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showDateAndTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$7, { children: lodash.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: [showDateAndTitle && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showAmount && showDateAndTitle && jsxRuntime.jsx(Text$7, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$7, { 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$8 = antd.Typography.Text;
+var Text$6 = 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-and-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 ? [
@@ -3427,7 +3455,7 @@ function Transactions(_a) {
         common.TransactionKind.WRITE_OFF,
     ] : _j, style = _a.style, filter = _a.filter, noTransactionsMessage = _a.noTransactionsMessage, entityId = _a.entityId, filterTransactions = _a.filterTransactions, _k = _a.sortTransactions, sortTransactions = _k === void 0 ? function (a, b) {
         return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-    } : _k;
+    } : _k, _l = _a.transactionDateType, transactionDateType = _l === void 0 ? "createdAt" : _l;
     var contextValues = {
         showSearchBar: showSearchBar,
         showTitle: showTitle,
@@ -3447,11 +3475,12 @@ function Transactions(_a) {
         entityId: entityId,
         filterTransactions: filterTransactions,
         sortTransactions: sortTransactions,
+        transactionDateType: transactionDateType,
     };
     var apiHost = React.useContext(BunnyContext).apiHost;
     var token = useToken();
     // Local state
-    var _l = React.useState(""), search = _l[0], setSearch = _l[1];
+    var _m = React.useState(""), search = _m[0], setSearch = _m[1];
     var filterValue = filter ||
         (search ? "filter: \"transaction.transactionableId is ".concat(search, "\"") : "");
     // Queries
@@ -3465,7 +3494,7 @@ function Transactions(_a) {
 function TransactionsDisplay(_a) {
     var _b, _c;
     var transactions = _a.transactions, onSearchValueChanged = _a.onSearchValueChanged, search = _a.search;
-    var _d = React.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, entityId = _d.entityId, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions;
+    var _d = React.useContext(TransactionsListContext), showSearchBar = _d.showSearchBar, showTitle = _d.showTitle, title = _d.title, transactionComponent = _d.transactionComponent, useModal = _d.useModal, suppressTransactionDisplay = _d.suppressTransactionDisplay, className = _d.className, shadow = _d.shadow, searchBarClassName = _d.searchBarClassName, style = _d.style, onTransactionClick = _d.onTransactionClick, entityId = _d.entityId, onTransactionDisplayClose = _d.onTransactionDisplayClose, kindsToShow = _d.kindsToShow, filterTransactions = _d.filterTransactions, sortTransactions = _d.sortTransactions; _d.transactionDateType;
     var columns = React.useContext(TransactionsListContext).columns;
     var darkMode = React.useContext(BunnyContext).darkMode;
     var secondaryColor = React.useContext(BrandContext).secondaryColor;
@@ -3526,7 +3555,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 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$8, __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 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$6, __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) {
@@ -3539,13 +3568,7 @@ function TransactionsDisplay(_a) {
                                     }, value: search }) })))] }))) : null, jsxRuntime.jsx("div", __assign({ className: "grid w-full rounded-md overflow-auto ".concat(shadow), style: {
                             gridTemplateColumns: gridTemplateColumns(),
                             backgroundColor: "var(--row-background".concat(darkMode ? "-dark" : "", ")"),
-                        } }, { children: isMobile ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListMobile({
-                                transactions: updatedTransactions,
-                                onTransactionClick: handleTransactionClick,
-                            }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: TransactionsListDesktop({
-                                transactions: updatedTransactions,
-                                onTransactionClick: handleTransactionClick,
-                            }) })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "", entityId: entityId }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId, entityId: entityId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
+                        } }, { children: isMobile ? (jsxRuntime.jsx(TransactionsListMobile, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) : (jsxRuntime.jsx(TransactionsListDesktop, { transactions: updatedTransactions, onTransactionClick: handleTransactionClick })) }))] })), useModal ? (jsxRuntime.jsx(antd.Modal, __assign({ title: drawerTitle(), open: drawerOpen, onOk: handleDisplayClose, onCancel: handleDisplayClose, width: DISPLAY_WIDTH, footer: null }, { children: jsxRuntime.jsx(Invoice, { id: (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.transactionableId) || "", entityId: entityId }) }))) : (jsxRuntime.jsx(antd.Drawer, __assign({ title: drawerTitle(), onClose: handleDisplayClose, open: drawerOpen, width: DISPLAY_WIDTH }, { children: transactionComponent ? (transactionComponent) : (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind) === "INVOICE" ? (jsxRuntime.jsx(Invoice, { id: selectedTransaction.transactionableId, entityId: entityId })) : (jsxRuntime.jsxs(antd.Card, __assign({ className: "shadow-md" }, { children: [jsxRuntime.jsx(antd.Typography.Title, __assign({ level: 2, className: "mb-4" }, { children: "Transaction Details" })), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Amount:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: common.formatCurrency((selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.amount) || 0, (selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.currencyId) || "USD") })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Description:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.description })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "Kind:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.kind })] }), jsxRuntime.jsxs(antd.Typography.Paragraph, { children: [jsxRuntime.jsx("strong", { children: "State:" }), " ", jsxRuntime.jsx(antd.Typography.Text, { children: selectedTransaction === null || selectedTransaction === void 0 ? void 0 : selectedTransaction.state })] })] }))) })))] })));
 }
 
 function Quotes(_a) {
@@ -3578,6 +3601,7 @@ function Quotes(_a) {
         sortTransactions: sort,
         downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
         entityId: entityId,
+        transactionDateType: "createdAt", // Required for the transactions list, but doesn't affect quotes
     };
     function quoteStateRenderer(state) {
         var getColor = function (state) {
@@ -3643,10 +3667,10 @@ function QuotesWrapper() {
     return (jsxRuntime.jsx(TransactionsDisplay, { transactions: quotesAsTransactions, onSearchValueChanged: setSearch, search: search }));
 }
 
-var Text$7 = antd.Typography.Text;
+var Text$5 = antd.Typography.Text;
 var DrawerHeader = function (_a) {
     var description = _a.description, onClose = _a.onClose, title = _a.title;
-    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$7, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), 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$5, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), jsxRuntime.jsx("button", __assign({ onClick: onClose, className: "ant-drawer-close" }, { children: jsxRuntime.jsx(CloseOutlined$1, {}) }))] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
 };
 
 var PaymentMethod = function (_a) {
@@ -3672,7 +3696,16 @@ var PaymentMethod = function (_a) {
     };
     if (data === undefined)
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: function () { return onClickRemove(data); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
+    return (jsxRuntime.jsxs("div", __assign({ className: "".concat(className) }, { children: [data ? (jsxRuntime.jsx(CreditCard, { onClickRemove: function () { return __awaiter(void 0, void 0, void 0, function () {
+                    return __generator(this, function (_a) {
+                        switch (_a.label) {
+                            case 0: return [4 /*yield*/, onClickRemove(data)];
+                            case 1:
+                                _a.sent();
+                                return [2 /*return*/];
+                        }
+                    });
+                }); }, onClickUpdate: function () { return setShowModal(true); }, paymentMethodData: data, shadow: shadow, cardEnabled: cardEnabled })) : (jsxRuntime.jsx(EmptyCard, { onClick: function () { return setShowModal(true); }, shadow: shadow, cardEnabled: cardEnabled })), jsxRuntime.jsx(antd.Drawer, __assign({ closeIcon: null, onClose: function () { return setShowModal(false); }, open: showModal, styles: {
                     body: isMobile
                         ? {
                             padding: "1rem 0 0",
@@ -3718,7 +3751,7 @@ var quoteRecalculateTaxes = function (_a) {
     });
 };
 
-var MUTATION$6 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
+var MUTATION$5 = "{\n  currentUser {\n    taxationRequiredAccountFields\n  }\n}";
 var getTaxationRequiredAccountFields = function (_a) {
     var token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3727,7 +3760,7 @@ var getTaxationRequiredAccountFields = function (_a) {
         return __generator(this, function (_d) {
             switch (_d.label) {
                 case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: MUTATION$6,
+                        query: MUTATION$5,
                         token: token,
                         apiHost: apiHost,
                     })];
@@ -3752,7 +3785,7 @@ var useHasTaxPlugin = function (_a) {
     return Boolean(plugins === null || plugins === void 0 ? void 0 : plugins.some(function (plugin) { return plugin.type === "taxation"; }));
 };
 
-var MUTATION$5 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
+var MUTATION$4 = "\nmutation accountUpdate(\n    $id: ID!,\n    $attributes: AccountAttributes!) {\n      accountUpdate(\n        id: $id,\n        attributes: $attributes\n      ) {\n        account {\n          id\n          billingCountry\n          billingState\n          billingStreet\n          billingCity\n          billingZip\n          name\n        }\n        errors\n      }\n  }\n";
 var accountUpdate = function (_a) {
     var accountId = _a.accountId, attributes = _a.attributes, token = _a.token, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3763,7 +3796,7 @@ var accountUpdate = function (_a) {
                 case 0:
                     vars = { id: accountId, attributes: attributes };
                     return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$5,
+                            query: MUTATION$4,
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -3944,7 +3977,7 @@ var Checkout = function (_a) {
                             }, onPaymentSuccess: onSuccess, graphQLClient: graphQLClient }))] }))] })) })));
 };
 
-var MUTATION$4 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
+var MUTATION$3 = function () { return "\nmutation AccountSignup (\n  $entityId: ID!,\n  $pluginId: String!,\n  $paymentMethodId: String,\n  $priceListCode: String!,\n  $accountId: ID!,\n  $quoteId: ID!\n) {\n  accountSignup(\n    entityId: $entityId,\n    pluginId: $pluginId,\n    paymentMethodId: $paymentMethodId,\n    priceListCode: $priceListCode,\n    accountId: $accountId,\n    quoteId: $quoteId\n  ) {\n    errors\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n  }\n}"; };
 var accountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3963,7 +3996,7 @@ var accountSignup = function (_a) {
                         priceListCode: priceListCode,
                     };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$4(),
+                            query: MUTATION$3(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -3979,7 +4012,7 @@ var accountSignup = function (_a) {
     });
 };
 
-var MUTATION$3 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
+var MUTATION$2 = function () { return "\nmutation QuoteAccountSignup (\n  $accountName: String!,\n  $billingContact: ContactAttributes!,\n  $entityId: ID!,\n  $priceListCode: String!\n) {\n  quoteAccountSignup(\n    entityId: $entityId,\n    priceListCode: $priceListCode,\n    accountName: $accountName,\n    billingContact: $billingContact\n  ) {\n    account {\n      id\n    }\n    quote {\n      acceptedByName\n      acceptedByTitle\n      accountId\n      amount\n      amountDue\n      applicationDate\n      applied\n      backdatedPeriods\n      backdatedQuote\n      billingDay\n      contactId\n      createdAt\n      credits\n      currencyId\n      dealId\n      discount\n      discountValue\n      endDate\n      evergreen\n      expiresAt\n      id\n      invoiceImmediately\n      invoiceImmediatelyAvailable\n      invoiceUntil\n      isPendingApprovalRequest\n      kind\n      message\n      name\n      netPaymentDays\n      notes\n      number\n      ownerId\n      payableId\n      periodAmount\n      poNumber\n      requiresApproval\n      smallUnitAmountDue\n      splitInvoice\n      startDate\n      state\n      subtotal\n      taxAmount\n      taxCode\n      updatedAt\n      uuid\n    }\n    tenant {\n      code\n    }\n    portalSessionToken\n    errors\n  }\n}"; };
 var quoteAccountSignup = function (_a) {
     var token = _a.token, apiHost = _a.apiHost, entityId = _a.entityId, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -3995,7 +4028,7 @@ var quoteAccountSignup = function (_a) {
                         billingContact: billingContact,
                     };
                     return [4 /*yield*/, gqlRequest({
-                            query: MUTATION$3(),
+                            query: MUTATION$2(),
                             token: token,
                             vars: vars,
                             apiHost: apiHost,
@@ -4011,7 +4044,7 @@ var quoteAccountSignup = function (_a) {
     });
 };
 
-var MUTATION$2 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
+var MUTATION$1 = function () { return "\nquery PriceList($code: String!) {\n  priceList (code: $code) {\n    basePrice\n    code\n    createdAt\n    currencyId\n    id\n    isVisible\n    name\n    periodMonths\n    planId\n    priceDescription\n    productId\n    sku\n    trialAllowed\n    trialLengthDays\n    updatedAt\n  }\n}"; };
 var getPriceList = function (_a) {
     var token = _a.token, code = _a.code, apiHost = _a.apiHost;
     return __awaiter(void 0, void 0, void 0, function () {
@@ -4019,7 +4052,7 @@ var getPriceList = function (_a) {
         return __generator(this, function (_b) {
             switch (_b.label) {
                 case 0: return [4 /*yield*/, gqlRequest({
-                        query: MUTATION$2(),
+                        query: MUTATION$1(),
                         token: token,
                         vars: { code: code },
                         apiHost: apiHost,
@@ -4053,19 +4086,19 @@ function InitialSignupForm(_a) {
                         ] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Account name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", htmlType: "submit", loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
 }
 
-var Title = antd.Typography.Title, Text$6 = antd.Typography.Text;
+var Title = antd.Typography.Title, Text$4 = antd.Typography.Text;
 function PaymentSuccessDisplay(_a) {
     var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(CheckCircleFilled$1, { 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, "USD"), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$6, __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(CheckCircleFilled$1, { 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, "USD"), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$4, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
 }
 
-var Text$5 = antd.Typography.Text;
+var Text$3 = antd.Typography.Text;
 function PriceListDisplay(_a) {
     var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
     if (!priceListData)
         return null;
     console.log("topNavImageUrl", topNavImageUrl);
-    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$5, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$5, __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$5, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$5, __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$3, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$3, __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$3, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$3, __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();
@@ -4181,60 +4214,9 @@ function Signup(_a) {
                         : "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "w-1/2") }, { children: jsxRuntime.jsx(PaymentForms, { entityId: entityId, quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
 }
 
-// WARNING: There is a preview button on APP that will need to be changed if this query is changed
-var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\n        code\n        contactUsLabel\n        contactUsUrl\n        description\n        id\n        name\n        position\n        pricingDescription\n        pricingStyle\n        planFeatures {\n          featureId\n          value\n          feature {\n            name\n          }\n        }\n        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\n          }\n          product {\n            id\n          }\n          charges {\n            basePrice\n            billingPeriod\n            chargeType\n            id\n            name\n            priceDecimals\n            pricingModel\n            quantityMax\n            quantityMin\n            selfServiceQuantity\n            feature {\n              name\n              unitName\n            }\n          }\n        }\n        productId\n      }\n    }\n  }";
-var getPlanChangeOptions = function (_a) {
-    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response, planChangeOptions;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        isInPreviewMode: isInPreviewMode,
-                        query: PLAN_CHANGE_OPTIONS_QUERY,
-                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
-                        token: token,
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    planChangeOptions = response.planChangeOptions;
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
-                        throw planChangeOptions.errors;
-                    // Sort planChangeOptions.plans by position
-                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
-                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
-                    }
-                    return [2 /*return*/, planChangeOptions];
-            }
-        });
-    });
-};
-
-var QUOTE_QUERY = function () { return "\n        query quote($id: ID) {\n            quote(id: $id) {\n                accountId\n                amount\n                amountDue\n                smallUnitAmountDue\n                currencyId\n                formattedQuote {\n                  html\n                }\n                id\n                payableId\n                periodAmount\n                subtotal\n                taxAmount\n                amountsByPeriod {\n                    amount\n                    startDate\n                }\n                quoteChanges {\n                    currencyId\n                    id\n                    charges {\n                        amountsByPeriod {\n                          amount\n                          startDate\n                        }\n                        amount\n                        billingPeriod\n                        currencyId\n                        feature {\n                          unitName\n                        }\n                        id\n                        name\n                        priceListCharge {\n                          id\n                        }\n                        quantity\n                    }\n                    priceList {\n                        id\n                        plan {\n                            name\n                        }\n                        product {\n                            name\n                        }\n                    }\n\n                }\n            }\n        }"; };
-var getQuote = function (_a) {
-    var id = _a.id, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var response;
-        return __generator(this, function (_b) {
-            switch (_b.label) {
-                case 0: return [4 /*yield*/, common.gqlRequest({
-                        query: QUOTE_QUERY(),
-                        token: token,
-                        vars: { id: id },
-                        apiHost: apiHost,
-                    })];
-                case 1:
-                    response = _b.sent();
-                    return [2 /*return*/, response === null || response === void 0 ? void 0 : response.quote];
-            }
-        });
-    });
-};
-
-var SUBSCRIPTIONS_QUERY = "query subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isRamp\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
+var SUBSCRIPTIONS_QUERY = "\nquery subscriptions {\n    subscriptions {\n      nodes {\n        cancellationDate\n        currencyId\n        endDate\n        evergreen\n        id\n        period\n        plan { id name selfServiceBuy selfServiceCancel selfServiceRenew }\n        priceList { id periodMonths }\n        product { id name showProductNameOnLineItem }\n        startDate\n        state\n        trialEndDate\n        trialPeriod\n        trialStartDate\n        charges {\n          priceListCharge {\n            priceListChargeTiers {\n              price\n              starts\n            }\n          }\n          amount\n          billingPeriod\n          chargeType\n          discount\n          discountedPrice\n          endDate\n          expired\n          feature { name }\n          id\n          isRamp\n          kind\n          name\n          periodPrice\n          price\n          priceDecimals\n          priceListChargeId\n          priceTiers { starts price }\n          pricingModel\n          quantity\n          selfServiceQuantity\n          startDate\n          trial\n        }\n      }\n    }\n  }";
 var getSubscriptions = function (_a) {
-    var entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token, apiHost = _a.apiHost;
+    var apiHost = _a.apiHost, entityId = _a.entityId, isInPreviewMode = _a.isInPreviewMode, token = _a.token;
     return __awaiter(void 0, void 0, void 0, function () {
         var response;
         var _b;
@@ -4260,44 +4242,56 @@ var useSubscriptions = function (_a) {
     return React.useMemo(function () {
         var combinedSubscriptions = data === null || data === void 0 ? void 0 : data.map(function (subscription) {
             var _a;
-            var subscriptionClone = lodash.cloneDeep(subscription);
-            var orderedSubscriptionCharges = subscriptionClone.charges.sort(function (a, b) {
-                return a.priceListChargeId.localeCompare(b.priceListChargeId) ||
-                    a.endDate.localeCompare(b.endDate) ||
-                    a.startDate.localeCompare(b.startDate);
+            var orderedSubscriptionCharges = subscription.charges.sort(function (a, b) {
+                if (a.priceListChargeId !== b.priceListChargeId) {
+                    return a.priceListChargeId.localeCompare(b.priceListChargeId);
+                }
+                if (a.kind === common.SubscriptionChargeKind.DISCOUNT &&
+                    b.kind !== common.SubscriptionChargeKind.DISCOUNT) {
+                    return 1;
+                }
+                if (a.kind !== common.SubscriptionChargeKind.DISCOUNT &&
+                    b.kind === common.SubscriptionChargeKind.DISCOUNT) {
+                    return -1;
+                }
+                return (a.endDate.localeCompare(b.endDate) ||
+                    a.startDate.localeCompare(b.startDate));
             });
-            var isTrial = ((_a = subscriptionClone.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
+            var isTrial = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.TRIAL;
             var combinedSubscriptionCharges = [];
             var aggregationCharge;
             for (var index = 0; index < orderedSubscriptionCharges.length; index++) {
                 var charge = orderedSubscriptionCharges[index];
                 var nextCharge = orderedSubscriptionCharges[index + 1];
-                // Initialize aggregationCharge if it is not already set
                 if (!aggregationCharge)
                     aggregationCharge = charge;
-                // If the next charge exists and has the same priceListChargeId and endDate, aggregate the quantities
+                // If the next charge is the same priceListChargeId and endDate, aggregate the quantities
                 if (nextCharge &&
                     charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    charge.endDate === nextCharge.endDate) {
+                    charge.endDate === nextCharge.endDate &&
+                    charge.startDate === nextCharge.startDate &&
+                    charge.kind === nextCharge.kind) {
                     aggregationCharge.quantity += nextCharge.quantity;
+                    // If the next charge is different, push the aggregationCharge to the combinedSubscriptionCharges
                 }
-                // If the next charge exists, has the same priceListChargeId but different endDate, and matches the trial state, push the current aggregationCharge and reset it
                 else if (nextCharge &&
                     charge.priceListChargeId === nextCharge.priceListChargeId &&
-                    charge.endDate !== nextCharge.endDate &&
+                    (charge.endDate !== nextCharge.endDate ||
+                        charge.startDate !== nextCharge.startDate) &&
+                    charge.kind === nextCharge.kind &&
                     (!isTrial || charge.trial) &&
                     (isTrial || !charge.trial)) {
+                    nextCharge.name = "";
                     combinedSubscriptionCharges.push(aggregationCharge);
                     aggregationCharge = undefined;
                 }
-                // If the next charge does not match the above conditions, push the current aggregationCharge and reset it
                 else {
                     combinedSubscriptionCharges.push(aggregationCharge);
                     aggregationCharge = undefined;
                 }
             }
-            subscriptionClone.charges = combinedSubscriptionCharges;
-            return subscriptionClone;
+            subscription.charges = combinedSubscriptionCharges;
+            return subscription;
         });
         var subscriptionOrder = Object.values(common.SubscriptionState);
         combinedSubscriptions === null || combinedSubscriptions === void 0 ? void 0 : combinedSubscriptions.sort(function (a, b) {
@@ -4312,38 +4306,6 @@ var ErrorView = function (_a) {
     return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full", style: { marginTop: "80px" } }, { children: [jsxRuntime.jsx("div", __assign({ style: { fontSize: "32px" } }, { children: message })), children] })));
 };
 
-var Text$4 = antd.Typography.Text;
-var PageHeaderWithActions = function (_a) {
-    var children = _a.children, title = _a.title, className = _a.className;
-    var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex pb-4 shadow-padding-x ".concat(className, " ").concat(isMobile ? "flex-col gap-2" : "items-center justify-between h-8") }, { children: [jsxRuntime.jsx(PageSubTitle, { title: title }), children] })));
-};
-var PageSubTitle = function (_a) {
-    var title = _a.title;
-    var secondaryColor = React.useContext(BrandContext).secondaryColor;
-    var darkMode = React.useContext(BunnyContext).darkMode;
-    return (jsxRuntime.jsx(Text$4, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title })));
-};
-
-var Text$3 = antd.Typography.Text;
-var HideExpiredToggle = function (_a) {
-    var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, subscriptions = _a.subscriptions;
-    var isMobile = common.useIsMobile();
-    var secondaryColor = React.useContext(BrandContext).secondaryColor;
-    var hasExpiredOrCanceledSubscriptions = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        var _a, _b;
-        return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
-            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
-    });
-    if (!hasExpiredOrCanceledSubscriptions)
-        return null;
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4 pl-4" }, { children: [!isMobile && jsxRuntime.jsx(antd.Divider, { className: "h-5", type: "vertical" }), jsxRuntime.jsx(StyledCheckbox, { children: jsxRuntime.jsx(antd.Checkbox, __assign({ checked: hideExpired, onChange: function (e) { return setHideExpired(e.target.checked); }, style: {
-                        color: secondaryColor,
-                    } }, { children: jsxRuntime.jsx(Text$3, { children: isMobile ? "Hide inactive" : "Hide inactive subscriptions" }) })) })] })));
-};
-var StyledCheckbox = styled__default["default"].div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"], ["\n  .ant-checkbox-wrapper span {\n    padding-inline-end: 0 !important;\n  }\n"])));
-var templateObject_1$2;
-
 var SubscriptionState;
 (function (SubscriptionState) {
     SubscriptionState["ACTIVE"] = "ACTIVE";
@@ -4541,57 +4503,6 @@ var templateObject_1;
 
 var SubscriptionsContext = React.createContext({});
 
-var MUTATION$1 = "\nmutation quoteSubscriptionReinstate($ids: [ID!]!) {\n  quoteSubscriptionReinstate(ids: $ids) {\n    quote {\n      id\n      uuid\n      accountId\n      dealId\n      name\n      amount\n      taxAmount\n      discount\n      netPaymentDays\n      acceptedByName\n      acceptedByTitle\n      state\n      billingDay\n      evergreen\n      requiresApproval\n      isPendingApprovalRequest\n      poNumber\n      kind\n      currencyId\n      ownerId\n      contactId\n      quoteChanges {\n        id\n        priceListId\n        charges {\n          id\n          pricingModel\n          chargeType\n          billingPeriod\n          price\n          priceDecimals\n          tieredAveragePrice\n          quantity\n          quantityMin\n          quantityMax\n          discount\n          amount\n          prorationRate\n          name\n          invoiceLineText\n          createdAt\n          updatedAt\n          startDate\n          endDate\n          billingPeriodAmounts { id amount prorationRate }\n          currencyId\n          couponId\n          feature { id name code isUnit unitName }\n          priceTiers { starts price }\n        }\n      }\n      expiresAt\n      createdAt\n      updatedAt\n      startDate\n      endDate\n      invoiceUntil\n      applicationDate\n      applied\n      endDateOptions {\n        endDate\n        label\n      }\n      invoiceUntilOptions {\n        endDate\n        label\n      }\n      notes\n      message\n      amountsByPeriod {\n        id\n        name\n        amount\n      }\n      subtotal\n      credits\n      discountValue\n    }\n  }\n}\n";
-var getGuoteSubscriptionReinstate = function (_a) {
-    var ids = _a.ids, token = _a.token, apiHost = _a.apiHost;
-    return __awaiter(void 0, void 0, void 0, function () {
-        var vars, response, _b, errors, quote;
-        return __generator(this, function (_c) {
-            switch (_c.label) {
-                case 0:
-                    vars = { ids: ids };
-                    return [4 /*yield*/, common.gqlRequest({
-                            query: MUTATION$1,
-                            token: token,
-                            vars: vars,
-                            apiHost: apiHost,
-                        })];
-                case 1:
-                    response = _c.sent();
-                    _b = response === null || response === void 0 ? void 0 : response.quoteSubscriptionReinstate, errors = _b.errors, quote = _b.quote;
-                    if (errors)
-                        throw errors;
-                    return [2 /*return*/, quote];
-            }
-        });
-    });
-};
-
-// import { EditingSubscriptionType } from "../../../features/quantityChangeDrawer/QuantityInput";
-var canShowQuantitiesInput = function (charge, subscription) {
-    // Check if the subscription is active, pending, or in trial,
-    // the pricing model is not flat,
-    // and if it's not a trial, also check if the current charge is the last one in the subscription.
-    var _a, _b, _c;
-    var isActiveSubscription = ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.ACTIVE;
-    var isPendingSubscription = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.PENDING;
-    var isTrialSubscription = ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL;
-    var isFlatPricing = charge.pricingModel === "FLAT";
-    var shouldProcessCharge = (isActiveSubscription || isPendingSubscription || isTrialSubscription) &&
-        !isFlatPricing &&
-        charge.selfServiceQuantity &&
-        !charge.expired;
-    // Now you can use the value of shouldProcessCharge to determine whether to process the charge.
-    return shouldProcessCharge;
-};
-var canShowChangeQuantities = function (_a) {
-    var subscriptions = _a.subscriptions;
-    return subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.some(function (subscription) {
-        return subscription.charges.some(function (charge, chargeIndex) {
-            return canShowQuantitiesInput(charge, subscription);
-        });
-    });
-};
 var isSubscriptionNotActive = function (subscription) {
     var _a, _b;
     return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
@@ -4605,69 +4516,13 @@ var canShowSubscriptionActions = function (subscription) {
 
 var SubscriptionCardActions = function (_a) {
     var _b, _c;
-    var planChangeOptions = _a.planChangeOptions, subscription = _a.subscription, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible;
-    // Context
-    var apiHost = React.useContext(BunnyContext).apiHost;
-    var token = useToken();
-    var _d = React.useContext(SubscriptionsContext), onChangePlanClick = _d.onChangePlanClick, onClickUpgrade = _d.onClickUpgrade, isTempViewOnly = _d.isTempViewOnly;
-    // Hooks
-    common.useSuccessNotification();
-    // const cancelSubscription = useCancelSubscription();
-    reactQuery.useQueryClient();
-    // const navigate = usePortalNavigate();
-    // const handleUpgradingSubscriptionChange =
-    //   useHandleUpgradingSubscriptionChange();
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, 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 canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
-    // Mutations
-    // const subscriptionCancel = useMutation({
-    //   mutationFn: () => cancelSubscription([subscription.id], token),
-    //   onSuccess: () => {
-    //     queryClient.invalidateQueries({
-    //       queryKey: QueryKeyFactory.default.createTableKey("subscriptions"),
-    //     });
-    //     showSuccessNotification("Subscription canceled");
-    //   },
-    // });
-    reactQuery.useMutation({
-        mutationFn: function () {
-            return getGuoteSubscriptionReinstate({
-                ids: [subscription.id],
-                token: token,
-                apiHost: apiHost,
-            });
-        },
-        onSuccess: function (quote) {
-            setEditingQuoteData({ id: quote.id, isTrial: false });
-            setPayModalVisible(true);
-        },
-    });
-    // Handlers
-    var handleChangePlanClick = function () {
-        // handleUpgradingSubscriptionChange({
-        //   subscription,
-        // });
-        console.log("handleChangePlanClick handleUpgradingSubscriptionChange not implemented");
-        // navigate("plan-manager", {
-        //   subscriptionUpgradeId: subscription.id,
-        // });
-        onChangePlanClick();
-    };
     return (canShowChangePlanButton || canShowCancelButton) &&
-        canShowSubscriptionActions(subscription) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isTempViewOnly && canShowCancelButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ icon: null, 
-                // onConfirm={() => subscriptionCancel.mutate()}
-                title: "Cancel subscription" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "p-0", type: "link" }, { children: "Cancel subscription" })) }))), !isTempViewOnly && canShowChangePlanButton && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () { return handleChangePlanClick(); }, type: "primary" }, { children: "Change plan" })))] })) : ((_c = subscription.state) === null || _c === void 0 ? void 0 : _c.toUpperCase()) === common.SubscriptionState.TRIAL ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isTempViewOnly && (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
-                // handleUpgradingSubscriptionChange({
-                //   subscription,
-                // });
-                console.log("onClickUpgrade handleUpgradingSubscriptionChange not implemented");
-                // navigate("plan-manager", {
-                //   subscriptionUpgradeId: subscription.id,
-                // });
-                onClickUpgrade();
-            }, type: "primary" }, { children: "Upgrade" }))) })) : null;
+        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;
 };
 
 var Text$2 = antd.Typography.Text;
@@ -4689,7 +4544,7 @@ var getSubscriptionStatusText = function (subscription) {
 };
 var SubscriptionCardHeader = function (_a) {
     var _b, _c, _d, _e, _f;
-    var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, subscription = _a.subscription;
     var darkMode = React.useContext(BunnyContext).darkMode;
     var brandColor = React.useContext(BrandContext).brandColor;
     var isMobile = common.useIsMobile();
@@ -4698,7 +4553,10 @@ 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("div", __assign({ className: "font-medium", style: { fontSize: "11px", color: brandColor } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && (jsxRuntime.jsx(SubscriptionCardActions, { planChangeOptions: planChangeOptions, subscription: subscription, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible }))] }))] })));
+        } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "11px", color: brandColor } }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && (jsxRuntime.jsx(Text$2, __assign({ className: "text-lg" }, { children: subscription.plan.name }))), jsxRuntime.jsxs(antd.Tag, __assign({ className: "ant-tag-".concat(common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()]) }, { children: [lodash.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$2, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile &&
+                        planChangeOptions &&
+                        onChangePlanClick &&
+                        onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
 };
 
 var BillingPeriodConverter;
@@ -4711,16 +4569,23 @@ var BillingPeriodConverter;
 })(BillingPeriodConverter || (BillingPeriodConverter = {}));
 var SubscriptionChargeTotal = function (_a) {
     var charge = _a.charge, subscription = _a.subscription;
+    var billingPeriod = charge.billingPeriod && BillingPeriodConverter[charge.billingPeriod];
     var isMobile = common.useIsMobile();
-    return (jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: [jsxRuntime.jsx("div", { children: common.formatCurrency(Number(charge.periodPrice), subscription.currencyId) }), charge.billingPeriod && (jsxRuntime.jsx("div", { children: BillingPeriodConverter[charge.billingPeriod] }))] })));
+    var currencyId = subscription.currencyId;
+    var formattedDiscountedPrice = common.formatCurrency(charge.price, currencyId);
+    var formattedPeriodPrice = common.formatCurrency(charge.periodPrice, currencyId);
+    return (jsxRuntime.jsx("div", __assign({ className: "flex gap-1 ".concat(isMobile ? "flex-col" : "") }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
+            ? "-".concat(formattedDiscountedPrice, " ").concat(billingPeriod)
+            : "".concat(formattedPeriodPrice, " ").concat(billingPeriod) })));
 };
 
 var SubscriptionChargeUnitPrice = function (_a) {
-    var _b, _c;
     var charge = _a.charge, subscription = _a.subscription;
     var darkMode = React.useContext(BunnyContext).darkMode;
-    var _d = React.useState(false), showPriceTiers = _d[0], setShowPriceTiers = _d[1];
-    if ((_c = (_b = charge.priceListCharge) === null || _b === void 0 ? void 0 : _b.priceListChargeTiers) === null || _c === void 0 ? void 0 : _c.length) {
+    var _b = React.useState(false), showPriceTiers = _b[0], setShowPriceTiers = _b[1];
+    var displayPriceTiers = (charge === null || charge === void 0 ? void 0 : charge.priceTiers) && charge.pricingModel === common.PricingModel.TIERED;
+    var isDiscount = (charge === null || charge === void 0 ? void 0 : charge.kind) === common.SubscriptionChargeKind.DISCOUNT;
+    if (displayPriceTiers)
         return (jsxRuntime.jsx(antd.Dropdown, __assign({ dropdownRender: function () {
                 var _a, _b;
                 return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col rounded border border-solid border-slate-200 p-2", style: {
@@ -4734,9 +4599,11 @@ var SubscriptionChargeUnitPrice = function (_a) {
                                 : "∞";
                             return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "whitespace-nowrap" }, { children: [tier.starts.toLocaleString(), " - ", ends.toLocaleString(), " ", ":"] })), jsxRuntime.jsx("div", __assign({ className: "whitespace-nowrap text-right" }, { children: common.formatCurrency(tier.price, subscription.currencyId, charge.priceDecimals) }))] }), index));
                         }) })) })));
-            }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "hide details" : "show details" })) })));
-    }
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) });
+            }, onOpenChange: setShowPriceTiers, open: showPriceTiers, trigger: ["click"] }, { children: jsxRuntime.jsx("div", __assign({ className: "cursor-pointer underline", onClick: function () { return setShowPriceTiers(!showPriceTiers); } }, { children: showPriceTiers ? "Hide tiers" : "Show tiers" })) })));
+    else if (isDiscount)
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["-", common.formatCurrency(charge.discountedPrice, subscription.currencyId)] }));
+    else
+        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: common.formatCurrency(charge.discountedPrice, subscription.currencyId) }));
 };
 
 var SubscriptionCardColumnHeaders = function (_a) {
@@ -4750,7 +4617,7 @@ var SubscriptionsListCell = function (_a) {
     return (jsxRuntime.jsx(Text$1, __assign({ className: "flex items-center text-sm whitespace-nowrap ".concat(className), style: __assign({ gridColumn: gridColumn, textAlign: right ? "right" : "left", justifyContent: right ? "flex-end" : "flex-start" }, style) }, { children: children })));
 };
 
-var createCardColumns = function () { return [
+var CARD_COLUMNS = [
     {
         title: "CHARGE",
         width: "minmax(min-content, 26%)",
@@ -4774,22 +4641,21 @@ var createCardColumns = function () { return [
         title: "TOTAL",
         width: "minmax(min-content, 18%)",
     },
-]; };
+];
 var SubscriptionCardDesktop = function (_a) {
     var _b;
-    var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
+    var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, 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;
-    var columns = createCardColumns();
-    return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, 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, planChangeOptions: planChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
                     gridColumn: "1 / 5",
                     width: "calc(100% + 32px)",
                     transform: "translateX(-16px)",
                 } }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
-                    gridTemplateColumns: columns.map(function (column) { return column.width; }).join(" "),
+                    gridTemplateColumns: CARD_COLUMNS.map(function (column) { return column.width; }).join(" "),
                     rowGap: "0.75rem",
-                } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: columns }), subscription.charges.map(function (charge, chargeIndex) {
+                } }, { children: [jsxRuntime.jsx(SubscriptionCardColumnHeaders, { columns: CARD_COLUMNS }), subscription.charges.map(function (charge, chargeIndex) {
                         if ((isTrial && !charge.trial) || (!isTrial && charge.trial))
                             return null;
                         return (jsxRuntime.jsx(SubscriptionCardDesktopRow, { charge: charge, chargeIndex: chargeIndex, subscription: subscription }, chargeIndex));
@@ -4822,12 +4688,18 @@ var SubscriptionCardDesktopRow = function (_a) {
             charge.chargeType === common.ChargeType.USAGE,
     }).data;
     var isRampFirstRow = isRamp && chargeIndex === 0;
-    var isLastChargeSame = charge.priceListChargeId === (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.priceListChargeId);
-    return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "flex items-center gap-2" }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !isLastChargeSame)
+    var isTrial = charge.trial;
+    var dontShowChargeName = (prevCharge === null || prevCharge === void 0 ? void 0 : prevCharge.id) === charge.id &&
+        (!isTrial || prevCharge.trial) &&
+        (isTrial || !prevCharge.trial);
+    var isDiscount = charge.kind === common.SubscriptionChargeKind.DISCOUNT;
+    return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [(isRampFirstRow || !isRamp) && (jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: isRamp ? "1/-1" : "1" }, { children: jsxRuntime.jsx("div", __assign({ className: "flex items-center gap-2 ".concat(isDiscount ? "pl-4" : "") }, { children: jsxRuntime.jsx("div", { children: isRampFirstRow || (!isRamp && !dontShowChargeName)
                             ? charge.name
-                            : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.chargeType === common.ChargeType.USAGE
-                    ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
-                    : charge.quantity })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
+                            : "" }) })) }))), jsxRuntime.jsx(SubscriptionsListCell, __assign({ gridColumn: 2 }, { children: jsxRuntime.jsx("div", { children: chargePeriod }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
+                    ? ""
+                    : charge.chargeType === common.ChargeType.USAGE
+                        ? data && jsxRuntime.jsx(FeatureUsageGraph, { charge: charge, featureUsage: data })
+                        : charge.quantity })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionsListCell, __assign({ right: true }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] })));
 };
 
 var Text = antd.Typography.Text;
@@ -4855,14 +4727,14 @@ var CHARGE_COLUMNS = [
 ];
 var SubscriptionCard = function (_a) {
     var _b;
-    var planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscription = _a.subscription;
+    var subscription = _a.subscription;
     var darkMode = React.useContext(BunnyContext).darkMode;
     // Derived state
     var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
     var backgroundColor = darkMode
         ? "var(--row-background-dark)"
         : "var(--row-background)";
-    return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
+    return (jsxRuntime.jsx(Card, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
                         gridColumn: "1 / -1",
                         width: "calc(100% + 32px)",
                         transform: "translateX(-16px)",
@@ -4876,142 +4748,87 @@ var SubscriptionCard = function (_a) {
                                 return null;
                             var isRamp = charge.isRamp;
                             var chargePeriod = "".concat(common.formatDate(charge.startDate), " - ").concat(common.formatDate(charge.endDate));
-                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
-                        })] })), jsxRuntime.jsx("div", __assign({ className: "flex gap-2 pt-5", style: {
-                        flexDirection: "column-reverse",
-                    } }, { children: jsxRuntime.jsx(SubscriptionCardActions, { planChangeOptions: planChangeOptions, subscription: subscription, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible }) }))] })) }));
+                            return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [((isRamp && chargeIndex === 0) || !isRamp) && (jsxRuntime.jsxs(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className, style: { gridColumn: isRamp ? "1/-1" : "1" } }, { children: [jsxRuntime.jsx("span", { children: charge.name }), !isRamp ? " - ".concat(chargePeriod) : ""] }))), isRamp && (jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[0].className }, { children: "- ".concat(chargePeriod) }))), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[1].className }, { children: charge.kind === common.SubscriptionChargeKind.DISCOUNT
+                                            ? ""
+                                            : charge.quantity })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[2].className }, { children: jsxRuntime.jsx(SubscriptionChargeUnitPrice, { charge: charge, subscription: subscription }) })), jsxRuntime.jsx(SubscriptionCardCellMobile, __assign({ className: CHARGE_COLUMNS[3].className }, { children: jsxRuntime.jsx(SubscriptionChargeTotal, { charge: charge, subscription: subscription }) }))] }), chargeIndex));
+                        })] }))] })) }));
 };
 
 var SubscriptionsList = function (_a) {
-    var hideExpired = _a.hideExpired, planChangeOptions = _a.planChangeOptions, setEditingQuoteData = _a.setEditingQuoteData, setPayModalVisible = _a.setPayModalVisible, subscriptions = _a.subscriptions;
+    var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, planChangeOptions = _a.planChangeOptions, 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, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
-            return (jsxRuntime.jsx(SubscriptionCardDesktop, { planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscription: subscription }, subscriptionIndex));
+                return (jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex));
+            return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }, subscriptionIndex));
         }) }));
 };
 
-var ChangeQuantitiesButton = function (_a) {
-    var canShowChangeQuantitiesButton = _a.canShowChangeQuantitiesButton, setQuantityDrawerOpen = _a.setQuantityDrawerOpen;
-    if (!canShowChangeQuantitiesButton)
-        return null;
-    return (jsxRuntime.jsx(antd.Button, __assign({ onClick: function () {
-            setQuantityDrawerOpen(true);
-        }, type: "default" }, { children: "Change quantities" })));
-};
-
-var SubscriptionsNavigation = function (_a) {
-    var hideExpired = _a.hideExpired, setHideExpired = _a.setHideExpired, setQuantityDrawerOpen = _a.setQuantityDrawerOpen, subscriptions = _a.subscriptions;
-    var isTempViewOnly = React.useContext(SubscriptionsContext).isTempViewOnly;
-    // Hooks
-    var isMobile = common.useIsMobile();
-    // Derived state
-    var canShowChangeQuantitiesButton = canShowChangeQuantities({
-        subscriptions: subscriptions,
+// WARNING: There is a preview button on APP that will need to be changed if this query is changed
+var PLAN_CHANGE_OPTIONS_QUERY = "\n  query planChangeOptions($subscriptionId: ID) {\n    planChangeOptions(subscriptionId: $subscriptionId) {\n      products {\n        everythingInPlus\n        id\n        name\n        features(sort: \"position asc\") {\n          description\n          id\n          isVisible\n          kind\n          name\n          position\n        }\n      }\n      plans {\n        code\n        contactUsLabel\n        contactUsUrl\n        description\n        id\n        name\n        position\n        pricingDescription\n        pricingStyle\n        planFeatures {\n          featureId\n          value\n          feature {\n            name\n          }\n        }\n        priceLists {\n          basePrice\n          id\n          currencyId\n          periodMonths\n          plan {\n            id\n            position\n          }\n          product {\n            id\n          }\n          charges {\n            basePrice\n            billingPeriod\n            chargeType\n            id\n            name\n            priceDecimals\n            pricingModel\n            quantityMax\n            quantityMin\n            selfServiceQuantity\n            feature {\n              name\n              unitName\n            }\n          }\n        }\n        productId\n      }\n    }\n  }";
+var getPlanChangeOptions = function (_a) {
+    var isInPreviewMode = _a.isInPreviewMode, token = _a.token, upgradingSubscription = _a.upgradingSubscription, apiHost = _a.apiHost;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var response, planChangeOptions;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0: return [4 /*yield*/, common.gqlRequest({
+                        isInPreviewMode: isInPreviewMode,
+                        query: PLAN_CHANGE_OPTIONS_QUERY,
+                        vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
+                        token: token,
+                        apiHost: apiHost,
+                    })];
+                case 1:
+                    response = _b.sent();
+                    planChangeOptions = response.planChangeOptions;
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.errors)
+                        throw planChangeOptions.errors;
+                    // Sort planChangeOptions.plans by position
+                    if (planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) {
+                        planChangeOptions.plans.sort(function (a, b) { return a.position - b.position; });
+                    }
+                    return [2 /*return*/, planChangeOptions];
+            }
+        });
     });
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions })), jsxRuntime.jsx("div", __assign({ className: "flex grow gap-2 ".concat(isMobile ? "flex-col shadow-padding-x" : "justify-end") }, { children: !isTempViewOnly && canShowChangeQuantitiesButton && (jsxRuntime.jsx(ChangeQuantitiesButton, { canShowChangeQuantitiesButton: canShowChangeQuantitiesButton, setQuantityDrawerOpen: setQuantityDrawerOpen })) }))] }));
 };
 
-// !!! This component is intended to be view only, however it still has lots of code for full functionality.
-// !!! This must be refactored.
 var Subscriptions = function (_a) {
-    var companyName = _a.companyName, entityId = _a.entityId, gap = _a.gap, shadow = _a.shadow, _b = _a.showTitle, showTitle = _b === void 0 ? true : _b, className = _a.className;
+    var className = _a.className, companyName = _a.companyName, entityId = _a.entityId, _b = _a.hideExpired, hideExpired = _b === void 0 ? false : _b, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, onChangePlanClick = _a.onChangePlanClick, onSubscriptionsLoaded = _a.onSubscriptionsLoaded, _c = _a.styles, styles = _c === void 0 ? {
+        gap: 4,
+        shadow: "sm",
+    } : _c;
+    var gap = styles.gap, shadow = styles.shadow;
     // Context
-    var _c = React.useContext(BunnyContext), apiHost = _c.apiHost, onTokenExpired = _c.onTokenExpired;
+    var apiHost = React.useContext(BunnyContext).apiHost;
     var token = useToken();
-    // Recoil state
-    // const [updatingChargeQuantityId, setUpdatingChargeQuantityId] =
-    //   useRecoilState(updatingChargeQuantityIdState);
-    // Local state
-    var _d = React.useState(), editingQuoteData = _d[0], setEditingQuoteData = _d[1];
-    var _e = React.useState(false), payModalVisible = _e[0], setPayModalVisible = _e[1];
-    var _f = React.useState(true), hideExpired = _f[0], setHideExpired = _f[1];
-    var _g = React.useState(false); _g[0]; var setQuantityDrawerOpen = _g[1];
-    // Hooks
-    var handleAllErrorFormats = common.useAllErrorFormats(onTokenExpired);
-    var queryClient = reactQuery.useQueryClient();
-    var showSuccessNotification = common.useSuccessNotification();
-    // const quoteDelete = useQuoteDelete();
-    var isMobile = common.useIsMobile();
     // Queries
-    var _h = reactQuery.useQuery({
+    var _d = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.createTableKey("subscriptions"),
         queryFn: function () { return getSubscriptions({ entityId: entityId, token: token, apiHost: apiHost }); },
         enabled: Boolean(entityId),
-    }), rawSubscriptions = _h.data, subscriptionsAreLoading = _h.isLoading;
-    var quote = reactQuery.useQuery({
-        queryKey: common.QueryKeyFactory.default.createObjectKey("editingQuote", editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
-        queryFn: function () {
-            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;
-    var _j = reactQuery.useQuery({
+    }), rawSubscriptions = _d.data, subscriptionsAreLoading = _d.isLoading;
+    var _e = reactQuery.useQuery({
         queryKey: common.QueryKeyFactory.default.planChangeOptionsKey(),
         queryFn: function () { return getPlanChangeOptions({ token: token, apiHost: apiHost }); },
-    }), planChangeOptions = _j.data, arePlanChangeOptionsLoading = _j.isLoading;
+        enabled: Boolean(onChangePlanClick),
+    }), planChangeOptions = _e.data, arePlanChangeOptionsLoading = _e.isLoading;
     // Derived state
     var subscriptions = useSubscriptions({ data: rawSubscriptions });
-    var allSubscriptionsExpired = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.every(function (subscription) {
-        var _a, _b;
-        return ((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === common.SubscriptionState.EXPIRED ||
-            ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.CANCELED;
-    });
     React.useEffect(function () {
-        if (allSubscriptionsExpired)
-            setHideExpired(false);
-    }, [allSubscriptionsExpired]);
-    // Handlers
-    var onSuccess = function () {
-        setQuantityDrawerOpen(false);
-        setEditingQuoteData(undefined);
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.transactionsKey(),
-        });
-        queryClient.invalidateQueries({
-            queryKey: common.QueryKeyFactory.default.createTableKey("subscriptions"),
-        });
-        showSuccessNotification("Your plan has been updated", "Payment successful");
-        setPayModalVisible(false);
-        setHideExpired(true);
-    };
-    var onCancel = function () {
-        setPayModalVisible(false);
-    };
-    var onFail = function (error) {
-        handleAllErrorFormats(error);
-    };
-    // const onClose = () => {
-    //   if (editingQuoteData) {
-    //     quoteDelete(editingQuoteData.id, token);
-    //     setEditingQuoteData(undefined);
-    //   }
-    //   // if (updatingChargeQuantityId) {
-    //   //   setUpdatingChargeQuantityId(undefined);
-    //   // }
-    //   setQuantityDrawerOpen(false);
-    // };
-    if (subscriptionsAreLoading || arePlanChangeOptionsLoading)
+        if (subscriptions)
+            onSubscriptionsLoaded === null || onSubscriptionsLoaded === void 0 ? void 0 : onSubscriptionsLoaded(subscriptions);
+    }, [subscriptions]);
+    if (subscriptionsAreLoading ||
+        (Boolean(onChangePlanClick) ? arePlanChangeOptionsLoading : false))
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    return (jsxRuntime.jsxs(SubscriptionsContext.Provider, __assign({ value: {
-            onChangePlanClick: function () {
-                console.log("onChangePlanClick not implemented");
-            },
-            onClickUpgrade: function () {
-                console.log("onClickUpgrade not implemented");
-            },
-            isTempViewOnly: true,
-            shadow: shadow,
+    return (jsxRuntime.jsx(SubscriptionsContext.Provider, __assign({ value: {
             gap: gap,
-            showTitle: showTitle,
-        } }, { children: [showTitle && (jsxRuntime.jsx(PageHeaderWithActions, __assign({ className: className, title: jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: { minWidth: "137px" } }, { children: [hideExpired ? "Active subscriptions" : "All subscriptions", isMobile && (jsxRuntime.jsx(HideExpiredToggle, { hideExpired: hideExpired, setHideExpired: setHideExpired, subscriptions: subscriptions }))] })) }, { children: !isMobile && (jsxRuntime.jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions })) }))), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap === undefined ? 4 : gap, " shadow-padding-xb overflow-auto ").concat(className), style: {
-                    flexShrink: 1,
-                } }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, planChangeOptions: planChangeOptions, setEditingQuoteData: setEditingQuoteData, setPayModalVisible: setPayModalVisible, subscriptions: subscriptions }) })) : (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })), isMobile && (jsxRuntime.jsx("div", __assign({ className: "pt-4 pb-2" }, { children: jsxRuntime.jsx(SubscriptionsNavigation, { hideExpired: hideExpired, setHideExpired: setHideExpired, setQuantityDrawerOpen: setQuantityDrawerOpen, subscriptions: subscriptions }) }))), jsxRuntime.jsx(Checkout, { entityId: entityId, onCancel: onCancel, onSuccess: onSuccess, onFail: onFail, open: payModalVisible, quote: quote, token: token, isMobile: isMobile })] })));
+            shadow: shadow,
+        } }, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink shadow-padding-xb overflow-auto ").concat(className) }, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscriptions: subscriptions })) : (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) }))) })) })));
 };
 
 var MUTATION = "\nmutation BillingDetailsUpdate(\n    $attributes: BillingDetailsAttributes!) {\n      billingDetailsUpdate(\n        attributes: $attributes\n      ) {\n        billingDetails {\n          billingCity\n          billingContact {\n            email\n          }\n          billingCountry\n          billingState\n          billingStreet\n          billingZip\n          name\n          taxNumber\n        }\n        errors\n      }\n  }\n";