krp-react-form-component
Version:
KRP React Component for Form Preview Component
225 lines (224 loc) • 12 kB
JavaScript
"use strict";
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.parse-int.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.filter.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _AppContext = require("../../../context/AppContext");
var _SelectionContext = require("../../../context/SelectionContext");
var _Constants = require("../../../constants/Constants");
var _SelectOfferPage = _interopRequireDefault(require("./SelectOfferPage/SelectOfferPage"));
var _ConfirmationPage = _interopRequireDefault(require("./ConfirmationPage/ConfirmationPage"));
var _ConfirmButton = _interopRequireDefault(require("./CommonButton/ConfirmButton"));
require("./MainMultiOfferingForm.scss");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FactsheetPage = _interopRequireDefault(require("./FactsheetPage/FactsheetPage"));
var _default_bg = _interopRequireDefault(require("../../../images/default_bg.png"));
var _LimitReachedFooter = _interopRequireDefault(require("./LimitReachedFooter/LimitReachedFooter"));
var _SelectRewardPage = _interopRequireDefault(require("./SelectRewardPage/SelectRewardPage"));
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 MainMultiOfferingForm = () => {
var _formDetailData$form_, _formDetailData$form_6, _formDetailData$form_7;
const {
selectionOffer,
formStep,
onOfferCardClick,
offerFactsheet,
campaign,
registeredOffer = []
} = (0, _react.useContext)(_SelectionContext.SelectionContext);
const {
mode,
isMultipleSelect,
appOnToStep,
formDetailData,
isPreviewMode,
appOnContinueApply
} = (0, _react.useContext)(_AppContext.AppContext);
const offerData = formDetailData.form_fields;
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 userLimitReached = campaign.user_limit_reached;
const repeatRegister = campaign.able_repeat_register;
let ableRepeatRegister;
if (repeatRegister === _Constants.CONSTANTS.YES_WITH_NO_CONDITION) {
ableRepeatRegister = true;
} else {
ableRepeatRegister = false;
}
const offer = formDetailData.form_fields.filter(obj => obj.type.includes(_Constants.CONSTANTS.PRODUCT_OFFER) || obj.type.includes(_Constants.CONSTANTS.PROMOTION_OFFER));
const registered = ableRepeatRegister ? registeredOffer.filter(obj => obj.type.includes(_Constants.CONSTANTS.PRODUCT_OFFER) || obj.type.includes(_Constants.CONSTANTS.PROMOTION_OFFER)) : [];
let total = offer.length + registered.length;
(0, _react.useEffect)(() => {
document.querySelector(".box-body").scroll({
top: 0,
behavior: "auto"
});
if (formStep !== "selectOfferPage") {
setTabKey("1");
}
}, [formStep]);
const handleOfferCardClick = offerData => {
var _formDetailData$form_2;
// navigate to factsheet which match with clicked offer
if (offerData.is_show_fact_sheet === "yes" && (offerData.factsheet_file !== "" || offerData.factsheet_image !== "" || offerData.factsheet_text !== "")) {
onOfferCardClick(offerData); // set clicked offer for factsheet page to display specifically
appOnToStep("factsheetPage");
} else 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.INFORMATIVE) {
var _offerData$action_lin, _offerData$action_lin2;
// if informative and no factsheet proceed to link
if (!!((_offerData$action_lin = offerData.action_link) !== null && _offerData$action_lin !== void 0 && _offerData$action_lin.website_link) || !!((_offerData$action_lin2 = offerData.action_link) !== null && _offerData$action_lin2 !== void 0 && _offerData$action_lin2.webview_action)) {
appOnContinueApply(offerData.action_link);
}
}
};
const [tabKey, setTabKey] = (0, _react.useState)(() => {
if (registeredOffer.length > 0) {
return "1";
} else {
return "";
}
});
const renderPage = () => {
let page;
switch (formStep) {
case "selectOfferPage":
page = /*#__PURE__*/_react.default.createElement(_SelectOfferPage.default, {
offerData: offerData,
onCardClick: handleOfferCardClick,
total: total,
tabKey: tabKey,
setTabKey: setTabKey
});
break;
case "factsheetPage":
page = /*#__PURE__*/_react.default.createElement(_FactsheetPage.default, {
factsheetData: selectionOffer,
offerFactsheet: offerFactsheet
});
break;
case "selectRewardPage":
page = /*#__PURE__*/_react.default.createElement(_SelectRewardPage.default, {
selectionOffer: selectionOffer
});
break;
case "confirmationPage":
page = /*#__PURE__*/_react.default.createElement(_ConfirmationPage.default, null);
break;
default:
break;
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, page);
};
const formBackgroundStyle = function formBackgroundStyle(formBackground) {
let isParent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (formBackground === "none") {
if (isParent) {
return {
backgroundColor: "unset"
};
} else {
return {
backgroundColor: "rgb(255, 255, 255)"
};
}
} else if (formBackground === "overlay") {
if (isParent) {
var _formDetailData$form_3;
return {
backgroundColor: "".concat((_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.form_background_color, "CC")
};
} else {
return {
backgroundColor: "unset"
};
}
} else if (formBackground === "solid") {
var _formDetailData$form_4;
return {
backgroundColor: (_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.form_background_color
};
}
};
const isShowButtonContainer = () => {
var _formDetailData$form_5;
if ((formDetailData === null || formDetailData === void 0 || (_formDetailData$form_5 = formDetailData.form_detail) === null || _formDetailData$form_5 === void 0 ? void 0 : _formDetailData$form_5.sub_form_type) === _Constants.CONSTANTS.SUB_FORM_TYPE.INFORMATIVE) {
// informative case
if (formStep === "selectOfferPage") {
// hide button for offer page
return false;
} else if (formStep === "factsheetPage") {
if (mode === 'mobile') {
var _offerFactsheet$, _selectionOffer$;
if (offerFactsheet.length !== 0 && !((_offerFactsheet$ = offerFactsheet[0]) !== null && _offerFactsheet$ !== void 0 && (_offerFactsheet$ = _offerFactsheet$.action_link) !== null && _offerFactsheet$ !== void 0 && _offerFactsheet$.webview_action) ||
// hide button if the offer doesn't have link
selectionOffer.length !== 0 && !((_selectionOffer$ = selectionOffer[0]) !== null && _selectionOffer$ !== void 0 && (_selectionOffer$ = _selectionOffer$.action_link) !== null && _selectionOffer$ !== void 0 && _selectionOffer$.webview_action)) {
// add second condition in case offerFactsheet state got clear from pressing back(failsafe)
return false;
} else {
return true;
}
} else {
var _offerFactsheet$2, _selectionOffer$2;
if (offerFactsheet.length !== 0 && !((_offerFactsheet$2 = offerFactsheet[0]) !== null && _offerFactsheet$2 !== void 0 && (_offerFactsheet$2 = _offerFactsheet$2.action_link) !== null && _offerFactsheet$2 !== void 0 && _offerFactsheet$2.website_link) ||
// hide button if the offer doesn't have link
selectionOffer.length !== 0 && !((_selectionOffer$2 = selectionOffer[0]) !== null && _selectionOffer$2 !== void 0 && (_selectionOffer$2 = _selectionOffer$2.action_link) !== null && _selectionOffer$2 !== void 0 && _selectionOffer$2.website_link)) {
// add second condition in case offerFactsheet state got clear from pressing back(failsafe)
return false;
} else {
return true;
}
}
} else {
return true;
}
} else {
// normal case (move logic from render() to here)
if (formStep !== "confirmationPage" && !limitReached) {
return true;
} else {
return false;
}
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "MainMultiOfferingForm " + mode
}, /*#__PURE__*/_react.default.createElement("div", {
className: "box-body",
style: formBackgroundStyle((_formDetailData$form_6 = formDetailData.form_styles) === null || _formDetailData$form_6 === void 0 ? void 0 : _formDetailData$form_6.form_background, true)
}, /*#__PURE__*/_react.default.createElement("div", {
className: "body-content ".concat(formStep === "confirmationPage" ? "for-confirmation-page" : ""),
style: mode === "mobile" && formDetailData.form_styles ? formStep === "confirmationPage" ? {
backgroundImage: "url(".concat(_default_bg.default, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%"
} : {
backgroundColor: (_formDetailData$form_7 = formDetailData.form_styles) === null || _formDetailData$form_7 === void 0 ? void 0 : _formDetailData$form_7.background_color
} : {}
}, renderPage()), isShowButtonContainer() && /*#__PURE__*/_react.default.createElement("div", {
className: "button-container ".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", " ").concat(!isPreviewMode ? "no-footer-offset" : "")
}, /*#__PURE__*/_react.default.createElement(_ConfirmButton.default, {
formBackgroundStyle: formBackgroundStyle,
appOnToStep: appOnToStep,
total: total,
offer: offer,
registered: registered,
ableRepeatRegister: ableRepeatRegister,
tabKey: tabKey
})), userLimitReached && formStep !== "confirmationPage" && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_LimitReachedFooter.default, null), mode === "mobile" && /*#__PURE__*/_react.default.createElement("div", {
className: "limit-reached-mobile-overlay-margin"
}))));
};
MainMultiOfferingForm.propTypes = {
formDetailData: _propTypes.default.object
};
var _default = exports.default = MainMultiOfferingForm;