@bigbinary/neeto-form-frontend 1.2.45 → 1.2.47

package/README.md

@@ -76,6 +76,16 @@ The engine adds setup for form on backend and allows us to attach forms to any m
    has_one :form, class_name: "::NeetoFormEngine::Form", as: :attachable
    ```
 
+### Customizability
+  The engine supports customizing the default behavior of `Questions::UpdateService`. The supported methods/constants can be overridden by defining them in the concern `NeetoFormEngine::Customizable::Questions::Updateable`
+
+  #### Available methods:
+  1. `create_question!`: This takes 2 arguments: `params` and `question`. The `params` argument contains the question parameters passed from the front-end, and the `question` argument contains the current question. This argument is required if you need translation support.
+  2. `additional_question_params`: If you want to include additional attributes while creating questions, you can specify them using this method. It takes one argument `params` which will be the question parameters passed from the front-end.
+
+  #### 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`.
+
 ## Frontend package
 The frontend package allows us to create forms across neeto products.
 

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

@@ -110,9 +110,6 @@
       },
       "changeLanguage": "Change language"
     },
-    "labels": {
-      "additionalGuests": "Additional guests"
-    },
     "error": {
       "invalidField": "Please enter a valid {{label}}.",
       "invalidFieldCode": "This field code cannot be used.",

package/dist/index.cjs.js

@@ -9842,14 +9842,15 @@ var useBuildFormState = function useBuildFormState() {
 };
 
 var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
-  var initialLanguage = _ref.initialLanguage,
+  var _findBy;
+  var currentLanguage = _ref.currentLanguage,
     languages = _ref.languages,
     onChange = _ref.onChange;
   var _useState = React$2.useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     isUnsavedChangesAlertOpen = _useState2[0],
     setIsUnsavedChangesAlertOpen = _useState2[1];
-  var _useState3 = React$2.useState(initialLanguage),
+  var _useState3 = React$2.useState(currentLanguage),
     _useState4 = _slicedToArray$3(_useState3, 2),
     selectedLanguage = _useState4[0],
     setSelectedLanguage = _useState4[1];
@@ -9865,17 +9866,24 @@ var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
     setSelectedLanguage(code);
     setIsUnsavedChangesAlertOpen(true);
   };
+  var selectedLanguageName = (_findBy = neetoCist.findBy({
+    code: currentLanguage
+  }, languages)) === null || _findBy === void 0 ? void 0 : _findBy.name;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
     content: t("neetoForm.questions.changeLanguage")
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonProps: {
+      iconPosition: "left"
+    },
     buttonStyle: "text",
     icon: neetoIcons.Globe,
+    label: selectedLanguageName,
     position: "top-start"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown.Menu, null, languages.map(function (_ref2) {
     var code = _ref2.code,
       name = _ref2.name;
     return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown.MenuItem.Button, {
-      isActive: initialLanguage === code,
+      isActive: currentLanguage === code,
       key: code,
       onClick: function onClick() {
         return languageChangeHandler(code);
@@ -9912,7 +9920,7 @@ var Overview = function Overview(_ref) {
     style: "h4",
     weight: "semibold"
   }, title), availableLanguages.length > 1 && /*#__PURE__*/React__default["default"].createElement(ChangeLanguageDropdown, {
-    initialLanguage: selectedLanguage,
+    currentLanguage: selectedLanguage,
     languages: availableLanguages,
     onChange: onLanguageChange
   })), description);
@@ -12047,7 +12055,8 @@ var BuildForm = function BuildForm(_ref) {
       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) {
+  var handleSubmit = function handleSubmit(payload, _ref2) {
+    var setSubmitting = _ref2.setSubmitting;
     updateQuestions({
       id: id,
       values: _objectSpread$e({
@@ -12055,7 +12064,10 @@ var BuildForm = function BuildForm(_ref) {
         neetoFormQuestion: payload
       }, buildRequestArgs)
     }, {
-      onSuccess: refetch
+      onSuccess: refetch,
+      onSettled: function onSettled() {
+        return setSubmitting(false);
+      }
     });
   };
   var onValueChange = function onValueChange(questions) {
@@ -12068,8 +12080,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 (_ref2) {
-    var kind = _ref2.kind;
+  var isRequiredField = isFieldRequired !== null && isFieldRequired !== void 0 ? isFieldRequired : function (_ref3) {
+    var kind = _ref3.kind;
     return requiredFields.includes(kind);
   };
   var isDisabledFieldLabel = isFieldLabelDisabled !== null && isFieldLabelDisabled !== void 0 ? isFieldLabelDisabled : function () {
@@ -12087,9 +12099,9 @@ var BuildForm = function BuildForm(_ref) {
     },
     validationSchema: formValidationSchema,
     onSubmit: handleSubmit
-  }, function (_ref3) {
-    var errors = _ref3.errors,
-      setFieldError = _ref3.setFieldError;
+  }, function (_ref4) {
+    var errors = _ref4.errors,
+      setFieldError = _ref4.setFieldError;
     return /*#__PURE__*/React__default["default"].createElement(Form, _extends$8({}, _objectSpread$e(_objectSpread$e({}, formDomProps), {}, {
       availableLanguages: availableLanguages,
       cancelButtonProps: cancelButtonProps,
@@ -16087,7 +16099,7 @@ var getNumberFromUrl = function getNumberFromUrl(_ref6) {
   var parsedValue = kind === QUESTION_KIND.INTEGER.value ? parseInt(fieldCodeValue) : parseFloat(fieldCodeValue);
   return parsedValue || "";
 };
-var getLabel$1 = function getLabel(label, isRequired) {
+var getLabel = function getLabel(label, isRequired) {
   return isRequired ? "".concat(label, "*") : label;
 };
 var generateInitValues = function generateInitValues(_ref7) {
@@ -16353,7 +16365,7 @@ var DateField = function DateField(_ref) {
     className: "neeto-form-engine-input__label-wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement("label", {
     className: "neeto-form-engine-label"
-  }, getLabel$1(label, isRequired))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, getLabel(label, isRequired))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-form-engine-date-picker"
   }, /*#__PURE__*/React__default["default"].createElement(formik.Field, {
     name: name || nodeId,
@@ -26526,7 +26538,7 @@ var OptionsField = function OptionsField(_ref) {
       isRequired: isRequired,
       name: name,
       error: getError(meta),
-      label: getLabel$1(label, isRequired),
+      label: getLabel(label, isRequired),
       options: transformedOptions,
       type: kind,
       value: isDropdown ? neetoCist.findBy({
@@ -26649,7 +26661,7 @@ var RatingField = function RatingField(_ref) {
       field = _ref2.field;
     return /*#__PURE__*/React__default["default"].createElement(Rating$1, _extends$8({}, field, {
       error: meta.touched ? meta.error : "",
-      label: getLabel$1(label, isRequired),
+      label: getLabel(label, isRequired),
       averageRatingLabel: fieldWithFallback(question, "averageRatingLabel") || RATING_VALUES.AVERAGE.label,
       highestRatingLabel: fieldWithFallback(question, "highestRatingLabel") || RATING_VALUES.GOOD.label,
       lowestRatingLabel: fieldWithFallback(question, "lowestRatingLabel") || RATING_VALUES.BAD.label
@@ -26677,7 +26689,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     className: "neeto-form-engine-input__label-wrapper"
   }, label && /*#__PURE__*/React__default["default"].createElement("label", {
     className: "neeto-form-engine-label"
-  }, getLabel$1(label, isRequired))), /*#__PURE__*/React__default["default"].createElement(formik.FastField, _extends$8({
+  }, getLabel(label, isRequired))), /*#__PURE__*/React__default["default"].createElement(formik.FastField, _extends$8({
     debouncedPlaceholder: debouncedPlaceholder,
     error: errors[name],
     name: name || nodeId,
@@ -26802,7 +26814,7 @@ var StarRatingField = function StarRatingField(_ref) {
       shape: shape,
       count: sanitizedCount,
       error: meta.touched ? meta.error : "",
-      label: getLabel$1(label, isRequired)
+      label: getLabel(label, isRequired)
     }, field));
   });
 };
@@ -29909,17 +29921,9 @@ var FileUpload = function FileUpload(_ref) {
   }));
 };
 
-var getLabel = function getLabel(_ref) {
-  var label = _ref.label,
+var getValue = function getValue(_ref) {
+  var value = _ref.value,
     kind = _ref.kind;
-  if (kind === QUESTION_KIND.ADDITIONAL_GUESTS.value) {
-    return i18next.t("neetoForm.labels.additionalGuests");
-  }
-  return label;
-};
-var getValue = function getValue(_ref2) {
-  var value = _ref2.value,
-    kind = _ref2.kind;
   if (ramda.isEmpty(value)) return /*#__PURE__*/React__default["default"].createElement("i", null, i18next.t("neetoForm.common.unanswered"));
   if (kind === QUESTION_KIND.DATE.value) {
     return value && utils.dateFormat.date(value);
@@ -29938,17 +29942,17 @@ var getEditorContent = function getEditorContent(value) {
   }
   return value;
 };
-var Submission = function Submission(_ref3) {
-  var _ref3$formId = _ref3.formId,
-    formId = _ref3$formId === void 0 ? "" : _ref3$formId,
-    _ref3$submissionId = _ref3.submissionId,
-    submissionId = _ref3$submissionId === void 0 ? "" : _ref3$submissionId,
-    _ref3$className = _ref3.className,
-    className = _ref3$className === void 0 ? "" : _ref3$className,
-    _ref3$questionLabelPr = _ref3.questionLabelProps,
-    questionLabelProps = _ref3$questionLabelPr === void 0 ? {} : _ref3$questionLabelPr,
-    _ref3$answerProps = _ref3.answerProps,
-    answerProps = _ref3$answerProps === void 0 ? {} : _ref3$answerProps;
+var Submission = function Submission(_ref2) {
+  var _ref2$formId = _ref2.formId,
+    formId = _ref2$formId === void 0 ? "" : _ref2$formId,
+    _ref2$submissionId = _ref2.submissionId,
+    submissionId = _ref2$submissionId === void 0 ? "" : _ref2$submissionId,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? "" : _ref2$className,
+    _ref2$questionLabelPr = _ref2.questionLabelProps,
+    questionLabelProps = _ref2$questionLabelPr === void 0 ? {} : _ref2$questionLabelPr,
+    _ref2$answerProps = _ref2.answerProps,
+    answerProps = _ref2$answerProps === void 0 ? {} : _ref2$answerProps;
   var _useSubmission = useSubmission({
       formId: formId,
       submissionId: submissionId,
@@ -29996,20 +30000,17 @@ var Submission = function Submission(_ref3) {
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classnames__default["default"]("mx-auto flex h-full w-full flex-col items-start", _defineProperty$6({}, className, className))
-  }, responses.map(function (_ref4) {
-    var kind = _ref4.kind,
-      label = _ref4.label,
-      value = _ref4.value;
+  }, responses.map(function (_ref3) {
+    var kind = _ref3.kind,
+      label = _ref3.label,
+      value = _ref3.value;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "mb-4",
       key: label
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, _extends$8({
       style: "h5",
       weight: "light"
-    }, questionLabelProps), getLabel({
-      label: label,
-      kind: kind
-    })), renderSubmittedValue(kind, value));
+    }, questionLabelProps), label), renderSubmittedValue(kind, value));
   }));
 };