@bigbinary/neeto-form-frontend 3.1.0 → 3.2.1

package/dist/index.js

@@ -1,19 +1,19 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import * as React$2 from 'react';
-import React__default, { memo, useState, createElement, useRef, useEffect, useCallback, Fragment as Fragment$1 } from 'react';
+import React__default, { memo, useState, createElement, useRef, useEffect, useImperativeHandle, useCallback, Fragment as Fragment$1 } from 'react';
 import { useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import classnames from 'classnames';
 import { useFormikContext, useField, FieldArray, Form as Form$3, Formik, Field, FastField } from 'formik';
-import { filterNonNull, noop, findBy, toLabelAndValue, isPresent, truncate, slugify, filterBy, hyphenate, removeBy, isNotPresent, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { filterNonNull, noop, findBy, toLabelAndValue, isPresent, truncate, slugify, filterBy, hyphenate, removeBy, isNotPresent, isNotEmpty, findById, getRandomInt, randomPick, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { buildUrl, showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { assoc, mergeLeft, compose, isEmpty, trim, useWith, path, split, isNotNil, either, isNil, values, equals, modify, prop, range, includes, __, reduce, reject, keys, pick, omit, pluck, without, difference, pipe, last, not, toLower, map, clamp, identity, filter } from 'ramda';
+import { assoc, mergeLeft, compose, isEmpty, trim, useWith, path, split, isNotNil, either, isNil, values, equals, modify, prop, range, includes, __, reduce, when, reject, keys, pick, omit, pluck, without, difference, pipe, last, concat, not, toLower, map, clamp, identity, filter } from 'ramda';
 import i18next, { t as t$3 } from 'i18next';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-frontend/constants';
-import { useMutationWithInvalidation, withImmutableActions, withT, useStateWithDependency, useOnClickOutside, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { useMutationWithInvalidation, withImmutableActions, isMetaKeyPressed, withT, useStateWithDependency, useOnClickOutside, useUpdateEffect, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
@@ -39,6 +39,7 @@ import Button$1 from '@bigbinary/neetoui/Button';
 import Accordion from '@bigbinary/neetoui/Accordion';
 import Input from '@bigbinary/neetoui/formik/Input';
 import * as yup from 'yup';
+import Radio from '@bigbinary/neetoui/formik/Radio';
 import Checkbox$1 from '@bigbinary/neetoui/formik/Checkbox';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import Delete from '@bigbinary/neeto-icons/Delete';
@@ -58,19 +59,22 @@ import { parsePhoneNumber } from 'libphonenumber-js';
 import EditorContent from '@bigbinary/neeto-editor/EditorContent';
 import NeetoUIMultiEmailInput from '@bigbinary/neetoui/MultiEmailInput';
 import { validation, PhoneNumberInput, PhoneNumber } from '@bigbinary/neeto-molecules/PhoneNumber';
+import path$1 from 'path';
+import Refresh from '@bigbinary/neeto-icons/Refresh';
+import Input$1 from '@bigbinary/neetoui/Input';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/initializers';
+import ReCAPTCHA from 'react-google-recaptcha';
 import localeData from 'dayjs/plugin/localeData';
 import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import DatePicker from '@bigbinary/neetoui/DatePicker';
-import path$1 from 'path';
-import Input$1 from '@bigbinary/neetoui/Input';
 import { DirectUpload } from '@rails/activestorage';
 import { useDropzone } from 'react-dropzone';
 import FileGeneric from '@bigbinary/neeto-icons/FileGeneric';
 import { motion } from 'framer-motion';
 import Select$1 from '@bigbinary/neetoui/Select';
-import Radio from '@bigbinary/neetoui/Radio';
+import Radio$1 from '@bigbinary/neetoui/Radio';
 import Textarea$1 from '@bigbinary/neetoui/Textarea';
 import { renderToString } from 'react-dom/server';
 
@@ -382,6 +386,9 @@ var QUESTION_KIND = {
   },
   FILE_UPLOAD: {
     value: "file_upload"
+  },
+  CAPTCHA: {
+    value: "captcha"
   }
 };
 var RATING_VALUES = {
@@ -875,7 +882,12 @@ var QUESTION_TYPES = {
   STAR_RATING: "star_rating",
   RATING: "rating",
   DATE: "date",
-  FILE_UPLOAD: "file_upload"
+  FILE_UPLOAD: "file_upload",
+  CAPTCHA: "captcha"
+};
+var CAPTCHA_TYPES = {
+  RECAPTCHA_V2: "recaptcha_v2",
+  MATH_CAPTCHA: "math_captcha"
 };
 
 var PARAGRAPH$1 = QUESTION_TYPES.PARAGRAPH,
@@ -884,12 +896,14 @@ var PARAGRAPH$1 = QUESTION_TYPES.PARAGRAPH,
   CHECKBOX$2 = QUESTION_TYPES.CHECKBOX,
   RADIO$2 = QUESTION_TYPES.RADIO,
   DROPDOWN$2 = QUESTION_TYPES.DROPDOWN,
-  FILE_UPLOAD$3 = QUESTION_TYPES.FILE_UPLOAD;
+  FILE_UPLOAD$3 = QUESTION_TYPES.FILE_UPLOAD,
+  CAPTCHA$3 = QUESTION_TYPES.CAPTCHA;
 var DEFAULT_AVAILABLE_LANGUAGES = [{
   code: "en",
   name: "English"
 }];
-var QUESTIONS_WITHOUT_FIELD_CODE = [PARAGRAPH$1, TERMS_AND_CONDITION$1, CONDITION$1, FILE_UPLOAD$3];
+var MANDATORY_KINDS = [CAPTCHA$3];
+var QUESTIONS_WITHOUT_FIELD_CODE = [PARAGRAPH$1, TERMS_AND_CONDITION$1, CONDITION$1, FILE_UPLOAD$3, CAPTCHA$3];
 var QUESTIONS_INITIAL_VALUE = {
   enabled: false,
   questions: [{
@@ -1174,7 +1188,8 @@ var NAME$1 = QUESTION_TYPES.NAME,
   STAR_RATING$2 = QUESTION_TYPES.STAR_RATING,
   RATING$2 = QUESTION_TYPES.RATING,
   DATE$1 = QUESTION_TYPES.DATE,
-  FILE_UPLOAD$2 = QUESTION_TYPES.FILE_UPLOAD;
+  FILE_UPLOAD$2 = QUESTION_TYPES.FILE_UPLOAD,
+  CAPTCHA$2 = QUESTION_TYPES.CAPTCHA;
 var DEFAULT_OPTIONS = new Array(MINIMUM_OPTIONS).fill({
   label: ""
 });
@@ -1331,6 +1346,15 @@ var QUESTION_KINDS = [{
     multipleFilesAllowed: true,
     allowedFileTypes: DEFAULT_ALLOWED_FILE_TYPES
   }
+}, {
+  type: CAPTCHA$2,
+  label: t$3("neetoForm.fields.captcha"),
+  isSingular: true,
+  defaults: {
+    label: "",
+    isRequired: true,
+    variant: CAPTCHA_TYPES.RECAPTCHA_V2
+  }
 }];
 
 // To show the question type as label in accordion
@@ -1726,6 +1750,9 @@ var arrayHelpers = {
 
 function ownKeys$v(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$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isChoiceQuestion = function isChoiceQuestion(question) {
+  return includes(question === null || question === void 0 ? void 0 : question.kind, SELECTABLE_KINDS);
+};
 var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions) {
   var fieldCodes = pluck("fieldCode", filterBy({
     kind: type
@@ -1823,6 +1850,7 @@ var getAvailableQuestionKinds = function getAvailableQuestionKinds(_ref5) {
     });
   }, allQuestionKinds);
 };
+var formatQuestionAttributesForClone = when(isChoiceQuestion, assoc("isCloning", true));
 
 var _path$2, _path2, _path3, _path4, _path5, _path6, _path7;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -1878,8 +1906,9 @@ var NAME = QUESTION_TYPES.NAME,
   STAR_RATING$1 = QUESTION_TYPES.STAR_RATING,
   RATING$1 = QUESTION_TYPES.RATING,
   DATE = QUESTION_TYPES.DATE,
-  FILE_UPLOAD$1 = QUESTION_TYPES.FILE_UPLOAD;
-var QUESTIONS_WITH_ADDITIONAL_DATA = [].concat(_toConsumableArray(SELECTABLE_KINDS), [STAR_RATING$1, RATING$1, FILE_UPLOAD$1]);
+  FILE_UPLOAD$1 = QUESTION_TYPES.FILE_UPLOAD,
+  CAPTCHA$1 = QUESTION_TYPES.CAPTCHA;
+var QUESTIONS_WITH_ADDITIONAL_DATA = [].concat(_toConsumableArray(SELECTABLE_KINDS), [STAR_RATING$1, RATING$1, FILE_UPLOAD$1, CAPTCHA$1]);
 var QUESTIONS_WITH_PLACEHOLDERS = [NAME, PHONE, EMAIL, ADDITIONAL_GUESTS, TEXT, TEXTAREA, RICH_TEXT, INTEGER, DECIMAL, DATE];
 var DEFAULT_PLACEHOLDERS = {
   CHECKBOX: t$3("neetoForm.questions.common.questionFields.field.labelExample", {
@@ -1906,11 +1935,14 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     name = _ref.name,
     otherProps = _objectWithoutProperties(_ref, _excluded$b);
   var _useFormikContext = useFormikContext(),
+    dirty = _useFormikContext.dirty,
+    isValid = _useFormikContext.isValid,
     submitForm = _useFormikContext.submitForm;
   var handleKeyDown = function handleKeyDown(event) {
     if (event.key !== "Enter" || event.shiftKey) return;
     event.preventDefault();
-    submitForm();
+    if (isMetaKeyPressed(event)) return;
+    dirty && isValid && submitForm();
   };
   var handleFocus = function handleFocus(element) {
     var end = element.value.length;
@@ -2424,6 +2456,24 @@ var Edit = function Edit(_ref) {
   });
 };
 
+var Captcha = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsxs(Radio, {
+    label: t("neetoForm.common.captchaType"),
+    labelProps: {
+      required: true
+    },
+    name: "variant",
+    children: [/*#__PURE__*/jsx(Radio.Item, {
+      label: t("neetoForm.common.reCaptchaV2"),
+      value: CAPTCHA_TYPES.RECAPTCHA_V2
+    }), /*#__PURE__*/jsx(Radio.Item, {
+      label: t("neetoForm.common.mathCaptcha"),
+      value: CAPTCHA_TYPES.MATH_CAPTCHA
+    })]
+  });
+});
+
 var FileGroup = function FileGroup(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -2753,7 +2803,8 @@ var CHECKBOX = QUESTION_TYPES.CHECKBOX,
   DROPDOWN = QUESTION_TYPES.DROPDOWN,
   STAR_RATING = QUESTION_TYPES.STAR_RATING,
   RATING = QUESTION_TYPES.RATING,
-  FILE_UPLOAD = QUESTION_TYPES.FILE_UPLOAD;
+  FILE_UPLOAD = QUESTION_TYPES.FILE_UPLOAD,
+  CAPTCHA = QUESTION_TYPES.CAPTCHA;
 var transformValueForOption = function transformValueForOption(_ref) {
   var label = _ref.label,
     type = _ref.type;
@@ -2775,6 +2826,8 @@ var renderAdditionalData = function renderAdditionalData(_ref2) {
       return /*#__PURE__*/jsx(StarRating$2, {});
     case FILE_UPLOAD:
       return /*#__PURE__*/jsx(FileUpload$1, {});
+    case CAPTCHA:
+      return /*#__PURE__*/jsx(Captcha, {});
     default:
       return null;
   }
@@ -2955,12 +3008,11 @@ var Form = function Form(_ref) {
     });
     var displayOrder = selectedQuestion.displayOrder + 1;
     var attributes = mergeLeft({
-      displayOrder: displayOrder,
-      isCloning: true
+      displayOrder: displayOrder
     }, values);
     var payload = _objectSpread$n({
       language: selectedLanguage,
-      neetoFormQuestion: attributes
+      neetoFormQuestion: formatQuestionAttributesForClone(attributes)
     }, buildRequestArgs);
     createQuestion(payload, {
       onSuccess: function onSuccess(_ref2) {
@@ -3200,7 +3252,7 @@ var BuildForm = function BuildForm(_ref) {
   };
   var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref5) {
     var kind = _ref5.kind;
-    return requiredFields.includes(kind);
+    return concat(MANDATORY_KINDS, requiredFields).includes(kind);
   };
   var isDisabledFieldLabel = isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : function () {
     return false;
@@ -3514,7 +3566,7 @@ var getInvalidTypeError = function getInvalidTypeError(label, type) {
   });
 };
 
-var _excluded$4 = ["kind", "label", "isRequired", "customValidator"];
+var _excluded$4 = ["kind", "customValidator"];
 var _fieldKindValidatorMa;
 function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -3659,25 +3711,29 @@ var validateFileUploadField = function validateFileUploadField(_ref13) {
     files: files_schema
   });
 };
-var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateEmailField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateNameField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DECIMAL.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.INTEGER.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.FILE_UPLOAD.value, validateFileUploadField), _fieldKindValidatorMa);
-var validateFieldValue = function validateFieldValue(_ref14) {
-  var kind = _ref14.kind,
-    label = _ref14.label,
-    isRequired = _ref14.isRequired,
-    customValidator = _ref14.customValidator,
-    otherProps = _objectWithoutProperties(_ref14, _excluded$4);
+var validateCaptchaField = function validateCaptchaField(_ref14) {
+  var variant = _ref14.variant;
+  return variant === CAPTCHA_TYPES.MATH_CAPTCHA ? yup.mixed().test("verification failed", t$1("neetoForm.error.captchaVerificationFailed"), function (value) {
+    return isNotPresent(value) || value;
+  }).transform(function (value) {
+    return value === "" ? null : value;
+  }).required(t$1("neetoForm.error.incompleteCaptcha")) : yup.string().trim().required(t$1("neetoForm.error.incompleteCaptcha"));
+};
+var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateEmailField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateNameField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DECIMAL.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.INTEGER.value, validateTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.FILE_UPLOAD.value, validateFileUploadField), _defineProperty(_fieldKindValidatorMa, QUESTION_KIND.CAPTCHA.value, validateCaptchaField), _fieldKindValidatorMa);
+var validateFieldValue = function validateFieldValue(_ref15) {
+  var kind = _ref15.kind,
+    customValidator = _ref15.customValidator,
+    otherProps = _objectWithoutProperties(_ref15, _excluded$4);
   return function (value) {
     if (!(kind in fieldKindValidatorMap)) return;
     var validator = fieldKindValidatorMap[kind];
     var schema = customValidator || validator(_objectSpread$j({
-      kind: kind,
-      label: label,
-      isRequired: isRequired
+      kind: kind
     }, otherProps));
 
     // eslint-disable-next-line consistent-return, no-async-promise-executor
     return new Promise( /*#__PURE__*/function () {
-      var _ref15 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
+      var _ref16 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -3699,7 +3755,7 @@ var validateFieldValue = function validateFieldValue(_ref14) {
         }, _callee, null, [[0, 6]]);
       }));
       return function (_x) {
-        return _ref15.apply(this, arguments);
+        return _ref16.apply(this, arguments);
       };
     }());
   };
@@ -3762,39 +3818,6 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
 
 function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(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;
-  var name = question.id,
-    kind = question.kind,
-    isRequired = question.isRequired,
-    nodeId = question.nodeId;
-  var label = fieldWithFallback(question, "label");
-  return /*#__PURE__*/jsx(Field, {
-    name: name || nodeId,
-    validate: validateFieldValue({
-      kind: kind,
-      label: label,
-      isRequired: isRequired,
-      customValidator: customValidator
-    }),
-    children: function children(_ref2) {
-      var meta = _ref2.meta,
-        field = _ref2.field;
-      return /*#__PURE__*/jsx(Checkbox, _objectSpread$i(_objectSpread$i({}, _objectSpread$i(_objectSpread$i({}, field), {}, {
-        label: label,
-        name: name
-      })), {}, {
-        checked: field.value,
-        error: meta.touched ? meta.error : "",
-        required: isRequired
-      }));
-    }
-  });
-};
-
-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 t = clientI18nInstance.t;
 var toEmailValues = function toEmailValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
@@ -3888,7 +3911,7 @@ var generateInitValues = function generateInitValues(_ref7) {
   var valuesMap = {};
   if (initialValues) {
     valuesMap = initialValues.reduce(function (acc, answer) {
-      return _objectSpread$h(_objectSpread$h({}, acc), {}, _defineProperty({}, answer.questionId, {
+      return _objectSpread$i(_objectSpread$i({}, acc), {}, _defineProperty({}, answer.questionId, {
         value: answer.value,
         optionIds: answer.optionIds
       }));
@@ -4117,6 +4140,211 @@ var getSelectedRating = function getSelectedRating(value) {
   return isNaN(parsedValue) ? -1 : parsedValue;
 };
 
+var CaptchaField = function CaptchaField(_ref) {
+  var question = _ref.question,
+    preview = _ref.preview,
+    customValidator = _ref.customValidator,
+    captchaRef = _ref.captchaRef;
+  var name = question.id,
+    kind = question.kind,
+    isRequired = question.isRequired,
+    variant = question.variant,
+    nodeId = question.nodeId;
+  var label = fieldWithFallback(question, "label");
+  var _useField = useField({
+      name: name || nodeId,
+      validate: validateFieldValue({
+        kind: kind,
+        label: label,
+        isRequired: isRequired,
+        customValidator: customValidator,
+        variant: variant
+      })
+    }),
+    _useField2 = _slicedToArray(_useField, 3);
+    _useField2[0];
+    var _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    _useField2$2 = _useField2[2],
+    setValue = _useField2$2.setValue,
+    setTouched = _useField2$2.setTouched;
+  var handleVerifyCaptcha = function handleVerifyCaptcha(response) {
+    setTouched(true);
+    setValue(response);
+  };
+  var Component = CAPTCHA_COMPONENT_MAP[variant];
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-input__wrapper",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-input__label-wrapper",
+      children: label && /*#__PURE__*/jsx("label", {
+        className: "neeto-form-engine-label",
+        children: getLabel(label, isRequired)
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classnames({
+        "pointer-events-none": preview
+      }),
+      children: /*#__PURE__*/jsx(Component, {
+        captchaRef: captchaRef,
+        handleVerifyCaptcha: handleVerifyCaptcha,
+        handleBlur: function handleBlur() {
+          return setTouched(true);
+        }
+      })
+    }), touched && error && /*#__PURE__*/jsx("p", {
+      className: "neeto-form-engine-input__error",
+      "data-cy": "neeto-form-engine-captcha-error",
+      children: error
+    })]
+  });
+};
+
+var MATH_OPERATORS = {
+  PLUS: "+",
+  MINUS: "-"
+};
+
+var generateRandomOperation = function generateRandomOperation() {
+  var firstNumber = getRandomInt(1, 50);
+  var secondNumber = getRandomInt(1, 50);
+  var operator = randomPick.apply(void 0, _toConsumableArray(values(MATH_OPERATORS)));
+  return {
+    firstNumber: firstNumber,
+    secondNumber: secondNumber,
+    operator: operator
+  };
+};
+
+var MathCaptcha = function MathCaptcha(_ref) {
+  var captchaRef = _ref.captchaRef,
+    handleVerifyCaptcha = _ref.handleVerifyCaptcha,
+    handleBlur = _ref.handleBlur;
+  var _useState = useState(generateRandomOperation()),
+    _useState2 = _slicedToArray(_useState, 2),
+    operation = _useState2[0],
+    setOperation = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    userInput = _useState4[0],
+    setUserInput = _useState4[1];
+  var firstNumber = operation.firstNumber,
+    secondNumber = operation.secondNumber,
+    operator = operation.operator;
+  var resetCaptcha = function resetCaptcha() {
+    setOperation(generateRandomOperation());
+    setUserInput("");
+  };
+  useImperativeHandle(captchaRef, function () {
+    return {
+      reset: resetCaptcha
+    };
+  });
+  var calculateResult = function calculateResult() {
+    switch (operator) {
+      case MATH_OPERATORS.PLUS:
+        return firstNumber + secondNumber;
+      case MATH_OPERATORS.MINUS:
+        return firstNumber - secondNumber;
+      default:
+        return null;
+    }
+  };
+  var verifyCaptcha = function verifyCaptcha() {
+    var result = calculateResult();
+    if (result === null) return;
+    handleVerifyCaptcha(result === Number(userInput));
+  };
+  useUpdateEffect(function () {
+    verifyCaptcha();
+  }, [userInput]);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-nano-math-captcha",
+    ref: captchaRef,
+    children: [/*#__PURE__*/jsx("button", {
+      className: "neeto-form-nano-math-captcha__button",
+      type: "button",
+      onClick: resetCaptcha,
+      children: /*#__PURE__*/jsx(Refresh, {})
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-form-nano-math-captcha__equation",
+      children: [/*#__PURE__*/jsx("span", {
+        children: firstNumber
+      }), /*#__PURE__*/jsx("span", {
+        children: operator
+      }), /*#__PURE__*/jsx("span", {
+        children: secondNumber
+      }), /*#__PURE__*/jsx("span", {
+        children: "="
+      })]
+    }), /*#__PURE__*/jsx(Input$1, {
+      required: true,
+      className: "neeto-form-nano-math-captcha__input",
+      value: userInput,
+      onBlur: handleBlur,
+      onChange: withEventTargetValue(setUserInput)
+    })]
+  });
+};
+
+var Recaptcha = function Recaptcha(_ref) {
+  var captchaRef = _ref.captchaRef,
+    handleVerifyCaptcha = _ref.handleVerifyCaptcha;
+  var verifyRecaptcha = function verifyRecaptcha(response) {
+    if (response === null) {
+      return;
+    }
+    handleVerifyCaptcha(response);
+  };
+  var expiredRecaptcha = function expiredRecaptcha() {
+    var _captchaRef$current;
+    captchaRef === null || captchaRef === void 0 || (_captchaRef$current = captchaRef.current) === null || _captchaRef$current === void 0 || _captchaRef$current.reset();
+    handleVerifyCaptcha("");
+  };
+  return /*#__PURE__*/jsx(ReCAPTCHA, {
+    hl: clientI18nInstance.language,
+    ref: captchaRef,
+    sitekey: globalProps.formNanoRecaptchaV2SiteKey,
+    onChange: verifyRecaptcha,
+    onErrored: noop,
+    onExpired: expiredRecaptcha
+  }, clientI18nInstance.language);
+};
+
+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 ConditionField = function ConditionField(_ref) {
+  var question = _ref.question,
+    customValidator = _ref.customValidator;
+  var name = question.id,
+    kind = question.kind,
+    isRequired = question.isRequired,
+    nodeId = question.nodeId;
+  var label = fieldWithFallback(question, "label");
+  return /*#__PURE__*/jsx(Field, {
+    name: name || nodeId,
+    validate: validateFieldValue({
+      kind: kind,
+      label: label,
+      isRequired: isRequired,
+      customValidator: customValidator
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      return /*#__PURE__*/jsx(Checkbox, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, field), {}, {
+        label: label,
+        name: name
+      })), {}, {
+        checked: field.value,
+        error: meta.touched ? meta.error : "",
+        required: isRequired
+      }));
+    }
+  });
+};
+
 var _excluded$3 = ["value"];
 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; }
@@ -4626,15 +4854,15 @@ var FilePreview = withT(function (_ref) {
         }) : ""
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: classnames("neeto-form-engine-file-upload__actions"),
+      className: "neeto-form-engine-file-upload__actions",
       children: [/*#__PURE__*/jsx("span", {
         className: classnames("neeto-form-engine-file-upload__success-indicator", {
           "neeto-form-engine-file-upload__success-indicator--active": file.url
         }),
         children: file.url && /*#__PURE__*/jsx(Check, {})
       }), /*#__PURE__*/jsx("button", {
+        className: "neeto-form-engine-file-upload__button--red neeto-form-engine-file-upload__remove-button",
         type: "button",
-        className: classnames("neeto-form-engine-file-upload__button--red neeto-form-engine-file-upload__remove-button"),
         onClick: cancel,
         children: /*#__PURE__*/jsx(Close, {})
       })]
@@ -4785,8 +5013,8 @@ var Choices = function Choices(_ref) {
     onChange = _ref.onChange,
     error = _ref.error;
   var isCheckBox = type === "checkbox";
-  var ChoiceWrapper = isCheckBox ? "div" : Radio;
-  var Component = isCheckBox ? Checkbox : Radio.Item;
+  var ChoiceWrapper = isCheckBox ? "div" : Radio$1;
+  var Component = isCheckBox ? Checkbox : Radio$1.Item;
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
     "data-cy": "".concat(hyphenate(label), "-select-container-wrapper"),
@@ -5278,13 +5506,14 @@ var TextField = function TextField(_ref) {
   }));
 };
 
-var _QUESTION_TO_COMPONEN;
+var _QUESTION_TO_COMPONEN, _CAPTCHA_COMPONENT_MA;
 var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
   return /*#__PURE__*/jsx(EditorContent, {
     content: fieldWithFallback(question, "label", true)
   });
-}), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _QUESTION_TO_COMPONEN);
+}), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _defineProperty(_QUESTION_TO_COMPONEN, QUESTION_KIND.CAPTCHA.value, CaptchaField), _QUESTION_TO_COMPONEN);
+var CAPTCHA_COMPONENT_MAP = (_CAPTCHA_COMPONENT_MA = {}, _defineProperty(_CAPTCHA_COMPONENT_MA, CAPTCHA_TYPES.RECAPTCHA_V2, Recaptcha), _defineProperty(_CAPTCHA_COMPONENT_MA, CAPTCHA_TYPES.MATH_CAPTCHA, MathCaptcha), _CAPTCHA_COMPONENT_MA);
 
 var getFieldComponent = function getFieldComponent(_ref) {
   var kind = _ref.kind;
@@ -5336,9 +5565,8 @@ const SvgSuccess = props => /*#__PURE__*/React$2.createElement("svg", _extends({
   height: 344
 }))));
 
-var Success = function Success() {
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
+var Success = withT(function (_ref) {
+  var t = _ref.t;
   return /*#__PURE__*/jsxs("div", {
     className: "flex h-full w-full flex-col items-center justify-center space-y-4",
     children: [/*#__PURE__*/jsx(SvgSuccess, {}), /*#__PURE__*/jsx(Typography, {
@@ -5349,7 +5577,7 @@ var Success = function Success() {
       children: t("neetoForm.successPage.title2")
     })]
   });
-};
+});
 var Success$1 = /*#__PURE__*/memo(Success);
 
 function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -5421,6 +5649,7 @@ var ExternalForm = function ExternalForm(_ref) {
   var formRef = useRef();
   var formikInnerRef = useRef();
   var editorRef = useRef();
+  var captchaRef = useRef(null);
   var queryClient = useQueryClient();
   useEffect(function () {
     if (equals(language, clientI18nInstance.resolvedLanguage)) return;
@@ -5577,7 +5806,7 @@ var ExternalForm = function ExternalForm(_ref) {
     };
   }();
   var _onReset = function onReset(e, handleReset) {
-    var _editorRef$current, _formDomProps$onReset;
+    var _editorRef$current, _captchaRef$current, _formDomProps$onReset;
     if (clearValuesOnReset) {
       clearLocalStorageValues("".concat(formId, "/values"));
       setLocalValues(generateInitValues({
@@ -5588,6 +5817,7 @@ var ExternalForm = function ExternalForm(_ref) {
       });
     }
     editorRef === null || editorRef === void 0 || (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.editor) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.commands) === null || _editorRef$current === void 0 || _editorRef$current.setContent("");
+    (_captchaRef$current = captchaRef.current) === null || _captchaRef$current === void 0 || _captchaRef$current.reset();
     handleReset(e);
     formDomProps === null || formDomProps === void 0 || (_formDomProps$onReset = formDomProps.onReset) === null || _formDomProps$onReset === void 0 || _formDomProps$onReset.call(formDomProps, e);
   };
@@ -5704,6 +5934,7 @@ var ExternalForm = function ExternalForm(_ref) {
               var FieldComponent = getFieldComponent(question);
               return /*#__PURE__*/jsxs(Fragment$1, {
                 children: [/*#__PURE__*/jsx(FieldComponent, {
+                  captchaRef: captchaRef,
                   editorProps: editorProps,
                   editorRef: editorRef,
                   preview: preview,
@@ -8295,7 +8526,13 @@ var linkifyDecorator = function linkifyDecorator(decoratedHref, decoratedText, k
     children: decoratedText
   }, key);
 };
-var filterResponses = removeBy({
+var filterResponses = function filterResponses(responses, kinds) {
+  var filteredResponses = removeBy({
+    kind: includes(__, kinds)
+  }, responses);
+  return filterAdditionalGuestResponses(filteredResponses);
+};
+var filterAdditionalGuestResponses = removeBy({
   kind: QUESTION_KIND.ADDITIONAL_GUESTS.value,
   value: isNotPresent
 });
@@ -8336,7 +8573,7 @@ var getValue = function getValue(_ref) {
     return value === null || value === void 0 ? void 0 : value.join(", ");
   }
   if (kind === QUESTION_KIND.CONDITION.value) {
-    return value ? t$3("neetoForm.common.yes") : t$3("neetoForm.common.no");
+    return (value === null || value === void 0 ? void 0 : value.toLowerCase()) === "true" ? t$3("neetoForm.common.yes") : t$3("neetoForm.common.no");
   }
   return value;
 };
@@ -8358,7 +8595,9 @@ var Submission = function Submission(_ref2) {
     _ref2$questionLabelPr = _ref2.questionLabelProps,
     questionLabelProps = _ref2$questionLabelPr === void 0 ? {} : _ref2$questionLabelPr,
     _ref2$answerProps = _ref2.answerProps,
-    answerProps = _ref2$answerProps === void 0 ? {} : _ref2$answerProps;
+    answerProps = _ref2$answerProps === void 0 ? {} : _ref2$answerProps,
+    _ref2$omitKinds = _ref2.omitKinds,
+    omitKinds = _ref2$omitKinds === void 0 ? [] : _ref2$omitKinds;
   var _useSubmission = useSubmission({
       formId: formId,
       submissionId: submissionId,
@@ -8371,7 +8610,7 @@ var Submission = function Submission(_ref2) {
     } : _useSubmission$data,
     isLoading = _useSubmission.isLoading;
   var responses = submission.responses;
-  var filteredResponses = filterResponses(responses);
+  var filteredResponses = filterResponses(responses, omitKinds);
   var renderSubmittedValue = function renderSubmittedValue(kind, value) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value: