@bigbinary/neeto-form-frontend 1.2.41 → 1.2.43

package/app/javascript/src/translations/en.json

@@ -77,7 +77,8 @@
     "questions": {
       "deleteAlert": {
         "title": "Delete field?",
-        "message": "You are deleting the field <strong>{{label}}</strong>."
+        "message_one": "You are deleting the <strong>{{label}}</strong> field.",
+        "message_other": "You are deleting the <strong>{{label}}</strong> field for all languages."
       },
       "unsavedChangesAlert": {
         "discard": "Discard changes",

package/dist/index.cjs.js

@@ -29,6 +29,7 @@ var utc = require('dayjs/plugin/utc');
 var weekday = require('dayjs/plugin/weekday');
 var weekOfYear = require('dayjs/plugin/weekOfYear');
 var path = require('path');
+var server = require('react-dom/server');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -642,20 +643,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], ramda.assoc("title", data.title));
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], ramda.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);
     }
   }));
@@ -673,6 +668,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], ramda.assoc("questions", data.questions));
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], ramda.assoc("questions", data.questions));
       options.onSuccess && options.onSuccess.apply(options, args);
@@ -751,102 +748,12 @@ var useUpdateSubmission = function useUpdateSubmission(options) {
   }));
 };
 
-({
-  questions: [{
-    id: "bb101126-4183-4ddf-adff-7563a2be0b19",
-    kind: "paragraph",
-    displayOrder: 1,
-    displayKind: "Description Field",
-    label: i18next.t("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: i18next.t("neetoForm.common.email"),
-    placeholder: "",
-    isRequired: true,
-    options: [],
-    nodeId: "a8e0178e-44df-465e-8acb-ef5d1c08d541"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8f6",
-    label: i18next.t("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: i18next.t("neetoForm.common.rate"),
-    isRequired: true,
-    highestRatingLabel: "",
-    averageRatingLabel: "",
-    lowestRatingLabel: "",
-    kind: "rating",
-    nodeId: "236a8cb3-b86d-4c30-9c18-f0d69788f6bc"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8as",
-    label: i18next.t("neetoForm.common.phone"),
-    kind: "phone",
-    nodeId: "5dd3be53-ec99-48e2-bf21-298b6108cb00"
-  }, {
-    id: "a7d3e47d-f7a2-4bf9-aaea-d301ad62d8f32",
-    label: i18next.t("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: i18next.t("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;
@@ -9904,8 +9811,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 = React$2.useState(false),
@@ -9918,6 +9824,8 @@ var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
     setSelectedLanguage = _useState4[1];
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var _useFormikContext = formik.useFormikContext(),
+    dirty = _useFormikContext.dirty;
   var languageChangeHandler = function languageChangeHandler(code) {
     if (!dirty) {
       onChange(code);
@@ -9962,7 +9870,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["default"].createElement("div", {
     className: "mb-4 flex-shrink-0"
@@ -9974,7 +9881,6 @@ var Overview = function Overview(_ref) {
     style: "h4",
     weight: "semibold"
   }, title), availableLanguages.length > 1 && /*#__PURE__*/React__default["default"].createElement(ChangeLanguageDropdown, {
-    dirty: dirty,
     initialLanguage: selectedLanguage,
     languages: availableLanguages,
     onChange: onLanguageChange
@@ -11654,12 +11560,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); }
@@ -11742,7 +11642,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,
@@ -11854,14 +11753,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 (ramda.isNotNil(independentLabel)) return independentLabel;
+    var questionLabel = questions[deleteQuestionIndex].label;
+    if (neetoCist.isNotEmpty(questionLabel)) return neetoCist.truncate(questionLabel, 40);
+    return neetoCist.humanize(questionKind);
+  };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
     isOpen: deleteQuestionIndex !== null,
     submitButtonLabel: t("neetoForm.common.delete"),
     title: t("neetoForm.questions.deleteAlert.title"),
-    message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
+    message: deleteQuestionIndex && /*#__PURE__*/React__default["default"].createElement(reactI18next.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() {
@@ -11880,7 +11788,6 @@ var Form = function Form(_ref) {
     noValidate: true
   }), formTitle && /*#__PURE__*/React__default["default"].createElement(Overview, {
     availableLanguages: availableLanguages,
-    dirty: dirty,
     selectedLanguage: selectedLanguage,
     description: formDescription,
     title: formTitle,
@@ -11974,29 +11881,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__default["default"].t("neetoForm.common.fieldReq", {
-    field: i18next__default["default"].t("neetoForm.questions.common.questionFields.field.label")
-  });
-  return yup.string().required(errorMessage);
+var requiredLabelValidation = function requiredLabelValidation(schema, field) {
+  return schema.required(i18next__default["default"].t("neetoForm.common.fieldReq", {
+    field: field
+  }));
 };
 var formValidationSchema = yup.object().shape({
   questions: yup.array().of(yup.object().shape({
-    label: requiredLabel().when("kind", {
-      is: "paragraph",
-      then: requiredLabel(i18next__default["default"].t("neetoForm.common.paragraphCantBeEmpty"))
+    label: yup.string().when("_destroy", {
+      is: true,
+      otherwise: function otherwise(schema) {
+        return schema.when("kind", {
+          is: "paragraph",
+          then: function then(schema) {
+            return schema.required(i18next__default["default"].t("neetoForm.common.paragraphCantBeEmpty"));
+          },
+          otherwise: function otherwise(schema) {
+            return requiredLabelValidation(schema, i18next__default["default"].t("neetoForm.questions.common.questionFields.field.label"));
+          }
+        });
+      }
     }),
     kind: yup.string().required(),
     fieldCode: yup.string().trim().notOneOf(RESERVED_FIELD_CODES, i18next__default["default"].t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
-      return QUESTIONS_WITHOUT_FIELD_CODE.includes(kind) ? schema.notRequired() : schema.required(i18next__default["default"].t("neetoForm.common.fieldReq", {
-        field: i18next__default["default"].t("neetoForm.questions.common.questionFields.field.fieldCode")
-      }));
+      return QUESTIONS_WITHOUT_FIELD_CODE.includes(kind) ? schema.notRequired() : requiredLabelValidation(schema, i18next__default["default"].t("neetoForm.questions.common.questionFields.field.fieldCode"));
     }),
     optionsAttributes: yup.array().when("kind", function (kind, schema) {
       return ["radio", "checkbox", "dropdown"].includes(kind) ? schema.of(yup.object().shape({
-        label: requiredLabel(i18next__default["default"].t("neetoForm.common.fieldReq", {
-          field: i18next__default["default"].t("neetoForm.questions.common.questionFields.field.option")
-        }))
+        label: requiredLabelValidation(yup.string(), i18next__default["default"].t("neetoForm.questions.common.questionFields.field.option"))
       })) : schema.notRequired();
     }),
     highestRatingLabel: yup.string().nullable(),
@@ -12085,23 +11997,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["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center py-6"
     }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], 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) {
@@ -12114,8 +12025,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 () {
@@ -12133,9 +12044,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["default"].createElement(Form, _extends$8({}, _objectSpread$c(_objectSpread$c({}, formDomProps), {}, {
       availableLanguages: availableLanguages,
       cancelButtonProps: cancelButtonProps,
@@ -29975,6 +29886,12 @@ var getValue = function getValue(_ref2) {
   }
   return value;
 };
+var getEditorContent = function getEditorContent(value) {
+  if (typeof value !== "string") {
+    return server.renderToString(value);
+  }
+  return value;
+};
 var Submission = function Submission(_ref3) {
   var _ref3$formId = _ref3.formId,
     formId = _ref3$formId === void 0 ? "" : _ref3$formId,
@@ -30001,10 +29918,10 @@ var Submission = function Submission(_ref3) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value:
         return /*#__PURE__*/React__default["default"].createElement(neetoEditor.EditorContent, {
-          content: getValue({
+          content: getEditorContent(getValue({
             value: value,
             kind: kind
-          })
+          }))
         });
       case QUESTION_KIND.PHONE.value:
         return neetoCist.isPresent(value) ? /*#__PURE__*/React__default["default"].createElement(PhoneNumber$1.PhoneNumber, {