@bigbinary/neeto-form-frontend 2.2.0-beta1 → 2.2.0-beta3

package/dist/index.cjs.js

@@ -24,7 +24,7 @@ var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var reactI18next = require('react-i18next');
 var zustand = require('zustand');
 require('@babel/runtime/helpers/typeof');
-var neetoEditor = require('@bigbinary/neeto-editor');
+var utils$1 = require('@bigbinary/neeto-editor/utils');
 var shallow = require('zustand/shallow');
 var Alert = require('@bigbinary/neetoui/Alert');
 var DOMPurify = require('dompurify');
@@ -36,13 +36,15 @@ var Pane = require('@bigbinary/neetoui/Pane');
 var Form$2 = require('@bigbinary/neetoui/formik/Form');
 var Select = require('@bigbinary/neetoui/formik/Select');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
+var NeetoEditor = require('@bigbinary/neeto-editor/Editor');
 var Switch = require('@bigbinary/neetoui/formik/Switch');
-var neetoIcons = require('@bigbinary/neeto-icons');
 var Button$1 = require('@bigbinary/neetoui/Button');
+var Accordion = require('@bigbinary/neetoui/Accordion');
 var Input = require('@bigbinary/neetoui/formik/Input');
 var yup = require('yup');
 var Checkbox$1 = require('@bigbinary/neetoui/formik/Checkbox');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
+var neetoIcons = require('@bigbinary/neeto-icons');
 var Label = require('@bigbinary/neetoui/Label');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
@@ -51,6 +53,7 @@ var Toastr = require('@bigbinary/neetoui/Toastr');
 var Spinner$2 = require('@bigbinary/neetoui/Spinner');
 var dayjs = require('dayjs');
 var libphonenumberJs = require('libphonenumber-js');
+var EditorContent = require('@bigbinary/neeto-editor/EditorContent');
 var NeetoUIMultiEmailInput = require('@bigbinary/neetoui/MultiEmailInput');
 var PhoneNumber = require('@bigbinary/neeto-molecules/PhoneNumber');
 var localeData = require('dayjs/plugin/localeData');
@@ -107,8 +110,10 @@ var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form$2);
 var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
+var NeetoEditor__default = /*#__PURE__*/_interopDefaultLegacy(NeetoEditor);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button$1);
+var Accordion__default = /*#__PURE__*/_interopDefaultLegacy(Accordion);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var Checkbox__default$1 = /*#__PURE__*/_interopDefaultLegacy(Checkbox$1);
@@ -120,6 +125,7 @@ var useHotkeys__default = /*#__PURE__*/_interopDefaultLegacy(useHotkeys);
 var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
 var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner$2);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var EditorContent__default = /*#__PURE__*/_interopDefaultLegacy(EditorContent);
 var NeetoUIMultiEmailInput__default = /*#__PURE__*/_interopDefaultLegacy(NeetoUIMultiEmailInput);
 var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
 var utc__default = /*#__PURE__*/_interopDefaultLegacy(utc);
@@ -458,7 +464,7 @@ var RATING_VALUES = {
   }
 };
 var SCHEMA_LESS_QUESTION_KINDS = [QUESTION_KIND.PARAGRAPH.value];
-var RATING_OPTIONS = [{
+var RATING_OPTIONS$1 = [{
   icon: SvgHappyFace,
   modifier: "happy",
   value: RATING_VALUES.GOOD.value
@@ -623,10 +629,10 @@ var handleQuestionMutationSuccess = function handleQuestionMutationSuccess(_ref)
   var _args = _slicedToArray__default["default"](args, 1),
     data = _args[0];
   queryClient.invalidateQueries({
-    queryKey: [QUERY_KEYS.QUESTIONS, formId, language]
+    queryKey: [QUERY_KEYS.QUESTIONS, formId]
   });
   queryClient.invalidateQueries({
-    queryKey: [QUERY_KEYS.QUESTIONS, "preview/".concat(formId), language]
+    queryKey: [QUERY_KEYS.QUESTIONS, "preview/".concat(formId)]
   });
   queryClient.setQueryData([QUERY_KEYS.QUESTIONS, formId, language], ramda.assoc("questions", data.questions));
   queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(formId), language], ramda.assoc("questions", data.questions));
@@ -950,8 +956,17 @@ var DEFAULT_AVAILABLE_LANGUAGES = [{
 var QUESTIONS_WITHOUT_FIELD_CODE = [PARAGRAPH$1, TERMS_AND_CONDITION$1, CONDITION$1, FILE_UPLOAD$3];
 var QUESTIONS_INITIAL_VALUE = {
   enabled: false,
-  questions: [],
-  title: ""
+  questions: [{
+    label: "",
+    kind: "text",
+    nodeId: "1"
+  }, {
+    label: "",
+    kind: "email",
+    nodeId: "2"
+  }],
+  title: "",
+  isQuestionsLoading: true
 };
 var RESERVED_FIELD_CODES = ["month", "date", "time"];
 var SELECTABLE_KINDS = [RADIO$2, CHECKBOX$2, DROPDOWN$2];
@@ -987,7 +1002,7 @@ 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];
-  var isFieldEmpty = hasRichContent ? neetoEditor.isEditorEmpty(field) : ramda.isEmpty(field);
+  var isFieldEmpty = hasRichContent ? utils$1.isEditorEmpty(field) : ramda.isEmpty(field);
   return isFieldEmpty && ramda.isNotNil(fallback) ? fallback : field;
 };
 var getComponentDisplayName = function getComponentDisplayName(Component) {
@@ -1020,6 +1035,121 @@ var useBuildFormState = function useBuildFormState() {
   return useBuildFormStore(ramda.prop("formState"));
 };
 
+var _excluded$c = ["size", "color"],
+  _excluded2 = ["size", "color"],
+  _excluded3 = ["size", "color"],
+  _excluded4 = ["size", "color"];
+function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BadSmiley = function BadSmiley(props) {
+  var size = props.size,
+    color = props.color,
+    other = _objectWithoutProperties__default["default"](props, _excluded$c);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
+    fill: "none",
+    height: size,
+    viewBox: "0 0 48 48",
+    width: size
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24c13.234 0 24-10.767 24-24S37.234 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.082 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0c0-.575.468-1.044 1.043-1.044s1.044.469 1.044 1.044c0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 010-2.087 1.045 1.045 0 010 2.087zM24 29.218a13.677 13.677 0 00-10.168 4.52 1.043 1.043 0 101.553 1.394A11.587 11.587 0 0124 31.305c3.3 0 6.44 1.394 8.614 3.826a1.045 1.045 0 001.473.082 1.044 1.044 0 00.082-1.473c-2.57-2.874-6.277-4.523-10.169-4.523z",
+      fill: color
+    })]
+  }));
+};
+BadSmiley.defaultProps = {
+  color: "currentColor",
+  size: 24,
+  strokeWidth: "1.5"
+};
+var OkaySmiley = function OkaySmiley(props) {
+  var size = props.size,
+    color = props.color,
+    other = _objectWithoutProperties__default["default"](props, _excluded2);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
+    fill: "none",
+    height: size,
+    viewBox: "0 0 48 48",
+    width: size
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M15.652 22.956a3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13zm0-4.174c.575 0 1.044.469 1.044 1.044 0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043c0-.575.468-1.044 1.043-1.044zm16.696-2.086a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 01-1.044-1.043c0-.575.469-1.044 1.044-1.044a1.044 1.044 0 010 2.087zm2.087 8.349h-20.87a1.044 1.044 0 000 2.086h20.87a1.044 1.044 0 000-2.086z",
+      fill: color
+    })]
+  }));
+};
+OkaySmiley.defaultProps = {
+  color: "currentColor",
+  size: 24,
+  strokeWidth: "1.5"
+};
+var GoodSmiley = function GoodSmiley(props) {
+  var size = props.size,
+    color = props.color,
+    other = _objectWithoutProperties__default["default"](props, _excluded3);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
+    fill: "none",
+    height: size,
+    viewBox: "0 0 48 48",
+    width: size
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0a1.044 1.044 0 012.087 0c0 .575-.469 1.044-1.044 1.044a1.045 1.045 0 01-1.043-1.044zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.174a1.045 1.045 0 01-1.044-1.044 1.044 1.044 0 111.044 1.044zm.265 8.695c-2.175 2.432-5.314 3.826-8.613 3.826a11.59 11.59 0 01-8.615-3.827 1.043 1.043 0 10-1.553 1.394A13.677 13.677 0 0024 35.478c3.892 0 7.599-1.648 10.17-4.521a1.043 1.043 0 10-1.557-1.392z",
+      fill: color
+    })]
+  }));
+};
+GoodSmiley.defaultProps = {
+  color: "currentColor",
+  size: 24,
+  strokeWidth: "1.5"
+};
+var Drag = function Drag(props) {
+  var size = props.size,
+    color = props.color,
+    other = _objectWithoutProperties__default["default"](props, _excluded4);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
+    fill: "none",
+    height: size,
+    viewBox: "0 0 24 24",
+    width: size
+  }, other), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("g", {
+      clipPath: "url(#clip0_6290_43)",
+      fill: color,
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      children: /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M8 12a1 1 0 102 0 1 1 0 00-2 0zM8 18a1 1 0 102 0 1 1 0 00-2 0zM8 6a1 1 0 102 0 1 1 0 00-2 0zM14 12a1 1 0 102 0 1 1 0 00-2 0zM14 18a1 1 0 102 0 1 1 0 00-2 0zM14 6a1 1 0 102 0 1 1 0 00-2 0z"
+      })
+    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
+      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
+        id: "clip0_6290_43",
+        children: /*#__PURE__*/jsxRuntime.jsx("path", {
+          d: "M0 0H24V24H0z",
+          fill: color
+        })
+      })
+    })]
+  }));
+};
+Drag.defaultProps = {
+  color: "currentColor",
+  size: 24,
+  strokeWidth: "1.5"
+};
+
 var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
   var allQuestionKinds = _ref.allQuestionKinds,
     item = _ref.item;
@@ -1076,6 +1206,19 @@ var FILE_GROUPS = [{
   label: i18next.t("neetoForm.fileTypes.audioVideo"),
   name: FILE_TYPES.AUDIO_VIDEO
 }];
+var RATING_OPTIONS = [{
+  icon: GoodSmiley,
+  name: "highestRatingLabel",
+  color: "#00ba88"
+}, {
+  icon: OkaySmiley,
+  name: "averageRatingLabel",
+  color: "#f3cd82"
+}, {
+  icon: BadSmiley,
+  name: "lowestRatingLabel",
+  color: "#f56a58"
+}];
 
 var NAME$1 = QUESTION_TYPES.NAME,
   PHONE$1 = QUESTION_TYPES.PHONE,
@@ -1434,121 +1577,6 @@ var Overview = function Overview(_ref) {
   });
 };
 
-var _excluded$c = ["size", "color"],
-  _excluded2 = ["size", "color"],
-  _excluded3 = ["size", "color"],
-  _excluded4 = ["size", "color"];
-function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BadSmiley = function BadSmiley(props) {
-  var size = props.size,
-    color = props.color,
-    other = _objectWithoutProperties__default["default"](props, _excluded$c);
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
-    fill: "none",
-    height: size,
-    viewBox: "0 0 48 48",
-    width: size
-  }, other), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24c13.234 0 24-10.767 24-24S37.234 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.082 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0c0-.575.468-1.044 1.043-1.044s1.044.469 1.044 1.044c0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 010-2.087 1.045 1.045 0 010 2.087zM24 29.218a13.677 13.677 0 00-10.168 4.52 1.043 1.043 0 101.553 1.394A11.587 11.587 0 0124 31.305c3.3 0 6.44 1.394 8.614 3.826a1.045 1.045 0 001.473.082 1.044 1.044 0 00.082-1.473c-2.57-2.874-6.277-4.523-10.169-4.523z",
-      fill: color
-    })]
-  }));
-};
-BadSmiley.defaultProps = {
-  color: "currentColor",
-  size: 24,
-  strokeWidth: "1.5"
-};
-var OkaySmiley = function OkaySmiley(props) {
-  var size = props.size,
-    color = props.color,
-    other = _objectWithoutProperties__default["default"](props, _excluded2);
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
-    fill: "none",
-    height: size,
-    viewBox: "0 0 48 48",
-    width: size
-  }, other), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M15.652 22.956a3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13zm0-4.174c.575 0 1.044.469 1.044 1.044 0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043c0-.575.468-1.044 1.043-1.044zm16.696-2.086a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 01-1.044-1.043c0-.575.469-1.044 1.044-1.044a1.044 1.044 0 010 2.087zm2.087 8.349h-20.87a1.044 1.044 0 000 2.086h20.87a1.044 1.044 0 000-2.086z",
-      fill: color
-    })]
-  }));
-};
-OkaySmiley.defaultProps = {
-  color: "currentColor",
-  size: 24,
-  strokeWidth: "1.5"
-};
-var GoodSmiley = function GoodSmiley(props) {
-  var size = props.size,
-    color = props.color,
-    other = _objectWithoutProperties__default["default"](props, _excluded3);
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
-    fill: "none",
-    height: size,
-    viewBox: "0 0 48 48",
-    width: size
-  }, other), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0a1.044 1.044 0 012.087 0c0 .575-.469 1.044-1.044 1.044a1.045 1.045 0 01-1.043-1.044zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.174a1.045 1.045 0 01-1.044-1.044 1.044 1.044 0 111.044 1.044zm.265 8.695c-2.175 2.432-5.314 3.826-8.613 3.826a11.59 11.59 0 01-8.615-3.827 1.043 1.043 0 10-1.553 1.394A13.677 13.677 0 0024 35.478c3.892 0 7.599-1.648 10.17-4.521a1.043 1.043 0 10-1.557-1.392z",
-      fill: color
-    })]
-  }));
-};
-GoodSmiley.defaultProps = {
-  color: "currentColor",
-  size: 24,
-  strokeWidth: "1.5"
-};
-var Drag = function Drag(props) {
-  var size = props.size,
-    color = props.color,
-    other = _objectWithoutProperties__default["default"](props, _excluded4);
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread$y(_objectSpread$y({
-    fill: "none",
-    height: size,
-    viewBox: "0 0 24 24",
-    width: size
-  }, other), {}, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("g", {
-      clipPath: "url(#clip0_6290_43)",
-      fill: color,
-      stroke: color,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "1.5",
-      children: /*#__PURE__*/jsxRuntime.jsx("path", {
-        d: "M8 12a1 1 0 102 0 1 1 0 00-2 0zM8 18a1 1 0 102 0 1 1 0 00-2 0zM8 6a1 1 0 102 0 1 1 0 00-2 0zM14 12a1 1 0 102 0 1 1 0 00-2 0zM14 18a1 1 0 102 0 1 1 0 00-2 0zM14 6a1 1 0 102 0 1 1 0 00-2 0z"
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("defs", {
-      children: /*#__PURE__*/jsxRuntime.jsx("clipPath", {
-        id: "clip0_6290_43",
-        children: /*#__PURE__*/jsxRuntime.jsx("path", {
-          d: "M0 0H24V24H0z",
-          fill: color
-        })
-      })
-    })]
-  }));
-};
-Drag.defaultProps = {
-  color: "currentColor",
-  size: 24,
-  strokeWidth: "1.5"
-};
-
 var validateEditorContent = function validateEditorContent(editorRef) {
   return function () {
     var _editorRef$current;
@@ -2080,7 +2108,7 @@ var Editor = function Editor() {
   });
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "w-full cursor-auto",
-    children: /*#__PURE__*/jsxRuntime.jsx(neetoEditor.Editor, {
+    children: /*#__PURE__*/jsxRuntime.jsx(NeetoEditor__default["default"], {
       required: true,
       error: touched ? error : "",
       id: "editor",
@@ -2129,31 +2157,27 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
 
 var FieldCode = reactUtils.withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    children: /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
-      required: true,
-      label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
-      name: "fieldCode",
-      helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
-        i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
-        components: {
-          Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
-            className: "text-xs",
-            href: FIELD_CODE_DOC,
-            style: "link",
-            target: "_blank"
-          })
-        }
-      }),
-      labelProps: {
-        helpIconProps: {
-          icon: neetoIcons.Info,
-          className: "cursor-pointer",
-          onClick: function onClick() {
-            return window.open(FIELD_CODE_DOC, "_blank");
+  return /*#__PURE__*/jsxRuntime.jsx(Accordion__default["default"], {
+    className: "neeto-form-nano-advanced-properties-accordion",
+    "data-cy": "advanced-properties-card",
+    children: /*#__PURE__*/jsxRuntime.jsx(Accordion__default["default"].Item, {
+      title: t("neetoForm.common.advancedProperties"),
+      children: /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
+        required: true,
+        label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
+        name: "fieldCode",
+        helpText: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
+          components: {
+            Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              className: "text-xs",
+              href: FIELD_CODE_DOC,
+              style: "link",
+              target: "_blank"
+            })
           }
-        }
-      }
+        })
+      })
     })
   });
 });
@@ -2196,19 +2220,28 @@ var Form$1 = function Form(_ref) {
   var shouldShowPlaceholder = ramda.includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
   var hasAdditionalData = ramda.includes(kind, QUESTIONS_WITH_ADDITIONAL_DATA);
   var shouldShowFieldCode = enableFieldCode && !ramda.includes(kind, QUESTIONS_WITHOUT_FIELD_CODE);
-  var handleKindChange = function handleKindChange(_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value;
+  var handleKindChange = function handleKindChange(option) {
+    var data = buildQuestionData(option);
+    updateFormState(data);
+  };
+  var buildQuestionData = function buildQuestionData(option) {
+    if (ramda.isNil(option)) {
+      return INITIAL_VALUES;
+    }
+    var label = option.label,
+      value = option.value;
     var kind = extractKindFromOption(value);
     var questionKind = getQuestionKind(availableQuestionKinds, {
       type: kind,
       label: label
     });
-    var data = createFieldData({
+    return createFieldData({
       kind: questionKind,
       isRequired: isRequired,
       questions: questions
     });
+  };
+  var updateFormState = function updateFormState(data) {
     setValues(data);
     setErrors({});
     setTouched({});
@@ -2249,11 +2282,7 @@ var Form$1 = function Form(_ref) {
           dataCy: "settings-card",
           title: t("neetoForm.common.settings"),
           children: /*#__PURE__*/jsxRuntime.jsx(RequiredSwitch, {})
-        }), shouldShowFieldCode && /*#__PURE__*/jsxRuntime.jsx(Block, {
-          dataCy: "advanced-properties-card",
-          title: t("neetoForm.common.advancedProperties"),
-          children: /*#__PURE__*/jsxRuntime.jsx(FieldCode, {})
-        })]
+        }), shouldShowFieldCode && /*#__PURE__*/jsxRuntime.jsx(FieldCode, {})]
       })]
     })
   });
@@ -2277,7 +2306,7 @@ var formValidationSchema = yup__namespace.object().shape({
   })),
   label: yup__namespace.string().when("kind", function (kind, schema) {
     return ramda.includes(kind, RICH_TEXT_QUESTIONS) ? schema.test("required", richTextFieldMissingErrorMessage(kind), function (value) {
-      return !neetoEditor.isEditorEmpty(value);
+      return !utils$1.isEditorEmpty(value);
     }) : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question"));
   }),
   fieldCode: yup__namespace.string().trim().notOneOf(RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
@@ -2456,6 +2485,7 @@ var FileGroup = function FileGroup(_ref) {
     checked: checked,
     label: label,
     name: name,
+    "data-cy": "neeto-form-engine-file-type-".concat(name),
     id: name,
     onChange: handleAllowedFileTypesChange
   });
@@ -2634,6 +2664,7 @@ var Options = function Options(_ref) {
               var _option$id;
               return !option._destroy && /*#__PURE__*/jsxRuntime.jsxs("div", {
                 className: "flex items-start gap-1",
+                "data-cy": "neeto-form-engine-option-".concat(index),
                 children: [/*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
                   required: true,
                   disabled: freezeOptions,
@@ -2662,6 +2693,7 @@ var Options = function Options(_ref) {
           }), !freezeOptions && /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "mt-3 w-full",
             children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              "data-cy": "neeto-form-engine-add-option-button",
               icon: neetoIcons.Plus,
               iconPosition: "left",
               size: "small",
@@ -2690,30 +2722,22 @@ var Rating$2 = function Rating() {
     className: "flex flex-col",
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "w-full",
-      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex gap-6",
-        children: [/*#__PURE__*/jsxRuntime.jsxs(RatingItem, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(GoodSmiley, {
-            color: "#00ba88",
-            size: 48
-          }), /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
-            name: "highestRatingLabel"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs(RatingItem, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(OkaySmiley, {
-            color: "#f3cd82",
-            size: 48
-          }), /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
-            name: "averageRatingLabel"
-          })]
-        }), /*#__PURE__*/jsxRuntime.jsxs(RatingItem, {
-          children: [/*#__PURE__*/jsxRuntime.jsx(BadSmiley, {
-            color: "#f56a58",
-            size: 48
-          }), /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
-            name: "lowestRatingLabel"
-          })]
-        })]
+        children: RATING_OPTIONS.map(function (_ref2) {
+          var Icon = _ref2.icon,
+            name = _ref2.name,
+            color = _ref2.color;
+          return /*#__PURE__*/jsxRuntime.jsxs(RatingItem, {
+            children: [/*#__PURE__*/jsxRuntime.jsx(Icon, {
+              color: color,
+              size: 48
+            }), /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
+              name: name,
+              "data-cy": "neeto-form-engine-".concat(neetoCist.hyphenate(name))
+            })]
+          }, name);
+        })
       })
     })
   });
@@ -2734,6 +2758,7 @@ var StarRating$2 = function StarRating() {
       className: "flex space-x-4",
       children: [/*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
         className: "w-1/2",
+        "data-cy": "neeto-form-engine-star-rating-min-value",
         label: t("neetoForm.common.start"),
         name: "minValue",
         options: STAR_RATING_MIN_VALUE_OPTIONS,
@@ -2742,6 +2767,7 @@ var StarRating$2 = function StarRating() {
         }
       }), /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
         className: "w-1/2",
+        "data-cy": "neeto-form-engine-star-rating-max-value",
         label: t("neetoForm.common.end"),
         name: "maxValue",
         options: STAR_RATING_MAX_VALUE_OPTIONS,
@@ -2759,6 +2785,7 @@ var StarRating$2 = function StarRating() {
           IconType = _ref2[1];
         var isActive = name === iconType;
         return /*#__PURE__*/jsxRuntime.jsx("div", {
+          "data-cy": "neeto-form-engine-rating-icon-".concat(name),
           className: classnames__default["default"]("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", {
             "neeto-ui-text-gray-800 neeto-ui-bg-gray-200": !isActive,
             "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
@@ -2868,6 +2895,7 @@ var AddQuestion = reactUtils.withT(function (_ref) {
     content: (disabledAddButtonTooltipProps === null || disabledAddButtonTooltipProps === void 0 ? void 0 : disabledAddButtonTooltipProps.content) || t("neetoForm.questions.common.primaryPanel.noQuestionLeft"),
     children: /*#__PURE__*/jsxRuntime.jsx("span", {
       children: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+        "data-cy": "neeto-form-engine-add-question",
         disabled: isDisabled,
         icon: neetoIcons.Plus,
         iconPosition: "left",
@@ -3171,31 +3199,22 @@ var BuildForm = function BuildForm(_ref) {
     isReordering = _useReorderQuestions.isPending;
   var _useFetchQuestions = useFetchQuestions({
       formId: id,
-      language: selectedLanguage,
-      placeholderData: {
-        isQuestionsLoading: true,
-        questions: [{
-          label: "",
-          kind: "text",
-          nodeId: "1"
-        }, {
-          label: "",
-          kind: "email",
-          nodeId: "2"
-        }]
-      }
+      language: selectedLanguage
     }),
     data = _useFetchQuestions.data,
-    isLoading = _useFetchQuestions.isLoading;
+    isLoading = _useFetchQuestions.isLoading,
+    isQuestionsPending = _useFetchQuestions.isPending;
   var _ref2 = data || QUESTIONS_INITIAL_VALUE,
     isFormEnabled = _ref2.enabled,
     savedTitle = _ref2.title,
     questions = _ref2.questions,
     isQuestionsLoading = _ref2.isQuestionsLoading;
   React$2.useEffect(function () {
-    onUpdate === null || onUpdate === void 0 || onUpdate(data);
+    if (data) {
+      onUpdate === null || onUpdate === void 0 || onUpdate(data);
+    }
   }, [data]);
-  if (isLoading || showLoader && isQuestionsLoading) {
+  if (isLoading || showLoader && isQuestionsLoading && !isQuestionsPending) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center py-6",
       children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
@@ -3279,7 +3298,7 @@ var BuildForm = function BuildForm(_ref) {
           }
         }));
       }
-    }), isQuestionsLoading && /*#__PURE__*/jsxRuntime.jsx("div", {
+    }), isQuestionsLoading && !isQuestionsPending && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-ui-bg-white absolute inset-0 flex items-center justify-center",
       children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
     })]
@@ -3660,7 +3679,7 @@ var validateMultiEmailField = function validateMultiEmailField(_ref11) {
   return schema;
 };
 var editorHasValue = function editorHasValue(content) {
-  return !neetoEditor.isEditorEmpty(content);
+  return !utils$1.isEditorEmpty(content);
 };
 var validateRichTextField = function validateRichTextField(_ref12) {
   var isRequired = _ref12.isRequired;
@@ -13542,6 +13561,7 @@ var Choices = function Choices(_ref) {
   var Component = isCheckBox ? Checkbox__default["default"] : Radio__default["default"].Item;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
+    "data-cy": "".concat(neetoCist.hyphenate(label), "-select-container-wrapper"),
     children: [/*#__PURE__*/jsxRuntime.jsx("label", {
       className: "neeto-form-engine-label",
       children: label
@@ -13697,7 +13717,7 @@ var Rating = function Rating(_ref) {
   };
   var render = function render() {
     var labels = [highestRatingLabel, averageRatingLabel, lowestRatingLabel];
-    return RATING_OPTIONS.map(function (_ref2, index) {
+    return RATING_OPTIONS$1.map(function (_ref2, index) {
       var Icon = _ref2.icon,
         modifier = _ref2.modifier,
         rating = _ref2.value;
@@ -13810,7 +13830,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
         var field = _ref2.field,
           form = _ref2.form,
           meta = _ref2.meta;
-        return /*#__PURE__*/jsxRuntime.jsx(neetoEditor.Editor, _objectSpread$8({
+        return /*#__PURE__*/jsxRuntime.jsx(NeetoEditor__default["default"], _objectSpread$8({
           className: "neeto-form-engine-rich-text-input",
           error: meta.touched ? meta.error : "",
           initialValue: field.value,
@@ -13967,7 +13987,7 @@ var TermsField = function TermsField(_ref) {
         })), {}, {
           checked: field.value,
           error: meta.touched ? meta.error : "",
-          children: /*#__PURE__*/jsxRuntime.jsx(neetoEditor.EditorContent, {
+          children: /*#__PURE__*/jsxRuntime.jsx(EditorContent__default["default"], {
             content: label
           })
         }))
@@ -14033,7 +14053,7 @@ var TextField = function TextField(_ref) {
 var _QUESTION_TO_COMPONEN;
 var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
-  return /*#__PURE__*/jsxRuntime.jsx(neetoEditor.EditorContent, {
+  return /*#__PURE__*/jsxRuntime.jsx(EditorContent__default["default"], {
     content: fieldWithFallback(question, "label", true)
   });
 }), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty__default["default"](_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _QUESTION_TO_COMPONEN);
@@ -14369,15 +14389,13 @@ var ExternalForm = function ExternalForm(_ref) {
   var _useForm = useForm({
       formId: formId,
       language: language,
-      enabled: !preview,
-      placeholderData: {
-        isQuestionsLoading: true
-      }
+      enabled: !preview
     }),
     _useForm$data = _useForm.data,
     form = _useForm$data === void 0 ? {
       title: "",
-      questions: []
+      questions: [],
+      isQuestionsLoading: true
     } : _useForm$data,
     isLoading = _useForm.isLoading;
   var _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, formId, language]),
@@ -17114,7 +17132,7 @@ var Submission = function Submission(_ref2) {
   var renderSubmittedValue = function renderSubmittedValue(kind, value) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value:
-        return /*#__PURE__*/jsxRuntime.jsx(neetoEditor.EditorContent, {
+        return /*#__PURE__*/jsxRuntime.jsx(EditorContent__default["default"], {
           content: getEditorContent(getValue({
             value: value,
             kind: kind