@bigbinary/neeto-form-frontend 3.10.9 → 3.10.12

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

@@ -26,6 +26,7 @@
       "selectOne": "Select one",
       "required": "Required",
       "hideQuestion": "Hide question",
+      "readOnly": "Mark question as read-only",
       "invalidURL": "Invalid URL",
       "generateLink": "Generate link",
       "paragraphCantBeEmpty": "Paragraph can't be empty",
@@ -131,6 +132,7 @@
             "fieldCodeHelpDescription": "If you change the field code, any existing shared links containing the old field code as query parameter, will not work correctly. <Link>View help article</Link> for more information.",
             "questionType": "Question type",
             "hideQuestionHelpDescription": "When enabled, this question will not be visible in the created form. It can be used for tracking UTM parameters.",
+            "readOnlyHelpDescription": "When enabled, the response for this question will not be editable. It can be used for pre-filled forms.",
             "verifyHuman": "Verify that you are a human"
           }
         }

package/dist/BuildForm.js

@@ -9,7 +9,7 @@ import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import { equals, path, when, assoc, includes, isEmpty, reject, keys, pick, omit, evolve, map, modify, without, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, pluck, test, difference, prop, split, last, __, concat, F } from 'ramda';
 import { h as useDeleteQuestion, i as useFetchQuestions, j as useCreateQuestion, k as useUpdateQuestion, l as useReorderQuestions, Q as QUERY_KEYS } from './useFormApi-DtoxIPE7.js';
 import { Q as QUESTION_KIND } from './constants-DlRX5mcQ.js';
-import { I as INDEPENDENT_LABELS_MAP, i as isRichTextQuestion, h as htmlToPlainText, a as isElementOverflowing, D as Drag, S as SELECTABLE_KINDS, b as isAutoGeneratedQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, R as RESERVED_FIELD_CODES, c as isDefaultLanguage, d as buildDisabledAddButtonTooltipProps, e as buildAddQuestionButtonProps, f as QUESTION_TYPES, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, j as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, k as NON_HIDEABLE_FIELDS, l as RICH_TEXT_QUESTIONS, C as CAPTCHA_TYPES, m as FILE_TYPES_MAP, n as FILE_GROUPS, M as MINIMUM_OPTIONS, o as RATING_OPTIONS, p as STAR_RATING_MIN_VALUE_OPTIONS, q as STAR_RATING_MAX_VALUE_OPTIONS, r as STAR_RATING_ICONS_MAP, s as QUESTION_ACTIONS, t as QUESTION_KINDS, u as getActiveQuestionKindDetails, w as DEFAULT_AVAILABLE_LANGUAGES, x as QUESTIONS_INITIAL_VALUE, y as buildReorderPayload, z as MANDATORY_KINDS } from './constants-BL-0uUwk.js';
+import { I as INDEPENDENT_LABELS_MAP, i as isRichTextQuestion, h as htmlToPlainText, a as isElementOverflowing, D as Drag, S as SELECTABLE_KINDS, b as isAutoGeneratedQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, R as RESERVED_FIELD_CODES, c as isDefaultLanguage, d as buildDisabledAddButtonTooltipProps, e as buildAddQuestionButtonProps, f as QUESTION_TYPES, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, j as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, k as NON_HIDEABLE_FIELDS, l as NON_READ_ONLY_FIELDS, m as RICH_TEXT_QUESTIONS, C as CAPTCHA_TYPES, n as FILE_TYPES_MAP, o as FILE_GROUPS, M as MINIMUM_OPTIONS, p as RATING_OPTIONS, q as STAR_RATING_MIN_VALUE_OPTIONS, r as STAR_RATING_MAX_VALUE_OPTIONS, s as STAR_RATING_ICONS_MAP, t as QUESTION_ACTIONS, u as QUESTION_KINDS, w as getActiveQuestionKindDetails, x as DEFAULT_AVAILABLE_LANGUAGES, y as QUESTIONS_INITIAL_VALUE, z as buildReorderPayload, A as MANDATORY_KINDS } from './constants-DwXbiMSR.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
@@ -17,7 +17,7 @@ import { isMetaKeyPressed, withT, useStateWithDependency, useOnClickOutside } fr
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { useTranslation, Trans } from 'react-i18next';
-import { a as useBuildFormStore } from './buildForm-Zw1xpuBS.js';
+import { a as useBuildFormStore } from './buildForm-D5-1L1Je.js';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
 import { f as fieldWithFallback, i as isFunction } from './index-BL5SirYx.js';
@@ -33,12 +33,12 @@ import { v4 } from 'uuid';
 import NoData from '@bigbinary/neetoui/NoData';
 import Pane from '@bigbinary/neetoui/Pane';
 import Form$2 from '@bigbinary/neetoui/formik/Form';
+import Textarea from '@bigbinary/neetoui/formik/Textarea';
+import Accordion from '@bigbinary/neetoui/Accordion';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Switch from '@bigbinary/neetoui/formik/Switch';
-import Textarea from '@bigbinary/neetoui/formik/Textarea';
 import NeetoEditor from '@bigbinary/neeto-editor/Editor';
 import Button from '@bigbinary/neetoui/Button';
-import Accordion from '@bigbinary/neetoui/Accordion';
 import Input from '@bigbinary/neetoui/formik/Input';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
@@ -819,28 +819,21 @@ var FieldCode = function FieldCode() {
   var helpDocUrl = useBuildFormStore(path(["formState", "helpDocUrls", "fieldCode"]));
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/jsx(Accordion, {
-    className: "neeto-form-nano-advanced-properties-accordion",
-    "data-cy": "advanced-properties-card",
-    children: /*#__PURE__*/jsx(Accordion.Item, {
-      title: t("neetoForm.common.advancedProperties"),
-      children: /*#__PURE__*/jsx(InputWithMaxLength, {
-        required: true,
-        label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
-        name: "fieldCode",
-        rejectCharsRegex: FIELD_CODES_REJECT_CHARS_REGEX,
-        helpText: helpDocUrl && /*#__PURE__*/jsx(Trans, {
-          i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
-          components: {
-            Link: /*#__PURE__*/jsx(Button, {
-              className: "text-xs",
-              href: helpDocUrl,
-              style: "link",
-              target: "_blank"
-            })
-          }
+  return /*#__PURE__*/jsx(InputWithMaxLength, {
+    required: true,
+    label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
+    name: "fieldCode",
+    rejectCharsRegex: FIELD_CODES_REJECT_CHARS_REGEX,
+    helpText: helpDocUrl && /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
+      components: {
+        Link: /*#__PURE__*/jsx(Button, {
+          className: "text-xs",
+          href: helpDocUrl,
+          style: "link",
+          target: "_blank"
         })
-      })
+      }
     })
   });
 };
@@ -866,17 +859,20 @@ var Form$1 = function Form(_ref) {
     setTouched = _useFormikContext.setTouched,
     setFieldValue = _useFormikContext.setFieldValue;
   var hideQuestionHelpDoc = useBuildFormStore(path(["formState", "helpDocUrls", "hideQuestion"]));
+  var readOnlyHelpDoc = useBuildFormStore(path(["formState", "helpDocUrls", "readOnly"]));
   var _useBuildFormStore = useBuildFormStore(function (store) {
-      var _store$formState, _store$formState2, _store$formState3, _store$formState4;
+      var _store$formState, _store$formState2, _store$formState3, _store$formState4, _store$formState5;
       return {
         enableDomainWhitelisting: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["enableDomainWhitelisting"],
         enableDomainBlacklisting: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["enableDomainBlacklisting"],
-        selectedLanguage: (_store$formState3 = store["formState"]) === null || _store$formState3 === void 0 ? void 0 : _store$formState3["selectedLanguage"],
-        isUsingDefaultQuestionKinds: (_store$formState4 = store["formState"]) === null || _store$formState4 === void 0 ? void 0 : _store$formState4["isUsingDefaultQuestionKinds"]
+        showReadOnlySwitch: (_store$formState3 = store["formState"]) === null || _store$formState3 === void 0 ? void 0 : _store$formState3["showReadOnlySwitch"],
+        selectedLanguage: (_store$formState4 = store["formState"]) === null || _store$formState4 === void 0 ? void 0 : _store$formState4["selectedLanguage"],
+        isUsingDefaultQuestionKinds: (_store$formState5 = store["formState"]) === null || _store$formState5 === void 0 ? void 0 : _store$formState5["isUsingDefaultQuestionKinds"]
       };
     }, shallow),
     enableDomainWhitelisting = _useBuildFormStore.enableDomainWhitelisting,
     enableDomainBlacklisting = _useBuildFormStore.enableDomainBlacklisting,
+    showReadOnlySwitch = _useBuildFormStore.showReadOnlySwitch,
     selectedLanguage = _useBuildFormStore.selectedLanguage,
     isUsingDefaultQuestionKinds = _useBuildFormStore.isUsingDefaultQuestionKinds;
   var kind = values.kind;
@@ -900,6 +896,7 @@ var Form$1 = function Form(_ref) {
   var hasAdditionalData = includes(kind, QUESTIONS_WITH_ADDITIONAL_DATA);
   var shouldShowFieldCode = enableFieldCode && !includes(kind, QUESTIONS_WITHOUT_FIELD_CODE);
   var shouldShowHideSwitch = !includes(kind, NON_HIDEABLE_FIELDS);
+  var shouldShowReadOnlySwitch = showReadOnlySwitch && !includes(kind, NON_READ_ONLY_FIELDS);
   var isSettingsBlockVisible = !isRequired && (!isImmutable || shouldShowHideSwitch);
   var handleKindChange = function handleKindChange(option) {
     var data = buildQuestionData(option);
@@ -981,8 +978,22 @@ var Form$1 = function Form(_ref) {
             label: t("neetoForm.common.hideQuestion"),
             labelProps: hideSwitchLabelProps(hideQuestionHelpDoc),
             name: "isHidden"
+          }), shouldShowReadOnlySwitch && /*#__PURE__*/jsx(Switch, {
+            label: t("neetoForm.common.readOnly"),
+            labelProps: readOnlySwitchLabelProps(readOnlyHelpDoc),
+            name: "isReadOnly"
           })]
-        }), shouldShowFieldCode && /*#__PURE__*/jsx(FieldCode, {})]
+        }), (shouldShowFieldCode || shouldShowReadOnlySwitch) && /*#__PURE__*/jsx(Accordion, {
+          className: "neeto-form-nano-advanced-properties-accordion",
+          "data-cy": "advanced-properties-card",
+          children: /*#__PURE__*/jsx(Accordion.Item, {
+            title: t("neetoForm.common.advancedProperties"),
+            children: /*#__PURE__*/jsx("div", {
+              className: "flex flex-col space-y-4",
+              children: shouldShowFieldCode && /*#__PURE__*/jsx(FieldCode, {})
+            })
+          })
+        })]
       })]
     })
   });
@@ -1904,6 +1915,19 @@ var hideSwitchLabelProps = function hideSwitchLabelProps(helpUrl) {
     }
   } : undefined;
 };
+var readOnlySwitchLabelProps = function readOnlySwitchLabelProps(helpUrl) {
+  return {
+    helpIconProps: {
+      popoverProps: {
+        description: t("neetoForm.questions.common.questionFields.field.readOnlyHelpDescription"),
+        helpLinkProps: helpUrl ? {
+          href: helpUrl,
+          label: t("neetoForm.common.viewHelpArticle")
+        } : undefined
+      }
+    }
+  };
+};
 
 var _excluded$1 = ["isOpen", "onClose", "action", "question", "availableQuestionKinds"];
 function ownKeys$3(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; }
@@ -1945,7 +1969,7 @@ var AddQuestion = function AddQuestion(_ref) {
   }));
 };
 
-var _excluded = ["questionKinds", "onValueChange", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange", "additionalActionOptions", "isReordering", "additionalQuestionKindPattern", "showActionBlock", "buildRequestArgs", "enableDomainBlacklisting", "enableDomainWhitelisting", "helpDocUrls", "hostSpecificData", "questionsHelpProps", "isUsingDefaultQuestionKinds"];
+var _excluded = ["questionKinds", "onValueChange", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange", "additionalActionOptions", "isReordering", "additionalQuestionKindPattern", "showActionBlock", "showReadOnlySwitch", "buildRequestArgs", "enableDomainBlacklisting", "enableDomainWhitelisting", "helpDocUrls", "hostSpecificData", "questionsHelpProps", "isUsingDefaultQuestionKinds"];
 function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
@@ -1972,6 +1996,7 @@ var Form = function Form(_ref) {
     isReordering = _ref.isReordering,
     additionalQuestionKindPattern = _ref.additionalQuestionKindPattern,
     showActionBlock = _ref.showActionBlock,
+    showReadOnlySwitch = _ref.showReadOnlySwitch,
     buildRequestArgs = _ref.buildRequestArgs,
     enableDomainBlacklisting = _ref.enableDomainBlacklisting,
     enableDomainWhitelisting = _ref.enableDomainWhitelisting,
@@ -2033,9 +2058,10 @@ var Form = function Form(_ref) {
       helpDocUrls: helpDocUrls,
       enableDomainBlacklisting: enableDomainBlacklisting,
       enableDomainWhitelisting: enableDomainWhitelisting,
-      isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds
+      isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
+      showReadOnlySwitch: showReadOnlySwitch
     });
-  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds, showReadOnlySwitch]);
   var questions = values.questions;
   var handleSelect = function handleSelect(question) {
     setSelectedQuestion(question);
@@ -2261,7 +2287,9 @@ var BuildForm = function BuildForm(_ref) {
     _ref$questionsHelpPro = _ref.questionsHelpProps,
     questionsHelpProps = _ref$questionsHelpPro === void 0 ? {} : _ref$questionsHelpPro,
     _ref$hostSpecificData = _ref.hostSpecificData,
-    hostSpecificData = _ref$hostSpecificData === void 0 ? {} : _ref$hostSpecificData;
+    hostSpecificData = _ref$hostSpecificData === void 0 ? {} : _ref$hostSpecificData,
+    _ref$showReadOnlySwit = _ref.showReadOnlySwitch,
+    showReadOnlySwitch = _ref$showReadOnlySwit === void 0 ? false : _ref$showReadOnlySwit;
   var queryClient = useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: showThumbsUpToastr
@@ -2366,6 +2394,7 @@ var BuildForm = function BuildForm(_ref) {
           savedTitle: savedTitle,
           selectedLanguage: selectedLanguage,
           showActionBlock: showActionBlock,
+          showReadOnlySwitch: showReadOnlySwitch,
           submitButtonProps: submitButtonProps
         })), {}, {
           formId: id,