@bigbinary/neeto-form-frontend 3.13.9 → 3.14.0

package/dist/{utils-BThu7JWp.js → utils-BjgmM0Qs.js}

@@ -1,18 +1,18 @@
-import { useEffect, useState, useImperativeHandle, memo, Fragment } from 'react';
+import { useEffect, useState, useImperativeHandle, memo, Fragment as Fragment$1 } from 'react';
 import { useFormikContext, useField, Field as Field$1, FastField } from 'formik';
-import { isPresent, isNotEmpty, findBy, findById, isNotPresent, getRandomInt, randomPick, noop, hyphenate, slugify, notEqualsDeep } from '@bigbinary/neeto-cist';
-import { i as isFunction, b as isEmptyValues, f as fieldWithFallback } from './index-BGEdOqsc.js';
-import { dayjs, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
+import { isPresent, isNotEmpty, findBy, filterBy, findById, isNotPresent, getRandomInt, randomPick, noop, hyphenate, slugify, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { i as isFunction, b as isEmptyValues, f as fieldWithFallback } from './index-BkNaYmLc.js';
+import { dayjs, getFromLocalStorage, setToLocalStorage, removeFromLocalStorage, withEventTargetValue, buildUrl } from '@bigbinary/neeto-commons-frontend/utils';
 import { parsePhoneNumber } from 'libphonenumber-js';
-import { includes, __, isNil, clamp, prop, map, identity, pluck, pipe, toLower, reject, isEmpty, values, equals, pick } from 'ramda';
+import { pick, mergeRight, omit, isEmpty, max, includes, __, mergeLeft, isNil, clamp, prop, map, zipObj, identity, pluck, pipe, toLower, reject, values, dec, equals } from 'ramda';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import EditorContent from '@bigbinary/neeto-editor/EditorContent';
-import { C as CAPTCHA_TYPES } from './constants-DBuFEVFA.js';
+import { Q as QUESTION_TYPES, C as CAPTCHA_TYPES, E as EMAIL_VERIFICATIONS_CREATE_URL, j as EMAIL_VERIFICATIONS_VERIFY_URL } from './constants-b1EQ6-AS.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Button from '@bigbinary/neetoui/Button';
 import NeetoUIMultiEmailInput from '@bigbinary/neetoui/MultiEmailInput';
-import { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -20,10 +20,10 @@ import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import { validation, PhoneNumberInput } from '@bigbinary/neeto-molecules/PhoneNumber';
 import * as yup from 'yup';
 import i18next from 'i18next';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import { a as QUESTION_KIND, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, L as LABEL_FIELDS, c as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-R6y-Scns.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { a as QUESTION_KIND, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, L as LABEL_FIELDS, d as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-Bw2NSI7-.js';
 import classnames from 'classnames';
-import { useUpdateEffect, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useUpdateEffect, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
 import Input from '@bigbinary/neetoui/Input';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -31,6 +31,12 @@ import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
 import ReCAPTCHA from 'react-google-recaptcha';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import { useMutation } from '@tanstack/react-query';
+import axios from 'axios';
+import CheckCircle from '@bigbinary/neeto-icons/CheckCircle';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import NeetoUICallout from '@bigbinary/neetoui/Callout';
 import { FileUpload } from '@bigbinary/neeto-molecules/FileUpload';
 import Label from '@bigbinary/neetoui/Label';
 import Select from '@bigbinary/neetoui/Select';
@@ -124,6 +130,76 @@ var FormikWrap = function FormikWrap(_ref) {
   return children;
 };
 
+var RESEND_DELAY = 120;
+var ONE_SECOND = 1000;
+var EMAIL_VERIFICATION_FIELD_NAME_PREFIX = "verificationCode_";
+var EMAIL_VERIFICATION_PREFIX = "neeto_form_nano_email_verification_details_";
+var EMAIL_VERIFICATION_KEYS = {
+  EMAIL: "email",
+  TOKEN: "token",
+  VERIFIED: "verified",
+  CODE: "code",
+  CODE_SENT_AT: "code-sent-at"
+};
+var CALLOUT_STYLES = {
+  WARNING: "warning",
+  ERROR: "danger"
+};
+var DEFAULT_CALLOUT_DETAILS = {
+  message: "",
+  style: ""
+};
+
+var getEmailVerificationKey = function getEmailVerificationKey(formId) {
+  return "".concat(EMAIL_VERIFICATION_PREFIX, "-").concat(formId);
+};
+var getEmailVerificationDetails = function getEmailVerificationDetails(formId) {
+  return getFromLocalStorage(getEmailVerificationKey(formId)) || {};
+};
+var buildVerificationFieldName = function buildVerificationFieldName(questionId) {
+  return "".concat(EMAIL_VERIFICATION_FIELD_NAME_PREFIX, "-").concat(questionId);
+};
+var getLastVerificationCodeSentAt = function getLastVerificationCodeSentAt(formId, questionId) {
+  var codeSentAt = getEmailVerificationDetail(formId, questionId, EMAIL_VERIFICATION_KEYS.CODE_SENT_AT);
+  return Number(codeSentAt) || 0;
+};
+var storeLastVerificationCodeSentAt = function storeLastVerificationCodeSentAt(formId, questionId) {
+  var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return setEmailVerificationDetail(formId, questionId, _defineProperty({}, EMAIL_VERIFICATION_KEYS.CODE_SENT_AT, Date.now() - offset));
+};
+var getRemainingTime = function getRemainingTime(formId, questionId) {
+  var elapsedTime = Math.floor((Date.now() - getLastVerificationCodeSentAt(formId, questionId)) / ONE_SECOND);
+  return max(RESEND_DELAY - elapsedTime, 0);
+};
+var getEmailVerificationDetail = function getEmailVerificationDetail(formId, questionId) {
+  var _questionDetails$keys;
+  var allDetails = getEmailVerificationDetails(formId);
+  var questionDetails = allDetails[questionId] || {};
+  for (var _len = arguments.length, keys = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+    keys[_key - 2] = arguments[_key];
+  }
+  return keys.length === 1 ? (_questionDetails$keys = questionDetails[keys[0]]) !== null && _questionDetails$keys !== void 0 ? _questionDetails$keys : "" : pick(keys, allDetails);
+};
+var setEmailVerificationDetail = function setEmailVerificationDetail(formId, questionId, data) {
+  var storageKey = getEmailVerificationKey(formId);
+  var allDetails = getEmailVerificationDetails(formId);
+  allDetails[questionId] = mergeRight(allDetails[questionId] || {}, data);
+  setToLocalStorage(storageKey, allDetails);
+};
+var removeEmailVerificationDetail = function removeEmailVerificationDetail(formId, questionId) {
+  var storageKey = getEmailVerificationKey(formId);
+  var allDetails = getEmailVerificationDetails(formId);
+  for (var _len2 = arguments.length, keys = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+    keys[_key2 - 2] = arguments[_key2];
+  }
+  allDetails[questionId] = omit(keys, allDetails[questionId]);
+  if (isEmpty(allDetails[questionId])) delete allDetails[questionId];
+  isEmpty(allDetails) ? removeFromLocalStorage(storageKey) : setToLocalStorage(storageKey, allDetails);
+};
+var clearEmailVerificationDetails = function clearEmailVerificationDetails(formId) {
+  removeFromLocalStorage(getEmailVerificationKey(formId));
+};
+
 var t$1 = clientI18nInstance.t;
 var getInvalidFieldError = function getInvalidFieldError(label) {
   return t$1("neetoForm.error.invalidField", {
@@ -149,8 +225,8 @@ var getInvalidTypeError = function getInvalidTypeError(label, type) {
   });
 };
 
-function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(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$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toEmailValues = function toEmailValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return values.map(function (value) {
@@ -241,22 +317,34 @@ var getNameFromUrl = function getNameFromUrl(_ref7, fieldCodes) {
     fullName: fieldCodes[fieldCode] || ""
   };
 };
+var buildEmailVerificationEntries = function buildEmailVerificationEntries() {
+  var questions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var emailQuestionsRequiringVerification = filterBy({
+    kind: QUESTION_TYPES.EMAIL,
+    isVerificationEnabled: true
+  }, questions);
+  var fieldNames = map(function (_ref8) {
+    var id = _ref8.id;
+    return buildVerificationFieldName(id);
+  }, emailQuestionsRequiringVerification);
+  return zipObj(fieldNames, Array(fieldNames.length).fill(""));
+};
 var getLabel = function getLabel(label, isRequired) {
   return isRequired ? "".concat(label, "*") : label;
 };
-var generateInitValues = function generateInitValues(_ref8) {
-  var questions = _ref8.questions,
-    _ref8$initialValues = _ref8.initialValues,
-    initialValues = _ref8$initialValues === void 0 ? [] : _ref8$initialValues,
-    _ref8$localValues = _ref8.localValues,
-    localValues = _ref8$localValues === void 0 ? {} : _ref8$localValues,
-    _ref8$fieldCodes = _ref8.fieldCodes,
-    fieldCodes = _ref8$fieldCodes === void 0 ? {} : _ref8$fieldCodes;
+var generateInitValues = function generateInitValues(_ref9) {
+  var questions = _ref9.questions,
+    _ref9$initialValues = _ref9.initialValues,
+    initialValues = _ref9$initialValues === void 0 ? [] : _ref9$initialValues,
+    _ref9$localValues = _ref9.localValues,
+    localValues = _ref9$localValues === void 0 ? {} : _ref9$localValues,
+    _ref9$fieldCodes = _ref9.fieldCodes,
+    fieldCodes = _ref9$fieldCodes === void 0 ? {} : _ref9$fieldCodes;
   var initValues = {};
   var valuesMap = {};
   if (initialValues) {
     valuesMap = initialValues.reduce(function (acc, answer) {
-      return _objectSpread$f(_objectSpread$f({}, acc), {}, _defineProperty({}, answer.questionId, {
+      return _objectSpread$h(_objectSpread$h({}, acc), {}, _defineProperty({}, answer.questionId, {
         value: answer.value,
         optionIds: answer.optionIds
       }));
@@ -378,7 +466,8 @@ var generateInitValues = function generateInitValues(_ref8) {
         }
     }
   });
-  return !isEmptyValues(localValues) ? localValues : initValues;
+  var formInitialValues = !isEmptyValues(localValues) ? localValues : initValues;
+  return mergeLeft(formInitialValues, buildEmailVerificationEntries(questions));
 };
 var generateFormResponse = function generateFormResponse(response, questions) {
   var formResponse = [];
@@ -476,8 +565,8 @@ var isPhoneNumberField = includes(__, [QUESTION_KIND.PHONE.value, QUESTION_KIND.
 
 var _excluded$4 = ["kind", "customValidator"];
 var _fieldKindValidatorMa;
-function ownKeys$e(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var t = clientI18nInstance.t;
 yup.addMethod(yup.array, "unique", function () {
   var field, message;
@@ -656,7 +745,7 @@ var validateFieldValue = function validateFieldValue(_ref16) {
   return function (value) {
     if (!(kind in fieldKindValidatorMap)) return;
     var validator = fieldKindValidatorMap[kind];
-    var schema = customValidator || validator(_objectSpread$e({
+    var schema = customValidator || validator(_objectSpread$g({
       kind: kind
     }, otherProps));
 
@@ -689,6 +778,61 @@ var validateFieldValue = function validateFieldValue(_ref16) {
     }());
   };
 };
+var validateVerificationCode = function validateVerificationCode(context) {
+  return function (value) {
+    var entity = t("neetoForm.emailVerification.verificationCode");
+    var schema = yup.string().trim().when("$isVerificationEnabled", {
+      is: true,
+      then: function then(schema) {
+        return schema.when("$isRequired", {
+          is: true,
+          then: function then(s) {
+            return s.required(getRequiredFieldError(entity));
+          }
+        }).when("$email", function (email, s) {
+          if (email !== null && email !== void 0 && email.trim()) {
+            return s.required(getRequiredFieldError(entity));
+          }
+          return s;
+        }).test("is-6-digit-number", t("neetoForm.error.mustBeASixDigitNumber", {
+          entity: entity
+        }), function (value) {
+          return isNotPresent(value) || SIX_DIGIT_NUMBER_REGEX.test(value);
+        });
+      }
+    });
+
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise(/*#__PURE__*/function () {
+      var _ref18 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(resolve) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return schema.validate(value, {
+                context: context
+              });
+            case 3:
+              resolve(undefined);
+              _context2.next = 9;
+              break;
+            case 6:
+              _context2.prev = 6;
+              _context2.t0 = _context2["catch"](0);
+              resolve(_context2.t0.message);
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[0, 6]]);
+      }));
+      return function (_x2) {
+        return _ref18.apply(this, arguments);
+      };
+    }());
+  };
+};
 
 var MultipleEmailInput = function MultipleEmailInput(_ref) {
   var question = _ref.question,
@@ -935,8 +1079,8 @@ var Recaptcha = function Recaptcha(_ref) {
   }, clientI18nInstance.language);
 };
 
-function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConditionField = function ConditionField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -956,7 +1100,7 @@ var ConditionField = function ConditionField(_ref) {
     children: function children(_ref2) {
       var meta = _ref2.meta,
         field = _ref2.field;
-      return /*#__PURE__*/jsx(Checkbox, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, field), {}, {
+      return /*#__PURE__*/jsx(Checkbox, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, field), {}, {
         label: label,
         name: name
       })), {}, {
@@ -969,8 +1113,8 @@ var ConditionField = function ConditionField(_ref) {
 };
 
 var _excluded$3 = ["value"];
-function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DateField = function DateField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -1007,7 +1151,7 @@ var DateField = function DateField(_ref) {
             value = _ref2$field.value,
             field = _objectWithoutProperties(_ref2$field, _excluded$3),
             form = _ref2.form;
-          return /*#__PURE__*/jsx(DatePicker, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, field), {}, {
+          return /*#__PURE__*/jsx(DatePicker, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, field), {}, {
             type: type
           })), {}, {
             "data-cy": "".concat(hyphenate(label), "-input-field"),
@@ -1029,13 +1173,239 @@ var DateField = function DateField(_ref) {
   });
 };
 
+var create = function create(_ref) {
+  var formId = _ref.formId,
+    questionId = _ref.questionId,
+    payload = _ref.payload;
+  return axios.post(buildUrl(EMAIL_VERIFICATIONS_CREATE_URL, {
+    formId: formId,
+    questionId: questionId
+  }), payload, {
+    showToastr: false
+  });
+};
+var verify = function verify(_ref2) {
+  var formId = _ref2.formId,
+    questionId = _ref2.questionId,
+    payload = _ref2.payload;
+  return axios.post(buildUrl(EMAIL_VERIFICATIONS_VERIFY_URL, {
+    formId: formId,
+    questionId: questionId
+  }), payload, {
+    showToastr: false
+  });
+};
+var emailVerificationsApi = {
+  create: create,
+  verify: verify
+};
+
+function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getMutationCallbacks = function getMutationCallbacks(options) {
+  return {
+    onSuccess: function onSuccess() {
+      var _options$onSuccess;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call.apply(_options$onSuccess, [options].concat(args));
+    },
+    onError: function onError() {
+      var _options$onError;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return (_options$onError = options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call.apply(_options$onError, [options].concat(args));
+    }
+  };
+};
+var useSendEmailVerificationCode = function useSendEmailVerificationCode(formId, questionId) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return useMutation(_objectSpread$d(_objectSpread$d({
+    mutationFn: function mutationFn(payload) {
+      return emailVerificationsApi.create({
+        formId: formId,
+        questionId: questionId,
+        payload: payload
+      });
+    }
+  }, options), getMutationCallbacks(options)));
+};
+var useVerifyEmailVerificationCode = function useVerifyEmailVerificationCode(formId, questionId) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return useMutation(_objectSpread$d(_objectSpread$d({
+    mutationFn: function mutationFn(payload) {
+      return emailVerificationsApi.verify({
+        formId: formId,
+        questionId: questionId,
+        payload: payload
+      });
+    }
+  }, options), getMutationCallbacks(options)));
+};
+
+var SendCodeButton = function SendCodeButton(_ref) {
+  var isCodeVerified = _ref.isCodeVerified,
+    isSendingVerificationCode = _ref.isSendingVerificationCode,
+    handleClick = _ref.handleClick,
+    isDisabled = _ref.isDisabled;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (isCodeVerified) {
+    return /*#__PURE__*/jsx(CheckCircle, {});
+  }
+  return /*#__PURE__*/jsx(Button, {
+    disabled: isDisabled,
+    size: "small",
+    style: "secondary",
+    onClick: handleClick,
+    children: isSendingVerificationCode ? /*#__PURE__*/jsx(Spinner, {
+      size: "16"
+    }) : t("neetoForm.emailVerification.sendCode")
+  });
+};
+
+var ResendVerificationCode = function ResendVerificationCode(_ref) {
+  var formId = _ref.formId,
+    questionId = _ref.questionId,
+    sendVerificationCode = _ref.sendVerificationCode,
+    isResendDisabled = _ref.isResendDisabled;
+  var _useState = useState(getRemainingTime(formId, questionId)),
+    _useState2 = _slicedToArray(_useState, 2),
+    secondsLeft = _useState2[0],
+    setSecondsLeft = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  useEffect(function () {
+    if (secondsLeft <= 0) return undefined;
+    var interval = setTimeout(function () {
+      setSecondsLeft(pipe(dec, max(0)));
+    }, ONE_SECOND);
+    return function () {
+      return clearTimeout(interval);
+    };
+  }, [secondsLeft]);
+  var handleResendClick = function handleResendClick() {
+    if (secondsLeft !== 0) return;
+    sendVerificationCode();
+    setSecondsLeft(RESEND_DELAY);
+    storeLastVerificationCodeSentAt(formId, questionId);
+  };
+  return /*#__PURE__*/jsx("p", {
+    children: !isResendDisabled && secondsLeft > 0 ? t("neetoForm.emailVerification.resendInSeconds", {
+      secondsLeft: secondsLeft
+    }) : /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoForm.emailVerification.resendCode",
+      components: {
+        button: /*#__PURE__*/jsx(Button, {
+          disabled: isResendDisabled,
+          size: "small",
+          style: "link",
+          onClick: handleResendClick
+        })
+      }
+    })
+  });
+};
+
+function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var VerifyCode = function VerifyCode(_ref) {
+  var formId = _ref.formId,
+    questionId = _ref.questionId,
+    email = _ref.email,
+    emailVerificationToken = _ref.emailVerificationToken,
+    setIsCodeVerified = _ref.setIsCodeVerified,
+    handleResponseError = _ref.handleResponseError,
+    hasSentVerificationCode = _ref.hasSentVerificationCode,
+    calloutDetails = _ref.calloutDetails,
+    handleSendVerificationCode = _ref.handleSendVerificationCode,
+    isRequired = _ref.isRequired,
+    isVerificationEnabled = _ref.isVerificationEnabled;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var verificationFieldName = buildVerificationFieldName(questionId);
+  var _useField = useField({
+      name: verificationFieldName,
+      validate: validateVerificationCode({
+        isVerificationEnabled: isVerificationEnabled,
+        isRequired: isRequired,
+        email: email
+      })
+    }),
+    _useField2 = _slicedToArray(_useField, 3),
+    field = _useField2[0],
+    _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setValue = _useField2$2.setValue,
+    setTouched = _useField2$2.setTouched;
+  var code = field.value;
+  var _useState = useState(code),
+    _useState2 = _slicedToArray(_useState, 2),
+    previousCode = _useState2[0],
+    setPreviousCode = _useState2[1];
+  var _useVerifyEmailVerifi = useVerifyEmailVerificationCode(formId, questionId, {
+      onSuccess: function onSuccess(_, _ref2) {
+        var emailVerifications = _ref2.emailVerifications;
+        setIsCodeVerified(true);
+        setPreviousCode(emailVerifications.otp);
+        setEmailVerificationDetail(formId, questionId, _defineProperty(_defineProperty(_defineProperty({}, EMAIL_VERIFICATION_KEYS.EMAIL, emailVerifications.email), EMAIL_VERIFICATION_KEYS.CODE, emailVerifications.otp), EMAIL_VERIFICATION_KEYS.VERIFIED, true));
+      },
+      onError: handleResponseError
+    }),
+    verifyCode = _useVerifyEmailVerifi.mutate,
+    isVerifyingCode = _useVerifyEmailVerifi.isPending;
+  var hasError = isPresent(error);
+  useEffect(function () {
+    var handleVerifyCode = function handleVerifyCode() {
+      if (equals(code, previousCode) || hasError || (code === null || code === void 0 ? void 0 : code.length) !== 6) {
+        return;
+      }
+      verifyCode({
+        emailVerifications: {
+          email: email,
+          token: emailVerificationToken,
+          otp: code
+        }
+      });
+    };
+    handleVerifyCode();
+  }, [code, hasError]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Input, _objectSpread$c(_objectSpread$c({}, _objectSpread$c({}, field)), {}, {
+      disabled: isVerifyingCode,
+      error: touched ? error : "",
+      loading: isVerifyingCode,
+      name: verificationFieldName,
+      placeholder: t("neetoForm.emailVerification.verificationCode"),
+      size: "small",
+      onBlur: function onBlur() {
+        return setTouched(true);
+      },
+      onChange: withEventTargetValue(setValue)
+    })), hasSentVerificationCode && /*#__PURE__*/jsx(ResendVerificationCode, {
+      formId: formId,
+      questionId: questionId,
+      isResendDisabled: calloutDetails.style === CALLOUT_STYLES.ERROR,
+      sendVerificationCode: handleSendVerificationCode
+    }), calloutDetails.message && /*#__PURE__*/jsx(NeetoUICallout, {
+      style: calloutDetails.style,
+      children: calloutDetails.message
+    })]
+  });
+};
+
 function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmailField = function EmailField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator,
-    autoComplete = _ref.autoComplete;
-  var name = question.id,
+    autoComplete = _ref.autoComplete,
+    isPreview = _ref.preview;
+  var questionId = question.id,
     kind = question.kind,
     isRequired = question.isRequired,
     isReadOnly = question.isReadOnly,
@@ -1043,11 +1413,26 @@ var EmailField = function EmailField(_ref) {
     whitelistedDomains = question.whitelistedDomains,
     isDomainBlacklistingEnabled = question.isDomainBlacklistingEnabled,
     blacklistedDomains = question.blacklistedDomains,
-    nodeId = question.nodeId;
+    isVerificationEnabled = question.isVerificationEnabled,
+    nodeId = question.nodeId,
+    formId = question.formId;
   var label = fieldWithFallback(question, "label");
+  var _useState = useState(DEFAULT_CALLOUT_DETAILS),
+    _useState2 = _slicedToArray(_useState, 2),
+    calloutDetails = _useState2[0],
+    setCalloutDetails = _useState2[1];
   var type = QUESTION_KIND[kind.toUpperCase()].type;
+  var _useState3 = useState(getLastVerificationCodeSentAt(questionId) > 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasSentVerificationCode = _useState4[0],
+    setHasSentVerificationCode = _useState4[1];
+  var verificationStatus = getEmailVerificationDetail(formId, questionId, EMAIL_VERIFICATION_KEYS.VERIFIED);
+  var _useStateWithDependen = useStateWithDependency(verificationStatus, [verificationStatus]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    isCodeVerified = _useStateWithDependen2[0],
+    setIsCodeVerified = _useStateWithDependen2[1];
   var _useField = useField({
-      name: name || nodeId,
+      name: questionId || nodeId,
       validate: validateFieldValue({
         kind: kind,
         label: label,
@@ -1065,23 +1450,104 @@ var EmailField = function EmailField(_ref) {
     _useField2$2 = _useField2[2],
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue;
+  var email = field.value;
+  var emailVerificationToken = getEmailVerificationDetail(formId, questionId, EMAIL_VERIFICATION_KEYS.TOKEN);
+  var handleResponseError = function handleResponseError(error) {
+    var _error$response;
+    var message = error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 || (_error$response = _error$response.data) === null || _error$response === void 0 ? void 0 : _error$response.error;
+    if ((error === null || error === void 0 ? void 0 : error.status) === 429) {
+      setCalloutDetails({
+        message: message,
+        style: CALLOUT_STYLES.ERROR
+      });
+      storeLastVerificationCodeSentAt(formId, questionId, RESEND_DELAY * ONE_SECOND);
+    } else {
+      Toastr.error(message);
+    }
+  };
+
+  // TODO backend validation
+  var _useSendEmailVerifica = useSendEmailVerificationCode(formId, questionId, {
+      onSuccess: function onSuccess(_ref2) {
+        var token = _ref2.token,
+          message = _ref2.message;
+        setHasSentVerificationCode(true);
+        storeLastVerificationCodeSentAt(formId, questionId);
+        if (!emailVerificationToken) {
+          setEmailVerificationDetail(formId, questionId, _defineProperty({}, EMAIL_VERIFICATION_KEYS.TOKEN, token));
+        }
+        if (message) {
+          setCalloutDetails({
+            message: message,
+            style: CALLOUT_STYLES.WARNING
+          });
+        }
+      },
+      onError: handleResponseError
+    }),
+    sendVerificationCode = _useSendEmailVerifica.mutate,
+    isSendingVerificationCode = _useSendEmailVerifica.isPending;
+  var resetVerifiedData = function resetVerifiedData(email) {
+    var verifiedEmail = getEmailVerificationDetail(formId, questionId, EMAIL_VERIFICATION_KEYS.EMAIL);
+    if (email !== verifiedEmail) {
+      removeEmailVerificationDetail(formId, questionId, values(omit(["TOKEN"], EMAIL_VERIFICATION_KEYS)));
+      setIsCodeVerified(false);
+      setFieldValue(buildVerificationFieldName(questionId), "");
+      setHasSentVerificationCode(false);
+      setCalloutDetails(DEFAULT_CALLOUT_DETAILS);
+    }
+  };
   var handleFieldChange = withEventTargetValue(setValue);
-  return /*#__PURE__*/jsx(Input, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({
-    type: type
-  }, field), {}, {
-    autoComplete: autoComplete,
-    label: label
-  })), {}, {
-    disabled: isReadOnly,
-    error: touched ? error : "",
-    name: kind,
-    placeholder: fieldWithFallback(question, "placeholder"),
-    required: isRequired,
-    onBlur: function onBlur() {
-      return setTouched(true);
-    },
-    onChange: handleFieldChange
-  }));
+  var handleSendVerificationCode = function handleSendVerificationCode() {
+    return sendVerificationCode({
+      emailVerifications: {
+        email: email,
+        token: emailVerificationToken
+      }
+    });
+  };
+  var shouldShowVerifyButton = isVerificationEnabled && (isPreview || isPresent(email) && isNotPresent(error));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex-col space-y-2",
+    children: [/*#__PURE__*/jsx(Input, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({
+      type: type
+    }, field), {}, {
+      autoComplete: autoComplete,
+      label: label
+    }, shouldShowVerifyButton && {
+      suffix: /*#__PURE__*/jsx(SendCodeButton, {
+        isCodeVerified: isCodeVerified,
+        isSendingVerificationCode: isSendingVerificationCode,
+        handleClick: isPreview ? noop : handleSendVerificationCode,
+        isDisabled: isCodeVerified || hasSentVerificationCode
+      })
+    })), {}, {
+      disabled: isReadOnly,
+      error: touched && !isCodeVerified ? error : "",
+      name: kind,
+      placeholder: fieldWithFallback(question, "placeholder"),
+      required: isRequired,
+      onBlur: function onBlur() {
+        return setTouched(true);
+      },
+      onBlurCapture: withEventTargetValue(resetVerifiedData),
+      onChange: handleFieldChange
+    })), shouldShowVerifyButton && !isCodeVerified && /*#__PURE__*/jsx(VerifyCode, {
+      calloutDetails: calloutDetails,
+      email: email,
+      emailVerificationToken: emailVerificationToken,
+      formId: formId,
+      handleResponseError: handleResponseError,
+      handleSendVerificationCode: handleSendVerificationCode,
+      hasSentVerificationCode: hasSentVerificationCode,
+      isRequired: isRequired,
+      isVerificationEnabled: isVerificationEnabled,
+      questionId: questionId,
+      setIsCodeVerified: setIsCodeVerified
+    })]
+  });
 };
 
 var FileUploadField = function FileUploadField(_ref) {
@@ -1417,7 +1883,7 @@ var Rating = function Rating(_ref) {
       var Icon = _ref2.icon,
         modifier = _ref2.modifier,
         rating = _ref2.value;
-      return /*#__PURE__*/jsxs(Fragment, {
+      return /*#__PURE__*/jsxs(Fragment$1, {
         children: [/*#__PURE__*/jsxs("button", {
           disabled: disabled,
           type: "button",
@@ -1575,7 +2041,7 @@ var RatingButton = function RatingButton(_ref) {
   };
   var Icon = ICONS_MAP[iconType];
   var selectedRating = getSelectedRating(value);
-  return /*#__PURE__*/jsxs(Fragment$1, {
+  return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("button", {
       className: classnames({
         active: rating === value
@@ -1804,5 +2270,5 @@ var containsIgnoreCase = function containsIgnoreCase(string, substring) {
   return string.toLowerCase().includes(substring.toLowerCase());
 };
 
-export { FormikWrap as F, getFieldComponent as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, generateFormResponse as e, clearLocalStorageValues as f, generateInitValues as g, mergeRefs as m, renderButtonsInOrder as r };
-//# sourceMappingURL=utils-BThu7JWp.js.map
+export { FormikWrap as F, getFieldComponent as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, clearEmailVerificationDetails as e, generateFormResponse as f, generateInitValues as g, clearLocalStorageValues as h, mergeRefs as m, renderButtonsInOrder as r };
+//# sourceMappingURL=utils-BjgmM0Qs.js.map