krp-react-form-component
Version:
KRP React Component for Form Preview Component
263 lines (262 loc) • 12.5 kB
JavaScript
"use strict";
require("core-js/modules/es.weak-map.js");
require("core-js/modules/web.dom-collections.iterator.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es.parse-int.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/esnext.iterator.map.js");
var _react = _interopRequireWildcard(require("react"));
var _AppContext = require("../../../../context/AppContext");
var _SelectionContext = require("../../../../context/SelectionContext");
var _Constants = require("../../../../constants/Constants");
var _antd = require("antd");
var _RepeatRegister = _interopRequireDefault(require("../RepeatRegister/RepeatRegister"));
var _CardWithDetail = _interopRequireDefault(require("../Card/CardWithDetail/CardWithDetail"));
var _CardWithNoDetail = _interopRequireDefault(require("../Card/CardWithNoDetail/CardWithNoDetail"));
var _propTypes = _interopRequireDefault(require("prop-types"));
require("./SelectOfferPage.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const {
Paragraph
} = _antd.Typography;
const {
Link
} = _antd.Anchor;
const FormItem = _antd.Form.Item;
const SelectOfferPage = props => {
var _formDetailData$form_, _formDetailData$form_2, _formDetailData$form_3, _formDetailData$form_4;
const {
mode,
locale,
appOnSelectOffer,
formDetailData,
isMultipleSelect
} = (0, _react.useContext)(_AppContext.AppContext);
const {
registeredOffer = [],
campaign
} = (0, _react.useContext)(_SelectionContext.SelectionContext);
const {
offerData = [],
onCardClick,
total,
tabKey,
setTabKey
} = props;
const limitMultiple = (_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.limit_multiple;
const limitReached = campaign.limit_reached || campaign.user_limit_reached || campaign.campaign_limit_reached;
const renderFormItem = function renderFormItem(formItem, index, mode, registered) {
let tab = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '';
const {
getFieldDecorator
} = props.form;
let {
// title_en,
// title_th,
name,
id,
type,
text_th,
text_en,
link_title_th,
link_title_en,
link_name_th,
link_name_en,
link_th_version,
link_en_version,
// alert_text_en,
// alert_text_th,
// display_internal_data_field,
// min,
// max,
text_color,
promotion_name_remark_en,
promotion_name_remark_th,
product_name_remark_en,
product_name_remark_th,
sub_promotion_remark_en,
sub_promotion_remark_th,
sub_product_remark_en,
sub_product_remark_th,
promotion_image,
product_image
} = formItem;
let productPropertiesList = [];
if (formItem && formItem.product_properties) {
productPropertiesList = formItem.product_properties;
}
productPropertiesList = productPropertiesList.filter(o => o.product_property !== undefined && o.product_property !== null && o.product_property !== '' || o.property_displayed_en !== undefined && o.property_displayed_en !== null && o.property_displayed_en !== '' || o.property_displayed_th !== undefined && o.property_displayed_th !== null && o.property_displayed_th !== '');
let fieldName = "".concat(type, "-").concat(index);
let labelElement = "";
let formComponent;
let nameRemarkForActionLog;
if (formItem) {
switch (formItem.type) {
case _Constants.CONSTANTS.PRODUCT_OFFER:
nameRemarkForActionLog = formItem.product_name_remark_th;
break;
case _Constants.CONSTANTS.PROMOTION_OFFER:
nameRemarkForActionLog = formItem.promotion_name_remark_th;
break;
default:
break;
}
}
let subRemarkForActionLog;
if (formItem) {
switch (formItem.type) {
case _Constants.CONSTANTS.PRODUCT_OFFER:
subRemarkForActionLog = formItem.sub_product_remark_th;
break;
case _Constants.CONSTANTS.PROMOTION_OFFER:
subRemarkForActionLog = formItem.sub_promotion_remark_th;
break;
default:
break;
}
}
let tabForActionLog = '';
if (tab === 'recommend') {
tabForActionLog = '_RECOMMEND';
} else if (tab === 'history') {
tabForActionLog = '_HISTORY';
}
if (mode) {
switch (type) {
case _Constants.CONSTANTS.PRODUCT_OFFER:
formComponent = productPropertiesList.length > 0 ? /*#__PURE__*/_react.default.createElement(_CardWithDetail.default, {
nameRemark: locale === _Constants.CONSTANTS.TH ? product_name_remark_th : product_name_remark_en,
subRemark: locale === _Constants.CONSTANTS.TH ? sub_product_remark_th === undefined || sub_product_remark_th === null || sub_product_remark_th === "" ? sub_product_remark_en : sub_product_remark_th : sub_product_remark_en === undefined || sub_product_remark_en === null || sub_product_remark_en === "" ? sub_product_remark_th : sub_product_remark_en,
image: product_image,
onCheck: appOnSelectOffer,
onClick: onCardClick,
offerData: formItem,
registered: registered,
nameRemarkForActionLog: nameRemarkForActionLog,
subRemarkForActionLog: subRemarkForActionLog,
tabForActionLog: tabForActionLog
}) : /*#__PURE__*/_react.default.createElement(_CardWithNoDetail.default, {
nameRemark: locale === _Constants.CONSTANTS.TH ? product_name_remark_th : product_name_remark_en,
subRemark: locale === _Constants.CONSTANTS.TH ? sub_product_remark_th === undefined || sub_product_remark_th === null || sub_product_remark_th === "" ? sub_product_remark_en : sub_product_remark_th : sub_product_remark_en === undefined || sub_product_remark_en === null || sub_product_remark_en === "" ? sub_product_remark_th : sub_product_remark_en,
image: product_image,
onCheck: appOnSelectOffer,
onClick: onCardClick,
offerData: formItem,
registered: registered,
nameRemarkForActionLog: nameRemarkForActionLog,
subRemarkForActionLog: subRemarkForActionLog,
tabForActionLog: tabForActionLog
});
break;
case _Constants.CONSTANTS.PROMOTION_OFFER:
formComponent = /*#__PURE__*/_react.default.createElement(_CardWithNoDetail.default, {
nameRemark: locale === _Constants.CONSTANTS.TH ? promotion_name_remark_th : promotion_name_remark_en,
subRemark: locale === _Constants.CONSTANTS.TH ? sub_promotion_remark_th === undefined || sub_promotion_remark_th === null || sub_promotion_remark_th === "" ? sub_promotion_remark_en : sub_promotion_remark_th : sub_promotion_remark_en === undefined || sub_promotion_remark_en === null || sub_promotion_remark_en === "" ? sub_promotion_remark_th : sub_promotion_remark_en,
image: promotion_image,
onCheck: appOnSelectOffer,
onClick: onCardClick,
offerData: formItem,
registered: registered,
nameRemarkForActionLog: nameRemarkForActionLog,
subRemarkForActionLog: subRemarkForActionLog,
tabForActionLog: tabForActionLog
});
break;
case _Constants.CONSTANTS.SECTION_HEAD:
formComponent = /*#__PURE__*/_react.default.createElement(_antd.PageHeader, {
className: "section-head"
// id={`${FIELD_TYPE.SECTION_HEAD}-${i}`}
,
title: locale === _Constants.CONSTANTS.TH ? text_th : text_en,
name: name,
style: {
color: text_color
}
});
break;
case _Constants.CONSTANTS.LINK:
const getCurrentAnchor = () => {};
formComponent = /*#__PURE__*/_react.default.createElement(_antd.Anchor, {
affix: false,
getCurrentAnchor: getCurrentAnchor
}, /*#__PURE__*/_react.default.createElement(Link, {
href: locale === _Constants.CONSTANTS.TH ? link_th_version : link_en_version,
title: locale === _Constants.CONSTANTS.TH ? link_name_th : link_name_en
}));
labelElement = locale === _Constants.CONSTANTS.TH ? link_title_th : link_title_en;
break;
case _Constants.CONSTANTS.PARAGRAPH:
formComponent = /*#__PURE__*/_react.default.createElement(Paragraph
// id={`${FIELD_TYPE.PARAGRAPH}-${i}`}
, {
name: name,
className: "item-para"
}, locale === _Constants.CONSTANTS.TH ? text_th : text_en);
break;
case _Constants.CONSTANTS.PAGE_BREAK:
formComponent = /*#__PURE__*/_react.default.createElement(_antd.Divider
// id={`${FIELD_TYPE.PAGE_BREAK}-${i}`}
, {
name: name
});
break;
default:
formComponent = null;
break;
}
}
return /*#__PURE__*/_react.default.createElement(FormItem, {
label: labelElement,
className: "form-component-container ".concat(mode, " ").concat(type),
key: "".concat(index, "-").concat(id)
}, getFieldDecorator(fieldName)(/*#__PURE__*/_react.default.createElement("div", null, formComponent)));
};
const backgroundImageStyle = mode => {
if (mode === "browser_desktop") {
return {
display: "flex",
marginTop: "-24px",
marginLeft: "-32px",
marginRight: "-32px",
width: "calc(100% + 64px)",
height: "533px",
borderRadius: "8px 8px 0 0"
};
} else {
return {
display: "flex",
marginTop: "-12px",
marginLeft: "-16px",
marginRight: "-166px",
width: "calc(100% + 32px)",
opacity: "0.3"
};
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "SelectOfferPage ".concat(mode, " ").concat(registeredOffer.length > 0 ? "" : limitReached ? "limit-reached" : isMultipleSelect ? total === 0 ? "single-select" // no offer case but same styling as single-select
: parseInt(limitMultiple) === 0 || parseInt(limitMultiple) >= total ? "multi-select" : "limit-multi-select" : "single-select")
}, mode === "browser_desktop" ? formDetailData.form_styles && ((_formDetailData$form_2 = formDetailData.form_styles) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.background_image_desktop) && ((_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.background_image_alignment) === "top" && /*#__PURE__*/_react.default.createElement("img", {
src: (_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.background_image_desktop,
alt: "background",
style: backgroundImageStyle(mode)
}) : null, registeredOffer.length === 0 && offerData && offerData.length > 0 && offerData.map((item, index) => renderFormItem(item, index, mode, false)), registeredOffer.length > 0 && /*#__PURE__*/_react.default.createElement(_RepeatRegister.default, {
recommendData: offerData,
offersHistoryData: registeredOffer,
renderFormItem: renderFormItem,
total: total,
tabKey: tabKey,
setTabKey: setTabKey
}));
};
SelectOfferPage.propTypes = {
onCardClick: _propTypes.default.func,
offerData: _propTypes.default.array,
total: _propTypes.default.number
};
var _default = exports.default = _antd.Form.create()(SelectOfferPage);