@procraft/widget-order
Version:
Order widget for landing
167 lines • 10.3 kB
JavaScript
"use strict";
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 });
const react_1 = __importStar(require("react"));
const Typography_1 = __importDefault(require("../components/Typography"));
const colors_1 = require("../constants/colors");
const usePrices_1 = require("../hooks/usePrices");
const types_1 = require("../modules/gql/generated/types");
const FieldValuesByType_1 = require("./FieldValuesByType");
const Materials_1 = __importDefault(require("./Materials"));
const OrderButton_1 = require("./OrderButton");
const Reviews_1 = require("./Reviews");
const Sales_1 = __importDefault(require("./Sales"));
const styles_1 = require("./styles");
const Course_1 = require("../models/Course");
const styled_components_1 = __importDefault(require("styled-components"));
const utils_1 = require("../utils");
const CourseItem = (props) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
const { orderLink, orderLinkParams, materialsLimit, course, catalogItem: item, ratesVisible, style, } = props;
const colors = style === null || style === void 0 ? void 0 : style['colors'];
const titleBgColor = (_a = colors === null || colors === void 0 ? void 0 : colors['titleBg']) !== null && _a !== void 0 ? _a : colors_1.TITLE_BG_DEFAULT_COLOR;
const mainBgColor = (_b = colors === null || colors === void 0 ? void 0 : colors['mainBg']) !== null && _b !== void 0 ? _b : colors_1.MAIN_BG_DEFAULT_COLOR;
const contentBgColor = (_c = colors === null || colors === void 0 ? void 0 : colors['contentBg']) !== null && _c !== void 0 ? _c : colors_1.CONTENT_BG_DEFAULT_COLOR;
const extraBgColor = (_d = colors === null || colors === void 0 ? void 0 : colors['extraBg']) !== null && _d !== void 0 ? _d : colors_1.EXTRA_BG_DEFAULT_COLOR;
const titleTextColor = (_e = colors === null || colors === void 0 ? void 0 : colors['titleText']) !== null && _e !== void 0 ? _e : colors_1.TITLE_TEXT_DEFAULT_COLOR;
const contentTextColor = (_f = colors === null || colors === void 0 ? void 0 : colors['contentText']) !== null && _f !== void 0 ? _f : colors_1.CONTENT_TEXT_DEFAULT_COLOR;
const coloredTextColor = (_g = colors === null || colors === void 0 ? void 0 : colors['coloredText']) !== null && _g !== void 0 ? _g : colors_1.COLORED_TEXT_DEFAULT_COLOR;
/**
* Текущий элемент
*/
const [fieldsValueSelected, fieldsValueSelectedSetter] = (0, react_1.useState)([]);
const { extraBenefits } = (0, react_1.useMemo)(() => {
var _a;
const flowId = fieldsValueSelected
.filter((x) => x.fieldId === -1808)
.map((fv) => +fv.uid.substr(6))[0];
const tariffId = (_a = item.course) === null || _a === void 0 ? void 0 : _a.tariffId;
const extraBenefits = (course.tariffPerFlowDataItems || [])
.filter((x) => x.flowId === flowId && (!tariffId || x.courseTariffId === tariffId))
.map((pfdi) => pfdi.marketingBenefitsComputed)[0] || [];
return { extraBenefits };
}, [
fieldsValueSelected,
course.tariffPerFlowDataItems,
(_h = item.course) === null || _h === void 0 ? void 0 : _h.tariffId,
]);
// Делаем строку, чтобы при отсутствии изменений не было пересчета
const selectedUids = ',' + fieldsValueSelected.map((fv) => fv.uid).join(',') + ',';
// Фильтруем элементы по их родителям: если родители не выбраны, то не показываем
const fieldValues = (0, react_1.useMemo)(() => (item.fieldValues || []).filter((fv) => {
if (fv.parents) {
const parents = fv.parents.split(',');
if (!parents.some((x) => selectedUids.includes(`,${x},`))) {
return false;
}
}
return true;
}), [item.fieldValues, selectedUids]);
/**
* Выбираем первый элемент в группе при отображении
*/
(0, react_1.useEffect)(() => {
const fvSelected = [];
/**
* Для каждого типа поля выбираем первый, если еще ничего не выбрано
*/
for (const typeKey in types_1.CatalogFieldValueType) {
const t = types_1.CatalogFieldValueType[typeKey];
const selectedByType = fieldValues.filter((x) => x.type === t && selectedUids.includes(`,${x.uid},`));
if (!selectedByType.length) {
selectedByType.push(...fieldValues.filter((x) => x.type === t).slice(0, 1));
}
fvSelected.push(...selectedByType);
}
fieldsValueSelectedSetter(fvSelected);
}, [fieldValues, selectedUids]);
const fieldValuesInfo = (0, usePrices_1.usePrices)({ fieldValues, fieldsValueSelected });
const fieldValuesByType = (0, react_1.useMemo)(() => {
const content = [];
Object.values(types_1.CatalogFieldValueType).forEach((type) => {
content.push(react_1.default.createElement(FieldValuesByType_1.FieldValuesByType, { key: type, fieldsValueSelected: fieldsValueSelected, fieldsValueSelectedSetter: fieldsValueSelectedSetter, fieldValuesInfo: fieldValuesInfo, type: type, checkedBgColor: titleBgColor, checkedTextColor: titleTextColor, placesLeftBgColor: extraBgColor, placesLeftTextColor: coloredTextColor }));
});
return content;
}, [
fieldValuesInfo,
fieldsValueSelected,
titleBgColor,
titleTextColor,
coloredTextColor,
extraBgColor,
]);
return (0, react_1.useMemo)(() => {
var _a, _b, _c, _d;
if (!item) {
return null;
}
const tariff = (_a = course.tariffs) === null || _a === void 0 ? void 0 : _a.find((n) => { var _a; return n.uid === ((_a = item.course) === null || _a === void 0 ? void 0 : _a.tariffId); });
const title = (0, Course_1.formatCourseSubKindLabel)({
subKind: (_b = course.subKind) !== null && _b !== void 0 ? _b : types_1.CourseSubKind.COURSE,
subKindLabel: course.subKindLabel,
});
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(styles_1.WidgetStyled, { style: { backgroundColor: mainBgColor } },
react_1.default.createElement(styles_1.NavigationStyled, { style: { backgroundColor: titleBgColor } },
react_1.default.createElement(Typography_1.default, null,
react_1.default.createElement("span", { style: { color: titleTextColor } }, title))),
react_1.default.createElement(styles_1.BoxStyled, null,
react_1.default.createElement(Typography_1.default, { className: "title", component: "h3" }, (tariff === null || tariff === void 0 ? void 0 : tariff.name) && tariff.name !== 'Единые условия'
? tariff.name
: course.name),
((_d = (_c = item.course) === null || _c === void 0 ? void 0 : _c.courseMeta) === null || _d === void 0 ? void 0 : _d.courseKind) === types_1.CourseKind.WEBINAR &&
item.course.courseMeta.webinarStartsAt &&
!item.course.courseMeta.webinarHasPassed && (react_1.default.createElement(WebinarDate, null,
"\u041D\u0430\u0447\u0430\u043B\u043E",
' ',
(0, utils_1.formatDateOptionalTime)(item.course.courseMeta.webinarStartsAt))),
ratesVisible && item.reviewsCount ? (react_1.default.createElement(Reviews_1.Reviews, { textColor: coloredTextColor, reviewsCount: item.reviewsCount, item: item })) : null,
tariff ? (react_1.default.createElement(Materials_1.default, { backgroundColor: contentBgColor, textColor: contentTextColor, linkColor: coloredTextColor, benefits: tariff.marketingBenefits, extraBenefits: extraBenefits, limit: materialsLimit })) : null,
fieldValuesByType,
react_1.default.createElement("div", { className: "flex-1" }),
react_1.default.createElement(OrderButton_1.OrderButton, { catalogItem: item, orderLink: orderLink, orderLinkParams: orderLinkParams, course: course, fieldsValueSelected: fieldsValueSelected, buttonBgColor: titleBgColor, buttonTextColor: titleTextColor, containerBgColor: contentBgColor, dateTextColor: coloredTextColor, selectedDateTextColor: titleTextColor }))),
react_1.default.createElement(Sales_1.default, { catalogItem: item, orderLink: orderLink, fieldsValueSelected: fieldsValueSelected, bgColor: mainBgColor, buttonColor: titleBgColor, buttonTextColor: titleTextColor, titleTextColor: coloredTextColor })));
}, [
item,
course,
mainBgColor,
titleBgColor,
titleTextColor,
ratesVisible,
coloredTextColor,
contentBgColor,
contentTextColor,
extraBenefits,
materialsLimit,
fieldValuesByType,
orderLink,
orderLinkParams,
fieldsValueSelected,
]);
};
const WebinarDate = styled_components_1.default.div `
margin: 0 0 10px;
`;
exports.default = CourseItem;
//# sourceMappingURL=index.js.map