@procraft/widget-order
Version:
Order widget for landing
176 lines • 10.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.OrderButton = void 0;
const moment_1 = __importDefault(require("moment"));
const react_1 = __importStar(require("react"));
const Button_1 = __importDefault(require("../../components/Button"));
const Container_1 = __importDefault(require("../../components/Container"));
const OldPrice_1 = __importDefault(require("../../components/OldPrice"));
const Typography_1 = __importDefault(require("../../components/Typography"));
const colors_1 = require("../../constants/colors");
const useOrderLink_1 = require("../../hooks/useOrderLink");
const Course_1 = require("../../models/Course");
const types_1 = require("../../modules/gql/generated/types");
const utils_1 = require("../../utils");
const styles_1 = require("./styles");
const PriceFormat_1 = require("../../PriceFormat");
/**
* Кнопка заказа
*/
const OrderButton = ({ catalogItem, fieldsValueSelected, orderLink, orderLinkParams, course, buttonBgColor, buttonTextColor, containerBgColor, dateTextColor, selectedDateTextColor, }) => {
var _a, _b;
(0, react_1.useEffect)(() => {
dateIndexSetter(0);
}, [fieldsValueSelected]);
/**
* Какой вариант даты активен
*/
const [dateIndex, dateIndexSetter] = (0, react_1.useState)(0);
let uri = (0, useOrderLink_1.useOrderLink)({
catalogItem,
orderLink,
orderLinkParams,
fieldsValueSelected,
sale: undefined,
}).toString();
const onClickDateIndex = (0, react_1.useCallback)((event) => {
var _a;
const idx = parseInt((_a = event.currentTarget.dataset.idx) !== null && _a !== void 0 ? _a : '');
if (!isNaN(idx)) {
dateIndexSetter(idx);
}
}, []);
return (0, react_1.useMemo)(() => {
var _a, _b, _c, _d, _e, _f, _g;
const content = [];
const saleByTime = (_a = course.tariffPerFlowDataItems) === null || _a === void 0 ? void 0 : _a.find((n) => {
var _a;
return n.priceDetails.kind === types_1.CourseTariffPriceKind.CHANGESBYTIME &&
n.courseTariffId === ((_a = catalogItem.course) === null || _a === void 0 ? void 0 : _a.tariffId) &&
fieldsValueSelected.length &&
n.flowId === Number(fieldsValueSelected[0].optionValue);
});
let saleDateItem;
const changeByTimeItems = ((_c = (_b = saleByTime === null || saleByTime === void 0 ? void 0 : saleByTime.priceDetails) === null || _b === void 0 ? void 0 : _b.changeByTime) === null || _c === void 0 ? void 0 : _c.items) || [];
let currStartDate = null;
if (changeByTimeItems.length > 1) {
const firstFutureItemIndex = changeByTimeItems.findIndex((item) => (0, moment_1.default)(item.startsAt) > (0, moment_1.default)());
let changeByTimeItemsNew = [];
if (firstFutureItemIndex === -1) {
const item = [...changeByTimeItems].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.startsAt) ? new Date(b === null || b === void 0 ? void 0 : b.startsAt).getTime() : 0) -
((a === null || a === void 0 ? void 0 : a.startsAt) ? new Date(a === null || a === void 0 ? void 0 : a.startsAt).getTime() : 0))[0];
changeByTimeItemsNew.push(item);
}
else {
changeByTimeItemsNew = changeByTimeItemsNew.concat([
changeByTimeItems[firstFutureItemIndex - 1],
...changeByTimeItems.filter((item) => (0, moment_1.default)(item.startsAt) > (0, moment_1.default)()),
].filter((v) => v));
}
const expiratedFound = changeByTimeItems.findIndex((item) => (0, moment_1.default)(item.startsAt) < (0, moment_1.default)());
saleDateItem =
(changeByTimeItemsNew === null || changeByTimeItemsNew === void 0 ? void 0 : changeByTimeItemsNew[dateIndex]) || changeByTimeItemsNew[0];
if (changeByTimeItemsNew[1]) {
if (expiratedFound) {
changeByTimeItemsNew = changeByTimeItemsNew.map((item) => (Object.assign(Object.assign({}, item), { startsAt: (0, moment_1.default)(item.startsAt) > (0, moment_1.default)() ? item.startsAt : null })));
}
currStartDate =
((_d = changeByTimeItemsNew === null || changeByTimeItemsNew === void 0 ? void 0 : changeByTimeItemsNew[dateIndex]) === null || _d === void 0 ? void 0 : _d.startsAt) ||
changeByTimeItemsNew[0].startsAt;
content.push(react_1.default.createElement(styles_1.OrderButtonByDateSalesStyled, { key: "OrderButtonByDateSalesStyled", variant: "white", bgColor: containerBgColor }, changeByTimeItemsNew.map((item, idx) => (react_1.default.createElement("span", { key: idx, className: dateIndex === idx ? 'active' : undefined, style: {
backgroundColor: dateIndex === idx
? buttonBgColor !== null && buttonBgColor !== void 0 ? buttonBgColor : colors_1.TITLE_BG_DEFAULT_COLOR
: 'transparent',
color: dateIndex === idx
? selectedDateTextColor !== null && selectedDateTextColor !== void 0 ? selectedDateTextColor : colors_1.TITLE_TEXT_DEFAULT_COLOR
: dateTextColor !== null && dateTextColor !== void 0 ? dateTextColor : colors_1.COLORED_TEXT_DEFAULT_COLOR,
}, "data-idx": idx, onClick: onClickDateIndex }, item.startsAt
? `Цена после ${(0, moment_1.default)(item.startsAt).format('D MMMM')}`
: `Цена до ${(0, moment_1.default)(changeByTimeItemsNew[1].startsAt).format('D MMMM')}`)))));
}
}
let oldPrice = 0;
let price = 0;
let promoCode = '';
/**
* Можно ли сделать заказ
*/
let canOrder = true;
fieldsValueSelected.forEach((n) => {
const { extraPay, extraPayOriginal, availableCount } = n;
/**
* Если нет мест, заказать курс нельзя
*/
if (typeof availableCount === 'number' && availableCount < 1) {
canOrder = false;
return;
}
price += extraPay;
oldPrice += extraPayOriginal || extraPay;
});
if (!canOrder) {
return null;
}
if (saleDateItem) {
oldPrice = saleDateItem.priceMarketing;
price = saleDateItem.priceReal;
}
if (catalogItem.priceWithPromoCode && ((_e = catalogItem.promoCode) === null || _e === void 0 ? void 0 : _e.code)) {
price = catalogItem.priceWithPromoCode;
promoCode = catalogItem.promoCode.code;
// eslint-disable-next-line react-hooks/exhaustive-deps
uri = `${uri}&promoCode=${promoCode}`;
}
const currencyPrefix = (0, utils_1.getCurrencyPrefix)(((_f = catalogItem.master) === null || _f === void 0 ? void 0 : _f.currency) || '');
const currencySuffix = (0, utils_1.getCurrencySuffix)(((_g = catalogItem.master) === null || _g === void 0 ? void 0 : _g.currency) || '');
const freeLabel = (0, Course_1.formatFreeLabel)(course);
content.push(react_1.default.createElement(Container_1.default, { bgColor: containerBgColor, key: "buy", variant: "white", className: "buy" },
oldPrice && oldPrice > price ? (react_1.default.createElement(OldPrice_1.default, { prefix: currencyPrefix, suffix: currencySuffix, price: oldPrice })) : null,
!price ? (react_1.default.createElement(Typography_1.default, { className: "free", component: "span" }, freeLabel)) : null,
react_1.default.createElement("div", { className: "buy" },
react_1.default.createElement("a", { href: uri.toString(), className: "buy-link" },
react_1.default.createElement(Button_1.default, { backgroundColor: promoCode ? '#F04020' : buttonBgColor, textColor: buttonTextColor, disabled: Boolean(currStartDate) && (0, moment_1.default)(currStartDate) > (0, moment_1.default)() }, price ? (react_1.default.createElement(react_1.default.Fragment, null,
promoCode ? 'По промо за ' : 'Купить за ',
react_1.default.createElement(PriceFormat_1.PriceFormat, { prefix: currencyPrefix, suffix: currencySuffix, value: price }))) : ('Зарегистрироваться'))))));
return react_1.default.createElement(react_1.default.Fragment, null, content);
}, [
course.tariffPerFlowDataItems,
course.subKind,
course.subKindLabel,
fieldsValueSelected,
uri,
(_a = catalogItem.course) === null || _a === void 0 ? void 0 : _a.tariffId,
(_b = catalogItem.master) === null || _b === void 0 ? void 0 : _b.currency,
dateIndex,
onClickDateIndex,
buttonBgColor,
buttonTextColor,
containerBgColor,
dateTextColor,
selectedDateTextColor,
]);
};
exports.OrderButton = OrderButton;
//# sourceMappingURL=index.js.map