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

package/README.md

@@ -78,6 +78,13 @@ The engine adds setup for form on backend and allows us to attach forms to any m
 
 ### Customizability
 
+  #### `NeetoFormEngine::Customizable::Forms::Createable`
+  The engine supports customizing the default behavior of `Forms::CreateService` by overriding the supported methods in this concern.
+
+  #### Available methods:
+  1. `create_default_questions!`: If you want to use custom logic to create default questions, you can specify them using this method. `owner`, `form` and `params` will be available globally.
+  2. `additional_form_params`: If you want to include additional attributes while creating forms, you can specify them using this method. It takes one argument `params` which will be the form parameters passed from the front-end.
+
   #### `NeetoFormEngine::Customizable::Questions::Createable`
   The engine supports customizing the default behavior of `Questions::CreateService` by overriding the supported methods in this concern.
 
@@ -91,6 +98,15 @@ The engine adds setup for form on backend and allows us to attach forms to any m
   #### Available constants:
   1. `EXCLUDED_UPDATE_PARAMS`: If you have included extra parameters other than `kind` for additional use cases that are not valid entity attributes, they need to be specified as `EXCLUDED_UPDATE_PARAMS`.
 
+  #### `NeetoFormEngine::Customizable::QuestionResponses::Createable`
+  The engine supports customizing the default behavior of `QuestionResponses::CreateService` by overriding the supported methods in this concern.
+
+  #### Available methods:
+  1. `additional_initialization_logic`: If you want to initialize additional variables, you can specify them using this method.
+  2. `additional_process_actions`: If you want to perform any additional actions outside the transaction block, you can override this method.
+  3. `additional_create_submission_actions`: You can use this method to specify any additional logic that needs to be executed after creating submissions.
+  4. `additional_create_response_actions`: If you want to perform some additional actions on each of the responses, you can specify them using this method. This method receives `question` and `response_param` passed from the front-end as arguments.
+
 ## Frontend package
 The frontend package allows us to create forms across neeto products.
 

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,6 +36,7 @@ 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 Button$1 = require('@bigbinary/neetoui/Button');
 var Accordion = require('@bigbinary/neetoui/Accordion');
@@ -52,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');
@@ -108,6 +110,7 @@ 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);
@@ -122,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);
@@ -625,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));
@@ -952,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];
@@ -989,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) {
@@ -2095,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",
@@ -2293,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) {
@@ -3186,22 +3199,11 @@ 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,
@@ -3212,7 +3214,7 @@ var BuildForm = function BuildForm(_ref) {
       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"], {})
@@ -3296,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"], {})
     })]
@@ -3677,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;
@@ -13828,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,
@@ -13985,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
           })
         }))
@@ -14051,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);
@@ -14387,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]),
@@ -17132,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