@bigbinary/neeto-form-frontend 1.2.41 → 1.2.43

package/dist/index.js

@@ -1,11 +1,11 @@
 import * as React$2 from 'react';
 import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, forwardRef, useImperativeHandle, Fragment, useReducer, useCallback as useCallback$1, useMemo as useMemo$1, createContext, createElement } from 'react';
-import { useField, useFormikContext, FieldArray, Form as Form$1, Formik, Field, FastField } from 'formik';
-import { noop as noop$4, slugify, filterBy, findBy, removeBy, isPresent as isPresent$1, isNotPresent, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { useFormikContext, useField, FieldArray, Form as Form$1, Formik, Field, FastField } from 'formik';
+import { noop as noop$4, slugify, filterBy, findBy, isNotEmpty, truncate, humanize, removeBy, isPresent as isPresent$1, isNotPresent, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { withEventTargetValue, showThumbsUpToastr, 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, Radio as Radio$1, Select, Textarea as Textarea$1, Input as Input$2, Spinner as Spinner$2 } from '@bigbinary/neetoui';
-import { assoc, prop, isEmpty, path, values, compose as compose$1, trim, useWith, split, either, isNil, equals, difference, reject, pluck, keys, pick, omit, insert, not, pipe as pipe$1, toLower, map, includes, identity, isNotNil, times, clamp as clamp$2, filter as filter$1 } from 'ramda';
+import { assoc, mergeLeft, prop, isEmpty, path, values, compose as compose$1, trim, useWith, split, either, isNil, equals, difference, reject, pluck, keys, pick, omit, insert, isNotNil, not, pipe as pipe$1, toLower, map, includes, identity, times, 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';
@@ -27,6 +27,7 @@ import utc from 'dayjs/plugin/utc';
 import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import path$1 from 'path';
+import { renderToString } from 'react-dom/server';
 
 function _extends$8() {
   _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
@@ -604,20 +605,14 @@ var useUpdateForm = function useUpdateForm(options) {
   }, _objectSpread$g(_objectSpread$g({}, options), {}, {
     onSuccess: function onSuccess(data, _ref3) {
       var id = _ref3.id;
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], function (form) {
-        return _objectSpread$g(_objectSpread$g({}, form), {}, {
-          title: data.title
-        });
-      });
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], function (form) {
-        return _objectSpread$g(_objectSpread$g({}, form), {}, {
-          title: data.title,
-          questions: data.questions
-        });
-      });
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], assoc("title", data.title));
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], mergeLeft({
+        questions: data.questions,
+        title: data.title
+      }));
       queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id, language]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language]);
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id]);
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id)]);
       options.onSuccess && options.onSuccess(data);
     }
   }));
@@ -635,6 +630,8 @@ var useUpdateQuestions = function useUpdateQuestions(options, language) {
       }
       var data = args[0],
         id = args[1].id;
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id]);
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id)]);
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], assoc("questions", data.questions));
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], assoc("questions", data.questions));
       options.onSuccess && options.onSuccess.apply(options, args);
@@ -713,102 +710,12 @@ var useUpdateSubmission = function useUpdateSubmission(options) {
   }));
 };
 
-({
-  questions: [{
-    id: "bb101126-4183-4ddf-adff-7563a2be0b19",
-    kind: "paragraph",
-    displayOrder: 1,
-    displayKind: "Description Field",
-    label: t$4("neetoForm.common.fillTheFormToChat"),
-    placeholder: "",
-    isRequired: false,
-    options: [],
-    nodeId: "bb101126-4183-4ddf-adff-7563a2be0b19"
-  }, {
-    id: "a8e0178e-44df-465e-8acb-ef5d1c08d541",
-    kind: "email",
-    displayOrder: 2,
-    displayKind: "Email Input Field",
-    label: t$4("neetoForm.common.email"),
-    placeholder: "",
-    isRequired: true,
-    options: [],
-    nodeId: "a8e0178e-44df-465e-8acb-ef5d1c08d541"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8f6",
-    label: t$4("neetoForm.common.selectOne"),
-    isRequired: false,
-    options: [{
-      label: "ABC",
-      id: "ABC"
-    }, {
-      label: "EFG",
-      id: "EFG"
-    }, {
-      label: "QWE",
-      id: "QWE"
-    }],
-    kind: "checkbox",
-    nodeId: "f32ad8aa-039a-4b70-b3af-b97ed6fc67a6"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62wew",
-    label: t$4("neetoForm.common.rate"),
-    isRequired: true,
-    highestRatingLabel: "",
-    averageRatingLabel: "",
-    lowestRatingLabel: "",
-    kind: "rating",
-    nodeId: "236a8cb3-b86d-4c30-9c18-f0d69788f6bc"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8as",
-    label: t$4("neetoForm.common.phone"),
-    kind: "phone",
-    nodeId: "5dd3be53-ec99-48e2-bf21-298b6108cb00"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8f32",
-    label: t$4("neetoForm.common.select"),
-    isRequired: false,
-    options: [{
-      label: "A",
-      id: "A"
-    }, {
-      label: "B",
-      id: "B"
-    }, {
-      label: "C",
-      id: "C"
-    }],
-    kind: "dropdown",
-    nodeId: "e65f27ea-a9b9-45b1-a8de-efb27a5b3e72"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8f8",
-    label: "Nice",
-    kind: "paragraph",
-    nodeId: "15507c92-4bb5-4428-bc2b-0a7b078a144a"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301addw2d8f9",
-    label: t$4("neetoForm.common.singleChoice"),
-    isRequired: false,
-    options: [{
-      label: "A",
-      id: "A"
-    }, {
-      label: "B",
-      id: "B"
-    }, {
-      label: "C",
-      id: "C"
-    }],
-    kind: "radio",
-    nodeId: "37683bae-da1b-4890-ade9-0664006dc57d"
-  }]
-});
-var QUESTIONS_WITHOUT_FIELD_CODE = ["paragraph", "termsandcondition", "condition", "file_upload"];
-var RESERVED_FIELD_CODES = ["month", "date", "time"];
 var DEFAULT_AVAILABLE_LANGUAGES = [{
   code: "en",
   name: "English"
 }];
+var QUESTIONS_WITHOUT_FIELD_CODE = ["paragraph", "termsandcondition", "condition", "file_upload"];
+var RESERVED_FIELD_CODES = ["month", "date", "time"];
 
 function _arrayWithHoles$3(arr) {
   if (Array.isArray(arr)) return arr;
@@ -9866,8 +9773,7 @@ var useBuildFormState = function useBuildFormState() {
 };
 
 var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
-  var dirty = _ref.dirty,
-    initialLanguage = _ref.initialLanguage,
+  var initialLanguage = _ref.initialLanguage,
     languages = _ref.languages,
     onChange = _ref.onChange;
   var _useState = useState(false),
@@ -9880,6 +9786,8 @@ var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
     setSelectedLanguage = _useState4[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    dirty = _useFormikContext.dirty;
   var languageChangeHandler = function languageChangeHandler(code) {
     if (!dirty) {
       onChange(code);
@@ -9924,7 +9832,6 @@ var Overview = function Overview(_ref) {
     description = _ref.description,
     availableLanguages = _ref.availableLanguages,
     selectedLanguage = _ref.selectedLanguage,
-    dirty = _ref.dirty,
     onLanguageChange = _ref.onLanguageChange;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4 flex-shrink-0"
@@ -9936,7 +9843,6 @@ var Overview = function Overview(_ref) {
     style: "h4",
     weight: "semibold"
   }, title), availableLanguages.length > 1 && /*#__PURE__*/React__default.createElement(ChangeLanguageDropdown, {
-    dirty: dirty,
     initialLanguage: selectedLanguage,
     languages: availableLanguages,
     onChange: onLanguageChange
@@ -11616,12 +11522,6 @@ var getAvailableQuestionKinds = function getAvailableQuestionKinds(_ref5) {
     });
   }, allQuestionKinds);
 };
-var sliceLabel = function sliceLabel(label) {
-  if (label && label.length > 23) {
-    return "".concat(label.slice(0, 20), "...");
-  }
-  return label;
-};
 
 var _path$2, _path2, _path3, _path4, _path5, _path6, _path7;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -11704,7 +11604,6 @@ var _excluded$6 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "
 function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
-  var _INDEPENDENT_LABELS_M, _questions$deleteQues, _questions$deleteQues2;
   var questionKinds = _ref.questionKinds,
     showAddQuestionDivider = _ref.showAddQuestionDivider,
     onValueChange = _ref.onValueChange,
@@ -11816,14 +11715,23 @@ var Form = function Form(_ref) {
     resetForm();
     onLanguageChange(code);
   };
+  var deleteAlertMessageLabel = function deleteAlertMessageLabel() {
+    var questionKind = questions[deleteQuestionIndex].kind;
+    var independentLabel = INDEPENDENT_LABELS_MAP[questionKind];
+    if (isNotNil(independentLabel)) return independentLabel;
+    var questionLabel = questions[deleteQuestionIndex].label;
+    if (isNotEmpty(questionLabel)) return truncate(questionLabel, 40);
+    return humanize(questionKind);
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Alert, {
     isOpen: deleteQuestionIndex !== null,
     submitButtonLabel: t("neetoForm.common.delete"),
     title: t("neetoForm.questions.deleteAlert.title"),
-    message: /*#__PURE__*/React__default.createElement(Trans, {
+    message: deleteQuestionIndex && /*#__PURE__*/React__default.createElement(Trans, {
       i18nKey: "neetoForm.questions.deleteAlert.message",
       values: {
-        label: (_INDEPENDENT_LABELS_M = INDEPENDENT_LABELS_MAP[(_questions$deleteQues = questions[deleteQuestionIndex]) === null || _questions$deleteQues === void 0 ? void 0 : _questions$deleteQues.kind]) !== null && _INDEPENDENT_LABELS_M !== void 0 ? _INDEPENDENT_LABELS_M : sliceLabel((_questions$deleteQues2 = questions[deleteQuestionIndex]) === null || _questions$deleteQues2 === void 0 ? void 0 : _questions$deleteQues2.label)
+        count: availableLanguages.length,
+        label: deleteAlertMessageLabel()
       }
     }),
     onClose: function onClose() {
@@ -11842,7 +11750,6 @@ var Form = function Form(_ref) {
     noValidate: true
   }), formTitle && /*#__PURE__*/React__default.createElement(Overview, {
     availableLanguages: availableLanguages,
-    dirty: dirty,
     selectedLanguage: selectedLanguage,
     description: formDescription,
     title: formTitle,
@@ -11936,29 +11843,34 @@ var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
 };
 
 /* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
-var requiredLabel = function requiredLabel() {
-  var errorMessage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : i18next.t("neetoForm.common.fieldReq", {
-    field: i18next.t("neetoForm.questions.common.questionFields.field.label")
-  });
-  return string().required(errorMessage);
+var requiredLabelValidation = function requiredLabelValidation(schema, field) {
+  return schema.required(i18next.t("neetoForm.common.fieldReq", {
+    field: field
+  }));
 };
 var formValidationSchema = object().shape({
   questions: array().of(object().shape({
-    label: requiredLabel().when("kind", {
-      is: "paragraph",
-      then: requiredLabel(i18next.t("neetoForm.common.paragraphCantBeEmpty"))
+    label: string().when("_destroy", {
+      is: true,
+      otherwise: function otherwise(schema) {
+        return schema.when("kind", {
+          is: "paragraph",
+          then: function then(schema) {
+            return schema.required(i18next.t("neetoForm.common.paragraphCantBeEmpty"));
+          },
+          otherwise: function otherwise(schema) {
+            return requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.label"));
+          }
+        });
+      }
     }),
     kind: string().required(),
     fieldCode: string().trim().notOneOf(RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
-      return QUESTIONS_WITHOUT_FIELD_CODE.includes(kind) ? schema.notRequired() : schema.required(i18next.t("neetoForm.common.fieldReq", {
-        field: i18next.t("neetoForm.questions.common.questionFields.field.fieldCode")
-      }));
+      return QUESTIONS_WITHOUT_FIELD_CODE.includes(kind) ? schema.notRequired() : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.fieldCode"));
     }),
     optionsAttributes: array().when("kind", function (kind, schema) {
       return ["radio", "checkbox", "dropdown"].includes(kind) ? schema.of(object().shape({
-        label: requiredLabel(i18next.t("neetoForm.common.fieldReq", {
-          field: i18next.t("neetoForm.questions.common.questionFields.field.option")
-        }))
+        label: requiredLabelValidation(string(), i18next.t("neetoForm.questions.common.questionFields.field.option"))
       })) : schema.notRequired();
     }),
     highestRatingLabel: string().nullable(),
@@ -12047,23 +11959,22 @@ var BuildForm = function BuildForm(_ref) {
     } : _useForm$data,
     questions = _useForm$data2.questions,
     isQuestionsLoading = _useForm$data2.isQuestionsLoading,
-    isLoading = _useForm.isLoading;
+    isLoading = _useForm.isLoading,
+    refetch = _useForm.refetch;
   if (isLoading || showLoader && isQuestionsLoading) {
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex h-full w-full items-center justify-center py-6"
     }, /*#__PURE__*/React__default.createElement(PageLoader, null));
   }
-  var handleSubmit = function handleSubmit(payload, _ref2) {
-    var resetForm = _ref2.resetForm;
+  var handleSubmit = function handleSubmit(payload) {
     updateQuestions({
       id: id,
       values: _objectSpread$c({
-        neetoFormQuestion: _objectSpread$c(_objectSpread$c({}, payload), {}, {
-          language: selectedLanguage
-        })
+        language: selectedLanguage,
+        neetoFormQuestion: payload
       }, buildRequestArgs)
     }, {
-      onSuccess: resetForm
+      onSuccess: refetch
     });
   };
   var onValueChange = function onValueChange(questions) {
@@ -12076,8 +11987,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 (_ref3) {
-    var kind = _ref3.kind;
+  var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref2) {
+    var kind = _ref2.kind;
     return requiredFields.includes(kind);
   };
   var isDisabledFieldLabel = isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : function () {
@@ -12095,9 +12006,9 @@ var BuildForm = function BuildForm(_ref) {
     },
     validationSchema: formValidationSchema,
     onSubmit: handleSubmit
-  }, function (_ref4) {
-    var errors = _ref4.errors,
-      setFieldError = _ref4.setFieldError;
+  }, function (_ref3) {
+    var errors = _ref3.errors,
+      setFieldError = _ref3.setFieldError;
     return /*#__PURE__*/React__default.createElement(Form, _extends$8({}, _objectSpread$c(_objectSpread$c({}, formDomProps), {}, {
       availableLanguages: availableLanguages,
       cancelButtonProps: cancelButtonProps,
@@ -29937,6 +29848,12 @@ var getValue = function getValue(_ref2) {
   }
   return value;
 };
+var getEditorContent = function getEditorContent(value) {
+  if (typeof value !== "string") {
+    return renderToString(value);
+  }
+  return value;
+};
 var Submission = function Submission(_ref3) {
   var _ref3$formId = _ref3.formId,
     formId = _ref3$formId === void 0 ? "" : _ref3$formId,
@@ -29963,10 +29880,10 @@ var Submission = function Submission(_ref3) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value:
         return /*#__PURE__*/React__default.createElement(EditorContent, {
-          content: getValue({
+          content: getEditorContent(getValue({
             value: value,
             kind: kind
-          })
+          }))
         });
       case QUESTION_KIND.PHONE.value:
         return isPresent$1(value) ? /*#__PURE__*/React__default.createElement(PhoneNumber$1, {