krp-react-form-component
Version:
KRP React Component for Form Preview Component
290 lines (289 loc) • 16.6 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.find.js");
require("core-js/modules/esnext.iterator.map.js");
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _AppContext = require("../../../../context/AppContext");
var _SelectionContext = require("../../../../context/SelectionContext");
var _propTypes = _interopRequireDefault(require("prop-types"));
require("./ConfirmButton.scss");
var _Constants = require("../../../../constants/Constants");
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 ConfirmButton = props => {
var _formDetailData$form_, _formDetailData$form_2, _formDetailData$form_3, _formDetailData$form_4, _formDetailData$form_5, _formDetailData$form_6, _formDetailData$form_7, _formDetailData$form_0, _formDetailData$form_1, _formDetailData$form_10, _formDetailData$form_11, _formDetailData$form_12, _formDetailData$form_13, _formDetailData$form_14;
const {
mode,
locale,
resolveLocale,
formDetailData,
isMultipleSelect,
appOnSelectOffer,
appOnToStep,
appOnSubmitRegister,
appOnActionLog,
appOnContinueApply
} = (0, _react.useContext)(_AppContext.AppContext);
const {
selectionOffer,
formStep,
campaign,
registeredOffer = [],
offerFactsheet,
selectedReward
} = (0, _react.useContext)(_SelectionContext.SelectionContext);
const {
formBackgroundStyle,
total,
offer,
registered,
ableRepeatRegister,
tabKey
} = props;
let isSelectAllCheck = selectionOffer.length === total;
const limitMultiple = (_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.limit_multiple;
let buttonText;
switch (formStep) {
case "selectOfferPage":
buttonText = locale === _Constants.CONSTANTS.EN ? ((_formDetailData$form_2 = formDetailData.form_styles) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.offer_button_en) || resolveLocale("BUTTON_CONFIRM") : ((_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.offer_button_th) || resolveLocale("BUTTON_CONFIRM");
break;
case "factsheetPage":
buttonText = locale === _Constants.CONSTANTS.EN ? ((_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.factsheet_button_en) || resolveLocale("BUTTON_CONFIRM") : ((_formDetailData$form_5 = formDetailData.form_styles) === null || _formDetailData$form_5 === void 0 ? void 0 : _formDetailData$form_5.factsheet_button_th) || resolveLocale("BUTTON_CONFIRM");
break;
case "selectRewardPage":
buttonText = locale === _Constants.CONSTANTS.EN ? ((_formDetailData$form_6 = formDetailData.form_styles) === null || _formDetailData$form_6 === void 0 ? void 0 : _formDetailData$form_6.reward_button_en) || resolveLocale("BUTTON_CONFIRM") : ((_formDetailData$form_7 = formDetailData.form_styles) === null || _formDetailData$form_7 === void 0 ? void 0 : _formDetailData$form_7.reward_button_th) || resolveLocale("BUTTON_CONFIRM");
break;
default:
buttonText = resolveLocale("BUTTON_CONFIRM");
break;
}
const handleSelectAllOffer = e => {
const selectAllData = offer.concat(registered);
let conditionActionLog = '';
if (parseInt(tabKey) === 1) {
conditionActionLog = '_RECOMMEND';
} else if (parseInt(tabKey) === 2) {
conditionActionLog = '_HISTORY';
}
if (!isSelectAllCheck) {
const allId = selectAllData.map(data => data.product_id || data.promotion_id);
const allName = selectAllData.map(data => data.product_name_remark_th || data.promotion_name_remark_th);
const allSub = selectAllData.map(data => data.sub_product_remark_th || data.sub_promotion_remark_th);
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_ALL_FORM' + conditionActionLog],
offerCode: allId.join(','),
offerHighlightMessageTh: allName.join(','),
offerMessageTh: allSub.join(',')
}, {
selectAll: allId
});
}
appOnSelectOffer(selectAllData, e);
};
const handleConfirmButton = e => {
var _formDetailData$form_8, _formDetailData$form_9;
e.preventDefault();
const haveFactsheet = selectionOffer.filter(obj => obj.is_show_fact_sheet === "yes" && (obj.factsheet_file !== "" || obj.factsheet_text !== "" || obj.factsheet_image !== "")).length !== 0;
const haveReward = selectionOffer.filter(obj => {
var _obj$reward;
return ((_obj$reward = obj.reward) === null || _obj$reward === void 0 ? void 0 : _obj$reward.length) > 0;
}).length !== 0;
const isRewardOffer = (_formDetailData$form_8 = formDetailData.form_detail) === null || _formDetailData$form_8 === void 0 ? void 0 : _formDetailData$form_8.reward_offer;
switch (formStep) {
case "selectOfferPage":
let conditionActionLog = '';
if (parseInt(tabKey) === 1) {
conditionActionLog = '_RECOMMEND';
} else if (parseInt(tabKey) === 2) {
conditionActionLog = '_HISTORY';
}
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['NEXT_FROM_MULTI_OFFER_FORM' + conditionActionLog],
buttonText: buttonText
});
if (haveFactsheet) {
appOnToStep("factsheetPage");
} else {
if (haveReward && isRewardOffer) {
appOnToStep("selectRewardPage");
} else {
appOnSubmitRegister();
}
}
break;
case "factsheetPage":
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_DETAILS,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME.NEXT_FROM_OFFER_DETAILS,
buttonText: buttonText
});
if ((formDetailData === null || formDetailData === void 0 || (_formDetailData$form_9 = formDetailData.form_detail) === null || _formDetailData$form_9 === void 0 ? void 0 : _formDetailData$form_9.sub_form_type) === _Constants.CONSTANTS.SUB_FORM_TYPE.NORMAL) {
// normal case
if (offerFactsheet.length !== 0) {
// from click offer card case
// click from card img
const e = {
target: {
checked: true
}
};
appOnSelectOffer(offerFactsheet, e);
const offerFactsheetHaveReward = offerFactsheet.filter(obj => {
var _obj$reward2;
return ((_obj$reward2 = obj.reward) === null || _obj$reward2 === void 0 ? void 0 : _obj$reward2.length) > 0;
}).length !== 0;
if (offerFactsheetHaveReward) {
appOnToStep("selectRewardPage");
} else {
appOnSubmitRegister();
}
} else {
// from click radio/checkbox then click confirm button case
if (haveReward && isRewardOffer) {
appOnToStep("selectRewardPage");
} else {
appOnSubmitRegister();
}
}
} else {
// informative case
const e = {
target: {
checked: true
}
}; // failsafe for offerFactsheet state cleared
appOnSelectOffer(offerFactsheet, e); // failsafe for offerFactsheet state cleared
if (offerFactsheet.length !== 0) {
var _offerFactsheet$;
// click from card img
appOnContinueApply((_offerFactsheet$ = offerFactsheet[0]) === null || _offerFactsheet$ === void 0 ? void 0 : _offerFactsheet$.action_link);
} else if (selectionOffer.length !== 0) {
var _selectionOffer$;
// failsafe for offerFactsheet state cleared
appOnContinueApply((_selectionOffer$ = selectionOffer[0]) === null || _selectionOffer$ === void 0 ? void 0 : _selectionOffer$.action_link);
}
}
break;
case "selectRewardPage":
appOnActionLog({
screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_MULTI_OFFER_REWARD,
eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME.NEXT_FROM_MULTI_OFFER_REWARD,
buttonText: buttonText
});
// do not change step to 'confirmationPage' here
appOnSubmitRegister();
break;
default:
break;
}
};
const handleCheckOfferFactsheet = () => {
const limitReached = campaign.limit_reached || campaign.user_limit_reached || campaign.campaign_limit_reached;
if (offerFactsheet.length !== 0) {
if (registeredOffer.find(i => i.name === offerFactsheet[0].name) && (!ableRepeatRegister || limitReached)) {
return true;
} else {
return false;
}
} else {
return false;
}
};
const isRenderingSelectAllContainer = () => {
if (formStep === "selectOfferPage") {
return isMultipleSelect && parseInt(limitMultiple) === 0 || isMultipleSelect && parseInt(limitMultiple) >= total;
} else {
return false;
}
};
const isRenderingBrowserCount = () => {
if (formStep === "selectRewardPage") {
return true;
} else if (isMultipleSelect && parseInt(limitMultiple) > 0 && formStep === "selectOfferPage") {
if (parseInt(limitMultiple) >= total) {
return false;
} else {
return true;
}
} else {
return false;
}
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, total !== 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isRenderingSelectAllContainer() && /*#__PURE__*/_react.default.createElement("div", {
className: "select-all-container " + mode,
style: mode === "browser_desktop" ? formBackgroundStyle((_formDetailData$form_0 = formDetailData.form_styles) === null || _formDetailData$form_0 === void 0 ? void 0 : _formDetailData$form_0.form_background, false) : {}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "select-all-wrap " + mode
}, formStep === "selectOfferPage" && /*#__PURE__*/_react.default.createElement("div", {
className: "checkbox-and-text"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "checkbox-container"
}, /*#__PURE__*/_react.default.createElement("input", {
type: "checkbox",
id: "select-all",
onChange: handleSelectAllOffer,
checked: isSelectAllCheck
})), /*#__PURE__*/_react.default.createElement("label", {
htmlFor: "select-all"
}, resolveLocale("FORM_DETAIL_SELECT_ALL"))), /*#__PURE__*/_react.default.createElement("div", {
className: "count-offer"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "left-side"
}, resolveLocale("FORM_DETAIL_SELECTED_OFFER")), /*#__PURE__*/_react.default.createElement("span", {
className: "right-side"
}, "".concat(selectionOffer.length, "/").concat(total))))), isRenderingBrowserCount() && /*#__PURE__*/_react.default.createElement("div", {
className: "count-offer-container " + mode,
style: mode === "browser_desktop" ? formBackgroundStyle((_formDetailData$form_1 = formDetailData.form_styles) === null || _formDetailData$form_1 === void 0 ? void 0 : _formDetailData$form_1.form_background, false) : {}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "count-offer-wrap"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "count-offer"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "count-left-side"
}, formStep === "selectOfferPage" ? resolveLocale("FORM_DETAIL_SELECTED_OFFER") : formStep === "selectRewardPage" ? resolveLocale("SELECTED_REWARD") : ""), /*#__PURE__*/_react.default.createElement("span", {
className: "count-right-side"
}, formStep === "selectOfferPage" ? isMultipleSelect ? "".concat(selectionOffer.length, "/").concat(Math.min(total, (_formDetailData$form_10 = formDetailData.form_styles) === null || _formDetailData$form_10 === void 0 ? void 0 : _formDetailData$form_10.limit_multiple)) : "".concat(selectionOffer.length, "/1") : formStep === "selectRewardPage" ? "".concat(selectedReward.filter(i => i !== "" && i !== undefined).length, "/").concat(selectionOffer.filter(i => i.reward && i.reward.length !== 0).length) : ""))))), /*#__PURE__*/_react.default.createElement("div", {
className: "main-button-container ".concat(mode, " ").concat(formStep, " ").concat(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"),
style: mode === "browser_desktop" ? formBackgroundStyle((_formDetailData$form_11 = formDetailData.form_styles) === null || _formDetailData$form_11 === void 0 ? void 0 : _formDetailData$form_11.form_background, false) : {}
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
type: "primary",
className: "main-button",
shape: "round",
onClick: handleConfirmButton,
disabled: formStep === "selectOfferPage" ? selectionOffer.length < 1 : formStep === "factsheetPage" ? handleCheckOfferFactsheet() : formStep === "selectRewardPage" ? selectedReward.filter(i => i !== "" && i !== undefined).length !== selectionOffer.filter(i => i.reward && i.reward.length !== 0).length : false,
style: mode === "browser_desktop" || mode === "browser_mobile" ? (formStep === "selectOfferPage" ? selectionOffer.length < 1 : false) || (formStep === "factsheetPage" ? handleCheckOfferFactsheet() : false) || (formStep === "selectRewardPage" ? selectedReward.filter(i => i !== "" && i !== undefined).length !== selectionOffer.filter(i => i.reward && i.reward.length !== 0).length : false) ? {
// disabled
backgroundColor: "rgb(179, 179, 179)",
color: (_formDetailData$form_12 = formDetailData.form_styles) === null || _formDetailData$form_12 === void 0 ? void 0 : _formDetailData$form_12.text_color
} : {
backgroundColor: (_formDetailData$form_13 = formDetailData.form_styles) === null || _formDetailData$form_13 === void 0 ? void 0 : _formDetailData$form_13.register_button_color,
color: (_formDetailData$form_14 = formDetailData.form_styles) === null || _formDetailData$form_14 === void 0 ? void 0 : _formDetailData$form_14.text_color
} : null
}, buttonText)), mode === "mobile" && /*#__PURE__*/_react.default.createElement("div", {
className: "mobile-overlay-margin"
}));
};
ConfirmButton.propTypes = {
formBackgroundStyle: _propTypes.default.func
};
var _default = exports.default = ConfirmButton;