@bunnyapp/components 1.0.49 → 1.0.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +300 -400
- package/dist/cjs/src/components/Signup/Signup.d.ts +3 -1
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +5 -4
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +4 -4
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +6 -6
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardFeature.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +2 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +3 -3
- package/dist/cjs/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +3 -3
- package/dist/cjs/src/graphql/mutations/accountSignup.d.ts +2 -1
- package/dist/cjs/src/graphql/mutations/quoteAccountSignup.d.ts +2 -1
- package/dist/cjs/src/graphql/queries/getPriceListChangeOptions.d.ts +9 -0
- package/dist/esm/index.js +300 -400
- package/dist/esm/src/components/Signup/Signup.d.ts +3 -1
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListGrid.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/PriceListSelector.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/EverythingPlanFeatures.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PlanFeatures.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListCardDesktop.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerDesktop/PriceListGridDesktop.d.ts +5 -4
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListCardMobile.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerMobile/PriceListGridMobile.d.ts +4 -4
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/planPickerUtils.d.ts +6 -6
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCard.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardButton.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardFeature.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPrice.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardPriceDescription.d.ts +2 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/PriceListCardTitle.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/PlanManager/PlanPicker/priceListCard/priceListCardUtils.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardActions.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionCardHeader.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/subscriptionsList/SubscriptionsList.d.ts +3 -3
- package/dist/esm/src/components/Subscriptions/subscriptionsList/subscriptionCardDesktop/SubscriptionCardDesktop.d.ts +3 -3
- package/dist/esm/src/graphql/mutations/accountSignup.d.ts +2 -1
- package/dist/esm/src/graphql/mutations/quoteAccountSignup.d.ts +2 -1
- package/dist/esm/src/graphql/queries/getPriceListChangeOptions.d.ts +9 -0
- package/dist/index.d.ts +3 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -823,13 +823,13 @@ var PlusIcon = function (_a) {
|
|
|
823
823
|
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" })] })));
|
|
824
824
|
};
|
|
825
825
|
|
|
826
|
-
var Text$
|
|
826
|
+
var Text$o = antd.Typography.Text;
|
|
827
827
|
var CreditCard = function (_a) {
|
|
828
828
|
var _b;
|
|
829
829
|
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;
|
|
830
830
|
var isMobile = common.useIsMobile();
|
|
831
831
|
var Wrapper = cardEnabled ? Card : "div";
|
|
832
|
-
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$
|
|
832
|
+
return (jsxRuntime.jsxs(Wrapper, __assign({ className: "".concat(cardEnabled ? shadow : "", " m-0") }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-4 p-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: (_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.identifier })] })), jsxRuntime.jsx(CustomizedTag, __assign({ color: isExpired(paymentMethodData) ? "red" : "green" }, { children: isExpired(paymentMethodData) ? "Expired" : "Valid" }))] })), !isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] })), dayjs(paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.expirationDate).isValid() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(antd.Divider, {}), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col p-4" }, { children: [jsxRuntime.jsx(CardAttribute, { title: "EXPIRATION", value: expirationDate(paymentMethodData) }), isMobile && (jsxRuntime.jsx(CardActions, { onClickRemove: onClickRemove, onClickUpdate: onClickUpdate }))] }))] }))] })));
|
|
833
833
|
};
|
|
834
834
|
var MiniCreditCard = function (_a) {
|
|
835
835
|
var _b, _c;
|
|
@@ -844,7 +844,7 @@ var MiniCreditCard = function (_a) {
|
|
|
844
844
|
function capitalize(str) {
|
|
845
845
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
846
846
|
}
|
|
847
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$
|
|
847
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-row justify-between items-center p-1 px-3 border-solid ".concat(backgroundColor, " ").concat(borderColor, " rounded-md border") }, { children: paymentMethodData ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-row gap-4" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2 space-between w-full" }, { children: [jsxRuntime.jsx(CardImage, { paymentMethodData: paymentMethodData }), jsxRuntime.jsx(Text$o, { children: capitalize((_b = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _b === void 0 ? void 0 : _b.issuer) }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Text$o, __assign({ className: "relative -top-0.5" }, { children: "****" })), jsxRuntime.jsx(Text$o, { children: (_c = paymentMethodData === null || paymentMethodData === void 0 ? void 0 : paymentMethodData.metadata) === null || _c === void 0 ? void 0 : _c.identifier })] })] })) })), !hideRemoveButton && (jsxRuntime.jsx(antd.Popconfirm, __assign({ title: "Remove card?", onConfirm: onClickRemove }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "font-normal p-0", type: "link" }, { children: "Remove" })) })))] })) : (jsxRuntime.jsxs("div", __assign({ className: "flex flex-row gap-2 items-center" }, { children: [jsxRuntime.jsx(icons.CreditCardOutlined, {}), jsxRuntime.jsx(Text$o, __assign({ className: "text-slate-400", style: { fontSize: "12px" } }, { children: "No payment method selected" })), jsxRuntime.jsx(antd.Button, { disabled: true, type: "link" })] }))) })));
|
|
848
848
|
};
|
|
849
849
|
var CardImage = function (_a) {
|
|
850
850
|
var _b;
|
|
@@ -876,7 +876,7 @@ var CardImage = function (_a) {
|
|
|
876
876
|
};
|
|
877
877
|
var CardAttribute = function (_a) {
|
|
878
878
|
var title = _a.title, value = _a.value;
|
|
879
|
-
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$
|
|
879
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsx("div", __assign({ className: "text-slate-400", style: { fontSize: "11px" } }, { children: title })), jsxRuntime.jsx(Text$o, { children: value })] })));
|
|
880
880
|
};
|
|
881
881
|
var CardActions = function (_a) {
|
|
882
882
|
var onClickRemove = _a.onClickRemove, onClickUpdate = _a.onClickUpdate;
|
|
@@ -1057,7 +1057,7 @@ function useSave$1(_a) {
|
|
|
1057
1057
|
return { save: save, isSaving: isSaving };
|
|
1058
1058
|
}
|
|
1059
1059
|
|
|
1060
|
-
var Text$
|
|
1060
|
+
var Text$n = antd.Typography.Text;
|
|
1061
1061
|
var TEST_CARD = "4242424242424242";
|
|
1062
1062
|
var DemoPayForm = function (_a) {
|
|
1063
1063
|
var onFail = _a.onFail, onSavePaymentMethod = _a.onSavePaymentMethod, plugin = _a.plugin;
|
|
@@ -1118,7 +1118,7 @@ var DemoPayForm = function (_a) {
|
|
|
1118
1118
|
var onCardCvcChange = function (cvc) {
|
|
1119
1119
|
setCardDetails(__assign(__assign({}, cardDetails), { cvc: cvc }));
|
|
1120
1120
|
};
|
|
1121
|
-
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$
|
|
1121
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [jsxRuntime.jsxs(StyledInputs, __assign({ className: "flex flex-col gap-2", darkMode: darkMode !== null && darkMode !== void 0 ? darkMode : false }, { children: [jsxRuntime.jsx(DemoPayCardNumber, { onChange: onCardNumberChange, value: cardDetails.number }), jsxRuntime.jsxs("div", __assign({ className: "flex gap-2" }, { children: [jsxRuntime.jsx(DemoPayExpiry, { onChange: onCardExpiryChange, value: cardDetails.expiry }), jsxRuntime.jsx(DemoPayCardCvc, { onChange: onCardCvcChange, value: cardDetails.cvc })] }))] })), jsxRuntime.jsx(Text$n, { children: "DemoPay is for testing only." }), jsxRuntime.jsx(SavePaymentMethodFooter, { isSaving: isSaving, onSave: onSave })] })));
|
|
1122
1122
|
};
|
|
1123
1123
|
var StyledInputs = defaultStyled.div(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"], ["\n .ant-input {\n background-color: ", " !important;\n }\n .ant-input:not(:focus) {\n border-color: ", " !important;\n }\n"])), function (_a) {
|
|
1124
1124
|
var darkMode = _a.darkMode;
|
|
@@ -1360,7 +1360,7 @@ var CardIcon = function () {
|
|
|
1360
1360
|
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" })] })));
|
|
1361
1361
|
};
|
|
1362
1362
|
|
|
1363
|
-
var Text$
|
|
1363
|
+
var Text$m = antd.Typography.Text;
|
|
1364
1364
|
var PaymentMethodSelector = function (_a) {
|
|
1365
1365
|
var paymentMethodAllowedPlugins = _a.paymentMethodAllowedPlugins, onSelect = _a.onSelect, value = _a.value;
|
|
1366
1366
|
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-2" }, { children: paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.map(function (plugin, index) { return (jsxRuntime.jsx(PaymentOption, { name: plugin.name, onClick: onSelect, paymentPlugin: plugin, selected: (value === null || value === void 0 ? void 0 : value.id) === plugin.id }, index)); }) })));
|
|
@@ -1373,7 +1373,7 @@ var PaymentOption = function (_a) {
|
|
|
1373
1373
|
var isCard = name === null || name === void 0 ? void 0 : name.toLowerCase().includes("card");
|
|
1374
1374
|
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
|
|
1375
1375
|
? "var(--row-background-dark) border-gray-500"
|
|
1376
|
-
: "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$
|
|
1376
|
+
: "bg-slate-50 border-slate-200", " border"), onClick: function () { return onClick(paymentPlugin); } }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex gap-2 items-center" }, { children: [jsxRuntime.jsx(antd.Checkbox, { checked: selected, className: darkMode ? "border-gray-400" : "" }), jsxRuntime.jsx(Text$m, { children: name })] })), isAch ? (jsxRuntime.jsx(icons.BankOutlined, { className: "text-slate-400" })) : isCard ? (jsxRuntime.jsx(CardIcon, {})) : (jsxRuntime.jsx(CardIcon, {}))] })));
|
|
1377
1377
|
};
|
|
1378
1378
|
var PaymentOptionContainer = defaultStyled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject(["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"], ["\n transition: border 0.3s ease;\n\n ", "\n\n &:hover {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
1379
1379
|
var $brandColor = _a.$brandColor, $selected = _a.$selected;
|
|
@@ -1839,7 +1839,7 @@ var AcceptQuoteModal = function (_a) {
|
|
|
1839
1839
|
}, open: acceptBoxVisible, title: "Accept quote", width: 400 }, { children: jsxRuntime.jsxs(antd.Form, __assign({ className: "flex flex-col gap-2", form: form, layout: "vertical" }, { children: [jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your name", name: "name", rules: createRules(true, "Your name") }, { children: jsxRuntime.jsx(antd.Input, { autoFocus: true, ref: firstInputRef }) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Your job title", name: "title", rules: createRules(true, "Your job title") }, { children: jsxRuntime.jsx(antd.Input, {}) })), jsxRuntime.jsx(antd.Form.Item, __assign({ label: "Purchase order number", name: "poNumber", rules: createRules(poNumberRequired, "Purchase order number") }, { children: jsxRuntime.jsx(antd.Input, {}) })), taxNumberRequired && (jsxRuntime.jsx(antd.Form.Item, __assign({ name: "taxNumber", label: taxNumberLabel, rules: createRules(taxNumberRequired, taxNumberLabel) }, { children: jsxRuntime.jsx(antd.Input, {}) })))] })) })));
|
|
1840
1840
|
};
|
|
1841
1841
|
|
|
1842
|
-
var Text$
|
|
1842
|
+
var Text$l = antd.Typography.Text;
|
|
1843
1843
|
defaultStyled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n span {\n width: 100%;\n }\n"], ["\n span {\n width: 100%;\n }\n"])));
|
|
1844
1844
|
function Quote(_a) {
|
|
1845
1845
|
var id = _a.id, invoiceQuoteViewComponent = _a.invoiceQuoteViewComponent, onInvoiceDownloadError = _a.onInvoiceDownloadError, onPaymentSuccess = _a.onPaymentSuccess, _b = _a.shadow, shadow = _b === void 0 ? "shadow-md" : _b, className = _a.className, _c = _a.hideDownloadButton, hideDownloadButton = _c === void 0 ? false : _c, onQuoteLoaded = _a.onQuoteLoaded;
|
|
@@ -1908,7 +1908,7 @@ function ActualQuote() {
|
|
|
1908
1908
|
var isAccepted = formattedQuote.state === "ACCEPTED";
|
|
1909
1909
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4 ".concat(isMobile ? "w-full overflow-hidden" : "bunny-shadow-padding-xb", " ").concat(className) }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-row justify-end items-center gap-4", id: "acceptance", style: {
|
|
1910
1910
|
color: entityBranding.secondaryColor,
|
|
1911
|
-
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$
|
|
1911
|
+
} }, { children: [isAccepted && formattedQuote.acceptedAt ? (jsxRuntime.jsx(Text$l, { children: "Quote was accepted by ".concat(formattedQuote.acceptedByName, " on ").concat(common.formatDate(formattedQuote.acceptedAt)) })) : null, (!isMobile || !isAccepted) && (jsxRuntime.jsxs("div", __assign({ className: isMobile
|
|
1912
1912
|
? "flex w-full justify-end gap-2"
|
|
1913
1913
|
: "flex items-center justify-end gap-2" }, { children: [!isMobile && !hideDownloadButton ? (jsxRuntime.jsx(antd.Button, __assign({ icon: jsxRuntime.jsx(icons.DownloadOutlined, {}), onClick: function () {
|
|
1914
1914
|
return downloadFile(apiHost + "/api/pdf/quote", token);
|
|
@@ -19214,10 +19214,10 @@ var getColor = function (state) {
|
|
|
19214
19214
|
}
|
|
19215
19215
|
};
|
|
19216
19216
|
|
|
19217
|
-
var Text$
|
|
19217
|
+
var Text$k = antd.Typography.Text;
|
|
19218
19218
|
var TransactionDate = function (_a) {
|
|
19219
19219
|
var date = _a.date;
|
|
19220
|
-
return jsxRuntime.jsx(Text$
|
|
19220
|
+
return jsxRuntime.jsx(Text$k, __assign({ className: "text-sm" }, { children: common.formatDate(date) }));
|
|
19221
19221
|
};
|
|
19222
19222
|
|
|
19223
19223
|
var ArrowDownToLine = function (_a) {
|
|
@@ -19254,10 +19254,10 @@ var TransactionGridCell = defaultStyled.div.withConfig({
|
|
|
19254
19254
|
}, common.SLATE_600);
|
|
19255
19255
|
var templateObject_1$6;
|
|
19256
19256
|
|
|
19257
|
-
var Text$
|
|
19257
|
+
var Text$j = antd.Typography.Text;
|
|
19258
19258
|
var TransactionsEmptyState = function () {
|
|
19259
19259
|
var noTransactionsMessage = react.useContext(TransactionsListContext).noTransactionsMessage;
|
|
19260
|
-
return (jsxRuntime.jsx(Text$
|
|
19260
|
+
return (jsxRuntime.jsx(Text$j, __assign({ className: "flex justify-center p-4 text-base" }, { children: noTransactionsMessage || "There are no transactions" })));
|
|
19261
19261
|
};
|
|
19262
19262
|
|
|
19263
19263
|
var isInvoice = function (transaction) {
|
|
@@ -19290,7 +19290,7 @@ function transactionDateToDisplay(transaction, transactionDateType) {
|
|
|
19290
19290
|
}
|
|
19291
19291
|
}
|
|
19292
19292
|
|
|
19293
|
-
var Text$
|
|
19293
|
+
var Text$i = antd.Typography.Text;
|
|
19294
19294
|
var TransactionsListDesktop = function (_a) {
|
|
19295
19295
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
19296
19296
|
var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
|
|
@@ -19319,11 +19319,11 @@ var TransactionsListDesktop = function (_a) {
|
|
|
19319
19319
|
!showState &&
|
|
19320
19320
|
!showAmount &&
|
|
19321
19321
|
!showDownload &&
|
|
19322
|
-
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$
|
|
19322
|
+
!showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$i, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$i, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
|
|
19323
19323
|
}) }));
|
|
19324
19324
|
};
|
|
19325
19325
|
|
|
19326
|
-
var Text$
|
|
19326
|
+
var Text$h = antd.Typography.Text;
|
|
19327
19327
|
var TransactionsListMobile = function (_a) {
|
|
19328
19328
|
var transactions = _a.transactions, onTransactionClick = _a.onTransactionClick;
|
|
19329
19329
|
var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
|
|
@@ -19346,12 +19346,12 @@ var TransactionsListMobile = function (_a) {
|
|
|
19346
19346
|
backgroundColor: index % 2 === 0
|
|
19347
19347
|
? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
|
|
19348
19348
|
: "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
|
|
19349
|
-
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$
|
|
19349
|
+
} }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$h, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$h, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$h, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$h, { children: common.formatCurrency(transaction.transactionable.amount ||
|
|
19350
19350
|
transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
|
|
19351
19351
|
}) }));
|
|
19352
19352
|
};
|
|
19353
19353
|
|
|
19354
|
-
var Text$
|
|
19354
|
+
var Text$g = antd.Typography.Text;
|
|
19355
19355
|
var DISPLAY_WIDTH = 1200;
|
|
19356
19356
|
function Transactions(_a) {
|
|
19357
19357
|
var transactionComponent = _a.transactionComponent, _b = _a.showSearchBar, showSearchBar = _b === void 0 ? true : _b, _c = _a.showTitle, showTitle = _c === void 0 ? true : _c, _d = _a.title, title = _d === void 0 ? "Past transactions" : _d, _e = _a.columns, columns = _e === void 0 ? ["date", "title", "state", "amount", "download"] : _e, className = _a.className, _f = _a.shadow, shadow = _f === void 0 ? "shadow-md" : _f, searchBarClassName = _a.searchBarClassName, _g = _a.useModal, useModal = _g === void 0 ? false : _g, onTransactionClick = _a.onTransactionClick, _h = _a.suppressTransactionDisplay, suppressTransactionDisplay = _h === void 0 ? false : _h, _j = _a.kindsToShow, kindsToShow = _j === void 0 ? [
|
|
@@ -19464,7 +19464,7 @@ function TransactionsDisplay(_a) {
|
|
|
19464
19464
|
onTransactionDisplayClose === null || onTransactionDisplayClose === void 0 ? void 0 : onTransactionDisplayClose(selectedTransaction);
|
|
19465
19465
|
setDrawerOpen(false);
|
|
19466
19466
|
}
|
|
19467
|
-
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full bunny-shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$
|
|
19467
|
+
return (jsxRuntime.jsxs("div", __assign({ style: style }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col w-full bunny-shadow-padding-xb gap-2 ".concat(isMobile ? "overflow-hidden" : "", " ").concat(className) }, { children: [showTitle || showSearchBar ? (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col gap-1" : "flex-row items-center", " justify-between") }, { children: [showTitle ? (jsxRuntime.jsx(Text$g, __assign({ className: "shrink-0 font-medium", style: { color: darkMode ? undefined : secondaryColor } }, { children: title }))) : (jsxRuntime.jsx("div", {}) // Empty div so justify-between works
|
|
19468
19468
|
), showSearchBar && (jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(antd.Input, { className: searchBarClassName
|
|
19469
19469
|
? searchBarClassName
|
|
19470
19470
|
: "border border-slate-200", onChange: function (e) {
|
|
@@ -19609,10 +19609,10 @@ var getBillingDetails = function (_a) {
|
|
|
19609
19609
|
});
|
|
19610
19610
|
};
|
|
19611
19611
|
|
|
19612
|
-
var Text$
|
|
19612
|
+
var Text$f = antd.Typography.Text;
|
|
19613
19613
|
var DrawerHeader = function (_a) {
|
|
19614
19614
|
var description = _a.description, onClose = _a.onClose, title = _a.title, closeButtonClassName = _a.closeButtonClassName;
|
|
19615
|
-
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$
|
|
19615
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-4" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between gap-2" }, { children: [jsxRuntime.jsx(Text$f, __assign({ className: "text-xl", style: { fontWeight: 400 } }, { children: title })), onClose ? (jsxRuntime.jsx("button", __assign({ id: "closePayment", onClick: onClose, className: closeButtonClassName }, { children: jsxRuntime.jsx(icons.CloseOutlined, {}) }))) : null] })), description && jsxRuntime.jsx("div", __assign({ className: "text-xs" }, { children: description }))] })));
|
|
19616
19616
|
};
|
|
19617
19617
|
|
|
19618
19618
|
var PaymentMethod = function (_a) {
|
|
@@ -19678,9 +19678,9 @@ var PaymentMethodDisplay = function (_a) {
|
|
|
19678
19678
|
}, title: jsxRuntime.jsx(DrawerHeader, { onClose: function () { return setShowModal(false); }, title: "New payment method", closeButtonClassName: "ant-drawer-close" }) }, { children: children })));
|
|
19679
19679
|
};
|
|
19680
19680
|
|
|
19681
|
-
var MUTATION$6 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!\n) {\n accountSignup(\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}"; };
|
|
19681
|
+
var MUTATION$6 = function () { return "\nmutation AccountSignup (\n $pluginId: String!,\n $paymentMethodId: String,\n $priceListCode: String!,\n $accountId: ID!,\n $quoteId: ID!,\n $entityId: ID!\n) {\n accountSignup(\n pluginId: $pluginId,\n paymentMethodId: $paymentMethodId,\n priceListCode: $priceListCode,\n accountId: $accountId,\n quoteId: $quoteId,\n entityId: $entityId\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}"; };
|
|
19682
19682
|
var accountSignup = function (_a) {
|
|
19683
|
-
var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode;
|
|
19683
|
+
var token = _a.token, apiHost = _a.apiHost, accountId = _a.accountId, quoteId = _a.quoteId, paymentToken = _a.paymentToken, paymentMethodId = _a.paymentMethodId, pluginId = _a.pluginId, priceListCode = _a.priceListCode, entityId = _a.entityId;
|
|
19684
19684
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19685
19685
|
var vars, response, errors;
|
|
19686
19686
|
var _b;
|
|
@@ -19694,6 +19694,7 @@ var accountSignup = function (_a) {
|
|
|
19694
19694
|
pluginId: pluginId,
|
|
19695
19695
|
paymentMethodId: paymentMethodId,
|
|
19696
19696
|
priceListCode: priceListCode,
|
|
19697
|
+
entityId: entityId,
|
|
19697
19698
|
};
|
|
19698
19699
|
return [4 /*yield*/, common.gqlRequest({
|
|
19699
19700
|
query: MUTATION$6(),
|
|
@@ -19712,9 +19713,9 @@ var accountSignup = function (_a) {
|
|
|
19712
19713
|
});
|
|
19713
19714
|
};
|
|
19714
19715
|
|
|
19715
|
-
var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!\n) {\n quoteAccountSignup(\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}"; };
|
|
19716
|
+
var MUTATION$5 = function () { return "\nmutation QuoteAccountSignup (\n $accountName: String!,\n $billingContact: ContactAttributes!,\n $priceListCode: String!,\n $entityId: ID!\n) {\n quoteAccountSignup(\n priceListCode: $priceListCode,\n accountName: $accountName,\n billingContact: $billingContact,\n entityId: $entityId\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}"; };
|
|
19716
19717
|
var quoteAccountSignup = function (_a) {
|
|
19717
|
-
var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact;
|
|
19718
|
+
var token = _a.token, apiHost = _a.apiHost, priceListCode = _a.priceListCode, accountName = _a.accountName, billingContact = _a.billingContact, entityId = _a.entityId;
|
|
19718
19719
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
19719
19720
|
var vars, response, errors;
|
|
19720
19721
|
var _b;
|
|
@@ -19725,6 +19726,7 @@ var quoteAccountSignup = function (_a) {
|
|
|
19725
19726
|
priceListCode: priceListCode,
|
|
19726
19727
|
accountName: accountName,
|
|
19727
19728
|
billingContact: billingContact,
|
|
19729
|
+
entityId: entityId,
|
|
19728
19730
|
};
|
|
19729
19731
|
return [4 /*yield*/, common.gqlRequest({
|
|
19730
19732
|
query: MUTATION$5(),
|
|
@@ -19785,23 +19787,23 @@ function InitialSignupForm(_a) {
|
|
|
19785
19787
|
] }, { children: jsxRuntime.jsx(antd.Input, { placeholder: "Company name" }) }))] })), jsxRuntime.jsx(antd.Form.Item, { children: jsxRuntime.jsx(antd.Button, __assign({ type: "primary", onClick: handleSubmit, loading: submitting, className: "w-full mt-4" }, { children: "Proceed to payment" })) })] })));
|
|
19786
19788
|
}
|
|
19787
19789
|
|
|
19788
|
-
var Title = antd.Typography.Title, Text$
|
|
19790
|
+
var Title = antd.Typography.Title, Text$e = antd.Typography.Text;
|
|
19789
19791
|
function PaymentSuccessDisplay(_a) {
|
|
19790
19792
|
var amountPaid = _a.amountPaid, className = _a.className, companyName = _a.companyName, returnUrl = _a.returnUrl, style = _a.style, currencyId = _a.currencyId;
|
|
19791
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$
|
|
19793
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-center h-full ".concat(className), style: style }, { children: [jsxRuntime.jsx(icons.CheckCircleFilled, { style: { fontSize: "48px", color: "rgb(52 211 153)" } }), jsxRuntime.jsxs(Title, __assign({ level: 3, className: "mt-2 m-0" }, { children: ["Payment of ", common.formatCurrency(amountPaid, currencyId), " successful"] })), returnUrl && (jsxRuntime.jsxs(Text$e, __assign({ className: "text-slate-500 cursor-pointer underline", onClick: function () { return (window.location.href = returnUrl); } }, { children: ["Back to ", companyName] })))] })));
|
|
19792
19794
|
}
|
|
19793
19795
|
|
|
19794
|
-
var Text$
|
|
19796
|
+
var Text$d = antd.Typography.Text;
|
|
19795
19797
|
function PriceListDisplay(_a) {
|
|
19796
19798
|
var priceListData = _a.priceListData, topNavImageUrl = _a.topNavImageUrl;
|
|
19797
19799
|
if (!priceListData)
|
|
19798
19800
|
return null;
|
|
19799
|
-
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$
|
|
19801
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", __assign({ className: "flex flex-col justify-between h-full my-12" }, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col space-y-8" }, { children: [jsxRuntime.jsx(antd.Image, { width: 24, src: topNavImageUrl, alt: "Logo", preview: false }), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500 font-bold text-lg" }, { children: priceListData.name })), jsxRuntime.jsxs(Text$d, __assign({ className: "font-bold text-xl" }, { children: [common.formatCurrency(priceListData.basePrice, priceListData.currencyId), " ", "/ month"] }))] })), priceListData.trialAllowed ? (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col" }, { children: [jsxRuntime.jsxs(Text$d, __assign({ style: { fontSize: "16px" }, className: "text-slate-500" }, { children: [priceListData.trialLengthDays, " day trial"] })), jsxRuntime.jsx(Text$d, __assign({ className: "text-slate-500", style: { fontSize: "12px" } }, { children: "You will not be charged until the last day of the trial." }))] }))) : null] })) })) }));
|
|
19800
19802
|
}
|
|
19801
19803
|
|
|
19802
19804
|
var showErrorNotification = common.useErrorNotification();
|
|
19803
19805
|
function Signup(_a) {
|
|
19804
|
-
var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style;
|
|
19806
|
+
var companyName = _a.companyName, priceListCode = _a.priceListCode, returnUrl = _a.returnUrl, _b = _a.isCardEnabled, isCardEnabled = _b === void 0 ? true : _b, className = _a.className, _c = _a.shadow, shadow = _c === void 0 ? "shadow-md" : _c, style = _a.style, entityId = _a.entityId;
|
|
19805
19807
|
// Hooks
|
|
19806
19808
|
var _d = react.useContext(BunnyContext), apiHost = _d.apiHost, graphQLClient = _d.graphQLClient;
|
|
19807
19809
|
var tokenFromContexts = useToken();
|
|
@@ -19843,6 +19845,7 @@ function Signup(_a) {
|
|
|
19843
19845
|
lastName: formData.lastName,
|
|
19844
19846
|
email: formData.email,
|
|
19845
19847
|
},
|
|
19848
|
+
entityId: entityId,
|
|
19846
19849
|
})];
|
|
19847
19850
|
case 1:
|
|
19848
19851
|
data = _a.sent();
|
|
@@ -19902,6 +19905,7 @@ function Signup(_a) {
|
|
|
19902
19905
|
pluginId: plugin === null || plugin === void 0 ? void 0 : plugin.id.toString(),
|
|
19903
19906
|
priceListCode: priceListCode,
|
|
19904
19907
|
accountId: accountId,
|
|
19908
|
+
entityId: entityId,
|
|
19905
19909
|
})];
|
|
19906
19910
|
case 1: return [2 /*return*/, _a.sent()];
|
|
19907
19911
|
}
|
|
@@ -19917,7 +19921,7 @@ function Signup(_a) {
|
|
|
19917
19921
|
};
|
|
19918
19922
|
return (jsxRuntime.jsx(WrapperComponent, __assign({ className: "p-4 flex flex-col ".concat(shadow, " ").concat(className), style: style }, { children: purchaseSucceeded ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (quote === null || quote === void 0 ? void 0 : quote.currencyId) !== undefined ? (jsxRuntime.jsx(PaymentSuccessDisplay, { amountPaid: (quote === null || quote === void 0 ? void 0 : quote.amountDue) || 0, className: "w-full", companyName: companyName, returnUrl: returnUrl, currencyId: quote === null || quote === void 0 ? void 0 : quote.currencyId })) : (jsxRuntime.jsx("div", { children: "No currency ID found from Quote" })) })) : (jsxRuntime.jsxs("div", __assign({ className: "flex ".concat(isMobile ? "flex-col" : "flex-row", " h-full w-full") }, { children: [jsxRuntime.jsx("div", __assign({ className: "flex flex-col ".concat(isMobile ? "items-center" : "w-1/2 items-center") }, { children: jsxRuntime.jsx(PriceListDisplay, { priceListData: priceListData, topNavImageUrl: topNavImageUrl }) })), jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "h-full" : "my-4") }, { children: jsxRuntime.jsx(antd.Divider, { className: "h-full", type: isMobile ? undefined : "vertical" }) })), jsxRuntime.jsx("div", __assign({ className: "flex ".concat(isMobile
|
|
19919
19923
|
? "items-center justify-center my-12"
|
|
19920
|
-
: "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "
|
|
19924
|
+
: "w-1/2 items-center justify-center my-12") }, { children: jsxRuntime.jsx("div", __assign({ className: "".concat(isMobile ? "w-full" : "") }, { children: jsxRuntime.jsx(PaymentForms, { quote: quote, handlePaymentSuccess: handlePaymentSuccess, handlePaymentFail: handlePaymentFail, handleSubmit: handleSubmit, proceedingToPayment: proceedingToPayment, accountId: accountId, overrideToken: portalSessionToken, customCheckoutFunction: accountSignupFunction }) })) }))] }))) })));
|
|
19921
19925
|
}
|
|
19922
19926
|
|
|
19923
19927
|
var createRequestHeaders = function (token) {
|
|
@@ -20505,13 +20509,13 @@ var billingPeriodConverter = function (period) {
|
|
|
20505
20509
|
|
|
20506
20510
|
var removeHTMLTagsRegex = /<br>(?=(?:\s*<[^>]*>)*$)|(<br>)|<[^>]*>/gi;
|
|
20507
20511
|
// Description is a string that can contain HTML tags. We want to remove all HTML tags except <br> tags.
|
|
20508
|
-
var createPlanDescription = function (
|
|
20509
|
-
return (plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
|
|
20512
|
+
var createPlanDescription = function (priceList) {
|
|
20513
|
+
return (priceList.plan.description || "").replace(removeHTMLTagsRegex, function (x, y) {
|
|
20510
20514
|
return y ? " & " : "";
|
|
20511
20515
|
});
|
|
20512
20516
|
};
|
|
20513
|
-
var getActivePlanPriceData = function (
|
|
20514
|
-
if (!
|
|
20517
|
+
var getActivePlanPriceData = function (priceList, selectedPriceList) {
|
|
20518
|
+
if (!priceList) {
|
|
20515
20519
|
return;
|
|
20516
20520
|
}
|
|
20517
20521
|
// If a period option is selected, return the charge that matches the selected period option
|
|
@@ -20519,33 +20523,28 @@ var getActivePlanPriceData = function (plan, selectedPriceList) {
|
|
|
20519
20523
|
// Default to first price list charge
|
|
20520
20524
|
var lowestPLCharge;
|
|
20521
20525
|
// Find the lowest price list charge with a billing period that matches the selected period option
|
|
20522
|
-
|
|
20523
|
-
|
|
20524
|
-
|
|
20525
|
-
|
|
20526
|
-
|
|
20527
|
-
|
|
20528
|
-
|
|
20529
|
-
|
|
20530
|
-
if
|
|
20531
|
-
|
|
20532
|
-
|
|
20533
|
-
// If we already found a charge with the same billing period check if this charge is lower
|
|
20534
|
-
if (charge.basePrice < activeBillingPLCharge.basePrice &&
|
|
20535
|
-
charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
|
|
20536
|
-
activeBillingPLCharge = charge;
|
|
20537
|
-
}
|
|
20538
|
-
}
|
|
20539
|
-
// If a period option is selected, only return the charge if it matches the selected period option
|
|
20540
|
-
else if (selectedPriceList &&
|
|
20541
|
-
charge.billingPeriod ===
|
|
20542
|
-
periodMonthsConverter(selectedPriceList.periodMonths)) {
|
|
20526
|
+
if (priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id)) {
|
|
20527
|
+
activeBillingPLCharge = priceList.charges[0];
|
|
20528
|
+
}
|
|
20529
|
+
for (var j = 0; j < priceList.charges.length; j++) {
|
|
20530
|
+
var charge = priceList.charges[j];
|
|
20531
|
+
if (charge.chargeType === common.ChargeType.USAGE)
|
|
20532
|
+
continue;
|
|
20533
|
+
if (activeBillingPLCharge) {
|
|
20534
|
+
// If we already found a charge with the same billing period check if this charge is lower
|
|
20535
|
+
if (charge.basePrice < activeBillingPLCharge.basePrice &&
|
|
20536
|
+
charge.billingPeriod === (activeBillingPLCharge === null || activeBillingPLCharge === void 0 ? void 0 : activeBillingPLCharge.billingPeriod)) {
|
|
20543
20537
|
activeBillingPLCharge = charge;
|
|
20544
20538
|
}
|
|
20545
|
-
|
|
20546
|
-
|
|
20547
|
-
|
|
20548
|
-
|
|
20539
|
+
}
|
|
20540
|
+
// If a period option is selected, only return the charge if it matches the selected period option
|
|
20541
|
+
else if (selectedPriceList &&
|
|
20542
|
+
charge.billingPeriod === periodMonthsConverter(selectedPriceList.periodMonths)) {
|
|
20543
|
+
activeBillingPLCharge = charge;
|
|
20544
|
+
}
|
|
20545
|
+
// Otherwise, return the lowest price list charge
|
|
20546
|
+
else if (charge.basePrice < ((lowestPLCharge === null || lowestPLCharge === void 0 ? void 0 : lowestPLCharge.basePrice) || -1)) {
|
|
20547
|
+
lowestPLCharge = charge;
|
|
20549
20548
|
}
|
|
20550
20549
|
}
|
|
20551
20550
|
return {
|
|
@@ -20565,8 +20564,7 @@ var isPriceListDisabled = function (_a) {
|
|
|
20565
20564
|
var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
|
|
20566
20565
|
// Is this plan the one that the user is upgrading from
|
|
20567
20566
|
var isUpgradingPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id;
|
|
20568
|
-
if ((subscriptionPlan && !isUpgradingPlan) ||
|
|
20569
|
-
isPriceListCurrentSubscription) {
|
|
20567
|
+
if ((subscriptionPlan && !isUpgradingPlan) || isPriceListCurrentSubscription) {
|
|
20570
20568
|
disableOnClick = true;
|
|
20571
20569
|
}
|
|
20572
20570
|
return disableOnClick;
|
|
@@ -20591,7 +20589,7 @@ var CheckoutPrice = function (_a) {
|
|
|
20591
20589
|
};
|
|
20592
20590
|
|
|
20593
20591
|
var CheckoutBarSummarySection = function (_a) {
|
|
20594
|
-
var _b
|
|
20592
|
+
var _b;
|
|
20595
20593
|
var open = _a.open, quantityLocal = _a.quantityLocal, quote = _a.quote, selectedPriceList = _a.selectedPriceList, onClickCheckout = _a.onClickCheckout, upgradingSubscription = _a.upgradingSubscription, quotePreviewData = _a.quotePreviewData;
|
|
20596
20594
|
// Context
|
|
20597
20595
|
var apiHost = react.useContext(BunnyContext).apiHost;
|
|
@@ -20616,12 +20614,7 @@ var CheckoutBarSummarySection = function (_a) {
|
|
|
20616
20614
|
isFetching ||
|
|
20617
20615
|
selectedPriceList.id === (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) ||
|
|
20618
20616
|
open);
|
|
20619
|
-
var
|
|
20620
|
-
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
20621
|
-
token: token,
|
|
20622
|
-
}));
|
|
20623
|
-
var selectedPlan = (_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.find(function (plan) { return plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id); });
|
|
20624
|
-
var activeCharge = (_c = getActivePlanPriceData(selectedPlan, selectedPriceList)) === null || _c === void 0 ? void 0 : _c.activeCharge;
|
|
20617
|
+
var activeCharge = (_b = getActivePlanPriceData(selectedPriceList, selectedPriceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
|
|
20625
20618
|
var isUsage = (activeCharge === null || activeCharge === void 0 ? void 0 : activeCharge.chargeType) === common.ChargeType.USAGE;
|
|
20626
20619
|
var hasPaymentMethodsOrIsFree = Boolean(paymentMethodAllowedPlugins === null || paymentMethodAllowedPlugins === void 0 ? void 0 : paymentMethodAllowedPlugins.length) ||
|
|
20627
20620
|
Boolean(quote && getQuoteAmountDue(quote) === 0);
|
|
@@ -20763,64 +20756,35 @@ var PlanPickerCheckoutBar = function (_a) {
|
|
|
20763
20756
|
};
|
|
20764
20757
|
|
|
20765
20758
|
// WARNING: There is a preview button on APP that will need to be changed if this query is changed
|
|
20766
|
-
var
|
|
20767
|
-
var
|
|
20768
|
-
var isInPreviewMode = _a.isInPreviewMode,
|
|
20759
|
+
var PRICE_LIST_CHANGE_OPTIONS_QUERY = "\n query priceListChangeOptions($subscriptionId: ID, $productId: ID) {\n priceListChangeOptions(subscriptionId: $subscriptionId, productId: $productId) {\n products {\n everythingInPlus\n id\n name\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n code\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }";
|
|
20760
|
+
var getPriceListChangeOptions = function (_a) {
|
|
20761
|
+
var apiHost = _a.apiHost, isInPreviewMode = _a.isInPreviewMode, productId = _a.productId, token = _a.token, upgradingSubscription = _a.upgradingSubscription;
|
|
20769
20762
|
return __awaiter(void 0, void 0, void 0, function () {
|
|
20770
|
-
var response,
|
|
20763
|
+
var response, priceListChangeOptions;
|
|
20771
20764
|
return __generator(this, function (_b) {
|
|
20772
20765
|
switch (_b.label) {
|
|
20773
20766
|
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
20774
20767
|
isInPreviewMode: isInPreviewMode,
|
|
20775
|
-
query:
|
|
20776
|
-
vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id },
|
|
20768
|
+
query: PRICE_LIST_CHANGE_OPTIONS_QUERY,
|
|
20769
|
+
vars: { subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id, productId: productId },
|
|
20777
20770
|
token: token,
|
|
20778
20771
|
apiHost: apiHost,
|
|
20779
20772
|
})];
|
|
20780
20773
|
case 1:
|
|
20781
20774
|
response = _b.sent();
|
|
20782
|
-
|
|
20783
|
-
if (
|
|
20784
|
-
throw
|
|
20775
|
+
priceListChangeOptions = response;
|
|
20776
|
+
if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.errors)
|
|
20777
|
+
throw priceListChangeOptions.errors;
|
|
20785
20778
|
// Sort planChangeOptions.plans by position
|
|
20786
|
-
if (
|
|
20787
|
-
|
|
20779
|
+
if (priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) {
|
|
20780
|
+
priceListChangeOptions.priceLists.sort(function (a, b) { return a.plan.position - b.plan.position; });
|
|
20788
20781
|
}
|
|
20789
|
-
return [2 /*return*/,
|
|
20782
|
+
return [2 /*return*/, priceListChangeOptions];
|
|
20790
20783
|
}
|
|
20791
20784
|
});
|
|
20792
20785
|
});
|
|
20793
20786
|
};
|
|
20794
20787
|
|
|
20795
|
-
var portalPreviewQuery = function (id) { return "\nquery portalPreviewQuery {\n product(id: ".concat(id, ") {\n everythingInPlus\n id\n name\n features(sort: \"position asc\") {\n description\n id\n isVisible\n kind\n name\n position\n }\n }\n plans(filter: \"plan.productId is ").concat(id, "\") {\n nodes {\n\t\t\tcode\n contactUsLabel\n contactUsUrl\n description\n id\n name\n position\n pricingDescription\n pricingStyle\n planFeatures {\n featureId\n value\n feature {\n name\n }\n }\n priceLists {\n basePrice\n id\n currencyId\n periodMonths\n plan {\n id\n position\n }\n product {\n id\n }\n charges {\n basePrice\n billingPeriod\n chargeType\n id\n name\n priceDecimals\n pricingModel\n quantityMax\n quantityMin\n selfServiceQuantity\n feature {\n name\n unitName\n }\n }\n }\n }\n }\n}"); };
|
|
20796
|
-
var getPortalPreviewData = function (id, apiHost, token) { return __awaiter(void 0, void 0, void 0, function () {
|
|
20797
|
-
var response;
|
|
20798
|
-
return __generator(this, function (_a) {
|
|
20799
|
-
switch (_a.label) {
|
|
20800
|
-
case 0: return [4 /*yield*/, common.gqlRequest({
|
|
20801
|
-
isInPreviewMode: true,
|
|
20802
|
-
query: portalPreviewQuery(id),
|
|
20803
|
-
token: token || "",
|
|
20804
|
-
apiHost: apiHost,
|
|
20805
|
-
})];
|
|
20806
|
-
case 1:
|
|
20807
|
-
response = _a.sent();
|
|
20808
|
-
if (response.product && response.plans) {
|
|
20809
|
-
response.plans = response.plans.nodes;
|
|
20810
|
-
response.products = [response.product];
|
|
20811
|
-
delete response.product;
|
|
20812
|
-
// Sort plans by position
|
|
20813
|
-
if (response.plans) {
|
|
20814
|
-
response.plans.sort(function (a, b) { return a.position - b.position; });
|
|
20815
|
-
}
|
|
20816
|
-
return [2 /*return*/, response];
|
|
20817
|
-
}
|
|
20818
|
-
else
|
|
20819
|
-
throw response;
|
|
20820
|
-
}
|
|
20821
|
-
});
|
|
20822
|
-
}); };
|
|
20823
|
-
|
|
20824
20788
|
var ErrorView = function (_a) {
|
|
20825
20789
|
var children = _a.children, message = _a.message;
|
|
20826
20790
|
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] })));
|
|
@@ -20857,105 +20821,57 @@ var StyledRadioGroup = styled__default["default"].div(templateObject_2 || (templ
|
|
|
20857
20821
|
});
|
|
20858
20822
|
var templateObject_1$4, templateObject_2;
|
|
20859
20823
|
|
|
20860
|
-
var NextPriceListButton = function (_a) {
|
|
20861
|
-
var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
|
|
20862
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
20863
|
-
setPriceListStart(function (prev) {
|
|
20864
|
-
var newValue = prev - 1;
|
|
20865
|
-
if (newValue < 0) {
|
|
20866
|
-
return prev;
|
|
20867
|
-
}
|
|
20868
|
-
return newValue;
|
|
20869
|
-
});
|
|
20870
|
-
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
20871
|
-
return setPriceListStart(function (prev) {
|
|
20872
|
-
var newValue = prev + 1;
|
|
20873
|
-
if (newValue >= availablePriceLists.length) {
|
|
20874
|
-
return prev;
|
|
20875
|
-
}
|
|
20876
|
-
return newValue;
|
|
20877
|
-
});
|
|
20878
|
-
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
|
|
20879
|
-
};
|
|
20880
|
-
|
|
20881
|
-
var getAvailablePlansAndPriceLists = function (_a) {
|
|
20882
|
-
var availablePriceLists = _a.availablePriceLists, planChangeOptions = _a.planChangeOptions, priceListStart = _a.priceListStart;
|
|
20883
|
-
var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
|
|
20884
|
-
var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (priceList) {
|
|
20885
|
-
var _a;
|
|
20886
|
-
var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
|
|
20887
|
-
return plan;
|
|
20888
|
-
});
|
|
20889
|
-
return {
|
|
20890
|
-
availablePlansArray: availablePlansArray,
|
|
20891
|
-
displayPriceLists: displayPriceLists,
|
|
20892
|
-
};
|
|
20893
|
-
};
|
|
20894
|
-
var everythingInPlusString = function (_a) {
|
|
20895
|
-
var plan = _a.plan;
|
|
20896
|
-
return "Everything in ".concat(plan.name, ", plus");
|
|
20897
|
-
};
|
|
20898
|
-
|
|
20899
|
-
var PLAN_GRID_PADDING = 4;
|
|
20900
|
-
var PlanPickerGridCell = function (_a) {
|
|
20901
|
-
var children = _a.children, noBorder = _a.noBorder;
|
|
20902
|
-
var isMobile = common.useIsMobile();
|
|
20903
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
|
|
20904
|
-
? {}
|
|
20905
|
-
: __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
|
|
20906
|
-
};
|
|
20907
|
-
|
|
20908
20824
|
var PriceListCardTitle = function (_a) {
|
|
20909
|
-
var
|
|
20825
|
+
var priceList = _a.priceList, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, trialRemainingDays = _a.trialRemainingDays;
|
|
20910
20826
|
var isMobile = common.useIsMobile();
|
|
20911
20827
|
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-4" }, { children: [Boolean(trialRemainingDays) && (jsxRuntime.jsx("div", __assign({ className: "font-medium text-secondary", style: { height: "1rem" } }, { children: isPriceListCurrentSubscription
|
|
20912
20828
|
? "Trial ends in ".concat(trialRemainingDays, " day").concat(trialRemainingDays === 1 ? "" : "s")
|
|
20913
|
-
: " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: plan.name }))] })));
|
|
20914
|
-
};
|
|
20915
|
-
|
|
20916
|
-
var Text$e = antd.Typography.Text;
|
|
20917
|
-
var PriceListCardDescription = function (_a) {
|
|
20918
|
-
var description = _a.description;
|
|
20919
|
-
if (!description)
|
|
20920
|
-
return null;
|
|
20921
|
-
return jsxRuntime.jsx(Text$e, __assign({ className: "text-center" }, { children: description }));
|
|
20829
|
+
: " " }))), jsxRuntime.jsx("div", __assign({ className: "font-medium text-center ".concat(isMobile ? "text-slate-500" : "text-orange-600"), style: { fontSize: "20px" } }, { children: priceList.plan.name }))] })));
|
|
20922
20830
|
};
|
|
20923
20831
|
|
|
20924
20832
|
var PriceListCardPrice = function (_a) {
|
|
20925
|
-
var
|
|
20926
|
-
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !plan.pricingStyle || plan.pricingStyle === common.PricingStyle.PRICED
|
|
20833
|
+
var priceList = _a.priceList;
|
|
20834
|
+
return (jsxRuntime.jsx("div", __assign({ className: "font-medium text-center text-gray-900", style: { fontSize: "32px" } }, { children: !priceList.plan.pricingStyle || priceList.plan.pricingStyle === common.PricingStyle.PRICED
|
|
20927
20835
|
? common.formatCurrency(priceList.basePrice, priceList.currencyId, 0)
|
|
20928
|
-
: plan.pricingStyle === common.PricingStyle.CONTACT_US
|
|
20836
|
+
: priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US
|
|
20929
20837
|
? ""
|
|
20930
20838
|
: "Free" })));
|
|
20931
20839
|
};
|
|
20932
20840
|
|
|
20933
|
-
var Text$
|
|
20841
|
+
var Text$c = antd.Typography.Text;
|
|
20842
|
+
var PriceListCardDescription = function (_a) {
|
|
20843
|
+
var description = _a.description;
|
|
20844
|
+
if (!description)
|
|
20845
|
+
return null;
|
|
20846
|
+
return jsxRuntime.jsx(Text$c, __assign({ className: "text-center" }, { children: description }));
|
|
20847
|
+
};
|
|
20848
|
+
|
|
20849
|
+
var Text$b = antd.Typography.Text;
|
|
20934
20850
|
var PriceListCardPriceDescription = function (_a) {
|
|
20935
|
-
var feature = _a.feature,
|
|
20851
|
+
var feature = _a.feature, priceList = _a.priceList;
|
|
20936
20852
|
var isMobile = common.useIsMobile();
|
|
20937
|
-
var doesPlanHaveFlatFeeCharges =
|
|
20938
|
-
|
|
20939
|
-
return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0;
|
|
20940
|
-
});
|
|
20941
|
-
});
|
|
20942
|
-
if (priceList.periodMonths <= 0 || plan.pricingStyle !== common.PricingStyle.PRICED)
|
|
20853
|
+
var doesPlanHaveFlatFeeCharges = priceList.charges.some(function (charge) { return charge.pricingModel === common.PricingModel.FLAT && charge.basePrice > 0; });
|
|
20854
|
+
if (priceList.periodMonths <= 0 || priceList.plan.pricingStyle !== common.PricingStyle.PRICED)
|
|
20943
20855
|
return null;
|
|
20944
|
-
return (jsxRuntime.jsx(Text$
|
|
20856
|
+
return (jsxRuntime.jsx(Text$b, __assign({ className: "text-center text-gray-900", style: {
|
|
20945
20857
|
fontSize: isMobile ? "13px" : "12px",
|
|
20946
|
-
} }, { children: plan.pricingDescription
|
|
20947
|
-
? plan.pricingDescription
|
|
20858
|
+
} }, { children: priceList.plan.pricingDescription
|
|
20859
|
+
? priceList.plan.pricingDescription
|
|
20948
20860
|
: "per ".concat((feature === null || feature === void 0 ? void 0 : feature.unitName) && !doesPlanHaveFlatFeeCharges
|
|
20949
20861
|
? "".concat(feature.unitName.toLowerCase(), " / ")
|
|
20950
20862
|
: "").concat(common.PERIOD_LABELS[periodMonthsConverter(priceList.periodMonths)]) })));
|
|
20951
20863
|
};
|
|
20952
20864
|
|
|
20865
|
+
var CheckIcon = function (_a) {
|
|
20866
|
+
var backgroundColor = _a.backgroundColor, size = _a.size;
|
|
20867
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
|
|
20868
|
+
};
|
|
20869
|
+
|
|
20953
20870
|
var PriceListCardButton = function (_a) {
|
|
20954
|
-
var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected,
|
|
20871
|
+
var disableOnClick = _a.disableOnClick, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan;
|
|
20955
20872
|
// Context
|
|
20956
20873
|
var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
|
|
20957
|
-
var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === plan.id &&
|
|
20958
|
-
!isPriceListCurrentSubscription;
|
|
20874
|
+
var isPriceListNonSubscribedCurrentPlan = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.plan.id) === priceList.plan.id && !isPriceListCurrentSubscription;
|
|
20959
20875
|
var createButtonText = function () {
|
|
20960
20876
|
if (isPriceListCurrentSubscription)
|
|
20961
20877
|
return "Current";
|
|
@@ -20963,8 +20879,8 @@ var PriceListCardButton = function (_a) {
|
|
|
20963
20879
|
return "Selected";
|
|
20964
20880
|
if (subscriptionPlan && !isPriceListNonSubscribedCurrentPlan)
|
|
20965
20881
|
return "Subscribed";
|
|
20966
|
-
if (plan.pricingStyle === common.PricingStyle.CONTACT_US)
|
|
20967
|
-
return plan.contactUsLabel;
|
|
20882
|
+
if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US)
|
|
20883
|
+
return priceList.plan.contactUsLabel;
|
|
20968
20884
|
return "Select";
|
|
20969
20885
|
};
|
|
20970
20886
|
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col grow w-full justify-end" }, { children: jsxRuntime.jsx(StyledCardButton, __assign({ className: "flex justify-center w-full" }, { children: jsxRuntime.jsx(antd.Button, __assign({ className: "w-full", disabled: disableOnClick, style: {
|
|
@@ -20974,29 +20890,8 @@ var PriceListCardButton = function (_a) {
|
|
|
20974
20890
|
var StyledCardButton = styled__default["default"].div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"], ["\n .ant-btn-primary {\n border-color: transparent !important;\n }\n .ant-btn-primary:disabled {\n background: ", ";\n color: ", ";\n }\n"])), common.SLATE_200, common.SLATE_600);
|
|
20975
20891
|
var templateObject_1$3;
|
|
20976
20892
|
|
|
20977
|
-
var PriceListCardDesktop = function (_a) {
|
|
20978
|
-
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, plan = _a.plan, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20979
|
-
return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
|
|
20980
|
-
if (!disableOnClick) {
|
|
20981
|
-
if (plan.pricingStyle === common.PricingStyle.CONTACT_US) {
|
|
20982
|
-
window.open(plan.contactUsUrl, "_blank");
|
|
20983
|
-
}
|
|
20984
|
-
else
|
|
20985
|
-
onClick(priceList);
|
|
20986
|
-
}
|
|
20987
|
-
}, style: {
|
|
20988
|
-
height: "100%",
|
|
20989
|
-
maxWidth: "440px",
|
|
20990
|
-
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, plan: plan, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { plan: plan, priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, plan: plan, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, plan: plan, subscriptionPlan: subscriptionPlan })] })) }));
|
|
20991
|
-
};
|
|
20992
|
-
|
|
20993
|
-
var CheckIcon = function (_a) {
|
|
20994
|
-
var backgroundColor = _a.backgroundColor, size = _a.size;
|
|
20995
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shrink-0", style: { width: size, height: size, backgroundColor: backgroundColor } }, { children: jsxRuntime.jsx("svg", __assign({ width: "8", height: "6", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: jsxRuntime.jsx("path", { d: "M1.5 2.99992L3.16667 4.66659L6.5 1.33325", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })));
|
|
20996
|
-
};
|
|
20997
|
-
|
|
20998
20893
|
var PriceListCardMobile = function (_a) {
|
|
20999
|
-
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick,
|
|
20894
|
+
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
21000
20895
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21001
20896
|
return (jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col border-2 border-solid rounded-lg p-4", onClick: function () {
|
|
21002
20897
|
if (!disableOnClick)
|
|
@@ -21007,22 +20902,44 @@ var PriceListCardMobile = function (_a) {
|
|
|
21007
20902
|
} }, { children: [isSelected && (jsxRuntime.jsx("div", __assign({ className: "absolute", style: {
|
|
21008
20903
|
top: "10px",
|
|
21009
20904
|
right: "10px",
|
|
21010
|
-
} }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription,
|
|
20905
|
+
} }, { children: jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "20px" }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center grow gap-2" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] }))] })));
|
|
20906
|
+
};
|
|
20907
|
+
|
|
20908
|
+
var PLAN_GRID_PADDING = 4;
|
|
20909
|
+
var PlanPickerGridCell = function (_a) {
|
|
20910
|
+
var children = _a.children, noBorder = _a.noBorder;
|
|
20911
|
+
var isMobile = common.useIsMobile();
|
|
20912
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex flex-col", style: isMobile
|
|
20913
|
+
? {}
|
|
20914
|
+
: __assign({}, (noBorder ? {} : { borderLeft: "1px solid ".concat(common.SLATE_200) })) }, { children: [jsxRuntime.jsx("div", __assign({ className: "grow" }, { children: children })), !isMobile && jsxRuntime.jsx(antd.Divider, {})] })));
|
|
20915
|
+
};
|
|
20916
|
+
|
|
20917
|
+
var PriceListCardDesktop = function (_a) {
|
|
20918
|
+
var description = _a.description, disableOnClick = _a.disableOnClick, feature = _a.feature, isPriceListCurrentSubscription = _a.isPriceListCurrentSubscription, isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptionPlan = _a.subscriptionPlan, trialRemainingDays = _a.trialRemainingDays;
|
|
20919
|
+
return (jsxRuntime.jsx(PlanPickerGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center justify-between w-full rounded-md gap-4 pt-6 px-4 pb-4 ".concat(disableOnClick ? "" : "cursor-pointer"), onClick: function () {
|
|
20920
|
+
if (!disableOnClick) {
|
|
20921
|
+
if (priceList.plan.pricingStyle === common.PricingStyle.CONTACT_US) {
|
|
20922
|
+
window.open(priceList.plan.contactUsUrl, "_blank");
|
|
20923
|
+
}
|
|
20924
|
+
else
|
|
20925
|
+
onClick(priceList);
|
|
20926
|
+
}
|
|
20927
|
+
}, style: {
|
|
20928
|
+
height: "100%",
|
|
20929
|
+
maxWidth: "440px",
|
|
20930
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-3" }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardTitle, { isPriceListCurrentSubscription: isPriceListCurrentSubscription, priceList: priceList, trialRemainingDays: trialRemainingDays }), jsxRuntime.jsx(PriceListCardDescription, { description: description })] })), jsxRuntime.jsxs("div", __assign({ className: "flex flex-col items-center gap-2" }, { children: [jsxRuntime.jsx(PriceListCardPrice, { priceList: priceList }), jsxRuntime.jsx(PriceListCardPriceDescription, { feature: feature, priceList: priceList })] }))] })), jsxRuntime.jsx(PriceListCardButton, { disableOnClick: disableOnClick, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, priceList: priceList, subscriptionPlan: subscriptionPlan })] })) }));
|
|
21011
20931
|
};
|
|
21012
20932
|
|
|
21013
20933
|
var PriceListCard = function (_a) {
|
|
21014
20934
|
var _b;
|
|
21015
|
-
var isSelected = _a.isSelected, onClick = _a.onClick,
|
|
20935
|
+
var isSelected = _a.isSelected, onClick = _a.onClick, priceList = _a.priceList, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
21016
20936
|
// Context
|
|
21017
20937
|
var upgradingSubscription = react.useContext(SubscriptionsContext).upgradingSubscription;
|
|
21018
20938
|
var isMobile = common.useIsMobile();
|
|
21019
|
-
if (!plan) {
|
|
21020
|
-
return null;
|
|
21021
|
-
}
|
|
21022
20939
|
// Derived state
|
|
21023
|
-
var description = createPlanDescription(
|
|
20940
|
+
var description = createPlanDescription(priceList);
|
|
21024
20941
|
// Get the active price list charge for this plan
|
|
21025
|
-
var activeCharge = (_b = getActivePlanPriceData(
|
|
20942
|
+
var activeCharge = (_b = getActivePlanPriceData(priceList, priceList)) === null || _b === void 0 ? void 0 : _b.activeCharge;
|
|
21026
20943
|
// Is the price list the current price list for the upgradingSubscription
|
|
21027
20944
|
var isPriceListCurrentSubscription = (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === priceList.id;
|
|
21028
20945
|
var disableOnClick = isPriceListDisabled({
|
|
@@ -21032,7 +20949,7 @@ var PriceListCard = function (_a) {
|
|
|
21032
20949
|
});
|
|
21033
20950
|
var subscriptionPlan = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
|
|
21034
20951
|
var _a, _b;
|
|
21035
|
-
return subscription.plan.id === plan.id &&
|
|
20952
|
+
return subscription.plan.id === priceList.plan.id &&
|
|
21036
20953
|
((_a = subscription.state) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== common.SubscriptionState.CANCELED &&
|
|
21037
20954
|
((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== common.SubscriptionState.EXPIRED;
|
|
21038
20955
|
});
|
|
@@ -21040,50 +20957,48 @@ var PriceListCard = function (_a) {
|
|
|
21040
20957
|
return null;
|
|
21041
20958
|
}
|
|
21042
20959
|
var feature = activeCharge.feature;
|
|
21043
|
-
return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick,
|
|
20960
|
+
return isMobile ? (jsxRuntime.jsx(PriceListCardMobile, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan })) : (jsxRuntime.jsx(PriceListCardDesktop, { description: description, disableOnClick: disableOnClick, feature: feature, isPriceListCurrentSubscription: isPriceListCurrentSubscription, isSelected: isSelected, onClick: onClick, priceList: priceList, trialRemainingDays: trialRemainingDays, subscriptionPlan: subscriptionPlan }));
|
|
21044
20961
|
};
|
|
21045
20962
|
|
|
21046
|
-
var
|
|
20963
|
+
var Text$a = antd.Typography.Text;
|
|
20964
|
+
var PriceListCardFeature = function (_a) {
|
|
20965
|
+
var index = _a.index, planFeature = _a.planFeature;
|
|
20966
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
20967
|
+
if (planFeature.feature.kind === "GROUP")
|
|
20968
|
+
return jsxRuntime.jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: planFeature.name }));
|
|
20969
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "text-gray-600" }, { children: planFeature.feature.name }))] }), index));
|
|
20970
|
+
};
|
|
21047
20971
|
|
|
21048
|
-
var
|
|
21049
|
-
var
|
|
21050
|
-
|
|
21051
|
-
var availablePlansArray =
|
|
21052
|
-
var uniqueFeatures = new Set();
|
|
21053
|
-
var updatedPlansArray = availablePlansArray.map(function (plan) {
|
|
20972
|
+
var getAvailablePlansAndPriceLists = function (_a) {
|
|
20973
|
+
var availablePriceLists = _a.availablePriceLists, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart;
|
|
20974
|
+
var displayPriceLists = availablePriceLists.slice(priceListStart, priceListStart + 3);
|
|
20975
|
+
var availablePlansArray = displayPriceLists === null || displayPriceLists === void 0 ? void 0 : displayPriceLists.map(function (displayPriceList) {
|
|
21054
20976
|
var _a;
|
|
21055
|
-
var
|
|
21056
|
-
|
|
21057
|
-
return false;
|
|
21058
|
-
}
|
|
21059
|
-
else {
|
|
21060
|
-
uniqueFeatures.add(feature.featureId);
|
|
21061
|
-
return true;
|
|
21062
|
-
}
|
|
21063
|
-
});
|
|
21064
|
-
return __assign(__assign({}, plan), { planFeatures: updatedPlanFeatures });
|
|
20977
|
+
var foundPriceList = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.find(function (priceList) { return priceList.plan.id === displayPriceList.plan.id; });
|
|
20978
|
+
return foundPriceList.plan;
|
|
21065
20979
|
});
|
|
21066
|
-
return
|
|
20980
|
+
return {
|
|
20981
|
+
availablePlansArray: availablePlansArray,
|
|
20982
|
+
displayPriceLists: displayPriceLists,
|
|
20983
|
+
};
|
|
21067
20984
|
};
|
|
21068
|
-
var
|
|
21069
|
-
var
|
|
21070
|
-
|
|
21071
|
-
|
|
21072
|
-
|
|
21073
|
-
|
|
21074
|
-
|
|
21075
|
-
|
|
21076
|
-
|
|
21077
|
-
|
|
21078
|
-
|
|
21079
|
-
|
|
21080
|
-
|
|
21081
|
-
return (jsxRuntime.
|
|
21082
|
-
|
|
21083
|
-
|
|
21084
|
-
|
|
21085
|
-
}) }), planIndex));
|
|
21086
|
-
}) }));
|
|
20985
|
+
var everythingInPlusString = function (_a) {
|
|
20986
|
+
var priceList = _a.priceList;
|
|
20987
|
+
return "Everything in ".concat(priceList.plan.name, ", plus");
|
|
20988
|
+
};
|
|
20989
|
+
|
|
20990
|
+
var PriceListGridMobile = function (_a) {
|
|
20991
|
+
var _b, _c, _d, _e;
|
|
20992
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
20993
|
+
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
20994
|
+
var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id); });
|
|
20995
|
+
var prevPriceListId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.id;
|
|
20996
|
+
var prevPriceList = (_c = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _c === void 0 ? void 0 : _c.find(function (priceList) { return priceList.id === prevPriceListId; });
|
|
20997
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex gap-4 overflow-auto shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
|
|
20998
|
+
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
20999
|
+
}) })), jsxRuntime.jsx("div", __assign({ className: "text-slate-500 pt-5 pb-4 shadow-padding-x" }, { children: everythingInPlus && prevPriceList
|
|
21000
|
+
? everythingInPlusString({ priceList: prevPriceList })
|
|
21001
|
+
: "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto shadow-padding-x" }, { children: (_e = (_d = selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan) === null || _d === void 0 ? void 0 : _d.planFeatures) === null || _e === void 0 ? void 0 : _e.map(function (planFeature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { planFeature: planFeature, index: index }, index)); }) }))] }));
|
|
21087
21002
|
};
|
|
21088
21003
|
|
|
21089
21004
|
var shouldColorRow = function (_a) {
|
|
@@ -21100,15 +21015,15 @@ var FeatureGridCell = function (_a) {
|
|
|
21100
21015
|
: {})) }, { children: children })));
|
|
21101
21016
|
};
|
|
21102
21017
|
|
|
21103
|
-
var
|
|
21018
|
+
var PLANS_TO_DISPLAY$1 = 3;
|
|
21019
|
+
|
|
21020
|
+
var Text$9 = antd.Typography.Text;
|
|
21104
21021
|
var PlanFeatures = function (_a) {
|
|
21105
21022
|
var _b;
|
|
21106
|
-
var availablePlansArray = _a.availablePlansArray,
|
|
21023
|
+
var availablePlansArray = _a.availablePlansArray, selectedProduct = _a.selectedProduct;
|
|
21107
21024
|
var featureGroupCounter = react.useRef(0);
|
|
21108
21025
|
var visibleFeatureCounter = react.useRef(1);
|
|
21109
21026
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21110
|
-
if (!plans)
|
|
21111
|
-
return null;
|
|
21112
21027
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_b = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _b === void 0 ? void 0 : _b.map(function (feature, featureIndex) {
|
|
21113
21028
|
if (!selectedProduct.features)
|
|
21114
21029
|
return null;
|
|
@@ -21130,7 +21045,7 @@ var PlanFeatures = function (_a) {
|
|
|
21130
21045
|
rowIndex = rowIndex + featureGroupCounter.current;
|
|
21131
21046
|
// Increment the visible feature counter
|
|
21132
21047
|
visibleFeatureCounter.current = visibleFeatureCounter.current + 1;
|
|
21133
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, columnIndex) {
|
|
21048
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [jsxRuntime.jsx(FeatureGridCell, __assign({ isFeatureGroup: isFeatureGroup, noBorder: true, rowIndex: rowIndex }, { children: jsxRuntime.jsx(FeatureTitle, { isFeatureGroup: isFeatureGroup, feature: feature }) })), __spreadArray([], Array(PLANS_TO_DISPLAY$1), true).map(function (_, columnIndex) {
|
|
21134
21049
|
var _a;
|
|
21135
21050
|
var plan = availablePlansArray[columnIndex];
|
|
21136
21051
|
var doesHavePrevPlan = availablePlansArray[columnIndex - 1];
|
|
@@ -21140,91 +21055,115 @@ var PlanFeatures = function (_a) {
|
|
|
21140
21055
|
if (!plan)
|
|
21141
21056
|
return (jsxRuntime.jsx(FeatureGridCell, { rowIndex: rowIndex, noBorder: !Boolean(doesHavePrevPlan) }, columnIndex));
|
|
21142
21057
|
if (isFeatureGroup)
|
|
21143
|
-
return
|
|
21144
|
-
return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$
|
|
21058
|
+
return jsxRuntime.jsx(FeatureGridCell, { isFeatureGroup: true, rowIndex: rowIndex }, columnIndex);
|
|
21059
|
+
return (jsxRuntime.jsx(FeatureGridCell, __assign({ rowIndex: rowIndex }, { children: jsxRuntime.jsx("div", __assign({ className: "flex justify-center text-center" }, { children: planFeature ? ((planFeature === null || planFeature === void 0 ? void 0 : planFeature.value) ? (planFeature.value) : (jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }))) : (jsxRuntime.jsx(Text$9, __assign({ className: "text-gray" }, { children: "-" }))) })) }), columnIndex));
|
|
21145
21060
|
})] }), rowIndex));
|
|
21146
21061
|
}) }));
|
|
21147
21062
|
};
|
|
21148
21063
|
var FeatureTitle = function (_a) {
|
|
21149
21064
|
var _b;
|
|
21150
21065
|
var isFeatureGroup = _a.isFeatureGroup, feature = _a.feature;
|
|
21151
|
-
return (jsxRuntime.jsx(Text$
|
|
21066
|
+
return (jsxRuntime.jsx(Text$9, __assign({ className: " ".concat(isFeatureGroup ? "text-slate-500 font-medium pt-4" : ""), style: __assign({}, (isFeatureGroup ? { fontSize: "11px" } : {})) }, { children: isFeatureGroup ? (_b = feature === null || feature === void 0 ? void 0 : feature.name) === null || _b === void 0 ? void 0 : _b.toUpperCase() : feature === null || feature === void 0 ? void 0 : feature.name })));
|
|
21067
|
+
};
|
|
21068
|
+
|
|
21069
|
+
var NextPriceListButton = function (_a) {
|
|
21070
|
+
var availablePriceLists = _a.availablePriceLists, priceListStart = _a.priceListStart, setPriceListStart = _a.setPriceListStart;
|
|
21071
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "absolute flex gap-1", style: { top: "12px", right: "8px", zIndex: 10 } }, { children: [priceListStart > 0 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
21072
|
+
setPriceListStart(function (prev) {
|
|
21073
|
+
var newValue = prev - 1;
|
|
21074
|
+
if (newValue < 0) {
|
|
21075
|
+
return prev;
|
|
21076
|
+
}
|
|
21077
|
+
return newValue;
|
|
21078
|
+
});
|
|
21079
|
+
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronLeft }) }))), priceListStart < availablePriceLists.length - 3 && (jsxRuntime.jsx("div", __assign({ className: "flex items-center justify-center rounded-full shadow p-1 cursor-pointer", onClick: function () {
|
|
21080
|
+
return setPriceListStart(function (prev) {
|
|
21081
|
+
var newValue = prev + 1;
|
|
21082
|
+
if (newValue >= availablePriceLists.length) {
|
|
21083
|
+
return prev;
|
|
21084
|
+
}
|
|
21085
|
+
return newValue;
|
|
21086
|
+
});
|
|
21087
|
+
}, style: { width: "22px", height: "22px" } }, { children: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { icon: freeSolidSvgIcons.faChevronRight }) })))] })));
|
|
21088
|
+
};
|
|
21089
|
+
|
|
21090
|
+
var filterUniqueFeatures = function (_a) {
|
|
21091
|
+
// Remove any features that in previous plans if everythingInPlus is true
|
|
21092
|
+
var availablePriceLists = _a.availablePriceLists;
|
|
21093
|
+
var uniqueFeatures = new Set();
|
|
21094
|
+
var updatedPriceLists = availablePriceLists.map(function (priceList) {
|
|
21095
|
+
var _a;
|
|
21096
|
+
var updatedPlanFeatures = (_a = priceList.plan.planFeatures) === null || _a === void 0 ? void 0 : _a.filter(function (feature) {
|
|
21097
|
+
if (uniqueFeatures.has(feature.featureId)) {
|
|
21098
|
+
return false;
|
|
21099
|
+
}
|
|
21100
|
+
else {
|
|
21101
|
+
uniqueFeatures.add(feature.featureId);
|
|
21102
|
+
return true;
|
|
21103
|
+
}
|
|
21104
|
+
});
|
|
21105
|
+
return __assign(__assign({}, priceList), { plan: __assign(__assign({}, priceList.plan), { planFeatures: updatedPlanFeatures }) });
|
|
21106
|
+
});
|
|
21107
|
+
return updatedPriceLists;
|
|
21108
|
+
};
|
|
21109
|
+
var EverythingPlanFeatures = function (_a) {
|
|
21110
|
+
var availablePriceLists = _a.availablePriceLists, selectedProduct = _a.selectedProduct;
|
|
21111
|
+
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21112
|
+
var uniquePlanFeatures = filterUniqueFeatures({ availablePriceLists: availablePriceLists });
|
|
21113
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, planIndex) {
|
|
21114
|
+
var priceList = uniquePlanFeatures[planIndex];
|
|
21115
|
+
var prevPriceList = availablePriceLists[planIndex - 1];
|
|
21116
|
+
if (!priceList)
|
|
21117
|
+
return (jsxRuntime.jsx("div", { style: prevPriceList ? { borderLeft: "1px solid ".concat(common.SLATE_200) } : {} }, planIndex));
|
|
21118
|
+
if (!priceList.plan.planFeatures)
|
|
21119
|
+
return jsxRuntime.jsx("div", {}, planIndex);
|
|
21120
|
+
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 p-4", style: { borderLeft: "1px solid ".concat(common.SLATE_200) } }, { children: priceList.plan.planFeatures.map(function (planFeature, planFeatureIndex) {
|
|
21121
|
+
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21122
|
+
return (jsxRuntime.jsxs("div", __assign({ className: "contents" }, { children: [prevPriceList && everythingInPlus && planIndex > 0 && planFeatureIndex === 0 && (jsxRuntime.jsx("div", __assign({ className: "font-medium", style: { fontSize: "13px" } }, { children: everythingInPlusString({ priceList: prevPriceList }) }))), jsxRuntime.jsxs("div", __assign({ className: "flex gap-1 text-gray-600", style: { fontSize: "13px" } }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), planFeature.feature.name] }))] }), planFeatureIndex));
|
|
21123
|
+
}) }), planIndex));
|
|
21124
|
+
}) }));
|
|
21152
21125
|
};
|
|
21153
21126
|
|
|
21127
|
+
var PLANS_TO_DISPLAY = 3;
|
|
21154
21128
|
var PriceListGridDesktop = function (_a) {
|
|
21155
|
-
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList,
|
|
21156
|
-
// Context
|
|
21157
|
-
var shadow = react.useContext(SubscriptionsContext).shadow;
|
|
21129
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
21158
21130
|
var _b = react.useMemo(function () {
|
|
21159
21131
|
return getAvailablePlansAndPriceLists({
|
|
21160
21132
|
availablePriceLists: availablePriceLists,
|
|
21161
|
-
|
|
21133
|
+
priceListChangeOptions: priceListChangeOptions,
|
|
21162
21134
|
priceListStart: priceListStart,
|
|
21163
21135
|
});
|
|
21164
|
-
}, [availablePriceLists,
|
|
21136
|
+
}, [availablePriceLists, priceListChangeOptions, priceListStart]), availablePlansArray = _b.availablePlansArray, displayPriceLists = _b.displayPriceLists;
|
|
21165
21137
|
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21166
|
-
return (jsxRuntime.jsx("div", __assign({ className: "" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md overflow-hidden bg-white
|
|
21138
|
+
return (jsxRuntime.jsx("div", __assign({ className: "shadow-padding-xb" }, { children: jsxRuntime.jsxs("div", __assign({ className: "relative flex flex-col h-full rounded-md shadow overflow-hidden bg-white" }, { children: [jsxRuntime.jsx(NextPriceListButton, { availablePriceLists: availablePriceLists, priceListStart: priceListStart, setPriceListStart: setPriceListStart }), jsxRuntime.jsxs("div", __assign({ className: "grid w-full", style: {
|
|
21167
21139
|
gridTemplateColumns: everythingInPlus
|
|
21168
21140
|
? "repeat(3, minmax(120px, 1fr))"
|
|
21169
21141
|
: "minmax(auto, 400px) repeat(3, minmax(120px, 1fr))",
|
|
21170
21142
|
} }, { children: [!everythingInPlus && jsxRuntime.jsx(PlanPickerGridCell, { noBorder: true }), __spreadArray([], Array(PLANS_TO_DISPLAY), true).map(function (_, index) {
|
|
21171
|
-
var _a;
|
|
21172
21143
|
var priceList = displayPriceLists[index];
|
|
21173
21144
|
var doesPrevPriceListExist = displayPriceLists[index - 1];
|
|
21174
21145
|
if (!priceList)
|
|
21175
|
-
return
|
|
21176
|
-
|
|
21177
|
-
|
|
21178
|
-
}), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, plans: planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct: selectedProduct }))] }))] })) })));
|
|
21179
|
-
};
|
|
21180
|
-
|
|
21181
|
-
var Text$a = antd.Typography.Text;
|
|
21182
|
-
var PriceListCardFeature = function (_a) {
|
|
21183
|
-
var feature = _a.feature, index = _a.index;
|
|
21184
|
-
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21185
|
-
if (feature.kind === "GROUP")
|
|
21186
|
-
return jsxRuntime.jsx(Text$a, __assign({ className: "font-medium base-text" }, { children: feature.name }));
|
|
21187
|
-
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-2" }, { children: [jsxRuntime.jsx(CheckIcon, { backgroundColor: brandColor, size: "15px" }), jsxRuntime.jsx(Text$a, __assign({ className: "text-gray-600" }, { children: feature.name }))] }), index));
|
|
21188
|
-
};
|
|
21189
|
-
|
|
21190
|
-
var Text$9 = antd.Typography.Text;
|
|
21191
|
-
var PriceListGridMobile = function (_a) {
|
|
21192
|
-
var _b, _c, _d;
|
|
21193
|
-
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, planChangeOptions = _a.planChangeOptions, selectedPlan = _a.selectedPlan, selectedProduct = _a.selectedProduct, subscriptions = _a.subscriptions, trialRemainingDays = _a.trialRemainingDays;
|
|
21194
|
-
var everythingInPlus = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus;
|
|
21195
|
-
var prevPriceListIndex = availablePriceLists.findIndex(function (priceList) { return priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id); });
|
|
21196
|
-
var prevPlanId = (_b = availablePriceLists[prevPriceListIndex - 1]) === null || _b === void 0 ? void 0 : _b.plan.id;
|
|
21197
|
-
var prevPlan = (_c = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _c === void 0 ? void 0 : _c.find(function (plan) { return plan.id === prevPlanId; });
|
|
21198
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", __assign({ className: "flex gap-4 overflow-auto bunny-shadow-padding-xb", style: { flexShrink: 0 } }, { children: availablePriceLists.map(function (priceList, index) {
|
|
21199
|
-
var _a;
|
|
21200
|
-
var plan = (_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.find(function (plan) { return plan.id === priceList.plan.id; });
|
|
21201
|
-
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPlan === null || selectedPlan === void 0 ? void 0 : selectedPlan.id), onClick: onChangePriceList, plan: plan, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
21202
|
-
}) })), jsxRuntime.jsx(Text$9, __assign({ className: "text-slate-500 pt-5 pb-4 bunny-shadow-padding-x" }, { children: everythingInPlus && prevPlan
|
|
21203
|
-
? everythingInPlusString({ plan: prevPlan })
|
|
21204
|
-
: "Features" })), jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-4 overflow-auto bunny-shadow-padding-x" }, { children: (_d = selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.features) === null || _d === void 0 ? void 0 : _d.map(function (feature, index) { return (jsxRuntime.jsx(PriceListCardFeature, { feature: feature, index: index }, index)); }) }))] }));
|
|
21146
|
+
return jsxRuntime.jsx(PlanPickerGridCell, { noBorder: !Boolean(doesPrevPriceListExist) }, index);
|
|
21147
|
+
return (jsxRuntime.jsx(PriceListCard, { isSelected: priceList.plan.id === (selectedPriceList === null || selectedPriceList === void 0 ? void 0 : selectedPriceList.plan.id), onClick: onChangePriceList, priceList: priceList, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }, index));
|
|
21148
|
+
}), (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.everythingInPlus) ? (jsxRuntime.jsx(EverythingPlanFeatures, { availablePriceLists: availablePriceLists, selectedProduct: selectedProduct })) : (jsxRuntime.jsx(PlanFeatures, { availablePlansArray: availablePlansArray, selectedProduct: selectedProduct }))] }))] })) })));
|
|
21205
21149
|
};
|
|
21206
21150
|
|
|
21207
21151
|
var PriceListGrid = function (_a) {
|
|
21208
21152
|
var _b, _c;
|
|
21209
|
-
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList,
|
|
21153
|
+
var availablePriceLists = _a.availablePriceLists, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, priceListStart = _a.priceListStart, selectedPriceList = _a.selectedPriceList, selectedProduct = _a.selectedProduct, setPriceListStart = _a.setPriceListStart, subscriptions = _a.subscriptions, upgradingSubscriptionState = _a.upgradingSubscriptionState;
|
|
21210
21154
|
// Hooks
|
|
21211
21155
|
var isMobile = common.useIsMobile();
|
|
21212
21156
|
// Derived state
|
|
21213
|
-
var
|
|
21214
|
-
var
|
|
21215
|
-
|
|
21216
|
-
return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPlan: selectedPlan, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, priceListStart: priceListStart, selectedPlan: selectedPlan, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
|
|
21157
|
+
var currentPriceList = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.find(function (priceList) { var _a; return priceList.id === ((_a = upgradingSubscriptionState === null || upgradingSubscriptionState === void 0 ? void 0 : upgradingSubscriptionState.plan) === null || _a === void 0 ? void 0 : _a.id); });
|
|
21158
|
+
var trialRemainingDays = dayjs((_c = currentPriceList === null || currentPriceList === void 0 ? void 0 : currentPriceList.plan) === null || _c === void 0 ? void 0 : _c.trialEndDate).diff(dayjs(), "days");
|
|
21159
|
+
return isMobile ? (jsxRuntime.jsx(PriceListGridMobile, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays })) : (jsxRuntime.jsx(PriceListGridDesktop, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, trialRemainingDays: trialRemainingDays }));
|
|
21217
21160
|
};
|
|
21218
21161
|
|
|
21219
|
-
var createAvailableBillingPeriods = function (
|
|
21220
|
-
return
|
|
21221
|
-
return plan.priceLists
|
|
21222
|
-
.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); })
|
|
21223
|
-
.map(function (priceList) { return priceList.periodMonths; });
|
|
21224
|
-
}).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
|
|
21162
|
+
var createAvailableBillingPeriods = function (priceLists, selectedProduct) {
|
|
21163
|
+
return priceLists === null || priceLists === void 0 ? void 0 : priceLists.filter(function (priceList) { return priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id); }).map(function (priceList) { return priceList.periodMonths; }).sort(function (a, b) { return a - b; }).filter(function (currentValue, index, array) { return index === array.indexOf(currentValue); });
|
|
21225
21164
|
};
|
|
21226
21165
|
var PriceListSelector = function (_a) {
|
|
21227
|
-
var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList,
|
|
21166
|
+
var arePlanChangeOptionsLoading = _a.arePlanChangeOptionsLoading, areSubscriptionsLoading = _a.areSubscriptionsLoading, onChangePriceList = _a.onChangePriceList, priceListChangeOptions = _a.priceListChangeOptions, selectedPriceList = _a.selectedPriceList, subscriptions = _a.subscriptions, upgradingSubscription = _a.upgradingSubscription;
|
|
21228
21167
|
// Context
|
|
21229
21168
|
var _b = react.useContext(SubscriptionsContext), isInPreviewMode = _b.isInPreviewMode, quotePreviewData = _b.quotePreviewData, setQuotePreviewData = _b.setQuotePreviewData;
|
|
21230
21169
|
// Local state
|
|
@@ -21232,32 +21171,22 @@ var PriceListSelector = function (_a) {
|
|
|
21232
21171
|
var _d = react.useState(), selectedBillingPeriod = _d[0], setSelectedBillingPeriod = _d[1];
|
|
21233
21172
|
var _e = react.useState(0), priceListStart = _e[0], setPriceListStart = _e[1];
|
|
21234
21173
|
// Derived state
|
|
21235
|
-
var availableBillingPeriods = react.useMemo(function () {
|
|
21236
|
-
return createAvailableBillingPeriods(planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct);
|
|
21237
|
-
}, [planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans, selectedProduct]);
|
|
21174
|
+
var availableBillingPeriods = react.useMemo(function () { return createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct); }, [priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, selectedProduct]);
|
|
21238
21175
|
var availablePriceLists = react.useMemo(function () {
|
|
21239
21176
|
var _a;
|
|
21240
|
-
return (((_a =
|
|
21241
|
-
return
|
|
21242
|
-
|
|
21243
|
-
selectedBillingPeriod &&
|
|
21244
|
-
priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
|
|
21245
|
-
});
|
|
21177
|
+
return (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.filter(function (priceList) {
|
|
21178
|
+
return periodMonthsConverter(priceList.periodMonths) === selectedBillingPeriod &&
|
|
21179
|
+
priceList.product.id === (selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct.id);
|
|
21246
21180
|
})) || []);
|
|
21247
|
-
}, [
|
|
21181
|
+
}, [priceListChangeOptions, selectedBillingPeriod, selectedProduct]);
|
|
21248
21182
|
// Handlers
|
|
21249
21183
|
var onChangeBillingPeriod = react.useCallback(function (billingPeriod) {
|
|
21250
21184
|
var _a, _b;
|
|
21251
21185
|
setSelectedBillingPeriod(billingPeriod);
|
|
21252
21186
|
setPriceListStart(0);
|
|
21253
21187
|
if ((quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) &&
|
|
21254
|
-
billingPeriod !==
|
|
21255
|
-
|
|
21256
|
-
var availablePriceLists_1 = ((_b = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _b === void 0 ? void 0 : _b.flatMap(function (plan) {
|
|
21257
|
-
return plan.priceLists.filter(function (priceList) {
|
|
21258
|
-
return periodMonthsConverter(priceList.periodMonths) === billingPeriod;
|
|
21259
|
-
});
|
|
21260
|
-
})) || [];
|
|
21188
|
+
billingPeriod !== periodMonthsConverter((_a = quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList) === null || _a === void 0 ? void 0 : _a.periodMonths)) {
|
|
21189
|
+
var availablePriceLists_1 = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return periodMonthsConverter(priceList.periodMonths) === billingPeriod; })) || [];
|
|
21261
21190
|
var newSelectedPriceList = availablePriceLists_1.find(function (priceList) {
|
|
21262
21191
|
var _a;
|
|
21263
21192
|
return periodMonthsConverter(priceList.periodMonths) === billingPeriod &&
|
|
@@ -21268,8 +21197,7 @@ var PriceListSelector = function (_a) {
|
|
|
21268
21197
|
upgradingSubscription: upgradingSubscription,
|
|
21269
21198
|
});
|
|
21270
21199
|
});
|
|
21271
|
-
var isPriceListCurrentSubscription = newSelectedPriceList &&
|
|
21272
|
-
(upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
|
|
21200
|
+
var isPriceListCurrentSubscription = newSelectedPriceList && (upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList.id) === newSelectedPriceList.id;
|
|
21273
21201
|
if (newSelectedPriceList && !isPriceListCurrentSubscription) {
|
|
21274
21202
|
setQuotePreviewData({
|
|
21275
21203
|
priceList: newSelectedPriceList,
|
|
@@ -21284,32 +21212,30 @@ var PriceListSelector = function (_a) {
|
|
|
21284
21212
|
}
|
|
21285
21213
|
}, [
|
|
21286
21214
|
quotePreviewData,
|
|
21287
|
-
|
|
21215
|
+
priceListChangeOptions,
|
|
21288
21216
|
subscriptions,
|
|
21289
21217
|
upgradingSubscription,
|
|
21290
21218
|
setQuotePreviewData,
|
|
21291
21219
|
]);
|
|
21292
21220
|
var onChangeProduct = react.useCallback(function (product) {
|
|
21293
|
-
var newAvailableBillingPeriods = createAvailableBillingPeriods(
|
|
21221
|
+
var newAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, product);
|
|
21294
21222
|
if (!(newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods.includes(billingPeriodConverter(selectedBillingPeriod)))) {
|
|
21295
|
-
onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined
|
|
21296
|
-
? newAvailableBillingPeriods[0]
|
|
21297
|
-
: 1));
|
|
21223
|
+
onChangeBillingPeriod(periodMonthsConverter((newAvailableBillingPeriods === null || newAvailableBillingPeriods === void 0 ? void 0 : newAvailableBillingPeriods[0]) !== undefined ? newAvailableBillingPeriods[0] : 1));
|
|
21298
21224
|
}
|
|
21299
21225
|
setSelectedProduct(product);
|
|
21300
|
-
}, [
|
|
21226
|
+
}, [priceListChangeOptions, selectedBillingPeriod, onChangeBillingPeriod]);
|
|
21301
21227
|
// Default settings
|
|
21302
21228
|
react.useEffect(function () {
|
|
21303
21229
|
var _a, _b, _c, _d;
|
|
21304
21230
|
if (arePlanChangeOptionsLoading ||
|
|
21305
21231
|
areSubscriptionsLoading ||
|
|
21306
|
-
!
|
|
21232
|
+
!priceListChangeOptions ||
|
|
21307
21233
|
selectedBillingPeriod ||
|
|
21308
21234
|
selectedProduct ||
|
|
21309
21235
|
selectedPriceList)
|
|
21310
21236
|
return;
|
|
21311
|
-
var initialProduct = (_a =
|
|
21312
|
-
var initialAvailableBillingPeriods = createAvailableBillingPeriods(
|
|
21237
|
+
var initialProduct = (_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products) === null || _a === void 0 ? void 0 : _a[0];
|
|
21238
|
+
var initialAvailableBillingPeriods = createAvailableBillingPeriods(priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists, initialProduct);
|
|
21313
21239
|
var initialBillingPeriod;
|
|
21314
21240
|
if ((upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.priceList) &&
|
|
21315
21241
|
(initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods.includes(billingPeriodConverter(periodMonthsConverter(upgradingSubscription.priceList.periodMonths))))) {
|
|
@@ -21318,12 +21244,9 @@ var PriceListSelector = function (_a) {
|
|
|
21318
21244
|
else {
|
|
21319
21245
|
initialBillingPeriod = periodMonthsConverter((initialAvailableBillingPeriods === null || initialAvailableBillingPeriods === void 0 ? void 0 : initialAvailableBillingPeriods[0]) || 1);
|
|
21320
21246
|
}
|
|
21321
|
-
var initialAvailablePriceLists = ((_b =
|
|
21322
|
-
return
|
|
21323
|
-
|
|
21324
|
-
initialBillingPeriod &&
|
|
21325
|
-
priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
|
|
21326
|
-
});
|
|
21247
|
+
var initialAvailablePriceLists = ((_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) {
|
|
21248
|
+
return periodMonthsConverter(priceList.periodMonths) === initialBillingPeriod &&
|
|
21249
|
+
priceList.product.id === (initialProduct === null || initialProduct === void 0 ? void 0 : initialProduct.id);
|
|
21327
21250
|
})) || [];
|
|
21328
21251
|
var initialPriceList;
|
|
21329
21252
|
var initialQuantity = (_d = (_c = upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.charges) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.quantity;
|
|
@@ -21350,7 +21273,7 @@ var PriceListSelector = function (_a) {
|
|
|
21350
21273
|
arePlanChangeOptionsLoading,
|
|
21351
21274
|
areSubscriptionsLoading,
|
|
21352
21275
|
isInPreviewMode,
|
|
21353
|
-
|
|
21276
|
+
priceListChangeOptions,
|
|
21354
21277
|
selectedBillingPeriod,
|
|
21355
21278
|
selectedPriceList,
|
|
21356
21279
|
selectedProduct,
|
|
@@ -21358,7 +21281,7 @@ var PriceListSelector = function (_a) {
|
|
|
21358
21281
|
subscriptions,
|
|
21359
21282
|
upgradingSubscription,
|
|
21360
21283
|
]);
|
|
21361
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products:
|
|
21284
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BillingPeriodSelector, { availableBillingPeriods: availableBillingPeriods, onChangeBillingPeriod: onChangeBillingPeriod, products: priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.products, selectedBillingPeriod: selectedBillingPeriod, selectedProduct: selectedProduct, onChangeProduct: onChangeProduct }), jsxRuntime.jsx(PriceListGrid, { availablePriceLists: availablePriceLists, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, priceListStart: priceListStart, selectedPriceList: selectedPriceList, selectedProduct: selectedProduct, setPriceListStart: setPriceListStart, subscriptions: subscriptions, upgradingSubscriptionState: upgradingSubscription })] }));
|
|
21362
21285
|
};
|
|
21363
21286
|
|
|
21364
21287
|
var PlanPicker = function () {
|
|
@@ -21384,27 +21307,16 @@ var PlanPicker = function () {
|
|
|
21384
21307
|
token: token,
|
|
21385
21308
|
}),
|
|
21386
21309
|
queryFn: function () {
|
|
21387
|
-
return
|
|
21310
|
+
return getPriceListChangeOptions({
|
|
21311
|
+
apiHost: apiHost,
|
|
21388
21312
|
isInPreviewMode: isInPreviewMode,
|
|
21313
|
+
productId: productId,
|
|
21389
21314
|
token: token,
|
|
21390
21315
|
upgradingSubscription: upgradingSubscription,
|
|
21391
|
-
apiHost: apiHost,
|
|
21392
21316
|
});
|
|
21393
21317
|
},
|
|
21394
21318
|
enabled: !areSubscriptionsLoading,
|
|
21395
|
-
}),
|
|
21396
|
-
var previewDataQuery = reactQuery.useQuery({
|
|
21397
|
-
queryKey: common.QueryKeyFactory.default.createTableKey({
|
|
21398
|
-
pluralType: "portalPreview",
|
|
21399
|
-
filterString: productId || "",
|
|
21400
|
-
token: token,
|
|
21401
|
-
}),
|
|
21402
|
-
queryFn: function () { return getPortalPreviewData(productId || "", apiHost, token); },
|
|
21403
|
-
enabled: isInPreviewMode,
|
|
21404
|
-
});
|
|
21405
|
-
var planChangeOptions = react.useMemo(function () {
|
|
21406
|
-
return isInPreviewMode ? previewDataQuery.data : data;
|
|
21407
|
-
}, [isInPreviewMode, previewDataQuery.data, data]);
|
|
21319
|
+
}), priceListChangeOptions = _d.data, arePlanChangeOptionsLoading = _d.isLoading;
|
|
21408
21320
|
// Handlers
|
|
21409
21321
|
var onChangePriceList = react.useCallback(function (selectedPriceList) {
|
|
21410
21322
|
if (isInPreviewMode)
|
|
@@ -21420,16 +21332,16 @@ var PlanPicker = function () {
|
|
|
21420
21332
|
setQuotePreviewData({});
|
|
21421
21333
|
};
|
|
21422
21334
|
}, [setQuotePreviewData]);
|
|
21423
|
-
if (queryClient.
|
|
21424
|
-
|
|
21425
|
-
|
|
21426
|
-
|
|
21335
|
+
if (queryClient.isFetching({
|
|
21336
|
+
queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({
|
|
21337
|
+
subscriptionId: upgradingSubscription === null || upgradingSubscription === void 0 ? void 0 : upgradingSubscription.id,
|
|
21338
|
+
token: token,
|
|
21339
|
+
}),
|
|
21340
|
+
}))
|
|
21427
21341
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
21428
|
-
|
|
21429
|
-
else if (((_a = planChangeOptions === null || planChangeOptions === void 0 ? void 0 : planChangeOptions.plans) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
21342
|
+
else if (((_a = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _a === void 0 ? void 0 : _a.length) === 0)
|
|
21430
21343
|
return jsxRuntime.jsx(ErrorView, { message: "There are no plans available" });
|
|
21431
|
-
}
|
|
21432
|
-
return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, planChangeOptions: planChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
|
|
21344
|
+
return (jsxRuntime.jsx(PriceListSelector, { arePlanChangeOptionsLoading: arePlanChangeOptionsLoading, areSubscriptionsLoading: areSubscriptionsLoading, onChangePriceList: onChangePriceList, priceListChangeOptions: priceListChangeOptions, selectedPriceList: quotePreviewData === null || quotePreviewData === void 0 ? void 0 : quotePreviewData.priceList, subscriptions: subscriptions }));
|
|
21433
21345
|
};
|
|
21434
21346
|
|
|
21435
21347
|
var Text$8 = antd.Typography.Text;
|
|
@@ -21476,25 +21388,16 @@ var PlanManager = function (_a) {
|
|
|
21476
21388
|
token: token,
|
|
21477
21389
|
}),
|
|
21478
21390
|
queryFn: function () {
|
|
21479
|
-
return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id)
|
|
21480
|
-
? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost })
|
|
21481
|
-
: undefined;
|
|
21391
|
+
return (editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id) ? getQuote({ token: token, id: editingQuoteData.id, apiHost: apiHost }) : undefined;
|
|
21482
21392
|
},
|
|
21483
21393
|
enabled: Boolean(editingQuoteData === null || editingQuoteData === void 0 ? void 0 : editingQuoteData.id),
|
|
21484
21394
|
}).data;
|
|
21485
21395
|
react.useEffect(function () {
|
|
21486
21396
|
if (subscriptionUpgradeId && !upgradingSubscription) {
|
|
21487
|
-
var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) {
|
|
21488
|
-
return subscription.id === subscriptionUpgradeId;
|
|
21489
|
-
});
|
|
21397
|
+
var subscription = subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.find(function (subscription) { return subscription.id === subscriptionUpgradeId; });
|
|
21490
21398
|
setUpgradingSubscription(subscription);
|
|
21491
21399
|
}
|
|
21492
|
-
}, [
|
|
21493
|
-
setUpgradingSubscription,
|
|
21494
|
-
subscriptionUpgradeId,
|
|
21495
|
-
subscriptions,
|
|
21496
|
-
upgradingSubscription,
|
|
21497
|
-
]);
|
|
21400
|
+
}, [setUpgradingSubscription, subscriptionUpgradeId, subscriptions, upgradingSubscription]);
|
|
21498
21401
|
react.useEffect(function () {
|
|
21499
21402
|
var observer = new IntersectionObserver(function (_a) {
|
|
21500
21403
|
var entry = _a[0];
|
|
@@ -21743,10 +21646,10 @@ var canShowSubscriptionActions = function (subscription) {
|
|
|
21743
21646
|
|
|
21744
21647
|
var SubscriptionCardActions = function (_a) {
|
|
21745
21648
|
var _b, _c;
|
|
21746
|
-
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick,
|
|
21649
|
+
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
|
|
21747
21650
|
// Derived state
|
|
21748
21651
|
var canShowCancelButton = subscription.plan.selfServiceCancel;
|
|
21749
|
-
var productPlans = (_b =
|
|
21652
|
+
var productPlans = (_b = priceListChangeOptions === null || priceListChangeOptions === void 0 ? void 0 : priceListChangeOptions.priceLists) === null || _b === void 0 ? void 0 : _b.filter(function (priceList) { return priceList.productId === subscription.product.id; });
|
|
21750
21653
|
var canShowChangePlanButton = ((productPlans === null || productPlans === void 0 ? void 0 : productPlans.length) || 0) > 0;
|
|
21751
21654
|
return (canShowChangePlanButton || canShowCancelButton) &&
|
|
21752
21655
|
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;
|
|
@@ -21771,7 +21674,7 @@ var getSubscriptionStatusText = function (subscription) {
|
|
|
21771
21674
|
};
|
|
21772
21675
|
var SubscriptionCardHeader = function (_a) {
|
|
21773
21676
|
var _b, _c, _d, _e, _f;
|
|
21774
|
-
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick,
|
|
21677
|
+
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
|
|
21775
21678
|
var darkMode = react.useContext(BunnyContext).darkMode;
|
|
21776
21679
|
var brandColor = react.useContext(BrandContext).brandColor;
|
|
21777
21680
|
var subscriptionProductNameStyle = react.useContext(SubscriptionsContext).subscriptionProductNameStyle;
|
|
@@ -21781,10 +21684,7 @@ var SubscriptionCardHeader = function (_a) {
|
|
|
21781
21684
|
var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === common.SubscriptionState.TRIAL;
|
|
21782
21685
|
return (jsxRuntime.jsxs("div", __assign({ className: "flex items-center justify-between", style: {
|
|
21783
21686
|
backgroundColor: darkMode ? "var(--row-background-dark)" : "",
|
|
21784
|
-
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) &&
|
|
21785
|
-
planChangeOptions &&
|
|
21786
|
-
onChangePlanClick &&
|
|
21787
|
-
onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, planChangeOptions: planChangeOptions, subscription: subscription }))] }))] })));
|
|
21687
|
+
} }, { children: [jsxRuntime.jsxs("div", __assign({ className: "flex flex-col gap-2" }, { children: [((_c = subscription === null || subscription === void 0 ? void 0 : subscription.product) === null || _c === void 0 ? void 0 : _c.name) && (jsxRuntime.jsx(Text$7, __assign({ style: __assign({ fontSize: "11px", fontWeight: 500, color: brandColor }, subscriptionProductNameStyle) }, { children: (_d = subscription.product.name) === null || _d === void 0 ? void 0 : _d.toUpperCase() }))), jsxRuntime.jsxs("div", __assign({ className: "flex grow items-center gap-2" }, { children: [((_e = subscription === null || subscription === void 0 ? void 0 : subscription.plan) === null || _e === void 0 ? void 0 : _e.name) && jsxRuntime.jsx(Text$7, __assign({ className: "text-lg" }, { children: subscription.plan.name })), jsxRuntime.jsxs(CustomizedTag, __assign({ color: common.TAG_COLORS[(_f = subscription.state) === null || _f === void 0 ? void 0 : _f.toUpperCase()] }, { children: [lodashExports.capitalize(subscription.state.toLowerCase()), isTrial ? " (".concat(trialDaysLeft, " days left)") : ""] }))] }))] })), jsxRuntime.jsxs("div", __assign({ className: "flex items-center gap-6" }, { children: [jsxRuntime.jsx(Text$7, __assign({ className: "grow text-xs" }, { children: getSubscriptionStatusText(subscription) })), !isMobile && priceListChangeOptions && onChangePlanClick && onCancelSubscriptionClick && (jsxRuntime.jsx(SubscriptionCardActions, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }))] }))] })));
|
|
21788
21688
|
};
|
|
21789
21689
|
|
|
21790
21690
|
var BillingPeriodConverter;
|
|
@@ -21878,11 +21778,11 @@ var CARD_COLUMNS = [
|
|
|
21878
21778
|
];
|
|
21879
21779
|
var SubscriptionCardDesktop = function (_a) {
|
|
21880
21780
|
var _b;
|
|
21881
|
-
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick,
|
|
21781
|
+
var onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscription = _a.subscription;
|
|
21882
21782
|
var shadow = react.useContext(SubscriptionsContext).shadow;
|
|
21883
21783
|
// Derived state
|
|
21884
21784
|
var isTrial = ((_b = subscription.state) === null || _b === void 0 ? void 0 : _b.toUpperCase()) === SubscriptionState$1.TRIAL;
|
|
21885
|
-
return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick,
|
|
21785
|
+
return (jsxRuntime.jsxs(Card, __assign({ className: "p-4 ".concat(shadow ? "shadow-".concat(shadow) : "") }, { children: [jsxRuntime.jsx(SubscriptionCardHeader, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }), jsxRuntime.jsx(antd.Divider, { className: "my-4", style: {
|
|
21886
21786
|
gridColumn: "1 / 5",
|
|
21887
21787
|
width: "calc(100% + 32px)",
|
|
21888
21788
|
transform: "translateX(-16px)",
|
|
@@ -21989,14 +21889,14 @@ var SubscriptionCard = function (_a) {
|
|
|
21989
21889
|
};
|
|
21990
21890
|
|
|
21991
21891
|
var SubscriptionsList = function (_a) {
|
|
21992
|
-
var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick,
|
|
21892
|
+
var hideExpired = _a.hideExpired, onChangePlanClick = _a.onChangePlanClick, onCancelSubscriptionClick = _a.onCancelSubscriptionClick, priceListChangeOptions = _a.priceListChangeOptions, subscriptions = _a.subscriptions;
|
|
21993
21893
|
var isMobile = common.useIsMobile();
|
|
21994
21894
|
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.map(function (subscription, subscriptionIndex) {
|
|
21995
21895
|
if (hideExpired && isSubscriptionNotActive(subscription))
|
|
21996
21896
|
return null;
|
|
21997
21897
|
if (isMobile)
|
|
21998
|
-
return
|
|
21999
|
-
return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick,
|
|
21898
|
+
return jsxRuntime.jsx(SubscriptionCard, { subscription: subscription }, subscriptionIndex);
|
|
21899
|
+
return (jsxRuntime.jsx(SubscriptionCardDesktop, { onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscription: subscription }, subscriptionIndex));
|
|
22000
21900
|
}) }));
|
|
22001
21901
|
};
|
|
22002
21902
|
|
|
@@ -22012,13 +21912,13 @@ var SubscriptionsListContainer = function (_a) {
|
|
|
22012
21912
|
// Queries
|
|
22013
21913
|
var _c = reactQuery.useQuery({
|
|
22014
21914
|
queryKey: common.QueryKeyFactory.default.planChangeOptionsKey({ token: token }),
|
|
22015
|
-
queryFn: function () { return
|
|
21915
|
+
queryFn: function () { return getPriceListChangeOptions({ token: token, apiHost: apiHost }); },
|
|
22016
21916
|
enabled: Boolean(onChangePlanClick),
|
|
22017
|
-
}),
|
|
21917
|
+
}), priceListChangeOptions = _c.data, arePriceListChangeOptionsLoading = _c.isLoading;
|
|
22018
21918
|
if (subscriptionsAreLoading ||
|
|
22019
|
-
(Boolean(onChangePlanClick) ?
|
|
21919
|
+
(Boolean(onChangePlanClick) ? arePriceListChangeOptionsLoading : false))
|
|
22020
21920
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
22021
|
-
return (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children:
|
|
21921
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (subscriptions === null || subscriptions === void 0 ? void 0 : subscriptions.length) > 0 ? (jsxRuntime.jsx("div", __assign({ className: "flex flex-col gap-".concat(gap, " shrink overflow-auto") }, { children: jsxRuntime.jsx(SubscriptionsList, { hideExpired: hideExpired, onChangePlanClick: onChangePlanClick, onCancelSubscriptionClick: onCancelSubscriptionClick, priceListChangeOptions: priceListChangeOptions, subscriptions: subscriptions }) }))) : (noSubscriptionsComponent || (jsxRuntime.jsx("div", __assign({ className: "flex flex-col items-center w-full" }, { children: jsxRuntime.jsx(ErrorView, { message: "You have no subscriptions with ".concat(companyName, " yet") }) })))) }));
|
|
22022
21922
|
};
|
|
22023
21923
|
|
|
22024
21924
|
var QUOTE_CHARGE_CREATE = "\nmutation QuoteChargeCreate ($quoteChangeId: ID!, $startDate: ISO8601Date!, $endDate: ISO8601Date, $priceListChargeId: ID, $subscriptionChargeId: ID, $price: Float, $quantity: Int) {\n quoteChargeCreate(\n endDate: $endDate\n price: $price\n priceListChargeId: $priceListChargeId\n quantity: $quantity\n quoteChangeId: $quoteChangeId\n startDate: $startDate\n subscriptionChargeId: $subscriptionChargeId\n ) {\n quoteCharge {\n quoteChange {\n id\n quoteId\n }\n }\n }\n}\n\n";
|