@bigbinary/neeto-form-frontend 1.2.56 → 1.3.1

package/dist/index.js

@@ -1,11 +1,11 @@
 import * as React$2 from 'react';
 import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, forwardRef, useImperativeHandle, Fragment, useReducer, useCallback as useCallback$1, useMemo as useMemo$1, createContext, createElement } from 'react';
 import { useFormikContext, useField, FieldArray, Form as Form$1, Formik, Field, FastField } from 'formik';
-import { noop as noop$4, findBy, slugify, filterBy, isNotEmpty, truncate, humanize, removeBy, isPresent as isPresent$1, isNotPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
-import { withEventTargetValue, showThumbsUpToastr, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
+import { noop as noop$4, findBy, slugify, toLabelAndValue, filterBy, isNotEmpty, truncate, humanize, removeBy, isPresent as isPresent$1, isNotPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Tooltip, Dropdown as Dropdown$2, Alert, Typography, Button as Button$1, Label, Checkbox as Checkbox$1, Toastr, MultiEmailInput, DatePicker, Input as Input$2, Radio as Radio$1, Select, Textarea as Textarea$1, Spinner as Spinner$2 } from '@bigbinary/neetoui';
-import { assoc, mergeLeft, prop, isEmpty, path, values, compose as compose$1, trim, useWith, split, either, isNil, equals, difference, reject, pluck, keys, pick, omit, isNotNil, insert, not, pipe as pipe$1, toLower, map, includes, identity, times, clamp as clamp$2, filter as filter$1 } from 'ramda';
+import { Tooltip, Dropdown as Dropdown$2, Alert, Typography, Button as Button$1, Label, Checkbox as Checkbox$1, Toastr, MultiEmailInput, DatePicker, Input as Input$2, Radio as Radio$1, Select as Select$1, Textarea as Textarea$1, Spinner as Spinner$2 } from '@bigbinary/neetoui';
+import { assoc, mergeLeft, compose as compose$1, isEmpty, trim, useWith, path, split, either, isNil, values, equals, modify, prop, range, difference, without, reject, pluck, keys, pick, omit, includes, __, isNotNil, insert, not, pipe as pipe$1, toLower, map, identity, clamp as clamp$2, filter as filter$1 } from 'ramda';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$4 } from 'i18next';
 import { Input, Email as Email$2, Phone as Phone$2, Globe, Up, Down, MenuHorizontal, Delete, Plus, NeetoInvisible, Checkbox as Checkbox$2, Radio, Dropdown as Dropdown$3, Rating as Rating$4, Smiley, Calendar, Upload, Check, Close, FileGeneric } from '@bigbinary/neeto-icons';
@@ -13,13 +13,14 @@ import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-
 import { useMutationWithInvalidation, withImmutableActions, withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
 import ReactDOM, { unstable_batchedUpdates, flushSync as flushSync$1 } from 'react-dom';
-import { Input as Input$1, Textarea, Checkbox, ActionBlock } from '@bigbinary/neetoui/formik';
+import { Input as Input$1, Textarea, Checkbox, Select, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { create as create$1 } from 'zustand';
 import classnames from 'classnames';
+import { Editor as Editor$1, isEditorEmpty, EditorContent } from '@bigbinary/neeto-editor';
+import { shallow } from 'zustand/shallow';
 import * as yup from 'yup';
 import { object, array, string } from 'yup';
-import { Editor as Editor$1, isEditorEmpty, EditorContent } from '@bigbinary/neeto-editor';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
 import dayjs from 'dayjs';
 import { validation, PhoneNumberInput, PhoneNumber as PhoneNumber$1 } from '@bigbinary/neeto-molecules/PhoneNumber';
@@ -769,6 +770,7 @@ var QUESTIONS_INITIAL_VALUE = {
 };
 var RESERVED_FIELD_CODES = ["month", "date", "time"];
 var SELECTABLE_KINDS = ["radio", "checkbox", "dropdown"];
+var RICH_TEXT_QUESTIONS = ["paragraph", "termsandcondition"];
 
 function _arrayWithHoles$3(arr) {
   if (Array.isArray(arr)) return arr;
@@ -9804,6 +9806,28 @@ var formHelpers = {
   pushToList: pushToList
 };
 
+var isBlank = compose$1(isEmpty, trim);
+var parseServerError = function parseServerError(error) {
+  var _error$notice;
+  return (_error$notice = error.notice) !== null && _error$notice !== void 0 ? _error$notice : t$4("neetoForm.common.somethingWentWrong");
+};
+var isEmptyValues = function isEmptyValues(obj) {
+  return either(isNil, isEmpty)(obj) ? true : values(obj).every(function (value) {
+    if (isEmpty(value)) {
+      return true;
+    } else if (Array.isArray(value)) {
+      return equals([false, false, false], value);
+    }
+    return !value;
+  });
+};
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+var dotPath = useWith(path, [split(".")]);
+var isFunction$1 = function isFunction(obj) {
+  return typeof obj === "function";
+};
+
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useBuildFormStore = create$1(withImmutableActions(function (set) {
   return {
@@ -9818,10 +9842,11 @@ var useBuildFormStore = create$1(withImmutableActions(function (set) {
       selectedLanguage: i18next.resolvedLanguage,
       formId: null,
       enabled: false,
-      title: ""
+      title: "",
+      richTextFieldsToReset: []
     },
-    setFormData: function setFormData(payload) {
-      return set(assoc("formState", payload));
+    setFormData: function setFormData(arg) {
+      return set(modify("formState", isFunction$1(arg) ? arg : mergeLeft(arg)));
     }
   };
 }));
@@ -10039,7 +10064,8 @@ var Accordion = function Accordion(_ref) {
     showAddQuestionDivider = _ref.showAddQuestionDivider,
     isDeletable = _ref.isDeletable,
     kindUniqueOn = _ref.kindUniqueOn,
-    disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps;
+    disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
+    dragHandleProps = _ref.dragHandleProps;
   var _useState = useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     isAddQuestionOpen = _useState2[0],
@@ -10053,14 +10079,14 @@ var Accordion = function Accordion(_ref) {
     className: classnames("neeto-form-engine-question-accordion relative", {
       "pr-4 md:pr-8": showAddQuestionDivider
     })
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", _extends$8({
     "data-cy": "neeto-form-engine-question-accordion-header",
     className: classnames({
       "neeto-form-engine-question-accordion__header flex h-10 cursor-pointer select-none items-center justify-between px-3 py-2": true,
       "neeto-ui-text-gray-700 border": !isExpanded,
       "neeto-ui-bg-gray-800 neeto-ui-text-white rounded-b-none": isExpanded
     })
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, dragHandleProps), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-question-accordion__header-left flex items-center overflow-hidden"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex w-8 items-center"
@@ -10264,6 +10290,39 @@ var Condition$1 = function Condition(_ref) {
   })));
 };
 
+var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
+  var allQuestionKinds = _ref.allQuestionKinds,
+    item = _ref.item;
+  var kind = item.kind,
+    label = item.label;
+  var _findBy = findBy({
+      type: kind
+    }, allQuestionKinds),
+    FieldComponent = _findBy.component,
+    FieldIcon = _findBy.icon,
+    isSingular = _findBy.isSingular;
+  return {
+    kind: kind,
+    label: label,
+    FieldComponent: FieldComponent,
+    FieldIcon: FieldIcon,
+    isSingular: isSingular
+  };
+};
+var generateArray = function generateArray(start, end) {
+  return range(start, end + 1);
+};
+
+var validateEditorContent = function validateEditorContent(editorRef) {
+  return function () {
+    var _editorRef$current;
+    return (_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && (_editorRef$current = _editorRef$current.editor) !== null && _editorRef$current !== void 0 && _editorRef$current.isEmpty ? t$4("neetoForm.common.thisFieldIsRequired") : "";
+  };
+};
+var generateRatingOptions = function generateRatingOptions(range) {
+  return generateArray.apply(void 0, _toConsumableArray$1(range)).map(toLabelAndValue);
+};
+
 var _FILE_TYPES_MAP;
 var FILE_TYPES = {
   DOCUMENTS: "documents",
@@ -10280,6 +10339,8 @@ var STAR_RATING_ICONS_MAP = {
   trophy: MemoizedTrophy,
   zap: MemoizedZap
 };
+var STAR_RATING_MAX_VALUE_OPTIONS = generateRatingOptions([3, 10]);
+var STAR_RATING_MIN_VALUE_OPTIONS = generateRatingOptions([0, 1]);
 var FILE_TYPES_MAP = (_FILE_TYPES_MAP = {}, _defineProperty$6(_FILE_TYPES_MAP, FILE_TYPES.DOCUMENTS, ["pdf", "doc", "docx", "xls", "xlsx", "csv", "txt", "rtf", "html", "zip", "md"]), _defineProperty$6(_FILE_TYPES_MAP, FILE_TYPES.IMAGES, ["jpg", "jpeg", "png", "gif"]), _defineProperty$6(_FILE_TYPES_MAP, FILE_TYPES.AUDIO_VIDEO, ["mp3", "wma", "mpg", "flv", "avi"]), _FILE_TYPES_MAP);
 var DEFAULT_ALLOWED_FILE_TYPES = values(FILE_TYPES_MAP).flat().join(", ");
 var FILE_GROUPS = [{
@@ -10292,8 +10353,6 @@ var FILE_GROUPS = [{
   label: t$4("neetoForm.fileTypes.audioVideo"),
   name: FILE_TYPES.AUDIO_VIDEO
 }];
-var STAR_RATING_MIN_COUNT = 0;
-var STAR_RATING_MAX_COUNT = 10;
 
 var Dropdown$1 = function Dropdown(_ref) {
   var item = _ref.item,
@@ -10421,25 +10480,6 @@ var Email$1 = withT(function (_ref) {
   }));
 });
 
-var isBlank = compose$1(isEmpty, trim);
-var parseServerError = function parseServerError(error) {
-  var _error$notice;
-  return (_error$notice = error.notice) !== null && _error$notice !== void 0 ? _error$notice : t$4("neetoForm.common.somethingWentWrong");
-};
-var isEmptyValues = function isEmptyValues(obj) {
-  return either(isNil, isEmpty)(obj) ? true : values(obj).every(function (value) {
-    if (isEmpty(value)) {
-      return true;
-    } else if (Array.isArray(value)) {
-      return equals([false, false, false], value);
-    }
-    return !value;
-  });
-};
-
-// eslint-disable-next-line react-hooks/rules-of-hooks
-var dotPath = useWith(path, [split(".")]);
-
 var FileGroup = function FileGroup(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -10944,32 +10984,6 @@ var SingleChoice$1 = function SingleChoice(_ref) {
   }));
 };
 
-var validateEditorContent = function validateEditorContent(editorRef) {
-  return function () {
-    var _editorRef$current;
-    return (_editorRef$current = editorRef.current) !== null && _editorRef$current !== void 0 && (_editorRef$current = _editorRef$current.editor) !== null && _editorRef$current !== void 0 && _editorRef$current.isEmpty ? t$4("neetoForm.common.thisFieldIsRequired") : "";
-  };
-};
-var validateStarRatingCount = function validateStarRatingCount(value) {
-  try {
-    var schema = yup.number().integer().transform(function (value) {
-      return isNaN(value) ? null : value;
-    }).min(STAR_RATING_MIN_COUNT, t$4("neetoForm.error.minCount", {
-      field: t$4("neetoForm.common.count"),
-      value: STAR_RATING_MIN_COUNT
-    })).max(STAR_RATING_MAX_COUNT, t$4("neetoForm.error.maxCount", {
-      field: t$4("neetoForm.common.count"),
-      value: STAR_RATING_MAX_COUNT
-    })).nullable().required(t$4("neetoForm.common.fieldReq", {
-      field: t$4("neetoForm.common.count")
-    }));
-    schema.validateSync(value);
-    return undefined;
-  } catch (error) {
-    return error.message;
-  }
-};
-
 var StarRating$3 = function StarRating(_ref) {
   var name = _ref.name,
     isRequired = _ref.isRequired,
@@ -10977,21 +10991,13 @@ var StarRating$3 = function StarRating(_ref) {
     enableFieldCode = _ref.enableFieldCode;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useField = useField("".concat(name, ".shape")),
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useField = useField("".concat(name, ".iconType")),
     _useField2 = _slicedToArray$3(_useField, 3),
-    shape = _useField2[0].value;
+    iconType = _useField2[0].value;
     _useField2[1];
-    var setShape = _useField2[2].setValue;
-  var _useField3 = useField({
-      name: "".concat(name, ".count"),
-      validate: validateStarRatingCount
-    }),
-    _useField4 = _slicedToArray$3(_useField3, 3),
-    countField = _useField4[0],
-    _useField4$ = _useField4[1],
-    countTouched = _useField4$.touched,
-    countError = _useField4$.error,
-    setCount = _useField4[2].setValue;
+    var setIconType = _useField2[2].setValue;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -11002,22 +11008,31 @@ var StarRating$3 = function StarRating(_ref) {
     label: t("neetoForm.questions.common.questionFields.field.question"),
     name: "".concat(name, ".label"),
     rows: 1
-  })), /*#__PURE__*/React__default.createElement(InputWithMaxLength, _extends$8({
-    required: true
-  }, countField, {
-    error: countTouched ? countError : "",
-    label: t("neetoForm.common.count"),
-    max: STAR_RATING_MAX_COUNT,
-    min: STAR_RATING_MIN_COUNT,
-    type: "number",
-    onChange: withEventTargetValue(setCount)
-  })), /*#__PURE__*/React__default.createElement(Label, null, t("neetoForm.common.icon")), /*#__PURE__*/React__default.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex space-x-4"
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    className: "w-1/2",
+    label: t("neetoForm.common.start"),
+    name: "".concat(name, ".minValue"),
+    options: STAR_RATING_MIN_VALUE_OPTIONS,
+    onChange: function onChange(option) {
+      return setFieldValue("".concat(name, ".minValue"), option === null || option === void 0 ? void 0 : option.value);
+    }
+  }), /*#__PURE__*/React__default.createElement(Select, {
+    className: "w-1/2",
+    label: t("neetoForm.common.end"),
+    name: "".concat(name, ".maxValue"),
+    options: STAR_RATING_MAX_VALUE_OPTIONS,
+    onChange: function onChange(option) {
+      return setFieldValue("".concat(name, ".maxValue"), option === null || option === void 0 ? void 0 : option.value);
+    }
+  })), /*#__PURE__*/React__default.createElement(Label, null, t("neetoForm.common.shape")), /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-2"
   }, Object.entries(STAR_RATING_ICONS_MAP).map(function (_ref2) {
     var _ref3 = _slicedToArray$3(_ref2, 2),
       name = _ref3[0],
-      Shape = _ref3[1];
-    var isActive = name === shape;
+      IconType = _ref3[1];
+    var isActive = name === iconType;
     return /*#__PURE__*/React__default.createElement("div", {
       key: name,
       className: classnames("flex h-10 w-10 items-center justify-center gap-2", "neeto-ui-border-gray-800 neeto-ui-rounded-full cursor-pointer border", "transition-all duration-300 ease-in-out", {
@@ -11025,9 +11040,9 @@ var StarRating$3 = function StarRating(_ref) {
         "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
       }),
       onClick: function onClick() {
-        return setShape(name);
+        return setIconType(name);
       }
-    }, /*#__PURE__*/React__default.createElement(Shape, null));
+    }, /*#__PURE__*/React__default.createElement(IconType, null));
   })), !isRequired && /*#__PURE__*/React__default.createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default.createElement(Checkbox, {
@@ -11039,18 +11054,42 @@ var StarRating$3 = function StarRating(_ref) {
   }));
 };
 
-var useUpdateEditorContent = function useUpdateEditorContent(editorRef, fieldName, value) {
+var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
+  var editorRef = _ref.editorRef,
+    fieldName = _ref.fieldName,
+    value = _ref.value,
+    initialValue = _ref.initialValue,
+    fieldCode = _ref.fieldCode;
   var initialStateRef = useRef({
     language: "",
     value: null
   });
-  var _useBuildFormState = useBuildFormState(),
-    formId = _useBuildFormState.formId,
-    language = _useBuildFormState.selectedLanguage;
+  var _useBuildFormStore = useBuildFormStore(function (store) {
+      return {
+        setFormData: store["setFormData"]
+      };
+    }, shallow),
+    setFormData = _useBuildFormStore.setFormData;
+  var _useBuildFormStore2 = useBuildFormStore(function (store) {
+      var _store$formState, _store$formState2;
+      return {
+        formId: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["formId"],
+        selectedLanguage: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["selectedLanguage"]
+      };
+    }, shallow),
+    formId = _useBuildFormStore2.formId,
+    language = _useBuildFormStore2.selectedLanguage;
+  var shouldReset = useBuildFormStore(function (store) {
+    return store.formState.richTextFieldsToReset.includes(fieldCode);
+  });
   var setEditorContent = function setEditorContent(content) {
     var _editorRef$current$ed;
     return (_editorRef$current$ed = editorRef.current.editor) === null || _editorRef$current$ed === void 0 || (_editorRef$current$ed = _editorRef$current$ed.commands) === null || _editorRef$current$ed === void 0 ? void 0 : _editorRef$current$ed.setContent(content);
   };
+  if (shouldReset) {
+    setEditorContent(initialValue);
+    setFormData(modify("richTextFieldsToReset", without([fieldCode])));
+  }
   useEffect(function () {
     if (initialStateRef.current["language"] !== language) {
       initialStateRef.current["language"] = language;
@@ -11077,11 +11116,13 @@ var useUpdateEditorContent = function useUpdateEditorContent(editorRef, fieldNam
 
 var Terms$1 = function Terms(_ref) {
   var name = _ref.name,
+    item = _ref.item,
     isLabelDisabled = _ref.isLabelDisabled;
   var editorRef = useRef({
     editor: {}
   });
   var fieldName = "".concat(name, ".label");
+  var fieldCode = item.fieldCode;
   var _useField = useField({
       name: fieldName,
       validate: validateEditorContent(editorRef)
@@ -11091,10 +11132,17 @@ var Terms$1 = function Terms(_ref) {
     _useField2$ = _useField2[1],
     touched = _useField2$.touched,
     error = _useField2$.error,
+    initialValue = _useField2$.initialValue,
     _useField2$2 = _useField2[2],
     setTouched = _useField2$2.setTouched,
     setValue = _useField2$2.setValue;
-  useUpdateEditorContent(editorRef, fieldName, value);
+  useUpdateEditorContent({
+    editorRef: editorRef,
+    fieldName: fieldName,
+    value: value,
+    initialValue: initialValue,
+    fieldCode: fieldCode
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
@@ -11136,11 +11184,13 @@ var Fields = {
 
 var Editor = function Editor(_ref) {
   var name = _ref.name,
+    item = _ref.item,
     isLabelDisabled = _ref.isLabelDisabled;
   var editorRef = useRef({
     editor: {}
   });
   var fieldName = "".concat(name, ".label");
+  var fieldCode = item.fieldCode;
   var _useField = useField({
       name: fieldName,
       validate: validateEditorContent(editorRef)
@@ -11150,10 +11200,17 @@ var Editor = function Editor(_ref) {
     _useField2$ = _useField2[1],
     touched = _useField2$.touched,
     error = _useField2$.error,
+    initialValue = _useField2$.initialValue,
     _useField2$2 = _useField2[2],
     setTouched = _useField2$2.setTouched,
     setValue = _useField2$2.setValue;
-  useUpdateEditorContent(editorRef, fieldName, value);
+  useUpdateEditorContent({
+    editorRef: editorRef,
+    fieldName: fieldName,
+    value: value,
+    initialValue: initialValue,
+    fieldCode: fieldCode
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
@@ -11334,8 +11391,9 @@ var QUESTION_KINDS = [{
   defaults: {
     label: "",
     isRequired: true,
-    count: 5,
-    shape: "star"
+    minValue: 1,
+    maxValue: 5,
+    iconType: "star"
   }
 }, {
   type: "rating",
@@ -11419,7 +11477,8 @@ var FormField = function FormField(props) {
     allQuestionKinds = props.allQuestionKinds,
     getActiveKindDetails = props.getActiveKindDetails,
     kindUniqueOn = props.kindUniqueOn,
-    disabledAddButtonTooltipProps = props.disabledAddButtonTooltipProps;
+    disabledAddButtonTooltipProps = props.disabledAddButtonTooltipProps,
+    dragHandleProps = props.dragHandleProps;
   var _getActiveKindDetails = getActiveKindDetails({
       allQuestionKinds: allQuestionKinds,
       item: item
@@ -11431,6 +11490,7 @@ var FormField = function FormField(props) {
     isSingular = _getActiveKindDetails.isSingular;
   return /*#__PURE__*/React__default.createElement(Accordion, {
     disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
+    dragHandleProps: dragHandleProps,
     isDeletable: isDeletable,
     isExpanded: isExpanded,
     kindUniqueOn: kindUniqueOn,
@@ -11479,11 +11539,12 @@ var Question = function Question(_ref) {
         var draggableProps = _ref3.draggableProps,
           dragHandleProps = _ref3.dragHandleProps,
           innerRef = _ref3.innerRef;
-        return /*#__PURE__*/React__default.createElement("div", _extends$8({}, draggableProps, dragHandleProps, {
+        return /*#__PURE__*/React__default.createElement("div", _extends$8({}, draggableProps, {
           ref: innerRef
         }), /*#__PURE__*/React__default.createElement(FormField, _extends$8({
           allQuestionKinds: allQuestionKinds,
           disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
+          dragHandleProps: dragHandleProps,
           getActiveKindDetails: getActiveKindDetails,
           kindUniqueOn: kindUniqueOn,
           isDeletable: isDeletable(item),
@@ -11874,6 +11935,15 @@ var Form = function Form(_ref) {
     if (isNotEmpty(questionLabel)) return truncate(questionLabel, 40);
     return humanize(questionKind);
   };
+  var richTextQuestions = filterBy({
+    kind: includes(__, RICH_TEXT_QUESTIONS)
+  }, questions);
+  var resetFormData = function resetFormData() {
+    resetForm();
+    setFormData({
+      richTextFieldsToReset: pluck("fieldCode", richTextQuestions)
+    });
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Alert, {
     isOpen: isNotNil(deleteQuestionIndex),
     submitButtonLabel: t("neetoForm.common.delete"),
@@ -11963,36 +12033,14 @@ var Form = function Form(_ref) {
   }))), showActionBlock && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-border-gray-300 flex-shrink-0 border-t py-4"
   }, /*#__PURE__*/React__default.createElement(ActionBlock, {
-    className: "space-x-2",
+    submitButtonProps: submitButtonProps,
     cancelButtonProps: _objectSpread$h({
-      label: t("neetoForm.common.reset")
-    }, cancelButtonProps),
-    submitButtonProps: _objectSpread$h({
-      disabled: isSubmitting || !dirty
-    }, submitButtonProps)
+      label: t("neetoForm.common.reset"),
+      onClick: resetFormData
+    }, cancelButtonProps)
   }))));
 };
 
-var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
-  var allQuestionKinds = _ref.allQuestionKinds,
-    item = _ref.item;
-  var kind = item.kind,
-    label = item.label;
-  var _findBy = findBy({
-      type: kind
-    }, allQuestionKinds),
-    FieldComponent = _findBy.component,
-    FieldIcon = _findBy.icon,
-    isSingular = _findBy.isSingular;
-  return {
-    kind: kind,
-    label: label,
-    FieldComponent: FieldComponent,
-    FieldIcon: FieldIcon,
-    isSingular: isSingular
-  };
-};
-
 /* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
 var requiredLabelValidation = function requiredLabelValidation(schema, field) {
   return schema.trim().required(i18next.t("neetoForm.common.fieldReq", {
@@ -16149,13 +16197,13 @@ var getMultipleOptionsFromURL = function getMultipleOptionsFromURL(_ref2) {
   });
 };
 var getStarRatingFromUrl = function getStarRatingFromUrl(_ref3) {
-  var starCount = _ref3.starCount,
+  var minValue = _ref3.minValue,
+    maxValue = _ref3.maxValue,
     fieldCodes = _ref3.fieldCodes,
     fieldCode = _ref3.fieldCode;
   var fieldCodeValue = fieldCodes[fieldCode];
   var rating = parseInt(fieldCodeValue);
-  if (!rating || rating < 0) return "";
-  return "".concat(rating >= starCount ? starCount : rating, " / ").concat(starCount);
+  return isNil(rating) || isNaN(rating) ? "" : clamp$2(minValue, maxValue, rating);
 };
 var getAdditionalGuestsFromUrl = function getAdditionalGuestsFromUrl(_ref4) {
   var fieldCodes = _ref4.fieldCodes,
@@ -16212,7 +16260,8 @@ var generateInitValues = function generateInitValues(_ref7) {
       kind = question.kind,
       optionsAttributes = question.optionsAttributes,
       fieldCode = question.fieldCode,
-      count = question.count;
+      minValue = question.minValue,
+      maxValue = question.maxValue;
     switch (kind) {
       case QUESTION_KIND.CONDITION.value:
         {
@@ -16300,7 +16349,8 @@ var generateInitValues = function generateInitValues(_ref7) {
         {
           var _valuesMap$id$value4, _valuesMap7;
           initValues[id] = (_valuesMap$id$value4 = (_valuesMap7 = valuesMap) === null || _valuesMap7 === void 0 || (_valuesMap7 = _valuesMap7[id]) === null || _valuesMap7 === void 0 ? void 0 : _valuesMap7.value) !== null && _valuesMap$id$value4 !== void 0 ? _valuesMap$id$value4 : getStarRatingFromUrl({
-            starCount: count,
+            minValue: minValue,
+            maxValue: maxValue,
             fieldCodes: fieldCodes,
             fieldCode: fieldCode
           });
@@ -16425,6 +16475,10 @@ var renderButtonsInOrder = function renderButtonsInOrder(buttonsArray, shouldRev
   var orderedButtons = shouldReverse ? buttonsArray.reverse() : buttonsArray;
   return map(identity, orderedButtons);
 };
+var getSelectedRating = function getSelectedRating(value) {
+  var parsedValue = parseInt(value);
+  return isNaN(parsedValue) ? -1 : parsedValue;
+};
 
 var _excluded$3 = ["value"];
 function ownKeys$8(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; }
@@ -26692,7 +26746,7 @@ var OptionsField = function OptionsField(_ref) {
     options = _question$optionsAttr === void 0 ? [] : _question$optionsAttr;
   var isDropdown = kind === QUESTION_KIND.DROPDOWN.value;
   var label = fieldWithFallback(question, "label");
-  var Component = isDropdown ? Select : Choices$1;
+  var Component = isDropdown ? Select$1 : Choices$1;
   var transformedOptions = isDropdown ? options.map(function (option) {
     return {
       label: fieldWithFallback(option, "label"),
@@ -26912,20 +26966,19 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }));
 };
 
-var _excluded$1 = ["value", "shape", "label", "rating", "count"];
+var _excluded$1 = ["value", "iconType", "label", "rating"];
 var RatingButton = function RatingButton(_ref) {
   var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? "0" : _ref$value,
-    shape = _ref.shape,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    iconType = _ref.iconType,
     label = _ref.label,
     rating = _ref.rating,
-    count = _ref.count,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$1);
   var handleClick = function handleClick(e) {
     return e.currentTarget.nextElementSibling.click();
   };
-  var Icon = ICONS_MAP[shape];
-  var selectedRating = value ? String(value).split(" / ")[0] : 0;
+  var Icon = ICONS_MAP[iconType];
+  var selectedRating = getSelectedRating(value);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
     className: classnames({
       active: rating === value
@@ -26935,24 +26988,24 @@ var RatingButton = function RatingButton(_ref) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     size: 24,
     className: classnames("neeto-form-engine-star-rating__icon", {
-      "neeto-form-engine-star-rating__icon--active": rating <= Number(selectedRating)
+      "neeto-form-engine-star-rating__icon--active": rating <= selectedRating
     })
   }), /*#__PURE__*/React__default.createElement("label", {
     className: "neeto-form-engine-label"
   }, label)), /*#__PURE__*/React__default.createElement("input", _extends$8({
     hidden: true,
-    checked: "".concat(rating, " / ").concat(count) === value,
+    checked: equals(rating, value),
     type: "radio",
-    value: "".concat(rating, " / ").concat(count)
+    value: rating
   }, otherProps)));
 };
 var RatingButton$1 = /*#__PURE__*/React__default.memo(RatingButton);
 
-var _excluded = ["label", "count", "shape", "error"];
+var _excluded = ["label", "minValue", "maxValue", "error"];
 var StarRating = function StarRating(_ref) {
   var label = _ref.label,
-    count = _ref.count,
-    shape = _ref.shape,
+    minValue = _ref.minValue,
+    maxValue = _ref.maxValue,
     error = _ref.error,
     props = _objectWithoutProperties$1(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -26963,15 +27016,13 @@ var StarRating = function StarRating(_ref) {
     className: "neeto-form-engine-label"
   }, label)), /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-form-engine-star-rating__row"
-  }, times(function (index) {
+  }, generateArray(minValue, maxValue).map(function (index) {
     return /*#__PURE__*/React__default.createElement(RatingButton$1, _extends$8({
-      count: count,
-      shape: shape,
       key: index,
-      label: index + 1,
-      rating: index + 1
+      label: index,
+      rating: index
     }, props));
-  }, count)), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
+  })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
     className: "neeto-form-engine-input__error",
     "data-cy": "neeto-form-engine-star-rating-error"
   }, error));
@@ -26984,10 +27035,10 @@ var StarRatingField = function StarRatingField(_ref) {
   var name = question.id,
     kind = question.kind,
     isRequired = question.isRequired,
-    count = question.count,
-    shape = question.shape;
+    minValue = question.minValue,
+    maxValue = question.maxValue,
+    iconType = question.iconType;
   var label = fieldWithFallback(question, "label");
-  var sanitizedCount = clamp$2(0, 10, parseInt(count)) || 0;
   return /*#__PURE__*/React__default.createElement(Field, {
     name: name,
     validate: validateFieldValue({
@@ -27000,9 +27051,10 @@ var StarRatingField = function StarRatingField(_ref) {
     var meta = _ref2.meta,
       field = _ref2.field;
     return /*#__PURE__*/React__default.createElement(StarRating$1, _extends$8({
+      iconType: iconType,
+      maxValue: maxValue,
+      minValue: minValue,
       name: name,
-      shape: shape,
-      count: sanitizedCount,
       error: meta.touched ? meta.error : "",
       label: getLabel(label, isRequired)
     }, field));
@@ -27018,7 +27070,7 @@ var TermsField = function TermsField(_ref) {
     kind = question.kind,
     isRequired = question.isRequired,
     nodeId = question.nodeId;
-  var label = fieldWithFallback(question, "label");
+  var label = fieldWithFallback(question, "label", true);
   return /*#__PURE__*/React__default.createElement(Field, {
     name: name || nodeId,
     validate: validateFieldValue({
@@ -27104,14 +27156,16 @@ var _QUESTION_TO_COMPONEN;
 var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
   return /*#__PURE__*/React__default.createElement(EditorContent, {
-    content: isEmpty(question.label) ? question.labelFallback : question.label
+    content: fieldWithFallback(question, "label", true)
   });
 }), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _QUESTION_TO_COMPONEN);
 
 var fieldWithFallback = function fieldWithFallback(question, fieldName) {
+  var hasRichContent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var fallback = question["".concat(fieldName, "Fallback")];
   var field = question[fieldName];
-  return isEmpty(field) && isNotNil(fallback) ? fallback : field;
+  var isFieldEmpty = hasRichContent ? isEditorEmpty(field) : isEmpty(field);
+  return isFieldEmpty && isNotNil(fallback) ? fallback : field;
 };
 var getFieldComponent = function getFieldComponent(_ref) {
   var kind = _ref.kind;