krp-react-form-component
Version:
KRP React Component for Form Preview Component
136 lines (135 loc) • 7.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _FormHeader = _interopRequireDefault(require("./FormComponents/FormHeader/FormHeader"));
var _FormFooter = _interopRequireDefault(require("./FormComponents/FormFooter/FormFooter"));
var _MainMultiOfferingForm = _interopRequireDefault(require("./FormComponents/MainForm/MainMultiOfferingForm"));
var _AppContext = require("../context/AppContext");
var _SelectionContext = require("../context/SelectionContext");
var _Constants = require("../constants/Constants");
require("antd/dist/antd.css");
require("./MainForm.scss");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const MultiOfferingForm = _ref => {
var _formDetailData$form_7, _formDetailData$form_8, _formDetailData$form_9, _formDetailData$form_0;
let {
mode,
isPreviewMode,
locale,
formDetailData = {},
onSelectOffer,
isMultipleSelect,
selectedOffer,
onToStep,
onBackStep,
onConfirmClick,
onContinueApply,
onSubmitRegister,
registeredOffer,
step,
onOfferCardClick,
offerFactsheet,
campaign,
onSelectReward,
selectedReward,
onActionLog = () => {},
onChangePreviewLang
} = _ref;
const backgroundImageStyle = alignment => {
if (alignment === "left") {
var _formDetailData$form_, _formDetailData$form_2;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_ = formDetailData.form_styles) === null || _formDetailData$form_ === void 0 ? void 0 : _formDetailData$form_.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_2 = formDetailData.form_styles) === null || _formDetailData$form_2 === void 0 ? void 0 : _formDetailData$form_2.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "50% 100%",
backgroundPosition: "left"
};
} else if (alignment === "right") {
var _formDetailData$form_3, _formDetailData$form_4;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_3 = formDetailData.form_styles) === null || _formDetailData$form_3 === void 0 ? void 0 : _formDetailData$form_3.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_4 = formDetailData.form_styles) === null || _formDetailData$form_4 === void 0 ? void 0 : _formDetailData$form_4.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "50% 100%",
backgroundPosition: "right"
};
} else if (alignment === "center") {
var _formDetailData$form_5, _formDetailData$form_6;
return {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_5 = formDetailData.form_styles) === null || _formDetailData$form_5 === void 0 ? void 0 : _formDetailData$form_5.background_color,
backgroundImage: "url(".concat(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_6 = formDetailData.form_styles) === null || _formDetailData$form_6 === void 0 ? void 0 : _formDetailData$form_6.background_image_desktop, ")"),
backgroundRepeat: "no-repeat",
backgroundSize: "100% 100%"
};
}
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AppContext.AppProvider, {
appLocale: locale,
appMode: mode,
appIsPreviewMode: isPreviewMode,
appFormDetailData: formDetailData,
appOnSelectOffer: onSelectOffer,
appIsMultipleSelect: isMultipleSelect,
appOnToStep: onToStep,
appOnBackStep: onBackStep,
appOnConfirmClick: onConfirmClick,
appOnSelectReward: onSelectReward,
appOnContinueApply: onContinueApply,
appOnSubmitRegister: onSubmitRegister,
appFormType: _Constants.CONSTANTS.MULTIOFFERING_FORM,
appOnActionLog: onActionLog,
appOnChangePreviewLang: onChangePreviewLang
}, /*#__PURE__*/_react.default.createElement("div", {
className: "main-container"
}, isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
className: "main-header"
}, /*#__PURE__*/_react.default.createElement(_SelectionContext.SelectionProvider, {
formStep: step
}, /*#__PURE__*/_react.default.createElement(_FormHeader.default, null))), /*#__PURE__*/_react.default.createElement(_SelectionContext.SelectionProvider, {
selectionOffer: selectedOffer,
selectionRegisteredOffer: registeredOffer,
formStep: step,
offerFactsheet: offerFactsheet,
onOfferCardClick: onOfferCardClick,
campaign: campaign,
selectedReward: selectedReward
}, /*#__PURE__*/_react.default.createElement("div", {
className: "main-content " + mode + (!isPreviewMode ? " no-header-offset" : ""),
style: mode === "browser_desktop" ? (formDetailData === null || formDetailData === void 0 || (_formDetailData$form_7 = formDetailData.form_styles) === null || _formDetailData$form_7 === void 0 ? void 0 : _formDetailData$form_7.background_image_alignment) === "top" ? (formDetailData === null || formDetailData === void 0 || (_formDetailData$form_8 = formDetailData.form_styles) === null || _formDetailData$form_8 === void 0 ? void 0 : _formDetailData$form_8.background_color) === "#FFFFFF" ? {} : {
backgroundColor: formDetailData === null || formDetailData === void 0 || (_formDetailData$form_9 = formDetailData.form_styles) === null || _formDetailData$form_9 === void 0 ? void 0 : _formDetailData$form_9.background_color
} : backgroundImageStyle(formDetailData === null || formDetailData === void 0 || (_formDetailData$form_0 = formDetailData.form_styles) === null || _formDetailData$form_0 === void 0 ? void 0 : _formDetailData$form_0.background_image_alignment) : {}
}, /*#__PURE__*/_react.default.createElement(_MainMultiOfferingForm.default, null), isPreviewMode && /*#__PURE__*/_react.default.createElement("div", {
className: "main-footer " + mode
}, /*#__PURE__*/_react.default.createElement(_FormFooter.default, null)))))));
};
MultiOfferingForm.propTypes = {
isPreviewMode: _propTypes.default.bool,
previewCisID: _propTypes.default.string,
mode: _propTypes.default.oneOf(["mobile", "browser_mobile", "browser_desktop"]),
campaign: _propTypes.default.object,
onSubmit: _propTypes.default.func,
locale: _propTypes.default.string,
formDetailData: _propTypes.default.object,
onSelectOffer: _propTypes.default.func,
isMultipleSelect: _propTypes.default.bool,
onToStep: _propTypes.default.func,
onBackStep: _propTypes.default.func,
onOfferCardClick: _propTypes.default.func,
offerFactsheet: _propTypes.default.array,
onConfirmClick: _propTypes.default.func,
onSelectReward: _propTypes.default.func,
selectedReward: _propTypes.default.array,
registeredOffer: _propTypes.default.array,
selectedOffer: _propTypes.default.array,
onContinueApply: _propTypes.default.func,
onSubmitRegister: _propTypes.default.func,
step: _propTypes.default.string,
onActionLog: _propTypes.default.func,
onChangePreviewLang: _propTypes.default.func
};
var _default = exports.default = MultiOfferingForm;