krp-react-form-component/dist/components/FormComponents/MainForm/ConfirmationPage/ConfirmationPage.js

KRP React Component for Form Preview Component

"use strict";

require("core-js/modules/es.weak-map.js");
require("core-js/modules/esnext.iterator.filter.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.array.includes.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/esnext.iterator.constructor.js");
require("core-js/modules/esnext.iterator.find.js");
require("core-js/modules/esnext.iterator.for-each.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 _complete = _interopRequireDefault(require("../../../../images/complete.png"));
var _browser_complete = _interopRequireDefault(require("../../../../images/browser_complete.png"));
require("./ConfirmationPage.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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
const ConfirmationPage = () => {
  const {
    mode,
    locale,
    formDetailData,
    appOnConfirmClick,
    formType
  } = (0, _react.useContext)(_AppContext.AppContext);
  const {
    selectionOffer,
    selectedReward
  } = (0, _react.useContext)(_SelectionContext.SelectionContext);
  const confirmationData = formDetailData.form_confirmation;
  let mappedData = [];
  if (formType === _Constants.CONSTANTS.MULTIOFFERING_FORM) {
    selectionOffer.forEach(offerObj => {
      const reward = selectedReward.find(rewardObj => {
        return offerObj.name === rewardObj.selectedOffer.name;
      });
      if (reward) {
        mappedData.push(_objectSpread({}, reward));
      } else {
        mappedData.push({
          selectedOffer: offerObj,
          selectedReward: ""
        });
      }
    });
  }
  const generateBottomSection = () => {
    let component;
    switch (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.content_type) {
      case _Constants.CONSTANTS.CONTENT_TYPE.DESCRIPTION:
        component = /*#__PURE__*/_react.default.createElement("span", {
          className: "description",
          align: "center"
        }, locale === _Constants.CONSTANTS.TH ? (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_th) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_th) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_th) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_en : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_th : (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_en) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_en) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_en) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_th : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.description_en);
        break;
      case _Constants.CONSTANTS.CONTENT_TYPE.INSTRUCTION:
        component = /*#__PURE__*/_react.default.createElement("div", {
          className: "instruction-container"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "header-wrap"
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: "instruction-header"
        }, locale === _Constants.CONSTANTS.TH ? (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_th) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_th) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_th) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_en : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_th : (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_en) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_en) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_en) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_th : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_title_en), /*#__PURE__*/_react.default.createElement("div", {
          className: "instruction-description"
        }, locale === _Constants.CONSTANTS.TH ? (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_th) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_th) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_th) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_en : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_th : (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_en) === undefined || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_en) === null || (confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_en) === "" ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_th : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.header_description_en)), /*#__PURE__*/_react.default.createElement("div", {
          className: "custom-content-container"
        }, confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.items.map((item, index) => {
          return /*#__PURE__*/_react.default.createElement("div", {
            className: "custom-content-wrap",
            key: index
          }, /*#__PURE__*/_react.default.createElement("div", {
            className: "custom-content-header"
          }, locale === _Constants.CONSTANTS.TH ? item.title_th === undefined || item.title_th === null || item.title_th === "" ? item.title_en : item.title_th : item.title_en === undefined || item.title_en === null || item.title_en === "" ? item.title_th : item.title_en), /*#__PURE__*/_react.default.createElement("div", {
            className: "custom-content-description"
          }, locale === _Constants.CONSTANTS.TH ? item.description_th === undefined || item.description_th === null || item.description_th === "" ? item.description_en : item.description_th : item.description_en === undefined || item.description_en === null || item.description_en === "" ? item.description_th : item.description_en));
        })));
        break;
      case _Constants.CONSTANTS.CONTENT_TYPE.SUMMARY:
        component = /*#__PURE__*/_react.default.createElement("div", {
          className: "summary-container"
        }, mappedData.map((obj, index) => {
          var _confirmationData$sho, _confirmationData$sho2, _confirmationData$sho3, _confirmationData$sho4, _confirmationData$sho5, _confirmationData$sho6, _confirmationData$sho7, _confirmationData$sho8, _confirmationData$sho9, _confirmationData$sho0, _confirmationData$sho1, _confirmationData$sho10, _confirmationData$sho11, _confirmationData$sho12, _confirmationData$sho13, _confirmationData$sho14, _confirmationData$sho15, _confirmationData$sho16, _confirmationData$sho17, _confirmationData$sho18, _confirmationData$sho19, _confirmationData$sho20, _confirmationData$sho21, _confirmationData$sho22, _confirmationData$sho23, _confirmationData$sho24, _confirmationData$sho25, _confirmationData$sho26, _confirmationData$sho27, _confirmationData$sho28;
          const getSummary1ShowField = (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho = confirmationData.show_field1) === null || _confirmationData$sho === void 0 ? void 0 : _confirmationData$sho.show_field) || "";
          let summary1ShowField = getSummary1ShowField;
          if (getSummary1ShowField.includes("product")) {
            if (getSummary1ShowField.includes(obj.selectedOffer["type"].split("_")[0])) {
              if (getSummary1ShowField.split("_")[0] !== "sub") {
                summary1ShowField = "product_name_remark";
              } else {
                summary1ShowField = "sub_product_remark";
              }
            } else {
              if (getSummary1ShowField.split("_")[0] !== "sub") {
                summary1ShowField = "promotion_name_remark";
              } else {
                summary1ShowField = "sub_promotion_remark";
              }
            }
          }
          const summary1Value = obj[getSummary1ShowField.includes("product") ? "selectedOffer" : "selectedReward"]["".concat(summary1ShowField).concat(locale === _Constants.CONSTANTS.TH ? "_th" : "_en")];
          const getSummary2ShowField = (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho2 = confirmationData.show_field2) === null || _confirmationData$sho2 === void 0 ? void 0 : _confirmationData$sho2.show_field) || "";
          let summary2ShowField = getSummary2ShowField;
          if (getSummary2ShowField.includes("product")) {
            if (getSummary2ShowField.includes(obj.selectedOffer["type"].split("_")[0])) {
              if (getSummary2ShowField.split("_")[0] !== "sub") {
                summary2ShowField = "product_name_remark";
              } else {
                summary2ShowField = "sub_product_remark";
              }
            } else {
              if (getSummary2ShowField.split("_")[0] !== "sub") {
                summary2ShowField = "promotion_name_remark";
              } else {
                summary2ShowField = "sub_promotion_remark";
              }
            }
          }
          const summary2Value = obj[getSummary2ShowField.includes("product") ? "selectedOffer" : "selectedReward"]["".concat(summary2ShowField).concat(locale === _Constants.CONSTANTS.TH ? "_th" : "_en")];
          return /*#__PURE__*/_react.default.createElement("div", {
            className: "select-container ".concat(index === selectionOffer.length - 1 ? "last-child" : ""),
            key: index
          }, (getSummary1ShowField.includes("reward") ? obj.selectedReward !== "" ? true : false : true) && /*#__PURE__*/_react.default.createElement("div", {
            className: "selected-offer-reward"
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: "left-side"
          }, locale === _Constants.CONSTANTS.TH ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho3 = confirmationData.show_field1) === null || _confirmationData$sho3 === void 0 ? void 0 : _confirmationData$sho3.label_th) === undefined || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho4 = confirmationData.show_field1) === null || _confirmationData$sho4 === void 0 ? void 0 : _confirmationData$sho4.label_th) === null || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho5 = confirmationData.show_field1) === null || _confirmationData$sho5 === void 0 ? void 0 : _confirmationData$sho5.label_th) === "" ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho6 = confirmationData.show_field1) === null || _confirmationData$sho6 === void 0 ? void 0 : _confirmationData$sho6.label_en) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho7 = confirmationData.show_field1) === null || _confirmationData$sho7 === void 0 ? void 0 : _confirmationData$sho7.label_en, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho8 = confirmationData.show_field1) === null || _confirmationData$sho8 === void 0 ? void 0 : _confirmationData$sho8.label_th) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho9 = confirmationData.show_field1) === null || _confirmationData$sho9 === void 0 ? void 0 : _confirmationData$sho9.label_th, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho0 = confirmationData.show_field1) === null || _confirmationData$sho0 === void 0 ? void 0 : _confirmationData$sho0.label_en) === undefined || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho1 = confirmationData.show_field1) === null || _confirmationData$sho1 === void 0 ? void 0 : _confirmationData$sho1.label_en) === null || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho10 = confirmationData.show_field1) === null || _confirmationData$sho10 === void 0 ? void 0 : _confirmationData$sho10.label_en) === "" ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho11 = confirmationData.show_field1) === null || _confirmationData$sho11 === void 0 ? void 0 : _confirmationData$sho11.label_th) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho12 = confirmationData.show_field1) === null || _confirmationData$sho12 === void 0 ? void 0 : _confirmationData$sho12.label_th, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho13 = confirmationData.show_field1) === null || _confirmationData$sho13 === void 0 ? void 0 : _confirmationData$sho13.label_en) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho14 = confirmationData.show_field1) === null || _confirmationData$sho14 === void 0 ? void 0 : _confirmationData$sho14.label_en, ":")), /*#__PURE__*/_react.default.createElement("span", {
            className: "right-side"
          }, summary1Value)), (getSummary2ShowField.includes("reward") ? obj.selectedReward !== "" ? true : false : true) && /*#__PURE__*/_react.default.createElement("div", {
            className: "selected-offer-reward"
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: "left-side"
          }, locale === _Constants.CONSTANTS.TH ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho15 = confirmationData.show_field2) === null || _confirmationData$sho15 === void 0 ? void 0 : _confirmationData$sho15.label_th) === undefined || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho16 = confirmationData.show_field2) === null || _confirmationData$sho16 === void 0 ? void 0 : _confirmationData$sho16.label_th) === null || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho17 = confirmationData.show_field2) === null || _confirmationData$sho17 === void 0 ? void 0 : _confirmationData$sho17.label_th) === "" ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho18 = confirmationData.show_field2) === null || _confirmationData$sho18 === void 0 ? void 0 : _confirmationData$sho18.label_en) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho19 = confirmationData.show_field2) === null || _confirmationData$sho19 === void 0 ? void 0 : _confirmationData$sho19.label_en, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho20 = confirmationData.show_field2) === null || _confirmationData$sho20 === void 0 ? void 0 : _confirmationData$sho20.label_th) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho21 = confirmationData.show_field2) === null || _confirmationData$sho21 === void 0 ? void 0 : _confirmationData$sho21.label_th, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho22 = confirmationData.show_field2) === null || _confirmationData$sho22 === void 0 ? void 0 : _confirmationData$sho22.label_en) === undefined || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho23 = confirmationData.show_field2) === null || _confirmationData$sho23 === void 0 ? void 0 : _confirmationData$sho23.label_en) === null || (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho24 = confirmationData.show_field2) === null || _confirmationData$sho24 === void 0 ? void 0 : _confirmationData$sho24.label_en) === "" ? (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho25 = confirmationData.show_field2) === null || _confirmationData$sho25 === void 0 ? void 0 : _confirmationData$sho25.label_th) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho26 = confirmationData.show_field2) === null || _confirmationData$sho26 === void 0 ? void 0 : _confirmationData$sho26.label_th, ":") : (confirmationData === null || confirmationData === void 0 || (_confirmationData$sho27 = confirmationData.show_field2) === null || _confirmationData$sho27 === void 0 ? void 0 : _confirmationData$sho27.label_en) && "".concat(confirmationData === null || confirmationData === void 0 || (_confirmationData$sho28 = confirmationData.show_field2) === null || _confirmationData$sho28 === void 0 ? void 0 : _confirmationData$sho28.label_en, ":")), /*#__PURE__*/_react.default.createElement("span", {
            className: "right-side"
          }, summary2Value)));
        }));
        break;
      default:
        break;
    }
    return component;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "ConfirmationPage ".concat(mode, " ").concat(mode === "browser_desktop" ? "desktop-padding" : "")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "confirm-content ".concat(confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.content_type)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "top-section ".concat(confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.content_type)
  }, /*#__PURE__*/_react.default.createElement("img", {
    className: "complete-icon",
    src: mode === "mobile" ? _complete.default : _browser_complete.default,
    alt: "complete"
  }), /*#__PURE__*/_react.default.createElement("span", {
    className: "success-text"
  }, locale === _Constants.CONSTANTS.TH ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.sub_title_th : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.sub_title_en)), /*#__PURE__*/_react.default.createElement("div", {
    className: "bottom-section ".concat(confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.content_type)
  }, generateBottomSection())), /*#__PURE__*/_react.default.createElement("div", {
    className: "confirm-button-section ".concat(confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.content_type)
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "confirm-button-container"
  }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
    type: "primary",
    className: "button " + mode,
    shape: "round",
    onClick: () => appOnConfirmClick()
  }, locale === _Constants.CONSTANTS.TH ? confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.button_th : confirmationData === null || confirmationData === void 0 ? void 0 : confirmationData.button_en)), mode === "mobile" && /*#__PURE__*/_react.default.createElement("div", {
    className: "confirm-mobile-overlay-margin"
  })));
};
var _default = exports.default = ConfirmationPage;