@bigbinary/neeto-form-frontend 1.2.46 → 1.2.48

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/dist/index.cjs.js

@@ -715,19 +715,22 @@ var useDeleteForm = function useDeleteForm(options) {
     var id = _ref6.id;
     return neetoFormApi.destroyForm(id);
   }, _objectSpread$j(_objectSpread$j({}, options), {}, {
-    keysToInvalidate: function keysToInvalidate(_, _ref7) {
+    keysToInvalidate: [[QUERY_KEYS.FORMS], function (_, _ref7) {
       var id = _ref7.id;
-      return [QUERY_KEYS.FORMS, [QUERY_KEYS.QUESTIONS, id], [QUERY_KEYS.QUESTIONS, "preview/".concat(id)]];
-    },
+      return [QUERY_KEYS.QUESTIONS, id];
+    }, function (_, _ref8) {
+      var id = _ref8.id;
+      return [QUERY_KEYS.QUESTIONS, "preview/".concat(id)];
+    }],
     onSuccess: function onSuccess() {
       options.onSuccess && options.onSuccess.apply(options, arguments);
     }
   }));
 };
-var useSubmission = function useSubmission(_ref9) {
-  var formId = _ref9.formId,
-    submissionId = _ref9.submissionId,
-    options = _objectWithoutProperties$1(_ref9, _excluded4$1);
+var useSubmission = function useSubmission(_ref10) {
+  var formId = _ref10.formId,
+    submissionId = _ref10.submissionId,
+    options = _objectWithoutProperties$1(_ref10, _excluded4$1);
   return reactQuery.useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
     return neetoFormApi.getPublicSubmission(formId, submissionId);
   }, _objectSpread$j(_objectSpread$j({}, options), {}, {
@@ -736,9 +739,9 @@ var useSubmission = function useSubmission(_ref9) {
 };
 var useCreateSubmission = function useCreateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref10) {
-    var formId = _ref10.formId,
-      values = _ref10.values;
+  return reactQuery.useMutation(function (_ref11) {
+    var formId = _ref11.formId,
+      values = _ref11.values;
     return neetoFormApi.submitPublicForm(formId, values);
   }, _objectSpread$j(_objectSpread$j({}, options), {}, {
     onSuccess: function onSuccess() {
@@ -757,9 +760,9 @@ var useCreateSubmission = function useCreateSubmission(options) {
 };
 var useUpdateSubmission = function useUpdateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref11) {
-    var formId = _ref11.formId,
-      values = _ref11.values;
+  return reactQuery.useMutation(function (_ref12) {
+    var formId = _ref12.formId,
+      values = _ref12.values;
     return neetoFormApi.updatePublicSubmission(formId, values);
   }, _objectSpread$j(_objectSpread$j({}, options), {}, {
     onSuccess: function onSuccess() {
@@ -782,6 +785,11 @@ var DEFAULT_AVAILABLE_LANGUAGES = [{
   name: "English"
 }];
 var QUESTIONS_WITHOUT_FIELD_CODE = ["paragraph", "termsandcondition", "condition", "file_upload"];
+var QUESTIONS_INITIAL_VALUE = {
+  enabled: false,
+  questions: [],
+  title: ""
+};
 var RESERVED_FIELD_CODES = ["month", "date", "time"];
 
 function _arrayWithHoles$3(arr) {
@@ -9830,7 +9838,9 @@ var useBuildFormStore = zustand.create(reactUtils.withImmutableActions(function
       submitForm: neetoCist.noop,
       resetForm: neetoCist.noop,
       selectedLanguage: i18next__default["default"].resolvedLanguage,
-      formId: null
+      formId: null,
+      enabled: false,
+      title: ""
     },
     setFormData: function setFormData(payload) {
       return set(ramda.assoc("formState", payload));
@@ -9842,14 +9852,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 +9876,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 +9930,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);
@@ -11679,7 +11697,7 @@ var List = function List(_ref) {
   })))));
 };
 
-var _excluded$6 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange"];
+var _excluded$6 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange"];
 function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
@@ -11698,6 +11716,8 @@ var Form = function Form(_ref) {
     isDisabledFieldLabel = _ref.isDisabledFieldLabel,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
     enableFieldCode = _ref.enableFieldCode,
+    isFormEnabled = _ref.isFormEnabled,
+    savedTitle = _ref.savedTitle,
     formTitle = _ref.formTitle,
     formDescription = _ref.formDescription,
     selectedLanguage = _ref.selectedLanguage,
@@ -11727,6 +11747,8 @@ var Form = function Form(_ref) {
   React$2.useEffect(function () {
     setFormData({
       formId: formId,
+      enabled: isFormEnabled,
+      title: savedTitle,
       values: values,
       dirty: dirty,
       isSubmitting: isSubmitting,
@@ -11736,7 +11758,7 @@ var Form = function Form(_ref) {
       resetForm: resetForm,
       selectedLanguage: selectedLanguage
     });
-  }, [formId, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage]);
   var questions = values.questions;
   React$2.useEffect(function () {
     onValueChange === null || onValueChange === void 0 || onValueChange(questions);
@@ -12034,12 +12056,11 @@ var BuildForm = function BuildForm(_ref) {
       }
     }),
     _useFetchQuestions$da = _useFetchQuestions.data,
-    _useFetchQuestions$da2 = _useFetchQuestions$da === void 0 ? {
-      title: "",
-      questions: []
-    } : _useFetchQuestions$da,
-    questions = _useFetchQuestions$da2.questions,
+    _useFetchQuestions$da2 = _useFetchQuestions$da === void 0 ? QUESTIONS_INITIAL_VALUE : _useFetchQuestions$da,
+    isFormEnabled = _useFetchQuestions$da2.enabled,
+    savedTitle = _useFetchQuestions$da2.title,
     isQuestionsLoading = _useFetchQuestions$da2.isQuestionsLoading,
+    questions = _useFetchQuestions$da2.questions,
     isLoading = _useFetchQuestions.isLoading,
     refetch = _useFetchQuestions.refetch;
   if (isLoading || showLoader && isQuestionsLoading) {
@@ -12047,7 +12068,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 +12077,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 +12093,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 +12112,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,
@@ -12100,11 +12125,13 @@ var BuildForm = function BuildForm(_ref) {
       getActiveKindDetails: getActiveKindDetails,
       isDeletable: isDeletable,
       isDisabledFieldLabel: isDisabledFieldLabel,
+      isFormEnabled: isFormEnabled,
       isKindAlreadyActive: isKindAlreadyActive,
       isRequiredField: isRequiredField,
       kindUniqueOn: kindUniqueOn,
       onLanguageChange: onLanguageChange,
       onValueChange: onValueChange,
+      savedTitle: savedTitle,
       selectedLanguage: selectedLanguage,
       showActionBlock: showActionBlock,
       showAddQuestionDivider: showAddQuestionDivider,
@@ -27257,7 +27284,8 @@ var ExternalForm = function ExternalForm(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null));
   }
   var title = form.title,
-    questions = form.questions;
+    _form$questions = form.questions,
+    questions = _form$questions === void 0 ? [] : _form$questions;
   var renderedQuestions = preview ? questions.filter(function (_ref4) {
     var _destroy = _ref4._destroy;
     return !_destroy;