@bigbinary/neeto-form-frontend 1.3.0 → 1.3.3

package/dist/index.js

@@ -4,8 +4,8 @@ import { useFormikContext, useField, FieldArray, Form as Form$1, Formik, Field,
 import { noop as noop$4, findBy, slugify, toLabelAndValue, filterBy, isNotEmpty, truncate, humanize, removeBy, isPresent as isPresent$1, isNotPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { Tooltip, Dropdown as Dropdown$2, Alert, Typography, Button as Button$1, Label, Checkbox as Checkbox$1, Toastr, MultiEmailInput, DatePicker, Input as Input$2, Radio as Radio$1, Select as Select$1, Textarea as Textarea$1, Spinner as Spinner$2 } from '@bigbinary/neetoui';
-import { assoc, mergeLeft, prop, isEmpty, path, range, values, compose as compose$1, trim, useWith, split, either, isNil, equals, difference, reject, pluck, keys, pick, omit, isNotNil, insert, not, pipe as pipe$1, toLower, map, includes, identity, clamp as clamp$2, filter as filter$1 } from 'ramda';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import { assoc, mergeLeft, compose as compose$1, isEmpty, trim, useWith, path, split, either, isNil, values, equals, modify, prop, range, difference, without, reject, pluck, keys, pick, omit, includes, __, isNotNil, insert, not, pipe as pipe$1, toLower, map, identity, clamp as clamp$2, filter as filter$1 } from 'ramda';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$4 } from 'i18next';
 import { Input, Email as Email$2, Phone as Phone$2, Globe, Up, Down, MenuHorizontal, Delete, Plus, NeetoInvisible, Checkbox as Checkbox$2, Radio, Dropdown as Dropdown$3, Rating as Rating$4, Smiley, Calendar, Upload, Check, Close, FileGeneric } from '@bigbinary/neeto-icons';
@@ -13,21 +13,40 @@ import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-
 import { useMutationWithInvalidation, withImmutableActions, withT, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
 import ReactDOM, { unstable_batchedUpdates, flushSync as flushSync$1 } from 'react-dom';
-import { Input as Input$1, Textarea, Checkbox, Select, ActionBlock } from '@bigbinary/neetoui/formik';
+import Alert from '@bigbinary/neetoui/Alert';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { useTranslation, Trans } from 'react-i18next';
 import { create as create$1 } from 'zustand';
+import Typography from '@bigbinary/neetoui/Typography';
+import Dropdown$2 from '@bigbinary/neetoui/Dropdown';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
 import classnames from 'classnames';
+import Button$1 from '@bigbinary/neetoui/Button';
+import Input$1 from '@bigbinary/neetoui/formik/Input';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import Checkbox from '@bigbinary/neetoui/formik/Checkbox';
+import Label from '@bigbinary/neetoui/Label';
+import Checkbox$1 from '@bigbinary/neetoui/Checkbox';
+import Select from '@bigbinary/neetoui/formik/Select';
 import { Editor as Editor$1, isEditorEmpty, EditorContent } from '@bigbinary/neeto-editor';
+import { shallow } from 'zustand/shallow';
 import * as yup from 'yup';
 import { object, array, string } from 'yup';
 import useHotkeys from '@bigbinary/neeto-hotkeys';
+import Spinner$2 from '@bigbinary/neetoui/Spinner';
 import dayjs from 'dayjs';
+import NeetoUIMultiEmailInput from '@bigbinary/neetoui/MultiEmailInput';
 import { validation, PhoneNumberInput, PhoneNumber as PhoneNumber$1 } from '@bigbinary/neeto-molecules/PhoneNumber';
 import localeData from 'dayjs/plugin/localeData';
 import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
+import DatePicker from '@bigbinary/neetoui/DatePicker';
 import path$1 from 'path';
+import Input$2 from '@bigbinary/neetoui/Input';
+import Select$1 from '@bigbinary/neetoui/Select';
+import Radio$1 from '@bigbinary/neetoui/Radio';
+import Textarea$1 from '@bigbinary/neetoui/Textarea';
 import { renderToString } from 'react-dom/server';
 
 function _extends$8() {
@@ -769,6 +788,7 @@ var QUESTIONS_INITIAL_VALUE = {
 };
 var RESERVED_FIELD_CODES = ["month", "date", "time"];
 var SELECTABLE_KINDS = ["radio", "checkbox", "dropdown"];
+var RICH_TEXT_QUESTIONS = ["paragraph", "termsandcondition"];
 
 function _arrayWithHoles$3(arr) {
   if (Array.isArray(arr)) return arr;
@@ -9804,6 +9824,28 @@ var formHelpers = {
   pushToList: pushToList
 };
 
+var isBlank = compose$1(isEmpty, trim);
+var parseServerError = function parseServerError(error) {
+  var _error$notice;
+  return (_error$notice = error.notice) !== null && _error$notice !== void 0 ? _error$notice : t$4("neetoForm.common.somethingWentWrong");
+};
+var isEmptyValues = function isEmptyValues(obj) {
+  return either(isNil, isEmpty)(obj) ? true : values(obj).every(function (value) {
+    if (isEmpty(value)) {
+      return true;
+    } else if (Array.isArray(value)) {
+      return equals([false, false, false], value);
+    }
+    return !value;
+  });
+};
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+var dotPath = useWith(path, [split(".")]);
+var isFunction$1 = function isFunction(obj) {
+  return typeof obj === "function";
+};
+
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useBuildFormStore = create$1(withImmutableActions(function (set) {
   return {
@@ -9818,10 +9860,11 @@ var useBuildFormStore = create$1(withImmutableActions(function (set) {
       selectedLanguage: i18next.resolvedLanguage,
       formId: null,
       enabled: false,
-      title: ""
+      title: "",
+      richTextFieldsToReset: []
     },
-    setFormData: function setFormData(payload) {
-      return set(assoc("formState", payload));
+    setFormData: function setFormData(arg) {
+      return set(modify("formState", isFunction$1(arg) ? arg : mergeLeft(arg)));
     }
   };
 }));
@@ -10455,25 +10498,6 @@ var Email$1 = withT(function (_ref) {
   }));
 });
 
-var isBlank = compose$1(isEmpty, trim);
-var parseServerError = function parseServerError(error) {
-  var _error$notice;
-  return (_error$notice = error.notice) !== null && _error$notice !== void 0 ? _error$notice : t$4("neetoForm.common.somethingWentWrong");
-};
-var isEmptyValues = function isEmptyValues(obj) {
-  return either(isNil, isEmpty)(obj) ? true : values(obj).every(function (value) {
-    if (isEmpty(value)) {
-      return true;
-    } else if (Array.isArray(value)) {
-      return equals([false, false, false], value);
-    }
-    return !value;
-  });
-};
-
-// eslint-disable-next-line react-hooks/rules-of-hooks
-var dotPath = useWith(path, [split(".")]);
-
 var FileGroup = function FileGroup(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -11048,18 +11072,42 @@ var StarRating$3 = function StarRating(_ref) {
   }));
 };
 
-var useUpdateEditorContent = function useUpdateEditorContent(editorRef, fieldName, value) {
+var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
+  var editorRef = _ref.editorRef,
+    fieldName = _ref.fieldName,
+    value = _ref.value,
+    initialValue = _ref.initialValue,
+    fieldCode = _ref.fieldCode;
   var initialStateRef = useRef({
     language: "",
     value: null
   });
-  var _useBuildFormState = useBuildFormState(),
-    formId = _useBuildFormState.formId,
-    language = _useBuildFormState.selectedLanguage;
+  var _useBuildFormStore = useBuildFormStore(function (store) {
+      return {
+        setFormData: store["setFormData"]
+      };
+    }, shallow),
+    setFormData = _useBuildFormStore.setFormData;
+  var _useBuildFormStore2 = useBuildFormStore(function (store) {
+      var _store$formState, _store$formState2;
+      return {
+        formId: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["formId"],
+        selectedLanguage: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["selectedLanguage"]
+      };
+    }, shallow),
+    formId = _useBuildFormStore2.formId,
+    language = _useBuildFormStore2.selectedLanguage;
+  var shouldReset = useBuildFormStore(function (store) {
+    return store.formState.richTextFieldsToReset.includes(fieldCode);
+  });
   var setEditorContent = function setEditorContent(content) {
     var _editorRef$current$ed;
     return (_editorRef$current$ed = editorRef.current.editor) === null || _editorRef$current$ed === void 0 || (_editorRef$current$ed = _editorRef$current$ed.commands) === null || _editorRef$current$ed === void 0 ? void 0 : _editorRef$current$ed.setContent(content);
   };
+  if (shouldReset) {
+    setEditorContent(initialValue);
+    setFormData(modify("richTextFieldsToReset", without([fieldCode])));
+  }
   useEffect(function () {
     if (initialStateRef.current["language"] !== language) {
       initialStateRef.current["language"] = language;
@@ -11086,11 +11134,13 @@ var useUpdateEditorContent = function useUpdateEditorContent(editorRef, fieldNam
 
 var Terms$1 = function Terms(_ref) {
   var name = _ref.name,
+    item = _ref.item,
     isLabelDisabled = _ref.isLabelDisabled;
   var editorRef = useRef({
     editor: {}
   });
   var fieldName = "".concat(name, ".label");
+  var fieldCode = item.fieldCode;
   var _useField = useField({
       name: fieldName,
       validate: validateEditorContent(editorRef)
@@ -11100,10 +11150,17 @@ var Terms$1 = function Terms(_ref) {
     _useField2$ = _useField2[1],
     touched = _useField2$.touched,
     error = _useField2$.error,
+    initialValue = _useField2$.initialValue,
     _useField2$2 = _useField2[2],
     setTouched = _useField2$2.setTouched,
     setValue = _useField2$2.setValue;
-  useUpdateEditorContent(editorRef, fieldName, value);
+  useUpdateEditorContent({
+    editorRef: editorRef,
+    fieldName: fieldName,
+    value: value,
+    initialValue: initialValue,
+    fieldCode: fieldCode
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
@@ -11145,11 +11202,13 @@ var Fields = {
 
 var Editor = function Editor(_ref) {
   var name = _ref.name,
+    item = _ref.item,
     isLabelDisabled = _ref.isLabelDisabled;
   var editorRef = useRef({
     editor: {}
   });
   var fieldName = "".concat(name, ".label");
+  var fieldCode = item.fieldCode;
   var _useField = useField({
       name: fieldName,
       validate: validateEditorContent(editorRef)
@@ -11159,10 +11218,17 @@ var Editor = function Editor(_ref) {
     _useField2$ = _useField2[1],
     touched = _useField2$.touched,
     error = _useField2$.error,
+    initialValue = _useField2$.initialValue,
     _useField2$2 = _useField2[2],
     setTouched = _useField2$2.setTouched,
     setValue = _useField2$2.setValue;
-  useUpdateEditorContent(editorRef, fieldName, value);
+  useUpdateEditorContent({
+    editorRef: editorRef,
+    fieldName: fieldName,
+    value: value,
+    initialValue: initialValue,
+    fieldCode: fieldCode
+  });
   return /*#__PURE__*/React__default.createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default.createElement(Editor$1, {
@@ -11887,6 +11953,15 @@ var Form = function Form(_ref) {
     if (isNotEmpty(questionLabel)) return truncate(questionLabel, 40);
     return humanize(questionKind);
   };
+  var richTextQuestions = filterBy({
+    kind: includes(__, RICH_TEXT_QUESTIONS)
+  }, questions);
+  var resetFormData = function resetFormData() {
+    resetForm();
+    setFormData({
+      richTextFieldsToReset: pluck("fieldCode", richTextQuestions)
+    });
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Alert, {
     isOpen: isNotNil(deleteQuestionIndex),
     submitButtonLabel: t("neetoForm.common.delete"),
@@ -11976,13 +12051,11 @@ var Form = function Form(_ref) {
   }))), showActionBlock && /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-border-gray-300 flex-shrink-0 border-t py-4"
   }, /*#__PURE__*/React__default.createElement(ActionBlock, {
-    className: "space-x-2",
+    submitButtonProps: submitButtonProps,
     cancelButtonProps: _objectSpread$h({
-      label: t("neetoForm.common.reset")
-    }, cancelButtonProps),
-    submitButtonProps: _objectSpread$h({
-      disabled: isSubmitting || !dirty
-    }, submitButtonProps)
+      label: t("neetoForm.common.reset"),
+      onClick: resetFormData
+    }, cancelButtonProps)
   }))));
 };
 
@@ -16049,7 +16122,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
     className: "neeto-form-engine-input__wrapper"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "neeto-ui-w-full"
-  }, isInputVisible ? /*#__PURE__*/React__default.createElement(MultiEmailInput, {
+  }, isInputVisible ? /*#__PURE__*/React__default.createElement(NeetoUIMultiEmailInput, {
     isRequired: isRequired,
     label: label,
     error: meta.touched ? meta.error : "",
@@ -27015,7 +27088,7 @@ var TermsField = function TermsField(_ref) {
     kind = question.kind,
     isRequired = question.isRequired,
     nodeId = question.nodeId;
-  var label = fieldWithFallback(question, "label");
+  var label = fieldWithFallback(question, "label", true);
   return /*#__PURE__*/React__default.createElement(Field, {
     name: name || nodeId,
     validate: validateFieldValue({
@@ -27101,14 +27174,16 @@ var _QUESTION_TO_COMPONEN;
 var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
   return /*#__PURE__*/React__default.createElement(EditorContent, {
-    content: isEmpty(question.label) ? question.labelFallback : question.label
+    content: fieldWithFallback(question, "label", true)
   });
 }), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _QUESTION_TO_COMPONEN);
 
 var fieldWithFallback = function fieldWithFallback(question, fieldName) {
+  var hasRichContent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var fallback = question["".concat(fieldName, "Fallback")];
   var field = question[fieldName];
-  return isEmpty(field) && isNotNil(fallback) ? fallback : field;
+  var isFieldEmpty = hasRichContent ? isEditorEmpty(field) : isEmpty(field);
+  return isFieldEmpty && isNotNil(fallback) ? fallback : field;
 };
 var getFieldComponent = function getFieldComponent(_ref) {
   var kind = _ref.kind;
@@ -30089,6 +30164,10 @@ var linkifyDecorator = function linkifyDecorator(decoratedHref, decoratedText, k
     target: "_blank"
   }, decoratedText);
 };
+var filterResponses = removeBy({
+  kind: QUESTION_KIND.ADDITIONAL_GUESTS.value,
+  value: isNotPresent
+});
 
 var FileUpload = function FileUpload(_ref) {
   var files = _ref.files;
@@ -30152,6 +30231,7 @@ var Submission = function Submission(_ref2) {
     } : _useSubmission$data,
     isLoading = _useSubmission.isLoading;
   var responses = submission.responses;
+  var filteredResponses = filterResponses(responses);
   var renderSubmittedValue = function renderSubmittedValue(kind, value) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value:
@@ -30188,7 +30268,7 @@ var Submission = function Submission(_ref2) {
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: classnames("mx-auto flex h-full w-full flex-col items-start", _defineProperty$6({}, className, className))
-  }, responses.map(function (_ref3) {
+  }, filteredResponses.map(function (_ref3) {
     var kind = _ref3.kind,
       label = _ref3.label,
       value = _ref3.value;