@bigbinary/neeto-form-frontend 3.13.9 → 3.14.0

package/dist/{utils-1blEk5zb.js → utils-DdrUdmyb.js}

@@ -3,13 +3,13 @@
 var React = require('react');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
-var index = require('./index-CAtNQTCZ.js');
+var index = require('./index-BARvqe7c.js');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var libphonenumberJs = require('libphonenumber-js');
 var ramda = require('ramda');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var EditorContent = require('@bigbinary/neeto-editor/EditorContent');
-var constants$1 = require('./constants-Dq9-rvtB.js');
+var constants$1 = require('./constants-BVZZfXua.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var Button = require('@bigbinary/neetoui/Button');
@@ -23,7 +23,7 @@ var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var yup = require('yup');
 var i18next = require('i18next');
 var jsxRuntime = require('react/jsx-runtime');
-var constants = require('./constants-CDhYxmSQ.js');
+var constants = require('./constants-VzpftVgP.js');
 var classnames = require('classnames');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Refresh = require('@bigbinary/neeto-icons/Refresh');
@@ -33,6 +33,12 @@ var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 var ReCAPTCHA = require('react-google-recaptcha');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var DatePicker = require('@bigbinary/neetoui/DatePicker');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var reactQuery = require('@tanstack/react-query');
+var axios = require('axios');
+var CheckCircle = require('@bigbinary/neeto-icons/CheckCircle');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var NeetoUICallout = require('@bigbinary/neetoui/Callout');
 var FileUpload = require('@bigbinary/neeto-molecules/FileUpload');
 var Label = require('@bigbinary/neetoui/Label');
 var Select = require('@bigbinary/neetoui/Select');
@@ -145,6 +151,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 utils.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 ramda.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 : "" : ramda.pick(keys, allDetails);
+};
+var setEmailVerificationDetail = function setEmailVerificationDetail(formId, questionId, data) {
+  var storageKey = getEmailVerificationKey(formId);
+  var allDetails = getEmailVerificationDetails(formId);
+  allDetails[questionId] = ramda.mergeRight(allDetails[questionId] || {}, data);
+  utils.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] = ramda.omit(keys, allDetails[questionId]);
+  if (ramda.isEmpty(allDetails[questionId])) delete allDetails[questionId];
+  ramda.isEmpty(allDetails) ? utils.removeFromLocalStorage(storageKey) : utils.setToLocalStorage(storageKey, allDetails);
+};
+var clearEmailVerificationDetails = function clearEmailVerificationDetails(formId) {
+  utils.removeFromLocalStorage(getEmailVerificationKey(formId));
+};
+
 var t$1 = clientI18nInstance.t;
 var getInvalidFieldError = function getInvalidFieldError(label) {
   return t$1("neetoForm.error.invalidField", {
@@ -170,8 +246,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) {
@@ -262,22 +338,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 = neetoCist.filterBy({
+    kind: constants$1.QUESTION_TYPES.EMAIL,
+    isVerificationEnabled: true
+  }, questions);
+  var fieldNames = ramda.map(function (_ref8) {
+    var id = _ref8.id;
+    return buildVerificationFieldName(id);
+  }, emailQuestionsRequiringVerification);
+  return ramda.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
       }));
@@ -399,7 +487,8 @@ var generateInitValues = function generateInitValues(_ref8) {
         }
     }
   });
-  return !index.isEmptyValues(localValues) ? localValues : initValues;
+  var formInitialValues = !index.isEmptyValues(localValues) ? localValues : initValues;
+  return ramda.mergeLeft(formInitialValues, buildEmailVerificationEntries(questions));
 };
 var generateFormResponse = function generateFormResponse(response, questions) {
   var formResponse = [];
@@ -497,8 +586,8 @@ var isPhoneNumberField = ramda.includes(ramda.__, [constants.QUESTION_KIND.PHONE
 
 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__namespace.addMethod(yup__namespace.array, "unique", function () {
   var field, message;
@@ -677,7 +766,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));
 
@@ -710,6 +799,61 @@ var validateFieldValue = function validateFieldValue(_ref16) {
     }());
   };
 };
+var validateVerificationCode = function validateVerificationCode(context) {
+  return function (value) {
+    var entity = t("neetoForm.emailVerification.verificationCode");
+    var schema = yup__namespace.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 neetoCist.isNotPresent(value) || constants.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,
@@ -956,8 +1100,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;
@@ -977,7 +1121,7 @@ var ConditionField = function ConditionField(_ref) {
     children: function children(_ref2) {
       var meta = _ref2.meta,
         field = _ref2.field;
-      return /*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$d(_objectSpread$d({}, _objectSpread$d(_objectSpread$d({}, field), {}, {
+      return /*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread$f(_objectSpread$f({}, _objectSpread$f(_objectSpread$f({}, field), {}, {
         label: label,
         name: name
       })), {}, {
@@ -990,8 +1134,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;
@@ -1028,7 +1172,7 @@ var DateField = function DateField(_ref) {
             value = _ref2$field.value,
             field = _objectWithoutProperties(_ref2$field, _excluded$3),
             form = _ref2.form;
-          return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({}, field), {}, {
+          return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, field), {}, {
             type: type
           })), {}, {
             "data-cy": "".concat(neetoCist.hyphenate(label), "-input-field"),
@@ -1050,13 +1194,239 @@ var DateField = function DateField(_ref) {
   });
 };
 
+var create = function create(_ref) {
+  var formId = _ref.formId,
+    questionId = _ref.questionId,
+    payload = _ref.payload;
+  return axios.post(utils.buildUrl(constants$1.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(utils.buildUrl(constants$1.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 reactQuery.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 reactQuery.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  if (isCodeVerified) {
+    return /*#__PURE__*/jsxRuntime.jsx(CheckCircle, {});
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(Button, {
+    disabled: isDisabled,
+    size: "small",
+    style: "secondary",
+    onClick: handleClick,
+    children: isSendingVerificationCode ? /*#__PURE__*/jsxRuntime.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 = React.useState(getRemainingTime(formId, questionId)),
+    _useState2 = _slicedToArray(_useState, 2),
+    secondsLeft = _useState2[0],
+    setSecondsLeft = _useState2[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  React.useEffect(function () {
+    if (secondsLeft <= 0) return undefined;
+    var interval = setTimeout(function () {
+      setSecondsLeft(ramda.pipe(ramda.dec, ramda.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__*/jsxRuntime.jsx("p", {
+    children: !isResendDisabled && secondsLeft > 0 ? t("neetoForm.emailVerification.resendInSeconds", {
+      secondsLeft: secondsLeft
+    }) : /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoForm.emailVerification.resendCode",
+      components: {
+        button: /*#__PURE__*/jsxRuntime.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 = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var verificationFieldName = buildVerificationFieldName(questionId);
+  var _useField = formik.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 = React.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 = neetoCist.isPresent(error);
+  React.useEffect(function () {
+    var handleVerifyCode = function handleVerifyCode() {
+      if (ramda.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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.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: utils.withEventTargetValue(setValue)
+    })), hasSentVerificationCode && /*#__PURE__*/jsxRuntime.jsx(ResendVerificationCode, {
+      formId: formId,
+      questionId: questionId,
+      isResendDisabled: calloutDetails.style === CALLOUT_STYLES.ERROR,
+      sendVerificationCode: handleSendVerificationCode
+    }), calloutDetails.message && /*#__PURE__*/jsxRuntime.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,
@@ -1064,11 +1434,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 = index.fieldWithFallback(question, "label");
+  var _useState = React.useState(DEFAULT_CALLOUT_DETAILS),
+    _useState2 = _slicedToArray(_useState, 2),
+    calloutDetails = _useState2[0],
+    setCalloutDetails = _useState2[1];
   var type = constants.QUESTION_KIND[kind.toUpperCase()].type;
+  var _useState3 = React.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 = reactUtils.useStateWithDependency(verificationStatus, [verificationStatus]),
+    _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
+    isCodeVerified = _useStateWithDependen2[0],
+    setIsCodeVerified = _useStateWithDependen2[1];
   var _useField = formik.useField({
-      name: name || nodeId,
+      name: questionId || nodeId,
       validate: validateFieldValue({
         kind: kind,
         label: label,
@@ -1086,23 +1471,104 @@ var EmailField = function EmailField(_ref) {
     _useField2$2 = _useField2[2],
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
+  var _useFormikContext = formik.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, ramda.values(ramda.omit(["TOKEN"], EMAIL_VERIFICATION_KEYS)));
+      setIsCodeVerified(false);
+      setFieldValue(buildVerificationFieldName(questionId), "");
+      setHasSentVerificationCode(false);
+      setCalloutDetails(DEFAULT_CALLOUT_DETAILS);
+    }
+  };
   var handleFieldChange = utils.withEventTargetValue(setValue);
-  return /*#__PURE__*/jsxRuntime.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: index.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 || neetoCist.isPresent(email) && neetoCist.isNotPresent(error));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex-col space-y-2",
+    children: [/*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$b(_objectSpread$b({}, _objectSpread$b(_objectSpread$b({
+      type: type
+    }, field), {}, {
+      autoComplete: autoComplete,
+      label: label
+    }, shouldShowVerifyButton && {
+      suffix: /*#__PURE__*/jsxRuntime.jsx(SendCodeButton, {
+        isCodeVerified: isCodeVerified,
+        isSendingVerificationCode: isSendingVerificationCode,
+        handleClick: isPreview ? neetoCist.noop : handleSendVerificationCode,
+        isDisabled: isCodeVerified || hasSentVerificationCode
+      })
+    })), {}, {
+      disabled: isReadOnly,
+      error: touched && !isCodeVerified ? error : "",
+      name: kind,
+      placeholder: index.fieldWithFallback(question, "placeholder"),
+      required: isRequired,
+      onBlur: function onBlur() {
+        return setTouched(true);
+      },
+      onBlurCapture: utils.withEventTargetValue(resetVerifiedData),
+      onChange: handleFieldChange
+    })), shouldShowVerifyButton && !isCodeVerified && /*#__PURE__*/jsxRuntime.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) {
@@ -1827,6 +2293,7 @@ var containsIgnoreCase = function containsIgnoreCase(string, substring) {
 
 exports.FormikWrap = FormikWrap;
 exports.buildAutoCompleteAttribute = buildAutoCompleteAttribute;
+exports.clearEmailVerificationDetails = clearEmailVerificationDetails;
 exports.clearLocalStorageValues = clearLocalStorageValues;
 exports.clientI18nInstance = clientI18nInstance;
 exports.generateFormResponse = generateFormResponse;
@@ -1835,4 +2302,4 @@ exports.getFieldComponent = getFieldComponent;
 exports.getWithExpiry = getWithExpiry;
 exports.mergeRefs = mergeRefs;
 exports.renderButtonsInOrder = renderButtonsInOrder;
-//# sourceMappingURL=utils-1blEk5zb.js.map
+//# sourceMappingURL=utils-DdrUdmyb.js.map