@bigbinary/neeto-form-frontend 2.1.1 → 2.2.0-beta2

package/dist/index.cjs.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
 var React$2 = require('react');
+var reactQuery = require('@tanstack/react-query');
 var classnames = require('classnames');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var ramda = require('ramda');
-var reactQuery = require('react-query');
 var i18next = require('i18next');
 var _objectWithoutProperties$1 = require('@babel/runtime/helpers/objectWithoutProperties');
 var jsxRuntime = require('react/jsx-runtime');
@@ -37,12 +37,13 @@ var Form$2 = require('@bigbinary/neetoui/formik/Form');
 var Select = require('@bigbinary/neetoui/formik/Select');
 var Textarea = require('@bigbinary/neetoui/formik/Textarea');
 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');
@@ -109,6 +110,7 @@ var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Textarea__default = /*#__PURE__*/_interopDefaultLegacy(Textarea);
 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);
@@ -622,8 +624,12 @@ var handleQuestionMutationSuccess = function handleQuestionMutationSuccess(_ref)
     onSuccess = _ref.onSuccess;
   var _args = _slicedToArray__default["default"](args, 1),
     data = _args[0];
-  queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, formId]);
-  queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(formId)]);
+  queryClient.invalidateQueries({
+    queryKey: [QUERY_KEYS.QUESTIONS, formId, language]
+  });
+  queryClient.invalidateQueries({
+    queryKey: [QUERY_KEYS.QUESTIONS, "preview/".concat(formId), language]
+  });
   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));
   onSuccess === null || onSuccess === void 0 || onSuccess.apply(void 0, _toConsumableArray__default["default"](args));
@@ -642,10 +648,12 @@ var useForm = function useForm(_ref) {
     _ref$language = _ref.language,
     language = _ref$language === void 0 ? i18next__default["default"].resolvedLanguage : _ref$language,
     options = _objectWithoutProperties__default["default"](_ref, _excluded$d);
-  return reactQuery.useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language], function () {
-    return neetoFormApi.getPublicQuestions(formId, language);
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return reactQuery.useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language],
+    queryFn: function queryFn() {
+      return neetoFormApi.getPublicQuestions(formId, language);
+    },
+    placeholderData: reactQuery.keepPreviousData
   }, options));
 };
 var useFetchQuestions = function useFetchQuestions(_ref2) {
@@ -653,24 +661,29 @@ var useFetchQuestions = function useFetchQuestions(_ref2) {
     _ref2$language = _ref2.language,
     language = _ref2$language === void 0 ? i18next__default["default"].resolvedLanguage : _ref2$language,
     options = _objectWithoutProperties__default["default"](_ref2, _excluded2$1);
-  return reactQuery.useQuery([QUERY_KEYS.QUESTIONS, formId, language], function () {
-    return neetoFormApi.getQuestions(formId, language);
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return reactQuery.useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.QUESTIONS, formId, language],
+    queryFn: function queryFn() {
+      return neetoFormApi.getQuestions(formId, language);
+    },
+    placeholderData: reactQuery.keepPreviousData
   }, options));
 };
 var useCreateForm = function useCreateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next__default["default"].resolvedLanguage;
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(neetoFormApi.createForm, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: neetoFormApi.createForm
+  }, options), {}, {
     onSuccess: function onSuccess(form) {
       var _options$onSuccess;
-      queryClient.setQueryData(QUERY_KEYS.QUESTIONS, function (forms) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS], function (forms) {
         return forms && [].concat(_toConsumableArray__default["default"](forms), [form]);
       });
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, form.id, language], form);
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(form.id), language], form);
-      queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(form.id), language], form), queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.FORMS]
+      });
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options, form);
     }
   }));
@@ -678,11 +691,13 @@ var useCreateForm = function useCreateForm(options) {
 var useUpdateForm = function useUpdateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next__default["default"].resolvedLanguage;
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref3) {
-    var id = _ref3.id,
-      values = _ref3.values;
-    return neetoFormApi.updateForm(id, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(_ref3) {
+      var id = _ref3.id,
+        values = _ref3.values;
+      return neetoFormApi.updateForm(id, values);
+    }
+  }, options), {}, {
     onSuccess: function onSuccess(data, _ref4) {
       var id = _ref4.id;
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], ramda.assoc("title", data.title));
@@ -690,9 +705,15 @@ var useUpdateForm = function useUpdateForm(options) {
         questions: data.questions,
         title: data.title
       }));
-      queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id)]);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.FORMS]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.QUESTIONS, id]
+      });
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.QUESTIONS, "preview/".concat(id)]
+      });
       options.onSuccess && options.onSuccess(data);
     }
   }));
@@ -700,9 +721,11 @@ var useUpdateForm = function useUpdateForm(options) {
 var useCreateQuestion = function useCreateQuestion(formId, language) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (payload) {
-    return neetoFormApi.createQuestion(formId, neetoCist.filterNonNull(payload));
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(payload) {
+      return neetoFormApi.createQuestion(formId, neetoCist.filterNonNull(payload));
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -720,15 +743,17 @@ var useCreateQuestion = function useCreateQuestion(formId, language) {
 var useUpdateQuestion = function useUpdateQuestion(formId, language) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref5) {
-    var questionId = _ref5.questionId,
-      payload = _ref5.payload;
-    return neetoFormApi.updateQuestion({
-      formId: formId,
-      questionId: questionId,
-      payload: neetoCist.filterNonNull(payload)
-    });
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(_ref5) {
+      var questionId = _ref5.questionId,
+        payload = _ref5.payload;
+      return neetoFormApi.updateQuestion({
+        formId: formId,
+        questionId: questionId,
+        payload: neetoCist.filterNonNull(payload)
+      });
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -746,9 +771,11 @@ var useUpdateQuestion = function useUpdateQuestion(formId, language) {
 var useDeleteQuestion = function useDeleteQuestion(formId, language) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (questionId) {
-    return neetoFormApi.deleteQuestion(formId, questionId);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(questionId) {
+      return neetoFormApi.deleteQuestion(formId, questionId);
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
@@ -766,9 +793,11 @@ var useDeleteQuestion = function useDeleteQuestion(formId, language) {
 var useReorderQuestions = function useReorderQuestions(formId, language) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (payload) {
-    return neetoFormApi.reorderQuestions(formId, neetoCist.filterNonNull(payload));
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(payload) {
+      return neetoFormApi.reorderQuestions(formId, neetoCist.filterNonNull(payload));
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
         args[_key4] = arguments[_key4];
@@ -790,13 +819,15 @@ var useForms = function useForms() {
     _ref6$pageSize = _ref6.pageSize,
     pageSize = _ref6$pageSize === void 0 ? constants.DEFAULT_PAGE_SIZE : _ref6$pageSize,
     options = _objectWithoutProperties__default["default"](_ref6, _excluded3$1);
-  return reactQuery.useQuery([QUERY_KEYS.FORMS, page], function () {
-    return neetoFormApi.getForms({
-      page: page,
-      pageSize: pageSize
-    });
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return reactQuery.useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.FORMS, page],
+    queryFn: function queryFn() {
+      return neetoFormApi.getForms({
+        page: page,
+        pageSize: pageSize
+      });
+    },
+    placeholderData: reactQuery.keepPreviousData
   }, options));
 };
 var useDeleteForm = function useDeleteForm(options) {
@@ -820,19 +851,23 @@ var useSubmission = function useSubmission(_ref11) {
   var formId = _ref11.formId,
     submissionId = _ref11.submissionId,
     options = _objectWithoutProperties__default["default"](_ref11, _excluded5);
-  return reactQuery.useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
-    return neetoFormApi.getPublicSubmission(formId, submissionId);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
-    keepPreviousData: true
-  }));
+  return reactQuery.useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.SUBMISSION, formId, submissionId],
+    queryFn: function queryFn() {
+      return neetoFormApi.getPublicSubmission(formId, submissionId);
+    },
+    placeholderData: reactQuery.keepPreviousData
+  }, options));
 };
 var useCreateSubmission = function useCreateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref12) {
-    var formId = _ref12.formId,
-      values = _ref12.values;
-    return neetoFormApi.submitPublicForm(formId, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(_ref12) {
+      var formId = _ref12.formId,
+        values = _ref12.values;
+      return neetoFormApi.submitPublicForm(formId, values);
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission, _data$submission2;
       for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
@@ -840,30 +875,42 @@ var useCreateSubmission = function useCreateSubmission(options) {
       }
       var data = args[0],
         formId = args[1].formId;
-      queryClient.invalidateQueries([QUERY_KEYS.SUBMISSIONS, formId]);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.SUBMISSIONS, formId]
+      });
       queryClient.setQueryData([QUERY_KEYS.SUBMISSION, formId, data === null || data === void 0 || (_data$submission = data.submission) === null || _data$submission === void 0 ? void 0 : _data$submission.id], data === null || data === void 0 ? void 0 : data.submission);
-      queryClient.invalidateQueries([QUERY_KEYS.SUBMISSION, formId, data === null || data === void 0 || (_data$submission2 = data.submission) === null || _data$submission2 === void 0 ? void 0 : _data$submission2.id]);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.SUBMISSION, formId, data === null || data === void 0 || (_data$submission2 = data.submission) === null || _data$submission2 === void 0 ? void 0 : _data$submission2.id]
+      });
       options.onSuccess && options.onSuccess.apply(options, args);
     }
   }));
 };
 var useUpdateSubmission = function useUpdateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref13) {
-    var formId = _ref13.formId,
-      values = _ref13.values;
-    return neetoFormApi.updatePublicSubmission(formId, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return reactQuery.useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(_ref13) {
+      var formId = _ref13.formId,
+        submissionId = _ref13.submissionId,
+        values = _ref13.values;
+      return neetoFormApi.updatePublicSubmission(formId, submissionId, values);
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
-      var _data$submission3;
       for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
         args[_key6] = arguments[_key6];
       }
       var data = args[0],
-        formId = args[1].formId;
-      queryClient.invalidateQueries([QUERY_KEYS.SUBMISSIONS, formId]);
-      queryClient.setQueryData([QUERY_KEYS.SUBMISSION, formId, data === null || data === void 0 || (_data$submission3 = data.submission) === null || _data$submission3 === void 0 ? void 0 : _data$submission3.id], data === null || data === void 0 ? void 0 : data.submission);
-      queryClient.invalidateQueries([QUERY_KEYS.SUBMISSION, formId, data.submission.id]);
+        _args$ = args[1],
+        formId = _args$.formId,
+        submissionId = _args$.submissionId;
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.SUBMISSIONS, formId]
+      });
+      queryClient.setQueryData([QUERY_KEYS.SUBMISSION, formId, submissionId], data === null || data === void 0 ? void 0 : data.submission);
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEYS.SUBMISSION, formId, submissionId]
+      });
       options.onSuccess && options.onSuccess.apply(options, args);
     }
   }));
@@ -1373,7 +1420,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
       }
     }),
     deleteQuestion = _useDeleteQuestion.mutate,
-    isDeleting = _useDeleteQuestion.isLoading;
+    isDeleting = _useDeleteQuestion.isPending;
   var selectNextQuestion = function selectNextQuestion(questions) {
     var selectedQuestionIndex = selectedQuestion.displayOrder;
     var wasLastQuestion = ramda.equals(selectedQuestionIndex, questions.length);
@@ -1993,6 +2040,19 @@ var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
     setEditorContent(initialValue);
     setFormData(ramda.modify("richTextFieldsToReset", ramda.without([fieldCode])));
   }
+  var _useFetchQuestions = useFetchQuestions({
+      formId: formId,
+      language: language
+    }),
+    data = _useFetchQuestions.data;
+  React$2.useEffect(function () {
+    if (!data) return;
+    var pathArray = fieldName.split(".").map(function (part) {
+      var parsedPart = parseInt(part);
+      return isNaN(parsedPart) ? part : parsedPart;
+    });
+    setEditorContent(ramda.path(pathArray, data));
+  }, [data]);
   React$2.useEffect(function () {
     if (initialStateRef.current["language"] !== language) {
       initialStateRef.current["language"] = language;
@@ -2004,17 +2064,6 @@ var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
       initialStateRef.current["value"] = value;
     }
   }, [language, value]);
-  useFetchQuestions({
-    formId: formId,
-    language: language,
-    onSuccess: function onSuccess(data) {
-      var pathArray = fieldName.split(".").map(function (part) {
-        var parsedPart = parseInt(part);
-        return isNaN(parsedPart) ? part : parsedPart;
-      });
-      setEditorContent(ramda.path(pathArray, data));
-    }
-  });
 };
 
 var Editor = function Editor() {
@@ -2095,31 +2144,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"
+            })
           }
-        }
-      }
+        })
+      })
     })
   });
 });
@@ -2224,11 +2269,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, {})]
       })]
     })
   });
@@ -2302,7 +2343,7 @@ var Add = function Add(_ref) {
       }
     }),
     createQuestion = _useCreateQuestion.mutate,
-    isCreating = _useCreateQuestion.isLoading;
+    isCreating = _useCreateQuestion.isPending;
   var handleSubmit = function handleSubmit(values) {
     if (isCreating || !isOpen) return;
     var displayOrder = question ? question.displayOrder + 1 : questions.length;
@@ -2370,7 +2411,7 @@ var Edit = function Edit(_ref) {
     language = _useBuildFormStore.selectedLanguage;
   var _useUpdateQuestion = useUpdateQuestion(question === null || question === void 0 ? void 0 : question.formId, language),
     updateQuestion = _useUpdateQuestion.mutate,
-    isUpdating = _useUpdateQuestion.isLoading;
+    isUpdating = _useUpdateQuestion.isPending;
   var handleSubmit = function handleSubmit(values, _ref2) {
     var setSubmitting = _ref2.setSubmitting;
     if (isUpdating || !isOpen) return;
@@ -3142,13 +3183,10 @@ var BuildForm = function BuildForm(_ref) {
       onSuccess: utils.showThumbsUpToastr
     }),
     reorderQuestions = _useReorderQuestions.mutate,
-    isReordering = _useReorderQuestions.isLoading;
+    isReordering = _useReorderQuestions.isPending;
   var _useFetchQuestions = useFetchQuestions({
       formId: id,
       language: selectedLanguage,
-      onSuccess: function onSuccess(data) {
-        return onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(data);
-      },
       placeholderData: {
         isQuestionsLoading: true,
         questions: [{
@@ -3162,22 +3200,27 @@ var BuildForm = function BuildForm(_ref) {
         }]
       }
     }),
-    _useFetchQuestions$da = _useFetchQuestions.data,
-    _useFetchQuestions$da2 = _useFetchQuestions$da === void 0 ? QUESTIONS_INITIAL_VALUE : _useFetchQuestions$da,
-    isFormEnabled = _useFetchQuestions$da2.enabled,
-    savedTitle = _useFetchQuestions$da2.title,
-    isQuestionsLoading = _useFetchQuestions$da2.isQuestionsLoading,
-    questions = _useFetchQuestions$da2.questions,
+    data = _useFetchQuestions.data,
     isLoading = _useFetchQuestions.isLoading;
+  var _ref2 = data || QUESTIONS_INITIAL_VALUE,
+    isFormEnabled = _ref2.enabled,
+    savedTitle = _ref2.title,
+    questions = _ref2.questions,
+    isQuestionsLoading = _ref2.isQuestionsLoading;
+  React$2.useEffect(function () {
+    if (data) {
+      onUpdate === null || onUpdate === void 0 || onUpdate(data);
+    }
+  }, [data]);
   if (isLoading || showLoader && isQuestionsLoading) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex h-full w-full items-center justify-center py-6",
       children: /*#__PURE__*/jsxRuntime.jsx(PageLoader__default["default"], {})
     });
   }
-  var handleSubmit = function handleSubmit(_ref2, _ref3) {
-    var questions = _ref2.questions;
-    var setSubmitting = _ref3.setSubmitting;
+  var handleSubmit = function handleSubmit(_ref3, _ref4) {
+    var questions = _ref3.questions;
+    var setSubmitting = _ref4.setSubmitting;
     var payload = {
       neetoFormQuestions: {
         questions: buildReorderPayload(questions)
@@ -3199,8 +3242,8 @@ var BuildForm = function BuildForm(_ref) {
   var isDeletable = isQuestionDeletable !== null && isQuestionDeletable !== void 0 ? isQuestionDeletable : function (question) {
     return !nonRemovableFields.includes(question.kind);
   };
-  var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref4) {
-    var kind = _ref4.kind;
+  var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref5) {
+    var kind = _ref5.kind;
     return requiredFields.includes(kind);
   };
   var isDisabledFieldLabel = isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : function () {
@@ -3217,9 +3260,9 @@ var BuildForm = function BuildForm(_ref) {
         questions: questions
       },
       onSubmit: handleSubmit,
-      children: function children(_ref5) {
-        var errors = _ref5.errors,
-          setFieldError = _ref5.setFieldError;
+      children: function children(_ref6) {
+        var errors = _ref6.errors,
+          setFieldError = _ref6.setFieldError;
         return /*#__PURE__*/jsxRuntime.jsx(Form, _objectSpread$n(_objectSpread$n({}, _objectSpread$n(_objectSpread$n({}, formDomProps), {}, {
           additionalActionOptions: additionalActionOptions,
           additionalQuestionKindPattern: additionalQuestionKindPattern,
@@ -13516,6 +13559,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
@@ -14229,7 +14273,9 @@ var ExternalForm = function ExternalForm(_ref) {
             }, clearLocalFormValues);
           case 17:
             data = _context.sent;
-            queryClient.invalidateQueries([QUERY_KEYS.SUBMISSION, formId, submissionId]);
+            queryClient.invalidateQueries({
+              queryKey: [QUERY_KEYS.FORM, formId, submissionId]
+            });
             _context.next = 30;
             break;
           case 21:
@@ -14340,9 +14386,7 @@ var ExternalForm = function ExternalForm(_ref) {
   };
   var _useForm = useForm({
       formId: formId,
-      preview: preview,
       language: language,
-      onError: Toastr__default["default"].error,
       enabled: !preview,
       placeholderData: {
         isQuestionsLoading: true
@@ -17273,8 +17317,6 @@ var UrlBuilder = function UrlBuilder(_ref) {
   };
   var _useForm = useForm({
       formId: formId,
-      preview: false,
-      onError: Toastr__default["default"].error,
       placeholderData: {
         isQuestionsLoading: true
       }