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

KRP React Component for Form Preview Component

"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.flat.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.array.reduce.js");
require("core-js/modules/es.array.reverse.js");
require("core-js/modules/es.array.unscopables.flat.js");
require("core-js/modules/es.object.assign.js");
require("core-js/modules/es.parse-int.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.regexp.to-string.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/es.string.trim.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.for-each.js");
require("core-js/modules/esnext.iterator.map.js");
require("core-js/modules/esnext.iterator.reduce.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _AppContext = require("../../../../context/AppContext");
var _antd = require("antd");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CommonFormConstants = require("../../../../constants/CommonFormConstants");
var _Constants = require("../../../../constants/Constants");
var _CustomInput = _interopRequireDefault(require("../../Common/CustomInput/CustomInput"));
var _CustomFileUpload = _interopRequireDefault(require("../../Common/CustomFileUpload/CustomFileUpload"));
var _CustomTimePicker = _interopRequireDefault(require("../../Common/CustomTimePicker/CustomTimePicker"));
var _CustomDatePickerMobile = _interopRequireDefault(require("../../Common/CustomDatePickerMobile/CustomDatePickerMobile"));
var _actions = require("../../../../utils/actions");
var _moment = _interopRequireDefault(require("moment"));
require("./CommonFormPage.scss");
var _SelectionContext = require("../../../../context/SelectionContext");
require("../../../../utils/th-locale");
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 CommonFormPage = props => {
  const {
    mode,
    appOnPopupCommonForm,
    appOnSubmitCommonForm,
    formDetailData,
    isPreviewMode,
    locale,
    resolveLocale,
    resolveFunctionLocale,
    customerInfo,
    serviceList,
    isServiceNeeded,
    setIsServiceNeeded,
    errorCommonFormFields,
    appOnActionLog,
    DatePickerComp,
    appOnClickLinkDecoration
  } = (0, _react.useContext)(_AppContext.AppContext);
  const {
    campaign
  } = (0, _react.useContext)(_SelectionContext.SelectionContext);
  const {
    FORM_BACKGROUND_OPTION,
    FORM_VERTICAL_ALIGNMENT_OPTION,
    IMAGE_ALIGNMENT_OPTION,
    PREVIEW_MOCK_OPTIONS,
    PREVIEW_CARDS
  } = _CommonFormConstants.CONSTANT;
  const INPUT_RULE = {
    LETTERS_ONLY: "letters_only",
    NUMBERS_ONLY: "numbers_only",
    ALLOW_ALL_EXCEPT_SOME_SPECIAL: "allows_all_except_some_specials",
    THAI_ONLY: 'thai_only',
    ENGLISH_ONLY: 'english_only',
    THAI_AND_ENGLISH_ONLY: 'thai_and_english_only',
    EMAIL_FORMAT: 'email_format'
  };
  const FormItem = _antd.Form.Item;
  const {
    Option
  } = _antd.Select;
  const [formValues, setFormValues] = (0, _react.useState)(() => {
    let defaultValueObject;
    formDetailData.form_fields.forEach(field => {
      if (field.default_value) {
        defaultValueObject = _objectSpread(_objectSpread({}, defaultValueObject), {}, {
          [field.name]: field.default_value
        });
      }
    });
    return defaultValueObject;
  });
  const [formErrors, setFormErrors] = (0, _react.useState)({});
  const [validateCard, setValidateCard] = (0, _react.useState)('');
  const [specialCardList, setSpecialCardList] = (0, _react.useState)([]);
  const fieldDelayTimer = {};
  (0, _react.useEffect)(() => {
    if (validateCard !== '') {
      props.form.validateFields([validateCard]);
      setValidateCard('');
    }
  }, [validateCard, props.form]);
  (0, _react.useEffect)(() => {
    if (errorCommonFormFields.length > 0) {
      const {
        form_fields
      } = formDetailData;
      const valueInFields = [_CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD, _CommonFormConstants.FIELD_TYPE.DEBIT_CARD, _CommonFormConstants.FIELD_TYPE.XPC];
      const noValueInFields = [_CommonFormConstants.FIELD_TYPE.K_PLUS_MOBILE_NO];
      const needValueForField = form_fields === null || form_fields === void 0 ? void 0 : form_fields.filter(field => valueInFields.includes(field.type));
      const notNeedValueForField = form_fields === null || form_fields === void 0 ? void 0 : form_fields.filter(field => noValueInFields.includes(field.type));
      let newErrorArray = errorCommonFormFields.map(e => {
        if (needValueForField.find(x => x.id === e.id)) {
          let value = e.value || [];
          return value.map(ele => {
            return {
              id: e.id,
              value: ele.name,
              input_data: ele.input_data
            };
          });
        } else if (notNeedValueForField.find(x => x.id === e.id)) {
          return {
            id: e.id
          };
        } else {
          return undefined;
        }
      });
      let currentFieldsAndValues = props.form.getFieldsValue();
      let arrayOfFieldsAndValues = Object.keys(currentFieldsAndValues).map(e => {
        return {
          field: e,
          input_value: currentFieldsAndValues[e]
        };
      });

      // filter out
      newErrorArray = newErrorArray.filter(e => e !== undefined).flat().map(e => {
        let x = arrayOfFieldsAndValues.filter(x => (x.field || '').includes("field-".concat(e.id).concat(!!e.value ? "-".concat(e.value) : "")) && e.input_data === x.input_value || e.value === undefined && e.input_data === undefined && x.field.includes("field-".concat(e.id)))[0] || undefined;
        if (!!x) {
          return {
            id: e.id,
            value: e.value,
            input_data: e.input_data,
            fieldname: x.field
          };
        } else {
          return undefined;
        }
      });
      let errorData = newErrorArray.filter(e => e !== undefined).flat().reduce((obj, item) => Object.assign(obj, {
        [item.fieldname]: {
          errors: [new Error(resolveLocale("ERROR_SPECIAL_FIELDS"))]
        }
      }), {});
      props.form.setFields(errorData);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [errorCommonFormFields, formDetailData, resolveLocale]);
  (0, _react.useEffect)(() => {
    if (!!serviceList && !!isServiceNeeded) {
      setIsServiceNeeded(false);
      const SPECIAL_CARD_FIELD = [_CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD, _CommonFormConstants.FIELD_TYPE.DEBIT_CARD, _CommonFormConstants.FIELD_TYPE.XPC, _CommonFormConstants.FIELD_TYPE.OD];
      const {
        campaignId
      } = campaign;
      const {
        form_fields
      } = formDetailData;
      const {
        newCreditCardService = () => {},
        debitCardService = () => {},
        xpcCardService = () => {},
        odCardService = () => {},
        specialCardPopupService = () => {}
      } = serviceList;
      const needAPIField = form_fields === null || form_fields === void 0 ? void 0 : form_fields.filter(field => SPECIAL_CARD_FIELD.includes(field.type));
      const getAllCard = needAPIField.map(field => {
        const {
          type,
          allow_list,
          disallow_list,
          namepr,
          id,
          display_internal_data_field,
          disallow_field_value,
          disallow_field_name // for od card 
        } = field;
        const data = {
          allow_list: allow_list,
          disallow_list: disallow_list,
          namepr: namepr,
          id: id,
          internal_source_field: display_internal_data_field,
          disallow_field_value: disallow_field_value,
          disallow_field_name: disallow_field_name,
          campaign_id: campaignId
        };
        if (type === _CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD) {
          return newCreditCardService(data, () => {});
        } else if (type === _CommonFormConstants.FIELD_TYPE.DEBIT_CARD) {
          return debitCardService(data, () => {});
        } else if (type === _CommonFormConstants.FIELD_TYPE.XPC) {
          return xpcCardService(data, () => {});
        } else if (type === _CommonFormConstants.FIELD_TYPE.OD) {
          return odCardService(data, () => {});
        } else {
          return [];
        }
      });
      Promise.all(getAllCard).then(cards => {
        setSpecialCardList(cards);
      }).catch(err => {
        specialCardPopupService(err);
      });
    }
  }, [serviceList, formDetailData, isServiceNeeded, setIsServiceNeeded, campaign]);
  const handleFormSubmit = e => {
    appOnActionLog({
      screenName: _Constants.CONSTANTS.ACTION_SCREEN_NAME.CAMPAIGN_REGISTER_FORM,
      eventCategory: _Constants.CONSTANTS.ACTION_EVENT_CATEGORY.CAMPAIGN,
      eventActionType: _Constants.CONSTANTS.ACTION_TYPE.CLICK,
      eventName: _Constants.CONSTANTS.ACTION_EVENT_NAME.COMMON_FORM_REGISTER_CAMPAIGN,
      buttonText: locale === _Constants.CONSTANTS.EN ? labelRegisterButtonEn : labelRegisterButtonTh
    });
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (err) {
        setFormErrors(_objectSpread({}, err));
      }
      values = handleSortTableValuesBasedOnFormOrder(values, form_fields);
      const emptyRequiredFields = Object.keys(values).reduce((acc, item) => {
        let initFieldName = item.slice(6);
        form_fields.forEach(field => {
          var _values;
          if ((field.namepr === initFieldName || field.id === initFieldName) && field.required === "yes" && !((_values = values["field-".concat(isPreviewMode ? field.namepr : field.id)]) !== null && _values !== void 0 && _values.toString())) {
            acc.push(isPreviewMode ? field.namepr : field.id);
          }
        });
        return acc;
      }, []);
      const decoratorFields = [_CommonFormConstants.FIELD_TYPE.LINK, _CommonFormConstants.FIELD_TYPE.SECTION_HEAD, _CommonFormConstants.FIELD_TYPE.PARAGRAPH, _CommonFormConstants.FIELD_TYPE.PAGE_BREAK];
      let allFieldsAreDecoration = true;
      form_fields.forEach(field => {
        if (!decoratorFields.includes(field.type)) {
          allFieldsAreDecoration = false;
        }
      });
      let isAllInputOrRequiredInputEmpty = true;
      if (emptyRequiredFields.length > 0) {
        isAllInputOrRequiredInputEmpty = true;
      } else {
        isAllInputOrRequiredInputEmpty = false;
      }
      if (isAllInputOrRequiredInputEmpty && !allFieldsAreDecoration) {
        appOnPopupCommonForm();
      }
      if (allFieldsAreDecoration) {
        appOnSubmitCommonForm({});
      }
      if (!(err || isAllInputOrRequiredInputEmpty)) {
        appOnSubmitCommonForm(values);
      }
    });
  };
  const handleFormChange = e => {
    e.preventDefault();
    setFormErrors(props.form.getFieldsError());
  };
  const handleFieldOnChange = function handleFieldOnChange(propName, value) {
    let time = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
    clearTimeout(fieldDelayTimer[propName]);
    fieldDelayTimer[propName] = setTimeout(() => {
      setFormValues(_objectSpread(_objectSpread({}, formValues), {}, {
        [propName]: value
      }));
      clearTimeout(fieldDelayTimer[propName]);
      delete fieldDelayTimer[propName];
    }, time);
  };
  const handleSortTableValuesBasedOnFormOrder = (values, formFieldsEdit) => {
    const specialCases = [_CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD, _CommonFormConstants.FIELD_TYPE.DEBIT_CARD, _CommonFormConstants.FIELD_TYPE.XPC];
    let sortedValues = formFieldsEdit.reduce((acc, field) => {
      Object.keys(values).forEach(key => {
        let initKey = key.slice(6);
        if (isPreviewMode) {
          if (field.namepr === initKey) {
            if (specialCases.includes(field.type)) {
              let specialValue = [];
              if (Array.isArray(values[key])) {
                values[key].forEach(card_name => {
                  let card = card_name.split('-');
                  card.pop();
                  card = card.join('-');
                  let value = props.form.getFieldValue("field-".concat(field.namepr, "-").concat(card_name));
                  specialValue.push({
                    'card_name': card,
                    'value': value
                  });
                });
              } else if (values[key] === undefined) {
                specialValue = [];
              } else {
                let card = values[key].split('-');
                card.pop();
                card = card.join('-');
                let value = props.form.getFieldValue("field-".concat(field.namepr, "-").concat(values[key]));
                specialValue.push({
                  'card_name': card,
                  'value': value
                });
              }
              acc = _objectSpread(_objectSpread({}, acc), {}, {
                [key]: specialValue
              });
            } else {
              acc = _objectSpread(_objectSpread({}, acc), {}, {
                [key]: values[key]
              });
            }
          }
        } else {
          if (field.id === initKey) {
            if (specialCases.includes(field.type)) {
              let specialValue = [];
              if (Array.isArray(values[key])) {
                values[key].forEach(card_name => {
                  let card = card_name.split('-');
                  card.pop();
                  card = card.join('-');
                  let value = props.form.getFieldValue("field-".concat(field.id, "-").concat(card_name));
                  specialValue.push({
                    'card_name': card,
                    'value': value
                  });
                });
              } else if (values[key] === undefined) {
                specialValue = undefined;
              } else {
                let card = values[key].split('-');
                card.pop();
                card = card.join('-');
                let value = props.form.getFieldValue("field-".concat(field.id, "-").concat(values[key]));
                specialValue.push({
                  'card_name': card,
                  'value': value
                });
              }
              acc = _objectSpread(_objectSpread({}, acc), {}, {
                [key]: specialValue
              });
            } else {
              acc = _objectSpread(_objectSpread({}, acc), {}, {
                [key]: values[key]
              });
            }
          }
        }
      });
      return acc;
    }, {});
    return sortedValues;
  };
  const getClassNameBasedOnViewMode = initClassName => {
    return "".concat(initClassName, " ").concat(mode);
  };
  const getUploadedBackgroundImageSrc = (backgroundImageMobileFromServer, backgroundImageDesktopFromServer) => {
    // backgroundImageMobileFromServer = backgroundImageMobileFromServer
    //   ? backgroundImageMobileFromServer
    //   : PREVIEW_BOX_BANNER.default;
    // backgroundImageDesktopFromServer = backgroundImageDesktopFromServer
    //   ? backgroundImageDesktopFromServer
    //   : PREVIEW_BOX_BANNER.default;
    let backgroundImgMobile, backgroundImgDesktop;
    const {
      backgroundImageDesktop,
      backgroundImageMobile
    } = formStylesEdit;
    backgroundImgMobile = backgroundImageMobile !== null && backgroundImageMobile !== void 0 && backgroundImageMobile.url ? backgroundImageMobile.url : backgroundImageMobileFromServer;
    backgroundImgDesktop = backgroundImageDesktop !== null && backgroundImageDesktop !== void 0 && backgroundImageDesktop.url ? backgroundImageDesktop.url : backgroundImageDesktopFromServer;
    return {
      backgroundImgMobile,
      backgroundImgDesktop
    };
  };
  const generateBodyStylesWithSpecialCases = (mode, backgroundImageAlignment, backgroundColor, backgroundImageDesktop, formVerticalAlignment) => {
    let bodyStyle = {
        // backgroundColor: backgroundColor
      },
      containerStyle = null,
      addingSideStyle = null,
      formStyle = null;
    //Update background image from local

    if (mode === "browser_desktop") {
      // formStyle = {
      //   width: '100%'
      // };
      switch (true) {
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.CENTER && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.CENTER:
          bodyStyle = _objectSpread({}, bodyStyle);
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.CENTER && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.RIGHT:
          bodyStyle = _objectSpread({}, bodyStyle);
          containerStyle = {
            display: "flex",
            flexDirection: "row-reverse"
          };
          formStyle = {
            width: "560px"
          };
          addingSideStyle = {
            width: "576px"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.CENTER && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.LEFT:
          bodyStyle = _objectSpread({}, bodyStyle);
          containerStyle = {
            display: "flex",
            flexDirection: "row"
          };
          formStyle = {
            width: "560px"
          };
          addingSideStyle = {
            width: "576px"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.TOP && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.CENTER:
          bodyStyle = _objectSpread({}, bodyStyle);
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.TOP && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.LEFT:
          bodyStyle = _objectSpread({}, bodyStyle);
          // containerStyle = {
          //   display: 'flex',
          //   flexDirection: 'row'
          // };
          addingSideStyle = {
            width: "100%"
          };
          formStyle = {
            width: "50%"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.TOP && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.RIGHT:
          bodyStyle = _objectSpread({}, bodyStyle);
          addingSideStyle = {
            width: "100%"
          };
          formStyle = {
            width: "50%",
            marginLeft: "auto"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.LEFT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.RIGHT:
          bodyStyle = _objectSpread({}, bodyStyle);
          formStyle = {
            width: "560px"
          };
          containerStyle = {
            display: "flex",
            flexDirection: "row"
          };
          addingSideStyle = {
            width: "576px"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.LEFT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.LEFT:
          bodyStyle = _objectSpread({}, bodyStyle);
          formStyle = {
            width: "560px"
          };
          containerStyle = {
            display: "flex",
            flexDirection: "row-reverse"
          };
          addingSideStyle = {
            width: "576px",
            visibility: "hidden"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.LEFT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.CENTER:
          bodyStyle = _objectSpread({}, bodyStyle);
          addingSideStyle = {
            display: "none"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.RIGHT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.LEFT:
          bodyStyle = _objectSpread({}, bodyStyle);
          formStyle = {
            width: "560px"
          };
          containerStyle = {
            display: "flex",
            flexDirection: "row-reverse"
          };
          addingSideStyle = {
            width: "576px"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.RIGHT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.RIGHT:
          bodyStyle = _objectSpread({}, bodyStyle);
          formStyle = {
            width: "560px"
          };
          containerStyle = {
            display: "flex",
            flexDirection: "row"
          };
          addingSideStyle = {
            width: "576px",
            visibility: "hidden"
          };
          break;
        case backgroundImageAlignment === IMAGE_ALIGNMENT_OPTION.RIGHT && formVerticalAlignment === FORM_VERTICAL_ALIGNMENT_OPTION.CENTER:
          bodyStyle = _objectSpread({}, bodyStyle);
          addingSideStyle = {
            display: "none"
          };
          break;
        default:
          break;
      }
    }
    return [bodyStyle, containerStyle, addingSideStyle, formStyle];
  };

  // const generateFormStyles = (
  //   formBackground,
  //   formBackgroundColor,
  //   textColor
  // ) => {
  //   let style;
  //   switch (formBackground) {
  //     case FORM_BACKGROUND_OPTION.NONE:
  //       style = { backgroundColor: "transparent" };
  //       break;
  //     case FORM_BACKGROUND_OPTION.SOLID:
  //       style = { backgroundColor: formBackgroundColor };
  //       break;
  //     case FORM_BACKGROUND_OPTION.OVERLAY:
  //       style = {
  //         backgroundColor: formBackgroundColor,
  //         opacity: 0.8,
  //       };
  //       break;
  //     default:
  //       style = null;
  //       break;
  //   }
  //   return { ...style, color: textColor };
  // };

  const getOptionsData = function getOptionsData() {
    let displayInternalDataSourceFlag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "no";
    let options = arguments.length > 1 ? arguments[1] : undefined;
    if ((displayInternalDataSourceFlag === "no" || displayInternalDataSourceFlag === "") && options) {
      options = options.reduce((acc, option) => {
        if (option.choiceTh && option.value) {
          acc = [...acc, option];
        }
        return acc;
      }, []);
      return options;
    }
    return PREVIEW_MOCK_OPTIONS;
  };
  const range = (start, end) => {
    const result = [];
    for (let i = start; i < end; i++) {
      result.push(i);
    }
    return result;
  };
  const getDisableTimeRange = (min, max) => {
    if (typeof min == "object") {
      min = (0, _moment.default)(min).format("HH:mm");
    }
    if (typeof max == "object") {
      max = (0, _moment.default)(max).format("HH:mm");
    }
    if (min === "" && max !== "") {
      const max_hour = parseInt(max.split(":")[0]);
      const max_minute = parseInt(max.split(":")[1]);
      return {
        disableHours: () => {
          return range(0, 24).filter(item => item > max_hour);
        },
        disableMinutes: selectedHour => {
          if (selectedHour === max_hour) {
            return range(0, 60).filter(item => item > max_minute);
          }
          return [];
        }
      };
    } else if (min !== "" && max === "") {
      const min_hour = parseInt(min.split(":")[0]);
      const min_minute = parseInt(min.split(":")[1]);
      return {
        disableHours: () => {
          return range(0, 24).filter(item => item < min_hour);
        },
        disableMinutes: selectedHour => {
          if (selectedHour === min_hour) {
            return range(0, 60).filter(item => item < min_minute);
          }
          return [];
        }
      };
    } else if (min !== "" && max !== "") {
      const min_hour = parseInt(min.split(":")[0]);
      const min_minute = parseInt(min.split(":")[1]);
      const max_hour = parseInt(max.split(":")[0]);
      const max_minute = parseInt(max.split(":")[1]);
      return {
        disableHours: () => {
          return range(0, 24).filter(item => item < min_hour || item > max_hour);
        },
        disableMinutes: selectedHour => {
          if (selectedHour === min_hour && selectedHour === max_hour) {
            return range(0, 60).filter(item => item < min_minute || item > max_minute);
          }
          if (selectedHour === min_hour) {
            return range(0, 60).filter(item => item < min_minute);
          }
          if (selectedHour === max_hour) {
            return range(0, 60).filter(item => item > max_minute);
          }
          if (selectedHour > min_hour && selectedHour < max_hour) {
            return [];
          }
          return range(0, 60);
        }
      };
    }
    return {
      disableHours: () => [],
      disableMinutes: () => []
    };
  };
  const getDisableDateRange = (min, max) => {
    let defaultMinDate = (0, _moment.default)().toISOString().split('T')[0].split('-');
    defaultMinDate[0] = (parseInt(defaultMinDate[0]) - 200).toString();
    defaultMinDate = defaultMinDate.reverse().join('/');
    let defaultMaxDate = (0, _moment.default)().toISOString().split('T')[0].split('-');
    defaultMaxDate[0] = (parseInt(defaultMaxDate[0]) + 200).toString();
    defaultMaxDate = defaultMaxDate.reverse().join('/');
    const defaultMinDateMoment = (0, _moment.default)(defaultMinDate, _CommonFormConstants.CONSTANT.DATE_FORMAT);
    const defaultMaxDateMoment = (0, _moment.default)(defaultMaxDate, _CommonFormConstants.CONSTANT.DATE_FORMAT).add(1, 'days');
    if (!!min && !max) {
      const minDate = (0, _moment.default)(min, _CommonFormConstants.CONSTANT.DATE_FORMAT);
      return function disabledDate(current) {
        return current && (current < minDate || current > defaultMaxDateMoment);
      };
    } else if (!min && !!max) {
      const maxDate = (0, _moment.default)(max, _CommonFormConstants.CONSTANT.DATE_FORMAT).add(1, "days");
      return function disabledDate(current) {
        return current && (current < defaultMinDateMoment || current > maxDate);
      };
    } else if (!!min && !!max) {
      const minDate = (0, _moment.default)(min, _CommonFormConstants.CONSTANT.DATE_FORMAT);
      const maxDate = (0, _moment.default)(max, _CommonFormConstants.CONSTANT.DATE_FORMAT).add(1, "days");
      return function disabledDate(current) {
        return current && (current < minDate || current > maxDate);
      };
    }
    return function disabledDate(current) {
      return current && (current < defaultMinDateMoment || current > defaultMaxDateMoment);
    };
  };
  const generateRules = function generateRules(type) {
    let required = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "no";
    let validatePatternFlag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "no";
    let validatePatternOptions = arguments.length > 3 ? arguments[3] : undefined;
    let validatePatternRegex = arguments.length > 4 ? arguments[4] : undefined;
    let alertText = arguments.length > 5 ? arguments[5] : undefined;
    let label = arguments.length > 6 ? arguments[6] : undefined;
    let limitLength = arguments.length > 7 ? arguments[7] : undefined;
    const specialCases = [_CommonFormConstants.FIELD_TYPE.DROPDOWN, _CommonFormConstants.FIELD_TYPE.FILE_UPLOADER, _CommonFormConstants.FIELD_TYPE.CHECK_BOX, _CommonFormConstants.FIELD_TYPE.RADIO, _CommonFormConstants.FIELD_TYPE.CREDIT_CARD_DROPDOWN, _CommonFormConstants.FIELD_TYPE.DATE, _CommonFormConstants.FIELD_TYPE.TIME, _CommonFormConstants.FIELD_TYPE.K_PLUS_MOBILE_NO, _CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD, _CommonFormConstants.FIELD_TYPE.DEBIT_CARD, _CommonFormConstants.FIELD_TYPE.XPC];
    const SPECIAL_CARD = [_CommonFormConstants.FIELD_TYPE.NEW_CREDIT_CARD, _CommonFormConstants.FIELD_TYPE.DEBIT_CARD, _CommonFormConstants.FIELD_TYPE.XPC];
    let validator = [],
      validatedFunction;
    if (!specialCases.includes(type) && validatePatternFlag === "yes") {
      switch (validatePatternOptions) {
        case INPUT_RULE.NUMBERS_ONLY:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^[0-9]*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (!value && required === "yes") {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkOnlyNumbers(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_NUMBER", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkOnlyNumbers;
          break;
        // old case and not for setup later
        case INPUT_RULE.LETTERS_ONLY:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^[\u0E00-\u0E7Faa-zA-Z]*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (!value && required === "yes") {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkOnlyTextReal(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_ALPHA", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkOnlyTextReal;
          break;
        case INPUT_RULE.THAI_ONLY:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^[\u0E00-\u0E7F\s]*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (!value && required === "yes") {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkOnlyTh(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_TH_ONLY", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkOnlyTh;
          break;
        case INPUT_RULE.ENGLISH_ONLY:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^[-a-zA-Z\s]*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (!value && required === "yes") {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkOnlyEn(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_EN_ONLY", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkOnlyEn;
          break;
        case INPUT_RULE.THAI_AND_ENGLISH_ONLY:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^(?:(?!<|>|\.\.\/|\.\.\\|[0-9]).)*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (required === "yes" && !value) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkOnlyThEn(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_TH_AND_EN_ONLY", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkOnlyThEn;
          break;
        case INPUT_RULE.ALLOW_ALL_EXCEPT_SOME_SPECIAL:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^(?:(?!<|>|\.\.\/|\.\.\\).)*$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (required === "yes" && !value) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkAllowAllExceptSomeSpecial(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_FREE_TEXT_WITH_SOME_SPECIALS", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          validatedFunction = _actions.ACTIONS.checkAllowAllExceptSomeSpecial;
          break;
        case INPUT_RULE.EMAIL_FORMAT:
          validator.push(_objectSpread(_objectSpread({
            pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/
          }, limitLength ? {
            max: limitLength
          } : {}), {}, {
            required: required === "yes" ? true : false,
            validator: (rule, value, callback) => {
              if (required === "yes" && !value) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label));
              } else if (value && !_actions.ACTIONS.checkEmailFormat(value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_EMAIL_FORMAT", label));
              } else if (value && !_actions.ACTIONS.checkCustomRegEx(validatePatternRegex, value)) {
                callback(alertText ? alertText : resolveFunctionLocale("FUNC_INVALID_PATTERN", label));
              } else if ((value === null || value === void 0 ? void 0 : value.length) > limitLength) {
                callback(resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength]));
              } else {
                callback();
              }
            }
          }));
          // validatedFunction = ACTIONS.checkEmailFormat; // we don't use this because it will not allow typing
          break;
        default:
          validator = [];
          validatedFunction = null;
          break;
      }
    } else {
      // Special Field Validation //

      if (type === _CommonFormConstants.FIELD_TYPE.K_PLUS_MOBILE_NO) {
        validator.push({
          pattern: /^\d{10}$/,
          message: alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_NUMBER", label)
        });
      }

      // ------------------------ //

      if (required === "yes") {
        validator = [...validator, {
          required: true,
          message: alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT", label)
        }];
      }
      if (limitLength && !SPECIAL_CARD.includes(type)) {
        validator = [...validator, {
          max: limitLength,
          message: resolveFunctionLocale("FUNC_PLEASE_INPUT_WITH_LIMIT_LENGTH", [label, limitLength])
        }];
      }
    }
    return {
      validator,
      validatedFunction
    };
  };
  const checkFormFieldShow = (flag, questionName, questionValue) => {
    const typeOfQuestion = form_fields.reduce((acc, field) => {
      if (field.name === questionName) {
        acc = field.type;
      }
      return acc;
    }, "");
    if (flag === "yes") {
      let status = true;
      if (typeOfQuestion === _CommonFormConstants.FIELD_TYPE.CHECK_BOX && questionValue && questionValue.length > 0 && formValues) {
        status = true;
        questionValue.split(", ").forEach(value => {
          var _formValues$questionN;
          let trimmedValue = value.trim();
          if (!((_formValues$questionN = formValues[questionName]) !== null && _formValues$questionN !== void 0 && _formValues$questionN.includes(trimmedValue))) {
            status = false;
          }
        });
      } else {
        if (formValues) {
          var _formValues$questionN2;
          status = ((_formValues$questionN2 = formValues[questionName]) === null || _formValues$questionN2 === void 0 ? void 0 : _formValues$questionN2.toString()) === questionValue && questionValue && questionValue.length > 0 || !questionValue && formValues[questionName] && formValues[questionName].length > 0;
        } else {
          status = false;
        }
      }
      let parentQuestion = form_fields.filter(e => e.name === questionName);
      if (parentQuestion.length > 0) {
        let currentParentQuestion = parentQuestion[0] || {};
        let {
          requiredQuestionFlag,
          requiredQuestionName,
          requiredQuestionValue
        } = currentParentQuestion;
        return status && checkFormFieldShow(requiredQuestionFlag, requiredQuestionName, requiredQuestionValue);
      } else {
        return status;
      }
    }
    return true;
  };
  const getCardData = check => {
    const cardList = specialCardList === null || specialCardList === void 0 ? void 0 : specialCardList.filter(card => isPreviewMode ? (card === null || card === void 0 ? void 0 : card.namepr) === check : (card === null || card === void 0 ? void 0 : card.id) === check);
    if ((cardList === null || cardList === void 0 ? void 0 : cardList.length) > 0) {
      var _cardList$;
      if (((_cardList$ = cardList[0]) === null || _cardList$ === void 0 || (_cardList$ = _cardList$.card_list) === null || _cardList$ === void 0 ? void 0 : _cardList$.length) > 0) {
        return cardList[0].card_list;
      } else {
        return [];
      }
    } else {
      if (isPreviewMode) {
        return PREVIEW_CARDS;
      } else {
        return [];
      }
    }
  };
  const renderFormItem = formItem => {
    formItem = _actions.ACTIONS.convertUnderscoreToCamel(formItem);
    let {
      type,
      namepr,
      id,
      name,
      titleEn,
      titleTh,
      required,
      helptextTh,
      helptextEn,
      alertTextTh,
      alertTextEn,
      placeholderEn,
      placeholderTh,
      size,
      validatePatternOptions,
      validatePatternRegex,
      requiredQuestionFlag,
      requiredQuestionName,
      requiredQuestionValue,
      validatePatternFlag,
      accept,
      minDate,
      maxDate,
      minTime,
      maxTime,
      displayInternalDataSourceFlag,
      options,
      defaultValue,
      defaultTextEn,
      defaultTextTh,
      disallowFlag,
      specialLength: limitLength,
      textTh,
      textEn,
      textColor = "#4D4D4D",
      linkTitleTh,
      linkTitleEn,
      linkNameTh,
      linkNameEn,
      linkThVersion,
      linkEnVersion,
      min = "",
      max = "",
      singleCardFlag
    } = formItem;
    let disableTimeFunctions = {};
    if (type === _CommonFormConstants.FIELD_TYPE.TIME) {
      minTime = min;
      maxTime = max;
      disableTimeFunctions = getDisableTimeRange(minTime, maxTime);
    }
    if (type === _CommonFormConstants.FIELD_TYPE.DATE) {
      minDate = min;
      maxDate = max;
    }
    const {
      textColor: updatedColor
    } = formStylesEdit;
    const {
      getFieldDecorator
    } = props.form;
    const lang = locale;
    const label = lang === _Constants.CONSTANTS.EN ? titleEn : titleTh;
    const placeholder = lang === _Constants.CONSTANTS.EN ? placeholderEn : placeholderTh;
    const helpText = lang === _Constants.CONSTANTS.EN ? helptextEn : helptextTh;
    const alertText = lang === _Constants.CONSTANTS.EN ? alertTextEn : alertTextTh;
    const text = lang === _Constants.CONSTANTS.EN ? textEn : textTh;
    size = size ? parseInt(size) : null;
    options = getOptionsData(displayInternalDataSourceFlag, options, disallowFlag);
    let cards = getCardData(isPreviewMode ? namepr : id);
    const decoratorFields = [_CommonFormConstants.FIELD_TYPE.LINK, _CommonFormConstants.FIELD_TYPE.SECTION_HEAD, _CommonFormConstants.FIELD_TYPE.PARAGRAPH, _CommonFormConstants.FIELD_TYPE.PAGE_BREAK];
    let formComponent;
    const {
      validator,
      validatedFunction
    } = generateRules(type, required, validatePatternFlag, validatePatternOptions, validatePatternRegex, alertText, label, limitLength);
    const specialCardsRules = [{
      required: true,
      pattern: /^[0-9]*$/,
      message: alertText ? alertText : resolveFunctionLocale("FUNC_PLEASE_INPUT_NUMBER", label),
      validator: (rule, value, callback) => {
        const {
          message = ''
        } = rule;
        if (!value || value.length < 4) {
          callback(message);
        } else if (value && !_actions.ACTIONS.checkOnlyNumbers(value)) {
          callback(message);
        } else {
          callback();
        }
      }
    }];
    switch (type) {
      case _CommonFormConstants.FIELD_TYPE.TEXTBOX:
        formComponent = mode === "mobile" ? /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
          className: "mobile-item-input",
          validatedFunction: validatedFunction,
          placeholder: placeholder,
          maxLength: size,
          onChange: _ref => {
            let {
              target: {
                value
              }
            } = _ref;
            return handleFieldOnChange(name, value, 1000);
          }
        }) : /*#__PURE__*/_react.default.createElement(_CustomInput.default, {
          className: getClassNameBasedOnViewMode("item-input"),
          validatedFunction: validatedFunction,
          placeholder: placeholder,
          maxLength: size,
          onChange: _ref2 => {
            let {
              target: {
                value
              }
            } = _ref2;
            return handleFieldOnChange(name, value, 1000);
          }
        });
        break;
      case _CommonFormConstants.FIELD_TYPE.DROPDOWN:
        formComponent = mode === "mobile" ? /*#__PURE__*/_react.default.createElement(_antd.Select, {
          className: "mobile-item-select",
          placeholder: lang === _Constants.CONSTANTS.EN ? defaultTextEn : defaultTextTh,
          onChange: values => {
            handleFieldOnChange(name, values);
            // For fix issue this.state.formErrors not change when dropdown onChange
            setFormErrors(_objectSpread(_objectSpread({}, formErrors), {}, {
              ["field-".concat(isPreviewMode ? namepr : id)]: undefined
            }));
          },
          suffixIcon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
            type: "down",
            style: {
              fontSize: 20
            }
          })
        }, options.map((_ref3, index) => {
          let {
            choiceEn,
            choiceTh,
            value
          } = _ref3;
          return /*#__PURE__*/_react.default.createElement(Option, {
            key: "".concat(choiceEn).concat(index),
            value: value
          }, lang === _Constants.CONSTANTS.EN ? choiceEn : choiceTh);
        })) : /*#__PURE__*/_react.default.createElement(_antd.Select, {
          className: getClassNameBasedOnViewMode("item-select"),
          placeholder: lang === _Constants.CONSTANTS.EN ? defaultTextEn : defaultTextTh,
          onChange: values => handleFieldOnChange(name, values)
        }, options.map((_ref4, index) => {
          let {
            choiceEn,
            choiceTh,
            value
          } = _ref4;
          return /*#__PURE__*/_react.default.createElement(Option, {
            key: "".concat(choiceEn).concat(index),
            value: value
          }, lang === _Constants.CONSTANTS.EN ? choiceEn : choiceTh);
        }));
        break;
      case _CommonFormConstants.FIELD_TYPE.DATE:
        formComponent = DatePickerComp ? /*#__PURE__*/_react.default.createElement(DatePickerComp, {
          browserMode: mode,
          name: name,
          required: required,
          lang: lang,
          className: getClassNameBasedOnViewMode("item-datepicker"),
          placeholder: resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_DATE_PLACEHOLDER"),
          format: _CommonFormConstants.CONSTANT.DATE_FORMAT,
          disabledDate: getDisableDateRange(minDate, maxDate),
          initState: props.form.getFieldValue("field-".concat(isPreviewMode ? namepr : id)),
          formProps: props.form,
          formFieldName: "field-".concat(isPreviewMode ? namepr : id),
          errorMsg: alertText,
          handleTitleError: () => {
            // For fix issue this.state.formErrors not change when dropdown onChange
            setFormErrors(_objectSpread(_objectSpread({}, formErrors), {}, {
              ["field-".concat(isPreviewMode ? namepr : id)]: props.form.getFieldError("field-".concat(isPreviewMode ? namepr : id))
            }));
          }
        }) : /*#__PURE__*/_react.default.createElement(_CustomDatePickerMobile.default, {
          browserMode: mode,
          name: name,
          required: required,
          lang: lang,
          className: getClassNameBasedOnViewMode("item-datepicker"),
          placeholder: resolveLocale("FORM_DETAIL_PREVIEW_POPUP_BOX_DATE_PLACEHOLDER"),
          format: _CommonFormConstants.CONSTANT.DATE_FORMAT,
          disabledDate: getDisableDateRange(minDate, maxDate),
          initState: props.form.getFieldValue("field-".concat(isPreviewMode ? namepr : id)