krp-react-form-component
Version:
KRP React Component for Form Preview Component
230 lines (229 loc) • 10.9 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/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.find.js");
var _react = _interopRequireWildcard(require("react"));
var _AppContext = require("../../../../../context/AppContext");
var _SelectionContext = require("../../../../../context/SelectionContext");
var _Constants = require("../../../../../constants/Constants");
var _default_image_offer_card = _interopRequireDefault(require("../../../../../images/default_image_offer_card.png"));
var _antd = require("antd");
require("./CardWithNoDetail.scss");
var _propTypes = _interopRequireDefault(require("prop-types"));
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 CardWithNoDetail = props => {
var _formDetailData$form_, _offerData$action_lin, _offerData$action_lin2;
const {
isMultipleSelect,
mode,
formDetailData,
resolveLocale,
appOnContinueApply,
appOnActionLog
} = (0, _react.useContext)(_AppContext.AppContext);
const {
selectionOffer,
campaign
} = (0, _react.useContext)(_SelectionContext.SelectionContext);
const {
nameRemark,
subRemark,
image,
onCheck = () => {},
onClick: _onClick = () => {},
offerData = {},
registered,
nameRemarkForActionLog,
subRemarkForActionLog,
tabForActionLog
} = props;
const repeatRegister = campaign.able_repeat_register;
const limitReached = campaign.limit_reached || campaign.user_limit_reached || campaign.campaign_limit_reached;
let ableRepeatRegister;
if (repeatRegister === _Constants.CONSTANTS.YES_WITH_NO_CONDITION) {
ableRepeatRegister = true;
} else {
ableRepeatRegister = false;
}
const limit = (_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.limit_multiple;
let numberOfButton = 0;
let isOfferLinkAvailable = mode === 'mobile' ? !!((_offerData$action_lin = offerData.action_link) !== null && _offerData$action_lin !== void 0 && _offerData$action_lin.webview_action) : !!((_offerData$action_lin2 = offerData.action_link) !== null && _offerData$action_lin2 !== void 0 && _offerData$action_lin2.website_link);
if (registered) {
numberOfButton = (offerData.factsheet_file !== "" || offerData.factsheet_text !== "" || offerData.factsheet_image !== "" ? 1 : 0) + (isOfferLinkAvailable ? 1 : 0);
}
let id;
if (offerData) {
switch (offerData.type) {
case _Constants.CONSTANTS.PRODUCT_OFFER:
id = offerData.product_id;
break;
case _Constants.CONSTANTS.PROMOTION_OFFER:
id = offerData.promotion_id;
break;
default:
break;
}
}
const isRecordInSelected = record => {
if (selectionOffer.find(current => current.name === record.name)) {
return true;
}
return false;
};
const isShowCheckbox = (ableRepeatRegister, registered, limitReached) => {
var _formDetailData$form_2;
if ((formDetailData === null || formDetailData === void 0 || (_formDetailData$form_2 = formDetailData.form_detail) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.sub_form_type) === _Constants.CONSTANTS.SUB_FORM_TYPE.NORMAL) {
// normal case
if (registered) {
if (limitReached) {
return false;
} else {
if (ableRepeatRegister) {
return true;
} else {
return false;
}
}
} else {
return true;
}
} else {
// informative case hide radio/checkbox
return false;
}
};
const isNoPointerOnHover = () => {
var _formDetailData$form_3;
if ((formDetailData === null || formDetailData === void 0 || (_formDetailData$form_3 = formDetailData.form_detail) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.sub_form_type) === _Constants.CONSTANTS.SUB_FORM_TYPE.NORMAL) {
// normal case
return limitReached && !registered || offerData.is_show_fact_sheet === 'no';
} else {
var _offerData$action_lin3;
// informative case
return !((_offerData$action_lin3 = offerData.action_link) !== null && _offerData$action_lin3 !== void 0 && _offerData$action_lin3.website_link) && offerData.is_show_fact_sheet === 'no';
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "card-container"
}, isShowCheckbox(ableRepeatRegister, registered, limitReached) && /*#__PURE__*/_react.default.createElement("div", {
className: "checkbox-container " + mode
}, isMultipleSelect ? /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
onChange: () => {
if (!isRecordInSelected(offerData)) {
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_FORM,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME['SELECT_OFFER_BY_CHECK_FORM' + tabForActionLog],
offerCode: id,
offerHighlightMessageTh: nameRemarkForActionLog,
offerMessageTh: subRemarkForActionLog
}, {
select: id
});
}
onCheck(offerData);
},
checked: isRecordInSelected(offerData),
disabled: (limit === 0 ? false : selectionOffer.length === limit ? isRecordInSelected(offerData) ? false : true : false) || limitReached
}) : /*#__PURE__*/_react.default.createElement("input", {
type: "radio",
id: id,
name: "selected",
onClick: () => {
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_FORM,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME['SELECT_OFFER_BY_CHECK_FORM' + tabForActionLog],
offerCode: id,
offerHighlightMessageTh: nameRemarkForActionLog,
offerMessageTh: subRemarkForActionLog
}, {
select: id
});
onCheck(offerData);
},
disabled: limitReached
})), /*#__PURE__*/_react.default.createElement("div", {
className: "CardWithNoDetail ".concat(mode, " ").concat(isShowCheckbox(ableRepeatRegister, registered, limitReached) ? "can-select" : "", " ").concat(limitReached && !registered ? "unable-to-click-card" : "", "\n ").concat(isNoPointerOnHover() ? "no-pointer" : ""),
onClick: limitReached && !registered ? () => {} : () => {
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_FORM,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME['SELECT_OFFER_BY_CARD_FORM' + tabForActionLog],
offerCode: id,
offerHighlightMessageTh: nameRemarkForActionLog,
offerMessageTh: subRemarkForActionLog
}, {
selectFromCard: id
});
_onClick(offerData);
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "offer-image-area"
}, /*#__PURE__*/_react.default.createElement("img", {
className: "image-size",
src: image ? image : _default_image_offer_card.default,
alt: "offer card",
onError: e => {
e.target.src = _default_image_offer_card.default;
e.onerror = null;
}
})), /*#__PURE__*/_react.default.createElement("div", {
className: "detail-container-no-property ".concat(registered && numberOfButton > 0 ? "with-button" : "")
}, /*#__PURE__*/_react.default.createElement("div", {
className: "name-content"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "sub-remark"
}, subRemark), /*#__PURE__*/_react.default.createElement("span", {
className: "name-remark"
}, nameRemark)), registered && numberOfButton > 0 && /*#__PURE__*/_react.default.createElement("div", {
className: "button-in-card ".concat(mode, " ").concat(numberOfButton === 1 ? "center" : "space-between")
}, offerData.is_show_fact_sheet === "yes" && /*#__PURE__*/_react.default.createElement(_antd.Button, {
onClick: e => {
e.stopPropagation();
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_FORM,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME.VIEW_OFFER_DETAILS_FORM_HISTORY,
buttonText: resolveLocale("CARD_OFFER_DETAILS")
}, {
selectFromCard: id
});
_onClick(offerData);
},
className: numberOfButton === 1 ? "single-button" : "double-button"
}, resolveLocale("CARD_OFFER_DETAILS")), isOfferLinkAvailable && /*#__PURE__*/_react.default.createElement(_antd.Button, {
className: numberOfButton === 1 ? "single-button" : "double-button",
onClick: e => {
e.stopPropagation();
appOnContinueApply(offerData.action_link, {
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_FORM,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME.CONTINUE_ACTION_FORM_HISTORY,
buttonText: resolveLocale("CARD_CONTINUE_APPLY")
});
}
}, resolveLocale("CARD_CONTINUE_APPLY"))))));
};
CardWithNoDetail.propTypes = {
nameRemark: _propTypes.default.string,
subRemark: _propTypes.default.string,
image: _propTypes.default.string,
onCheck: _propTypes.default.func,
onClick: _propTypes.default.func,
offerData: _propTypes.default.object,
registered: _propTypes.default.bool
};
var _default = exports.default = CardWithNoDetail;