@bigbinary/neeto-form-frontend 1.2.8 → 1.2.10

package/dist/index.js

@@ -1,10 +1,10 @@
 import * as React$2 from 'react';
 import React__default, { useLayoutEffect, useEffect, useMemo as useMemo$1, useContext, useReducer, useRef, useState, memo, forwardRef, Fragment } from 'react';
 import { useField, useFormikContext, FieldArray, Form as Form$1, Formik, Field, FastField } from 'formik';
-import { noop as noop$3, findBy, removeBy, isPresent, findById } from '@bigbinary/neeto-cist';
+import { noop as noop$3, slugify, findBy, removeBy, isPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { Typography, Dropdown as Dropdown$2, Tooltip, Button as Button$1, Label, Alert, Toastr, MultiEmailInput, DatePicker, Checkbox as Checkbox$2, Radio, Select, Textarea as Textarea$1, Input as Input$2, Spinner as Spinner$2 } from '@bigbinary/neetoui';
-import { assoc, prop, isEmpty, path, reject, omit, insert, compose as compose$1, trim, either, isNil, values as values$1, equals, not, pluck, times } from 'ramda';
+import { assoc, prop, isEmpty, path, reject, omit, insert, compose as compose$1, trim, either, isNil, values as values$1, equals, not, pluck, times, pick } from 'ramda';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$1 } from 'i18next';
 import { Input, Email as Email$2, Phone as Phone$2, Up, Down, MenuHorizontal, Delete, Plus, NeetoInvisible, MultipleChoice as MultipleChoice$2, ListDot, Dropdown as Dropdown$3, Rating as Rating$4, Smiley, Checkbox as Checkbox$1, Calendar, Check, Close } from '@bigbinary/neeto-icons';
@@ -190,15 +190,15 @@ function _objectWithoutProperties(source, excluded) {
   return target;
 }
 
-var _excluded$e = ["size"],
-  _excluded2$3 = ["size"],
+var _excluded$f = ["size"],
+  _excluded2$2 = ["size"],
   _excluded3$2 = ["size"],
   _excluded4$1 = ["size"],
   _excluded5 = ["size"];
 var Star = function Star(props) {
   var _props$size = props.size,
     size = _props$size === void 0 ? 20 : _props$size,
-    other = _objectWithoutProperties(props, _excluded$e);
+    other = _objectWithoutProperties(props, _excluded$f);
   return /*#__PURE__*/React__default.createElement("svg", _extends$6({
     fill: "none",
     height: size,
@@ -216,7 +216,7 @@ var Star = function Star(props) {
 var Heart = function Heart(props) {
   var _props$size2 = props.size,
     size = _props$size2 === void 0 ? 20 : _props$size2,
-    other = _objectWithoutProperties(props, _excluded2$3);
+    other = _objectWithoutProperties(props, _excluded2$2);
   return /*#__PURE__*/React__default.createElement("svg", _extends$6({
     fill: "none",
     height: size,
@@ -540,14 +540,14 @@ var neetoFormApi = {
   updatePublicSubmission: updatePublicSubmission
 };
 
-var _excluded$d = ["formId", "preview"],
+var _excluded$e = ["formId", "preview"],
   _excluded3$1 = ["formId", "submissionId"];
 function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var useForm = function useForm(_ref) {
   var formId = _ref.formId,
     preview = _ref.preview,
-    options = _objectWithoutProperties(_ref, _excluded$d);
+    options = _objectWithoutProperties(_ref, _excluded$e);
   return useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId], function () {
     return neetoFormApi.getPublicQuestions(formId);
   }, _objectSpread$b({
@@ -1790,8 +1790,8 @@ reactIs_production_min.typeOf=y;
 
 var reactIsExports = reactIs.exports;
 
-var _excluded$c = ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"],
-    _excluded2$2 = ["reactReduxForwardedRef"];
+var _excluded$d = ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"],
+    _excluded2$1 = ["reactReduxForwardedRef"];
 
 var EMPTY_ARRAY = [];
 var NO_SUBSCRIPTION_ARRAY = [null, null];
@@ -1940,7 +1940,7 @@ _ref) {
       forwardRef = _ref2$forwardRef === void 0 ? false : _ref2$forwardRef,
       _ref2$context = _ref2.context,
       context = _ref2$context === void 0 ? ReactReduxContext : _ref2$context,
-      connectOptions = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
+      connectOptions = _objectWithoutPropertiesLoose(_ref2, _excluded$d);
 
   var Context = context;
   return function wrapWithConnect(WrappedComponent) {
@@ -1978,7 +1978,7 @@ _ref) {
         // and values needed to control behavior (forwarded refs, alternate context instances).
         // To maintain the wrapperProps object reference, memoize this destructuring.
         var reactReduxForwardedRef = props.reactReduxForwardedRef,
-            wrapperProps = _objectWithoutPropertiesLoose(props, _excluded2$2);
+            wrapperProps = _objectWithoutPropertiesLoose(props, _excluded2$1);
 
         return [props.context, reactReduxForwardedRef, wrapperProps];
       }, [props]),
@@ -2299,7 +2299,7 @@ function whenMergePropsIsOmitted(mergeProps) {
 }
 var defaultMergePropsFactories = [whenMergePropsIsFunction, whenMergePropsIsOmitted];
 
-var _excluded$b = ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"];
+var _excluded$c = ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"];
 function impureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch) {
   return function impureFinalPropsSelector(state, ownProps) {
     return mergeProps(mapStateToProps(state, ownProps), mapDispatchToProps(dispatch, ownProps), ownProps);
@@ -2372,7 +2372,7 @@ function finalPropsSelectorFactory(dispatch, _ref2) {
   var initMapStateToProps = _ref2.initMapStateToProps,
       initMapDispatchToProps = _ref2.initMapDispatchToProps,
       initMergeProps = _ref2.initMergeProps,
-      options = _objectWithoutPropertiesLoose(_ref2, _excluded$b);
+      options = _objectWithoutPropertiesLoose(_ref2, _excluded$c);
 
   var mapStateToProps = initMapStateToProps(dispatch, options);
   var mapDispatchToProps = initMapDispatchToProps(dispatch, options);
@@ -2382,7 +2382,7 @@ function finalPropsSelectorFactory(dispatch, _ref2) {
   return selectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options);
 }
 
-var _excluded$a = ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"];
+var _excluded$b = ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"];
 /*
   connect is a facade over connectAdvanced. It turns its args into a compatible
   selectorFactory, which has the signature:
@@ -2446,7 +2446,7 @@ function createConnect(_temp) {
         areStatePropsEqual = _ref3$areStatePropsEq === void 0 ? shallowEqual : _ref3$areStatePropsEq,
         _ref3$areMergedPropsE = _ref3.areMergedPropsEqual,
         areMergedPropsEqual = _ref3$areMergedPropsE === void 0 ? shallowEqual : _ref3$areMergedPropsE,
-        extraOptions = _objectWithoutPropertiesLoose(_ref3, _excluded$a);
+        extraOptions = _objectWithoutPropertiesLoose(_ref3, _excluded$b);
 
     var initMapStateToProps = match(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
     var initMapDispatchToProps = match(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
@@ -10896,21 +10896,22 @@ var ListItem = function ListItem(_ref) {
     label = _ref.label,
     onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement("li", {
+    onClick: onClick,
     className: "flex items-center gap-x-2",
-    onClick: onClick
+    "data-cy": "neeto-form-engine-".concat(slugify(label))
   }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement(Typography, {
     style: "body2"
   }, label));
 };
 
-var _excluded$9 = ["size", "color"],
-  _excluded2$1 = ["size", "color"],
+var _excluded$a = ["size", "color"],
+  _excluded2 = ["size", "color"],
   _excluded3 = ["size", "color"],
   _excluded4 = ["size", "color"];
 var BadSmiley = function BadSmiley(props) {
   var size = props.size,
     color = props.color,
-    other = _objectWithoutProperties(props, _excluded$9);
+    other = _objectWithoutProperties(props, _excluded$a);
   return /*#__PURE__*/React__default.createElement("svg", _extends$6({
     fill: "none",
     height: size,
@@ -10932,7 +10933,7 @@ BadSmiley.defaultProps = {
 var OkaySmiley = function OkaySmiley(props) {
   var size = props.size,
     color = props.color,
-    other = _objectWithoutProperties(props, _excluded2$1);
+    other = _objectWithoutProperties(props, _excluded2);
   return /*#__PURE__*/React__default.createElement("svg", _extends$6({
     fill: "none",
     height: size,
@@ -11124,10 +11125,10 @@ var Accordion = function Accordion(_ref) {
   }));
 };
 
-var _excluded$8 = ["maxLength"];
+var _excluded$9 = ["maxLength"];
 var InputWithMaxLength = function InputWithMaxLength(_ref) {
   var maxLength = _ref.maxLength,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var _useField = useField(props),
     _useField2 = _slicedToArray$1(_useField, 3),
     value = _useField2[0].value,
@@ -11143,10 +11144,10 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
   }));
 };
 
-var _excluded$7 = ["maxLength"];
+var _excluded$8 = ["maxLength"];
 var TextAreaWithMaxLength = function TextAreaWithMaxLength(_ref) {
   var maxLength = _ref.maxLength,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var _useField = useField(props),
     _useField2 = _slicedToArray$1(_useField, 3),
     value = _useField2[0].value,
@@ -11821,10 +11822,14 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
-    disabled: isLabelDisabled,
     error: error,
+    className: "px-2 pb-2",
+    contentClassName: "border-none",
+    disabled: isLabelDisabled,
+    errorWrapperClassName: "border-none",
     id: "editor",
     initialValue: value,
+    menuClassName: "border-none",
     name: fieldName,
     ref: editorRef,
     onChange: function onChange(text) {
@@ -12365,7 +12370,7 @@ var List = function List(_ref) {
   })))));
 };
 
-var _excluded$6 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps"];
+var _excluded$7 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps"];
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Form = function Form(_ref) {
@@ -12384,7 +12389,7 @@ var Form = function Form(_ref) {
     kindUniqueOn = _ref.kindUniqueOn,
     isDisabledFieldLabel = _ref.isDisabledFieldLabel,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
-    formDomProps = _objectWithoutProperties(_ref, _excluded$6);
+    formDomProps = _objectWithoutProperties(_ref, _excluded$7);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState({}),
@@ -13149,7 +13154,7 @@ var Spinner = function Spinner(_ref) {
 };
 var Spinner$1 = /*#__PURE__*/React__default.memo(Spinner);
 
-var _excluded$5 = ["label", "loading", "success", "className"];
+var _excluded$6 = ["label", "loading", "success", "className"];
 var Button = function Button(_ref) {
   var label = _ref.label,
     _ref$loading = _ref.loading,
@@ -13158,7 +13163,7 @@ var Button = function Button(_ref) {
     success = _ref$success === void 0 ? false : _ref$success,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
-    otherProps = _objectWithoutProperties(_ref, _excluded$5);
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/React__default.createElement("button", _extends$6({
     className: classnames("neeto-form-engine-button", className)
   }, otherProps), loading && /*#__PURE__*/React__default.createElement(ButtonLoader, null), success && /*#__PURE__*/React__default.createElement(Success$2, null), label);
@@ -13378,12 +13383,10 @@ var validateStarRatingField = function validateStarRatingField(_ref5) {
   return schema.trim();
 };
 var validateTermsField = function validateTermsField() {
-  var schema = yup["boolean"]().oneOf([true], t$1("neetoForm.common.mustAcceptTermsAndConditions"));
-  return schema;
+  return yup["boolean"]().oneOf([true], t$1("neetoForm.common.mustAcceptTermsAndConditions"));
 };
 var validateConditionField = function validateConditionField() {
-  var schema = yup["boolean"]().oneOf([true], t$1("neetoForm.common.mustAcceptCondition"));
-  return schema;
+  return yup["boolean"]().oneOf([true], t$1("neetoForm.common.mustAcceptCondition"));
 };
 var validateDateField = function validateDateField(_ref6) {
   var label = _ref6.label,
@@ -13415,53 +13418,49 @@ var validateRichTextField = function validateRichTextField(_ref8) {
   }
   return schema.trim();
 };
-var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _fieldKindValidatorMa);
+var fieldKindValidatorMap = (_fieldKindValidatorMa = {}, _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.EMAIL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.PHONE.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXT.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.NAME.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.QUESTION.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TEXTAREA.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DECIMAL.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.INTEGER.value, validateTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DROPDOWN.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RADIO.value, validateSingleChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CHECKBOX.value, validateMultiChoiceField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RATING.value, validateRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.TERMS.value, validateTermsField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.DATE.value, validateDateField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.STAR_RATING.value, validateStarRatingField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.ADDITIONAL_GUESTS.value, validateMultiEmailField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.RICH_TEXT.value, validateRichTextField), _defineProperty$6(_fieldKindValidatorMa, QUESTION_KIND.CONDITION.value, validateConditionField), _fieldKindValidatorMa);
 var validateFieldValue = function validateFieldValue(_ref9) {
   var kind = _ref9.kind,
     label = _ref9.label,
     isRequired = _ref9.isRequired,
     customValidator = _ref9.customValidator;
-  return (
-    // eslint-disable-next-line consistent-return
-    function (value) {
-      if (kind in fieldKindValidatorMap) {
-        var validator = fieldKindValidatorMap[kind];
-        var schema = customValidator || validator({
-          kind: kind,
-          label: label,
-          isRequired: isRequired
-        });
+  return function (value) {
+    if (!(kind in fieldKindValidatorMap)) return;
+    var validator = fieldKindValidatorMap[kind];
+    var schema = customValidator || validator({
+      kind: kind,
+      label: label,
+      isRequired: isRequired
+    });
 
-        // eslint-disable-next-line no-async-promise-executor
-        return new Promise( /*#__PURE__*/function () {
-          var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.prev = 0;
-                  _context.next = 3;
-                  return schema.validate(value);
-                case 3:
-                  resolve(undefined);
-                  _context.next = 9;
-                  break;
-                case 6:
-                  _context.prev = 6;
-                  _context.t0 = _context["catch"](0);
-                  resolve(_context.t0.message);
-                case 9:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee, null, [[0, 6]]);
-          }));
-          return function (_x) {
-            return _ref10.apply(this, arguments);
-          };
-        }());
-      }
-    }
-  );
+    // eslint-disable-next-line consistent-return, no-async-promise-executor
+    return new Promise( /*#__PURE__*/function () {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(resolve) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return schema.validate(value);
+            case 3:
+              resolve(undefined);
+              _context.next = 9;
+              break;
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              resolve(_context.t0.message);
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+      return function (_x) {
+        return _ref10.apply(this, arguments);
+      };
+    }());
+  };
 };
 
 var MultipleEmailInput = function MultipleEmailInput(_ref) {
@@ -13518,30 +13517,31 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
   })));
 };
 
-var _excluded$4 = ["name", "label", "error", "value"];
+var _excluded$5 = ["name", "label", "error", "value"];
 var Condition = function Condition(_ref, ref) {
   var name = _ref.name,
     label = _ref.label,
     error = _ref.error,
     value = _ref.value,
-    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-terms"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-choice"
   }, /*#__PURE__*/React__default.createElement("input", _extends$6({
+    name: name,
+    ref: ref,
+    value: value,
     required: true,
     "aria-invalid": !!error,
     id: "condition-".concat(name),
-    name: name,
-    ref: ref,
-    type: "checkbox",
-    value: value
+    type: "checkbox"
   }, otherProps)), /*#__PURE__*/React__default.createElement("label", {
     className: "neeto-form-engine-label font-normal",
     htmlFor: "condition-".concat(name)
   }, label)), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error"
+    className: "neeto-form-engine-input__error",
+    "data-cy": "neeto-form-engine-condition-error"
   }, error));
 };
 var Condition$1 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(Condition));
@@ -16783,7 +16783,7 @@ var ConditionField = function ConditionField(_ref) {
   });
 };
 
-var _excluded$3 = ["value"];
+var _excluded$4 = ["value"];
 dayjs.extend(weekOfYear);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -16827,7 +16827,7 @@ var DateField = function DateField(_ref) {
     var meta = _ref2.meta,
       _ref2$field = _ref2.field,
       value = _ref2$field.value,
-      field = _objectWithoutProperties(_ref2$field, _excluded$3),
+      field = _objectWithoutProperties(_ref2$field, _excluded$4),
       form = _ref2.form;
     return /*#__PURE__*/React__default.createElement(DatePicker, _extends$6({
       dateFormat: "MMM D, YYYY",
@@ -16874,16 +16874,17 @@ var Choices = function Choices(_ref) {
         active: false
       })
     }, /*#__PURE__*/React__default.createElement(Component, {
+      onChange: onChange,
+      type: type,
       id: option.id,
       label: option.label,
       name: isCheckBox ? "".concat(name, ".").concat(index) : name,
-      type: type,
       value: option.id,
-      checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id,
-      onChange: onChange
+      checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id
     }));
   })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error"
+    className: "neeto-form-engine-input__error",
+    "data-cy": "neeto-form-engine-".concat(type, "-error")
   }, error));
 };
 var Choices$1 = /*#__PURE__*/React__default.memo(Choices);
@@ -16978,7 +16979,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
   });
 };
 
-var _excluded$2 = ["name", "label", "error", "lowestRatingLabel", "averageRatingLabel", "highestRatingLabel", "value"];
+var _excluded$3 = ["name", "label", "error", "lowestRatingLabel", "averageRatingLabel", "highestRatingLabel", "value"];
 var Rating = function Rating(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -16987,7 +16988,7 @@ var Rating = function Rating(_ref) {
     averageRatingLabel = _ref.averageRatingLabel,
     highestRatingLabel = _ref.highestRatingLabel,
     value = _ref.value,
-    other = _objectWithoutProperties(_ref, _excluded$2);
+    other = _objectWithoutProperties(_ref, _excluded$3);
   var handleClick = function handleClick(e) {
     return e.currentTarget.nextElementSibling.click();
   };
@@ -17008,9 +17009,9 @@ var Rating = function Rating(_ref) {
       }, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement("label", {
         className: "neeto-form-engine-label"
       }, labels[index])), /*#__PURE__*/React__default.createElement("input", _extends$6({
+        name: name,
         hidden: true,
         checked: rating === value,
-        name: name,
         type: "radio",
         value: rating
       }, other)));
@@ -17023,7 +17024,8 @@ var Rating = function Rating(_ref) {
   }, label), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-rating__row"
   }, render()), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error"
+    className: "neeto-form-engine-input__error",
+    "data-cy": "neeto-form-engine-rating-error"
   }, error));
 };
 var Rating$1 = /*#__PURE__*/React__default.memo(Rating);
@@ -17062,8 +17064,11 @@ var RatingField = function RatingField(_ref) {
 var RichTextEditor = function RichTextEditor(_ref) {
   var editorRef = _ref.editorRef,
     question = _ref.question,
+    preview = _ref.preview,
     _ref$editorProps = _ref.editorProps,
     editorProps = _ref$editorProps === void 0 ? {} : _ref$editorProps;
+  var _useFormikContext = useFormikContext(),
+    errors = _useFormikContext.errors;
   var name = question.id,
     kind = question.kind,
     label = question.label,
@@ -17077,18 +17082,18 @@ var RichTextEditor = function RichTextEditor(_ref) {
     className: "neeto-form-engine-input__label-wrapper"
   }, label && /*#__PURE__*/React__default.createElement("label", {
     className: "neeto-form-engine-label"
-  }, getLabel$1(label, isRequired))), /*#__PURE__*/React__default.createElement(FastField, {
+  }, getLabel$1(label, isRequired))), /*#__PURE__*/React__default.createElement(FastField, _extends$6({
     debouncedPlaceholder: debouncedPlaceholder,
+    error: errors[name],
     name: name || nodeId,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired
-    }),
-    shouldUpdate: function shouldUpdate(nextProps, prevProps) {
-      return nextProps.debouncedPlaceholder !== prevProps.debouncedPlaceholder;
-    }
-  }, function (_ref2) {
+    })
+  }, preview && {
+    shouldUpdate: isPropsUnequal(["debouncedPlaceholder", "error"])
+  }), function (_ref2) {
     var field = _ref2.field,
       form = _ref2.form,
       meta = _ref2.meta;
@@ -17110,8 +17115,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }));
 };
 
-var _excluded$1 = ["value", "shape", "label", "rating", "count"],
-  _excluded2 = ["label", "count", "shape", "error"];
+var _excluded$2 = ["value", "shape", "label", "rating", "count"];
 var RatingButton = function RatingButton(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? "0" : _ref$value,
@@ -17119,7 +17123,7 @@ var RatingButton = function RatingButton(_ref) {
     label = _ref.label,
     rating = _ref.rating,
     count = _ref.count,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
+    otherProps = _objectWithoutProperties(_ref, _excluded$2);
   var handleClick = function handleClick(e) {
     return e.currentTarget.nextElementSibling.click();
   };
@@ -17145,12 +17149,15 @@ var RatingButton = function RatingButton(_ref) {
     value: "".concat(rating, " / ").concat(count)
   }, otherProps)));
 };
-var StarRating = function StarRating(_ref2) {
-  var label = _ref2.label,
-    count = _ref2.count,
-    shape = _ref2.shape,
-    error = _ref2.error,
-    props = _objectWithoutProperties(_ref2, _excluded2);
+var RatingButton$1 = /*#__PURE__*/React__default.memo(RatingButton);
+
+var _excluded$1 = ["label", "count", "shape", "error"];
+var StarRating = function StarRating(_ref) {
+  var label = _ref.label,
+    count = _ref.count,
+    shape = _ref.shape,
+    error = _ref.error,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-input__wrapper neeto-form-engine-star-rating"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -17160,15 +17167,16 @@ var StarRating = function StarRating(_ref2) {
   }, label)), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-star-rating__row"
   }, times(function (index) {
-    return /*#__PURE__*/React__default.createElement(RatingButton, _extends$6({
+    return /*#__PURE__*/React__default.createElement(RatingButton$1, _extends$6({
       count: count,
+      shape: shape,
       key: index,
       label: index + 1,
-      rating: index + 1,
-      shape: shape
+      rating: index + 1
     }, props));
   }, count)), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error"
+    className: "neeto-form-engine-input__error",
+    "data-cy": "neeto-form-engine-star-rating-error"
   }, error));
 };
 var StarRating$1 = /*#__PURE__*/React__default.memo(StarRating);
@@ -17215,17 +17223,18 @@ var Terms = function Terms(_ref, ref) {
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-choice"
   }, /*#__PURE__*/React__default.createElement("input", _extends$6({
+    name: name,
+    ref: ref,
+    value: value,
     required: true,
     "aria-invalid": !!error,
     id: "terms-and-condition",
-    name: name,
-    ref: ref,
-    type: "checkbox",
-    value: value
+    type: "checkbox"
   }, otherProps)), /*#__PURE__*/React__default.createElement(EditorContent, {
     content: label
   })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error"
+    className: "neeto-form-engine-input__error",
+    "data-cy": "neeto-form-engine-terms-error"
   }, error));
 };
 var Terms$1 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(Terms));
@@ -17319,6 +17328,11 @@ var getFieldComponent = function getFieldComponent(_ref) {
     return null;
   };
 };
+var isPropsUnequal = function isPropsUnequal(props) {
+  return function (nextProps, prevProps) {
+    return notEqualsDeep(pick(props, nextProps), pick(props, prevProps));
+  };
+};
 
 var _path, _defs;
 function _extends() { _extends = 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.apply(this, arguments); }
@@ -17648,10 +17662,10 @@ var ExternalForm = function ExternalForm(_ref) {
     style: "h4",
     weight: "semibold"
   }, titleProps), formTitle || title)), /*#__PURE__*/React__default.createElement(Formik, {
+    onSubmit: onSubmit,
     enableReinitialize: true,
     innerRef: formikInnerRef,
-    initialValues: generateInitValues(questions, submission === null || submission === void 0 ? void 0 : submission.responses, preserveValues ? localValues : initialValues),
-    onSubmit: onSubmit
+    initialValues: generateInitValues(questions, submission === null || submission === void 0 ? void 0 : submission.responses, preserveValues ? localValues : initialValues)
   }, function (_ref5) {
     var isSubmitting = _ref5.isSubmitting,
       errors = _ref5.errors,
@@ -17668,24 +17682,24 @@ var ExternalForm = function ExternalForm(_ref) {
       ref: mergeRefs(formRef, keyPressRef),
       className: classnames("neeto-form-engine-form relative space-y-4", _defineProperty$6({}, className, className)),
       onChange: function onChange(event) {
-        if (!isEmpty(errors)) {
-          setFieldError(event.target.name, "");
-        }
+        if (isEmpty(errors)) return;
+        setFieldError(event.target.name, "");
       }
     }, formDomProps, {
       onReset: function onReset(e) {
         return _onReset(e, handleReset);
       }
     }), (submission === null || submission === void 0 ? void 0 : submission.isLoading) && /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-gray-100 absolute top-0 left-0 right-0 bottom-0 flex items-center justify-center opacity-75"
+      className: "neeto-ui-bg-gray-100 absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center opacity-75"
     }, /*#__PURE__*/React__default.createElement(Spinner$2, null)), renderedQuestions.map(function (question) {
       var _question$id;
       var FieldComponent = getFieldComponent(question);
       return /*#__PURE__*/React__default.createElement(FieldComponent, {
-        customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
-        editorRef: editorRef,
         editorProps: editorProps,
+        editorRef: editorRef,
+        preview: preview,
         question: question,
+        customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
         key: (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId,
         showPrefixIcon: showPrefixIcons
       });