@bigbinary/neeto-form-frontend 3.9.1 → 3.9.3

package/dist/BuildForm.js

@@ -3,29 +3,29 @@ import { useState, useRef, useEffect, createElement } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import classnames from 'classnames';
 import { useFormikContext, useField, FieldArray, Form as Form$3, Formik } from 'formik';
-import { isPresent, truncate, findBy, isNotPresent, slugify, filterBy, hyphenate, noop, nullSafe, removeBy } from '@bigbinary/neeto-cist';
-import { showThumbsUpToastr, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
+import { isPresent, truncate, findBy, isNotPresent, slugify, hyphenate, noop, nullSafe, filterBy, removeBy } from '@bigbinary/neeto-cist';
+import { showThumbsUpToastr, withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { equals, includes, __, reduce, assoc, path, when, isEmpty, reject, keys, pick, omit, pluck, modify, without, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, map, test, difference, prop, split, last, concat, F } from 'ramda';
-import { e as useDeleteQuestion, f as useFetchQuestions, g as useCreateQuestion, h as useUpdateQuestion, i as useReorderQuestions, Q as QUERY_KEYS } from './useFormApi-dee63a95.js';
-import { Q as QUESTION_KIND } from './constants-75b78b3a.js';
-import { I as INDEPENDENT_LABELS_MAP, R as RICH_TEXT_QUESTIONS, A as AUTO_GENERATED_KINDS, a as IMMUTABLE_KINDS, h as htmlToPlainText, i as isElementOverflowing, D as Drag, Q as QUESTION_TYPES, S as SELECTABLE_KINDS, b as RESERVED_FIELD_CODES, c as QUESTIONS_WITHOUT_FIELD_CODE, N as NON_HIDEABLE_FIELDS, C as CAPTCHA_TYPES, F as FILE_TYPES_MAP, d as FILE_GROUPS, M as MINIMUM_OPTIONS, e as RATING_OPTIONS, f as STAR_RATING_MIN_VALUE_OPTIONS, g as STAR_RATING_MAX_VALUE_OPTIONS, j as STAR_RATING_ICONS_MAP, k as QUESTION_ACTIONS, l as QUESTION_KINDS, m as getActiveQuestionKindDetails, n as DEFAULT_AVAILABLE_LANGUAGES, o as QUESTIONS_INITIAL_VALUE, p as MANDATORY_KINDS } from './constants-9538731d.js';
+import { equals, includes, __, reduce, assoc, path, when, isEmpty, reject, keys, pick, omit, modify, without, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, pluck, map, 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-BS-TCKwR.js';
+import { Q as QUESTION_KIND } from './constants-DlRX5mcQ.js';
+import { I as INDEPENDENT_LABELS_MAP, R as RICH_TEXT_QUESTIONS, A as AUTO_GENERATED_KINDS, a as IMMUTABLE_KINDS, h as htmlToPlainText, i as isElementOverflowing, D as Drag, b as QUESTION_TYPES, S as SELECTABLE_KINDS, N as NON_BASIC_LATIN_CHARACTERS_REGEX, c as RESERVED_FIELD_CODES, F as FIELD_CODES_REJECT_CHARS_REGEX, Q as QUESTIONS_WITHOUT_FIELD_CODE, d as NON_HIDEABLE_FIELDS, C as CAPTCHA_TYPES, e as FILE_TYPES_MAP, f as FILE_GROUPS, M as MINIMUM_OPTIONS, j as RATING_OPTIONS, k as STAR_RATING_MIN_VALUE_OPTIONS, l as STAR_RATING_MAX_VALUE_OPTIONS, m as STAR_RATING_ICONS_MAP, n as QUESTION_ACTIONS, o as QUESTION_KINDS, p as getActiveQuestionKindDetails, q as DEFAULT_AVAILABLE_LANGUAGES, r as QUESTIONS_INITIAL_VALUE, s as MANDATORY_KINDS } from './constants-CEOQLu3J.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { isMetaKeyPressed, withT, useStateWithDependency, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
+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-dfd708c6.js';
+import { a as useBuildFormStore } from './buildForm-GdQQ62ve.js';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
-import { f as fieldWithFallback, i as isFunction } from './index-2664c3e7.js';
+import { f as fieldWithFallback, i as isFunction } from './index-BL5SirYx.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Typography from '@bigbinary/neetoui/Typography';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
-import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import { t } from 'i18next';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
@@ -443,18 +443,43 @@ function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t
 var isChoiceQuestion = function isChoiceQuestion(question) {
   return includes(question === null || question === void 0 ? void 0 : question.kind, SELECTABLE_KINDS);
 };
-var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions) {
-  var fieldCodes = pluck("fieldCode", filterBy({
-    kind: type
-  }, questions));
-  var uniqueNumber = fieldCodes.length;
+var underscoredWithoutSpecialCharacters = function underscoredWithoutSpecialCharacters(string) {
+  return string.toLowerCase().replace(/[\s-]/g, "_").replace(/[\W]/gi, "").replace(/_+/g, "_").replace(/^_+|_+$/, "");
+};
+var addSuffixForReservedFieldCode = function addSuffixForReservedFieldCode(fieldCode) {
+  return RESERVED_FIELD_CODES.includes(fieldCode) ? "".concat(fieldCode, "_field") : fieldCode;
+};
+var getUniqueNumbersFromExistingFieldCodes = function getUniqueNumbersFromExistingFieldCodes(prefix, questions) {
+  return questions.filter(function (question) {
+    return question.fieldCode.startsWith(prefix);
+  }).map(function (question) {
+    return parseInt(question.fieldCode.replace(prefix, "")) || 0;
+  });
+};
+var generateFieldCodePrefix = function generateFieldCodePrefix(label, kind) {
+  var prefix;
+  if (NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || isEmpty(label)) {
+    prefix = kind;
+  } else {
+    var sanitizedLabel = underscoredWithoutSpecialCharacters(label).slice(0, 30);
+    prefix = isEmpty(sanitizedLabel) ? kind : sanitizedLabel;
+  }
+  return addSuffixForReservedFieldCode(prefix) || "";
+};
+var generateUniqueFieldCode = function generateUniqueFieldCode(_ref) {
+  var questions = _ref.questions,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? "" : _ref$kind;
+  var prefix = generateFieldCodePrefix(label, kind);
+  var uniqueNumber = Math.max.apply(Math, [0].concat(_toConsumableArray(getUniqueNumbersFromExistingFieldCodes(prefix, questions))));
   var candidateFieldCode = "";
-  var prefix = RESERVED_FIELD_CODES.includes(type) ? "".concat(type, "_field") : type;
 
   //We need to continue this while loop until we can generate a unique fieldCode
   // eslint-disable-next-line no-constant-condition
   while (true) {
-    candidateFieldCode = "".concat(prefix).concat(uniqueNumber || "");
+    candidateFieldCode = "".concat(prefix).concat(uniqueNumber === 0 ? "" : uniqueNumber);
     if (!findBy({
       fieldCode: candidateFieldCode
     }, questions)) break;
@@ -462,18 +487,18 @@ var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions)
   }
   return candidateFieldCode;
 };
-var isQuestionKindAlreadyActive = function isQuestionKindAlreadyActive(_ref) {
-  var activeQuestions = _ref.activeQuestions,
-    kind = _ref.kind;
+var isQuestionKindAlreadyActive = function isQuestionKindAlreadyActive(_ref2) {
+  var activeQuestions = _ref2.activeQuestions,
+    kind = _ref2.kind;
   return activeQuestions.some(function (activeQuestion) {
     return activeQuestion.kind === kind.type && activeQuestion._destroy !== true;
   });
 };
-var handleFieldDragEnd = function handleFieldDragEnd(_ref2) {
-  var items = _ref2.items,
-    setValue = _ref2.setValue,
-    source = _ref2.source,
-    destination = _ref2.destination;
+var handleFieldDragEnd = function handleFieldDragEnd(_ref3) {
+  var items = _ref3.items,
+    setValue = _ref3.setValue,
+    source = _ref3.source,
+    destination = _ref3.destination;
   if (!(destination && items instanceof Array)) return;
   var nextItems = _toConsumableArray(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
@@ -484,32 +509,36 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref2) {
   });
   setValue("questions", orderedItems);
 };
-var createFieldData = function createFieldData(_ref3) {
-  var _ref3$kind = _ref3.kind,
-    defaults = _ref3$kind.defaults,
-    type = _ref3$kind.type,
-    metadata = _ref3$kind.metadata,
-    _ref3$isRequired = _ref3.isRequired,
-    isRequired = _ref3$isRequired === void 0 ? undefined : _ref3$isRequired,
-    questions = _ref3.questions;
+var createFieldData = function createFieldData(_ref4) {
+  var _ref4$kind = _ref4.kind,
+    defaults = _ref4$kind.defaults,
+    type = _ref4$kind.type,
+    metadata = _ref4$kind.metadata,
+    _ref4$isRequired = _ref4.isRequired,
+    isRequired = _ref4$isRequired === void 0 ? undefined : _ref4$isRequired,
+    questions = _ref4.questions;
   return _objectSpread$e(_objectSpread$e({}, defaults), {}, {
     metadata: metadata,
     isRequired: isRequired,
     kind: type,
     nodeId: v4(),
-    fieldCode: generateUniqueFieldCode(type, questions)
+    fieldCode: generateUniqueFieldCode({
+      questions: questions,
+      kind: type,
+      label: defaults["label"]
+    })
   });
 };
-var duplicateFieldData = function duplicateFieldData(_ref4) {
-  var item = _ref4.item,
-    questionKinds = _ref4.questionKinds,
-    questions = _ref4.questions;
-  var questionKind = findBy({
-    type: item.kind
-  }, questionKinds);
+var duplicateFieldData = function duplicateFieldData(_ref5) {
+  var item = _ref5.item,
+    questionKinds = _ref5.questionKinds,
+    questions = _ref5.questions;
   var isRequired = item.isRequired,
     kind = item.kind,
     optionsAttributes = item.optionsAttributes;
+  var questionKind = findBy({
+    type: kind
+  }, questionKinds);
   var label = fieldWithFallback(item, "label");
   var defaultAttributeNames = keys(questionKind.defaults || {});
   var defaultAttributes = pick(defaultAttributeNames, item);
@@ -522,15 +551,19 @@ var duplicateFieldData = function duplicateFieldData(_ref4) {
     label: newQuestionLabel,
     optionsAttributes: optionsAttributes && optionsAttributes.map(omit(["id"])),
     nodeId: v4(),
-    fieldCode: generateUniqueFieldCode(item.kind, questions),
+    fieldCode: generateUniqueFieldCode({
+      questions: questions,
+      kind: kind,
+      label: newQuestionLabel
+    }),
     displayOrder: item.displayOrder + 1
   });
 };
-var getAvailableQuestionKinds = function getAvailableQuestionKinds(_ref5) {
-  var allQuestionKinds = _ref5.allQuestionKinds,
-    _ref5$activeQuestions = _ref5.activeQuestions,
-    activeQuestions = _ref5$activeQuestions === void 0 ? [] : _ref5$activeQuestions,
-    isKindAlreadyActive = _ref5.isKindAlreadyActive;
+var getAvailableQuestionKinds = function getAvailableQuestionKinds(_ref6) {
+  var allQuestionKinds = _ref6.allQuestionKinds,
+    _ref6$activeQuestions = _ref6.activeQuestions,
+    activeQuestions = _ref6$activeQuestions === void 0 ? [] : _ref6$activeQuestions,
+    isKindAlreadyActive = _ref6.isKindAlreadyActive;
   if (isEmpty(activeQuestions)) return allQuestionKinds;
   return reject(function (kind) {
     var isSingularKind = kind.isSingular;
@@ -593,6 +626,7 @@ var INITIAL_VALUES = {
   label: "",
   fieldCode: ""
 };
+var VALID_FIELD_CODE_REGEX = /^[a-z0-9]+(_[a-z0-9]+)*$/;
 
 var _excluded$8 = ["label", "name"];
 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; }
@@ -803,6 +837,7 @@ var FieldCode = function FieldCode() {
         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: {
@@ -837,7 +872,8 @@ var Form$1 = function Form(_ref) {
     values = _useFormikContext.values,
     setValues = _useFormikContext.setValues,
     setErrors = _useFormikContext.setErrors,
-    setTouched = _useFormikContext.setTouched;
+    setTouched = _useFormikContext.setTouched,
+    setFieldValue = _useFormikContext.setFieldValue;
   var hideQuestionHelpDoc = useBuildFormStore(path(["formState", "helpDocUrls", "hideQuestion"]));
   var _useBuildFormStore = useBuildFormStore(function (store) {
       var _store$formState, _store$formState2;
@@ -896,6 +932,16 @@ var Form$1 = function Form(_ref) {
     setErrors({});
     setTouched({});
   };
+  var handleLabelChange = function handleLabelChange(label) {
+    setFieldValue("label", label);
+    if (isEdit) return;
+    var uniqueFieldCode = generateUniqueFieldCode({
+      questions: questions,
+      label: label,
+      kind: kind
+    });
+    setFieldValue("fieldCode", uniqueFieldCode);
+  };
   return /*#__PURE__*/jsx(Pane.Body, {
     children: /*#__PURE__*/jsxs("div", {
       className: "w-full space-y-4",
@@ -920,7 +966,8 @@ var Form$1 = function Form(_ref) {
             disabled: isLabelDisabled,
             name: "label",
             placeholder: DEFAULT_PLACEHOLDERS[kind],
-            label: t("neetoForm.questions.common.questionFields.field.question")
+            label: t("neetoForm.questions.common.questionFields.field.question"),
+            onChange: withEventTargetValue(handleLabelChange)
           }), shouldShowPlaceholder && /*#__PURE__*/jsx(FormikAdaptiveInput, {
             name: "placeholder",
             label: t("neetoForm.questions.common.questionFields.field.placeholder")
@@ -950,38 +997,48 @@ var requiredLabelValidation = function requiredLabelValidation(schema, field) {
     field: field
   }));
 };
+var fieldCodeValidation = function fieldCodeValidation(schema, field) {
+  return schema.trim().required(t("neetoForm.common.fieldReq", {
+    field: field
+  })).matches(VALID_FIELD_CODE_REGEX, t("neetoForm.error.invalidField", {
+    label: field
+  }));
+};
 var richTextFieldMissingErrorMessage = function richTextFieldMissingErrorMessage(kind) {
   var field = equals(kind, QUESTION_TYPES.PARAGRAPH) ? t("neetoForm.fields.def") : t("neetoForm.fields.tcf");
   return t("neetoForm.error.fieldCantBeEmpty", {
     field: field
   });
 };
-var formValidationSchema = yup.object().shape({
-  kind: yup.string().trim().required(t("neetoForm.common.fieldReq", {
-    field: t("neetoForm.questions.common.questionFields.field.questionType")
-  })),
-  label: yup.string().when("kind", function (kind, schema) {
-    return includes(kind, RICH_TEXT_QUESTIONS) ? schema.test("required", richTextFieldMissingErrorMessage(kind), function (value) {
-      return !isEditorEmpty(value);
-    }) : requiredLabelValidation(schema, t("neetoForm.questions.common.questionFields.field.question"));
-  }),
-  fieldCode: yup.string().trim().notOneOf(RESERVED_FIELD_CODES, t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
-    return includes(kind, QUESTIONS_WITHOUT_FIELD_CODE) ? schema.notRequired() : requiredLabelValidation(schema, t("neetoForm.questions.common.questionFields.field.fieldCode"));
-  }),
-  optionsAttributes: yup.array().when("_destroy", {
-    is: true,
-    otherwise: function otherwise(schema) {
-      return schema.when("kind", function (kind, schema) {
-        return includes(kind, SELECTABLE_KINDS) ? schema.of(yup.object().shape({
-          label: requiredLabelValidation(yup.string(), t("neetoForm.questions.common.questionFields.field.option"))
-        })) : schema.notRequired();
-      });
-    }
-  }),
-  highestRatingLabel: yup.string().nullable(),
-  averageRatingLabel: yup.string().nullable(),
-  lowestRatingLabel: yup.string().nullable()
-});
+var formValidationSchema = function formValidationSchema() {
+  var enableFieldCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return yup.object().shape({
+    kind: yup.string().trim().required(t("neetoForm.common.fieldReq", {
+      field: t("neetoForm.questions.common.questionFields.field.questionType")
+    })),
+    label: yup.string().when("kind", function (kind, schema) {
+      return includes(kind, RICH_TEXT_QUESTIONS) ? schema.test(richTextFieldMissingErrorMessage(kind), function (value) {
+        return !isEditorEmpty(value);
+      }) : requiredLabelValidation(schema, t("neetoForm.questions.common.questionFields.field.question"));
+    }),
+    fieldCode: yup.string().trim().notOneOf(RESERVED_FIELD_CODES, t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
+      return enableFieldCode && !includes(kind, QUESTIONS_WITHOUT_FIELD_CODE) ? fieldCodeValidation(schema, t("neetoForm.questions.common.questionFields.field.fieldCode")) : schema.notRequired();
+    }),
+    optionsAttributes: yup.array().when("_destroy", {
+      is: true,
+      otherwise: function otherwise(schema) {
+        return schema.when("kind", function (kind, schema) {
+          return includes(kind, SELECTABLE_KINDS) ? schema.of(yup.object().shape({
+            label: requiredLabelValidation(yup.string(), t("neetoForm.questions.common.questionFields.field.option"))
+          })) : schema.notRequired();
+        });
+      }
+    }),
+    highestRatingLabel: yup.string().nullable(),
+    averageRatingLabel: yup.string().nullable(),
+    lowestRatingLabel: yup.string().nullable()
+  });
+};
 
 var _excluded$6 = ["question", "onClose", "questions", "handleSelect", "buildRequestArgs", "isOpen"];
 function ownKeys$b(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; }
@@ -1041,7 +1098,7 @@ var Add = function Add(_ref) {
     }), /*#__PURE__*/jsx(Form$2, {
       formikProps: {
         initialValues: INITIAL_VALUES,
-        validationSchema: formValidationSchema,
+        validationSchema: formValidationSchema(props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxs(Fragment, {
@@ -1111,7 +1168,7 @@ var Edit = function Edit(_ref) {
     }), /*#__PURE__*/jsx(Form$2, {
       formikProps: {
         initialValues: question,
-        validationSchema: formValidationSchema,
+        validationSchema: formValidationSchema(props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxs(Fragment, {
@@ -2004,7 +2061,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"];
+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", "questionsHelpProps"];
 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) {
@@ -2035,6 +2092,7 @@ var Form = function Form(_ref) {
     enableDomainBlacklisting = _ref.enableDomainBlacklisting,
     enableDomainWhitelisting = _ref.enableDomainWhitelisting,
     helpDocUrls = _ref.helpDocUrls,
+    questionsHelpProps = _ref.questionsHelpProps,
     formDomProps = _objectWithoutProperties(_ref, _excluded);
   var containerRef = useRef();
   var _useTranslation = useTranslation(),
@@ -2165,7 +2223,7 @@ var Form = function Form(_ref) {
         return setIsDeleteAlertOpen(false);
       }
     }), /*#__PURE__*/jsxs(Form$3, _objectSpread$1(_objectSpread$1({
-      className: "flex flex-col h-full neeto-form-nano-form-wrapper"
+      className: "neeto-form-nano-form-wrapper flex h-full flex-col"
     }, formDomProps), {}, {
       noValidate: true,
       children: [formTitle && /*#__PURE__*/jsx(Overview, {
@@ -2176,7 +2234,7 @@ var Form = function Form(_ref) {
         title: formTitle,
         onLanguageChange: handleLanguageChange
       }), /*#__PURE__*/jsx("div", {
-        className: "flex-grow w-full min-h-0 pb-6 space-y-6 overflow-y-auto neeto-form-nano-form-wrapper__body md:px-6",
+        className: "neeto-form-nano-form-wrapper__body min-h-0 w-full flex-grow space-y-6 overflow-y-auto pb-6 md:px-6",
         children: hasActiveQuestions ? /*#__PURE__*/jsxs("div", {
           className: "space-y-6",
           ref: containerRef,
@@ -2202,13 +2260,15 @@ var Form = function Form(_ref) {
               onEdit: handleEdit,
               onSelect: handleSelect
             })
-          }), /*#__PURE__*/jsx("div", {
-            className: "w-full mb-8",
-            children: /*#__PURE__*/jsx(AddQuestion, {
+          }), /*#__PURE__*/jsxs("div", {
+            className: "mb-8 flex w-full items-center gap-x-1",
+            children: [/*#__PURE__*/jsx(AddQuestion, {
               disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
               isDisabled: isEmpty(availableQuestionKinds),
               onAdd: handleAdd
-            })
+            }), isPresent(questionsHelpProps) && /*#__PURE__*/jsx("span", {
+              children: /*#__PURE__*/jsx(HelpPopover, _objectSpread$1({}, questionsHelpProps))
+            })]
           })]
         }) : /*#__PURE__*/jsx(AddFirstQuestion, {
           disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
@@ -2216,7 +2276,7 @@ var Form = function Form(_ref) {
           onAdd: handleAdd
         })
       }), (showActionBlock || dirty) && /*#__PURE__*/jsx("div", {
-        className: "sticky bottom-0 flex justify-end flex-shrink-0 px-6 py-4 border-t neeto-ui-border-gray-300 neeto-form-nano-form-wrapper__footer neeto-ui-bg-white",
+        className: "neeto-ui-border-gray-300 neeto-form-nano-form-wrapper__footer neeto-ui-bg-white sticky bottom-0 flex flex-shrink-0 justify-end border-t px-6 py-4",
         children: /*#__PURE__*/jsx(ActionBlock, {
           submitButtonProps: submitButtonProps,
           isSubmitting: isReordering,
@@ -2296,7 +2356,9 @@ var BuildForm = function BuildForm(_ref) {
     _ref$enableDomainWhit = _ref.enableDomainWhitelisting,
     enableDomainWhitelisting = _ref$enableDomainWhit === void 0 ? true : _ref$enableDomainWhit,
     helpDocUrls = _ref.helpDocUrls,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$questionsHelpPro = _ref.questionsHelpProps,
+    questionsHelpProps = _ref$questionsHelpPro === void 0 ? {} : _ref$questionsHelpPro;
   var queryClient = useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: showThumbsUpToastr
@@ -2394,6 +2456,7 @@ var BuildForm = function BuildForm(_ref) {
           kindUniqueOn: kindUniqueOn,
           onLanguageChange: onLanguageChange,
           onValueChange: onValueChange,
+          questionsHelpProps: questionsHelpProps,
           savedTitle: savedTitle,
           selectedLanguage: selectedLanguage,
           showActionBlock: showActionBlock,