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

package/dist/index.js

@@ -1,13 +1,13 @@
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React$2 from 'react';
 import React__default, { useState, createElement, useRef, useEffect, forwardRef, useImperativeHandle, Fragment as Fragment$1, useReducer, useCallback, useMemo, createContext, useContext, useLayoutEffect } from 'react';
+import { useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import classnames from 'classnames';
 import { useFormikContext, useField, FieldArray, Form as Form$3, Formik, Field, FastField } from 'formik';
 import { filterNonNull, noop as noop$1, findBy, toLabelAndValue, isPresent as isPresent$1, truncate, slugify, filterBy, hyphenate, removeBy, isNotPresent, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { buildUrl, showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { assoc, mergeLeft, compose, isEmpty, trim, useWith, path, split, isNotNil, either, isNil, values, equals, modify, prop, range, includes, __, reduce, reject, keys, pick, omit, pluck, without, difference, pipe as pipe$1, last, not, toLower, map, clamp as clamp$2, identity, filter as filter$1 } from 'ramda';
-import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$3 } from 'i18next';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -34,12 +34,13 @@ import Form$2 from '@bigbinary/neetoui/formik/Form';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import Switch from '@bigbinary/neetoui/formik/Switch';
-import { Info, Delete, Plus, Check, Close, FileGeneric } from '@bigbinary/neeto-icons';
 import Button$1 from '@bigbinary/neetoui/Button';
+import Accordion from '@bigbinary/neetoui/Accordion';
 import Input from '@bigbinary/neetoui/formik/Input';
 import * as yup from 'yup';
 import Checkbox$1 from '@bigbinary/neetoui/formik/Checkbox';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
+import { Delete, Plus, Check, Close, FileGeneric } from '@bigbinary/neeto-icons';
 import Label from '@bigbinary/neetoui/Label';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
@@ -553,8 +554,12 @@ var handleQuestionMutationSuccess = function handleQuestionMutationSuccess(_ref)
     onSuccess = _ref.onSuccess;
   var _args = _slicedToArray$2(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], assoc("questions", data.questions));
   queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(formId), language], assoc("questions", data.questions));
   onSuccess === null || onSuccess === void 0 || onSuccess.apply(void 0, _toConsumableArray$1(args));
@@ -573,10 +578,12 @@ var useForm = function useForm(_ref) {
     _ref$language = _ref.language,
     language = _ref$language === void 0 ? i18next.resolvedLanguage : _ref$language,
     options = _objectWithoutProperties$1(_ref, _excluded$d);
-  return useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language], function () {
-    return neetoFormApi.getPublicQuestions(formId, language);
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language],
+    queryFn: function queryFn() {
+      return neetoFormApi.getPublicQuestions(formId, language);
+    },
+    placeholderData: keepPreviousData
   }, options));
 };
 var useFetchQuestions = function useFetchQuestions(_ref2) {
@@ -584,24 +591,29 @@ var useFetchQuestions = function useFetchQuestions(_ref2) {
     _ref2$language = _ref2.language,
     language = _ref2$language === void 0 ? i18next.resolvedLanguage : _ref2$language,
     options = _objectWithoutProperties$1(_ref2, _excluded2$1);
-  return useQuery([QUERY_KEYS.QUESTIONS, formId, language], function () {
-    return neetoFormApi.getQuestions(formId, language);
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.QUESTIONS, formId, language],
+    queryFn: function queryFn() {
+      return neetoFormApi.getQuestions(formId, language);
+    },
+    placeholderData: keepPreviousData
   }, options));
 };
 var useCreateForm = function useCreateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next.resolvedLanguage;
   var queryClient = useQueryClient();
-  return useMutation(neetoFormApi.createForm, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return 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$1(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);
     }
   }));
@@ -609,11 +621,13 @@ var useCreateForm = function useCreateForm(options) {
 var useUpdateForm = function useUpdateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next.resolvedLanguage;
   var queryClient = useQueryClient();
-  return useMutation(function (_ref3) {
-    var id = _ref3.id,
-      values = _ref3.values;
-    return neetoFormApi.updateForm(id, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return 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], assoc("title", data.title));
@@ -621,9 +635,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);
     }
   }));
@@ -631,9 +651,11 @@ var useUpdateForm = function useUpdateForm(options) {
 var useCreateQuestion = function useCreateQuestion(formId, language) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var queryClient = useQueryClient();
-  return useMutation(function (payload) {
-    return neetoFormApi.createQuestion(formId, filterNonNull(payload));
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(payload) {
+      return neetoFormApi.createQuestion(formId, filterNonNull(payload));
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -651,15 +673,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 = useQueryClient();
-  return useMutation(function (_ref5) {
-    var questionId = _ref5.questionId,
-      payload = _ref5.payload;
-    return neetoFormApi.updateQuestion({
-      formId: formId,
-      questionId: questionId,
-      payload: filterNonNull(payload)
-    });
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(_ref5) {
+      var questionId = _ref5.questionId,
+        payload = _ref5.payload;
+      return neetoFormApi.updateQuestion({
+        formId: formId,
+        questionId: questionId,
+        payload: filterNonNull(payload)
+      });
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -677,9 +701,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 = useQueryClient();
-  return useMutation(function (questionId) {
-    return neetoFormApi.deleteQuestion(formId, questionId);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return 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];
@@ -697,9 +723,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 = useQueryClient();
-  return useMutation(function (payload) {
-    return neetoFormApi.reorderQuestions(formId, filterNonNull(payload));
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return useMutation(_objectSpread$z(_objectSpread$z({
+    mutationFn: function mutationFn(payload) {
+      return neetoFormApi.reorderQuestions(formId, filterNonNull(payload));
+    }
+  }, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
         args[_key4] = arguments[_key4];
@@ -721,13 +749,15 @@ var useForms = function useForms() {
     _ref6$pageSize = _ref6.pageSize,
     pageSize = _ref6$pageSize === void 0 ? DEFAULT_PAGE_SIZE : _ref6$pageSize,
     options = _objectWithoutProperties$1(_ref6, _excluded3$1);
-  return useQuery([QUERY_KEYS.FORMS, page], function () {
-    return neetoFormApi.getForms({
-      page: page,
-      pageSize: pageSize
-    });
-  }, _objectSpread$z({
-    keepPreviousData: true
+  return useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.FORMS, page],
+    queryFn: function queryFn() {
+      return neetoFormApi.getForms({
+        page: page,
+        pageSize: pageSize
+      });
+    },
+    placeholderData: keepPreviousData
   }, options));
 };
 var useDeleteForm = function useDeleteForm(options) {
@@ -751,19 +781,23 @@ var useSubmission = function useSubmission(_ref11) {
   var formId = _ref11.formId,
     submissionId = _ref11.submissionId,
     options = _objectWithoutProperties$1(_ref11, _excluded5);
-  return useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
-    return neetoFormApi.getPublicSubmission(formId, submissionId);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
-    keepPreviousData: true
-  }));
+  return useQuery(_objectSpread$z({
+    queryKey: [QUERY_KEYS.SUBMISSION, formId, submissionId],
+    queryFn: function queryFn() {
+      return neetoFormApi.getPublicSubmission(formId, submissionId);
+    },
+    placeholderData: keepPreviousData
+  }, options));
 };
 var useCreateSubmission = function useCreateSubmission(options) {
   var queryClient = useQueryClient();
-  return useMutation(function (_ref12) {
-    var formId = _ref12.formId,
-      values = _ref12.values;
-    return neetoFormApi.submitPublicForm(formId, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return 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++) {
@@ -771,30 +805,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 = useQueryClient();
-  return useMutation(function (_ref13) {
-    var formId = _ref13.formId,
-      values = _ref13.values;
-    return neetoFormApi.updatePublicSubmission(formId, values);
-  }, _objectSpread$z(_objectSpread$z({}, options), {}, {
+  return 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);
     }
   }));
@@ -1304,7 +1350,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 = equals(selectedQuestionIndex, questions.length);
@@ -1924,6 +1970,19 @@ var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
     setEditorContent(initialValue);
     setFormData(modify("richTextFieldsToReset", without([fieldCode])));
   }
+  var _useFetchQuestions = useFetchQuestions({
+      formId: formId,
+      language: language
+    }),
+    data = _useFetchQuestions.data;
+  useEffect(function () {
+    if (!data) return;
+    var pathArray = fieldName.split(".").map(function (part) {
+      var parsedPart = parseInt(part);
+      return isNaN(parsedPart) ? part : parsedPart;
+    });
+    setEditorContent(path(pathArray, data));
+  }, [data]);
   useEffect(function () {
     if (initialStateRef.current["language"] !== language) {
       initialStateRef.current["language"] = language;
@@ -1935,17 +1994,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(path(pathArray, data));
-    }
-  });
 };
 
 var Editor = function Editor() {
@@ -2026,31 +2074,27 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
 
 var FieldCode = withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/jsx("div", {
-    children: /*#__PURE__*/jsx(InputWithMaxLength, {
-      required: true,
-      label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
-      name: "fieldCode",
-      helpText: /*#__PURE__*/jsx(Trans, {
-        i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
-        components: {
-          Link: /*#__PURE__*/jsx(Button$1, {
-            className: "text-xs",
-            href: FIELD_CODE_DOC,
-            style: "link",
-            target: "_blank"
-          })
-        }
-      }),
-      labelProps: {
-        helpIconProps: {
-          icon: Info,
-          className: "cursor-pointer",
-          onClick: function onClick() {
-            return window.open(FIELD_CODE_DOC, "_blank");
+  return /*#__PURE__*/jsx(Accordion, {
+    className: "neeto-form-nano-advanced-properties-accordion",
+    "data-cy": "advanced-properties-card",
+    children: /*#__PURE__*/jsx(Accordion.Item, {
+      title: t("neetoForm.common.advancedProperties"),
+      children: /*#__PURE__*/jsx(InputWithMaxLength, {
+        required: true,
+        label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
+        name: "fieldCode",
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
+          components: {
+            Link: /*#__PURE__*/jsx(Button$1, {
+              className: "text-xs",
+              href: FIELD_CODE_DOC,
+              style: "link",
+              target: "_blank"
+            })
           }
-        }
-      }
+        })
+      })
     })
   });
 });
@@ -2155,11 +2199,7 @@ var Form$1 = function Form(_ref) {
           dataCy: "settings-card",
           title: t("neetoForm.common.settings"),
           children: /*#__PURE__*/jsx(RequiredSwitch, {})
-        }), shouldShowFieldCode && /*#__PURE__*/jsx(Block, {
-          dataCy: "advanced-properties-card",
-          title: t("neetoForm.common.advancedProperties"),
-          children: /*#__PURE__*/jsx(FieldCode, {})
-        })]
+        }), shouldShowFieldCode && /*#__PURE__*/jsx(FieldCode, {})]
       })]
     })
   });
@@ -2233,7 +2273,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;
@@ -2301,7 +2341,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;
@@ -3073,13 +3113,10 @@ var BuildForm = function BuildForm(_ref) {
       onSuccess: 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: [{
@@ -3093,22 +3130,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;
+  useEffect(function () {
+    if (data) {
+      onUpdate === null || onUpdate === void 0 || onUpdate(data);
+    }
+  }, [data]);
   if (isLoading || showLoader && isQuestionsLoading) {
     return /*#__PURE__*/jsx("div", {
       className: "flex h-full w-full items-center justify-center py-6",
       children: /*#__PURE__*/jsx(PageLoader, {})
     });
   }
-  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)
@@ -3130,8 +3172,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 () {
@@ -3148,9 +3190,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__*/jsx(Form, _objectSpread$n(_objectSpread$n({}, _objectSpread$n(_objectSpread$n({}, formDomProps), {}, {
           additionalActionOptions: additionalActionOptions,
           additionalQuestionKindPattern: additionalQuestionKindPattern,
@@ -13447,6 +13489,7 @@ var Choices = function Choices(_ref) {
   var Component = isCheckBox ? Checkbox : Radio.Item;
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
+    "data-cy": "".concat(hyphenate(label), "-select-container-wrapper"),
     children: [/*#__PURE__*/jsx("label", {
       className: "neeto-form-engine-label",
       children: label
@@ -14160,7 +14203,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:
@@ -14271,9 +14316,7 @@ var ExternalForm = function ExternalForm(_ref) {
   };
   var _useForm = useForm({
       formId: formId,
-      preview: preview,
       language: language,
-      onError: Toastr.error,
       enabled: !preview,
       placeholderData: {
         isQuestionsLoading: true
@@ -17204,8 +17247,6 @@ var UrlBuilder = function UrlBuilder(_ref) {
   };
   var _useForm = useForm({
       formId: formId,
-      preview: false,
-      onError: Toastr.error,
       placeholderData: {
         isQuestionsLoading: true
       }