@bigbinary/neeto-form-frontend 3.9.2 → 3.9.3

package/dist/ExternalForm.js

@@ -27,7 +27,7 @@ import { a as isBlank, g as getComponentDisplayName, p as parseServerError } fro
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import Check from '@bigbinary/neeto-icons/Check';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { c as clientI18nInstance, d as getWithExpiry, g as generateInitValues, F as FormikWrap, a as getFieldComponent, b as buildAutoCompleteAttribute, r as renderButtonsInOrder, m as mergeRefs, e as generateFormResponse, f as clearLocalStorageValues } from './utils-BPSPfGM5.js';
+import { c as clientI18nInstance, d as getWithExpiry, g as generateInitValues, F as FormikWrap, a as getFieldComponent, b as buildAutoCompleteAttribute, r as renderButtonsInOrder, m as mergeRefs, e as generateFormResponse, f as clearLocalStorageValues } from './utils-BwrOrhV5.js';
 import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import '@babel/runtime/helpers/toConsumableArray';
 import '@bigbinary/neeto-commons-frontend/constants';
@@ -36,7 +36,7 @@ import '@babel/runtime/helpers/typeof';
 import '@bigbinary/neeto-editor/utils';
 import 'libphonenumber-js';
 import '@bigbinary/neeto-editor/EditorContent';
-import './constants-pb1PsblC.js';
+import './constants-CEOQLu3J.js';
 import './constants-DlRX5mcQ.js';
 import 'dompurify';
 import '@bigbinary/neeto-icons/Plus';

package/dist/UrlBuilder.js

@@ -10,10 +10,10 @@ import Button from '@bigbinary/neetoui/Button';
 import NoData from '@bigbinary/neetoui/NoData';
 import { map, assoc, filter, pluck, isEmpty } from 'ramda';
 import { useTranslation } from 'react-i18next';
-import { g as generateInitValues, F as FormikWrap, a as getFieldComponent, b as buildAutoCompleteAttribute, m as mergeRefs } from './utils-BPSPfGM5.js';
+import { g as generateInitValues, F as FormikWrap, a as getFieldComponent, b as buildAutoCompleteAttribute, m as mergeRefs } from './utils-BwrOrhV5.js';
 import { a as useForm } from './useFormApi-BS-TCKwR.js';
 import { parsePhoneNumber } from 'libphonenumber-js';
-import { Q as QUESTIONS_WITHOUT_FIELD_CODE } from './constants-pb1PsblC.js';
+import { Q as QUESTIONS_WITHOUT_FIELD_CODE } from './constants-CEOQLu3J.js';
 import { Q as QUESTION_KIND } from './constants-DlRX5mcQ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import './index-BL5SirYx.js';

package/dist/cjs/BuildForm.js

@@ -11,11 +11,12 @@ var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var ramda = require('ramda');
 var useFormApi = require('../useFormApi-DAiOGCeD.js');
 var constants$1 = require('../constants-D-XSuLo2.js');
-var constants = require('../constants-CAupEAeQ.js');
+var constants = require('../constants-DXZnQ_E9.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var dnd = require('@hello-pangea/dnd');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var reactI18next = require('react-i18next');
 var buildForm = require('../buildForm-CthgTgsm.js');
@@ -27,7 +28,6 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Typography = require('@bigbinary/neetoui/Typography');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
-var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 var i18next = require('i18next');
 var Plus = require('@bigbinary/neeto-icons/Plus');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
@@ -464,18 +464,43 @@ function _objectSpread$e(e) { for (var r = 1; r < arguments.length; r++) { var t
 var isChoiceQuestion = function isChoiceQuestion(question) {
   return ramda.includes(question === null || question === void 0 ? void 0 : question.kind, constants.SELECTABLE_KINDS);
 };
-var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions) {
-  var fieldCodes = ramda.pluck("fieldCode", neetoCist.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 constants.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 (constants.NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || ramda.isEmpty(label)) {
+    prefix = kind;
+  } else {
+    var sanitizedLabel = underscoredWithoutSpecialCharacters(label).slice(0, 30);
+    prefix = ramda.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 = constants.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 (!neetoCist.findBy({
       fieldCode: candidateFieldCode
     }, questions)) break;
@@ -483,18 +508,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);
@@ -505,32 +530,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: uuid.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 = neetoCist.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 = neetoCist.findBy({
+    type: kind
+  }, questionKinds);
   var label = index.fieldWithFallback(item, "label");
   var defaultAttributeNames = ramda.keys(questionKind.defaults || {});
   var defaultAttributes = ramda.pick(defaultAttributeNames, item);
@@ -543,15 +572,19 @@ var duplicateFieldData = function duplicateFieldData(_ref4) {
     label: newQuestionLabel,
     optionsAttributes: optionsAttributes && optionsAttributes.map(ramda.omit(["id"])),
     nodeId: uuid.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 (ramda.isEmpty(activeQuestions)) return allQuestionKinds;
   return ramda.reject(function (kind) {
     var isSingularKind = kind.isSingular;
@@ -614,6 +647,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; }
@@ -824,6 +858,7 @@ var FieldCode = function FieldCode() {
         required: true,
         label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
         name: "fieldCode",
+        rejectCharsRegex: constants.FIELD_CODES_REJECT_CHARS_REGEX,
         helpText: helpDocUrl && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
           i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
           components: {
@@ -858,7 +893,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 = buildForm.useBuildFormStore(ramda.path(["formState", "helpDocUrls", "hideQuestion"]));
   var _useBuildFormStore = buildForm.useBuildFormStore(function (store) {
       var _store$formState, _store$formState2;
@@ -917,6 +953,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__*/jsxRuntime.jsx(Pane.Body, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "w-full space-y-4",
@@ -941,7 +987,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: utils.withEventTargetValue(handleLabelChange)
           }), shouldShowPlaceholder && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, {
             name: "placeholder",
             label: t("neetoForm.questions.common.questionFields.field.placeholder")
@@ -971,38 +1018,48 @@ var requiredLabelValidation = function requiredLabelValidation(schema, field) {
     field: field
   }));
 };
+var fieldCodeValidation = function fieldCodeValidation(schema, field) {
+  return schema.trim().required(i18next.t("neetoForm.common.fieldReq", {
+    field: field
+  })).matches(VALID_FIELD_CODE_REGEX, i18next.t("neetoForm.error.invalidField", {
+    label: field
+  }));
+};
 var richTextFieldMissingErrorMessage = function richTextFieldMissingErrorMessage(kind) {
   var field = ramda.equals(kind, constants.QUESTION_TYPES.PARAGRAPH) ? i18next.t("neetoForm.fields.def") : i18next.t("neetoForm.fields.tcf");
   return i18next.t("neetoForm.error.fieldCantBeEmpty", {
     field: field
   });
 };
-var formValidationSchema = yup__namespace.object().shape({
-  kind: yup__namespace.string().trim().required(i18next.t("neetoForm.common.fieldReq", {
-    field: i18next.t("neetoForm.questions.common.questionFields.field.questionType")
-  })),
-  label: yup__namespace.string().when("kind", function (kind, schema) {
-    return ramda.includes(kind, constants.RICH_TEXT_QUESTIONS) ? schema.test("required", richTextFieldMissingErrorMessage(kind), function (value) {
-      return !utils$1.isEditorEmpty(value);
-    }) : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question"));
-  }),
-  fieldCode: yup__namespace.string().trim().notOneOf(constants.RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
-    return ramda.includes(kind, constants.QUESTIONS_WITHOUT_FIELD_CODE) ? schema.notRequired() : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.fieldCode"));
-  }),
-  optionsAttributes: yup__namespace.array().when("_destroy", {
-    is: true,
-    otherwise: function otherwise(schema) {
-      return schema.when("kind", function (kind, schema) {
-        return ramda.includes(kind, constants.SELECTABLE_KINDS) ? schema.of(yup__namespace.object().shape({
-          label: requiredLabelValidation(yup__namespace.string(), i18next.t("neetoForm.questions.common.questionFields.field.option"))
-        })) : schema.notRequired();
-      });
-    }
-  }),
-  highestRatingLabel: yup__namespace.string().nullable(),
-  averageRatingLabel: yup__namespace.string().nullable(),
-  lowestRatingLabel: yup__namespace.string().nullable()
-});
+var formValidationSchema = function formValidationSchema() {
+  var enableFieldCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  return yup__namespace.object().shape({
+    kind: yup__namespace.string().trim().required(i18next.t("neetoForm.common.fieldReq", {
+      field: i18next.t("neetoForm.questions.common.questionFields.field.questionType")
+    })),
+    label: yup__namespace.string().when("kind", function (kind, schema) {
+      return ramda.includes(kind, constants.RICH_TEXT_QUESTIONS) ? schema.test(richTextFieldMissingErrorMessage(kind), function (value) {
+        return !utils$1.isEditorEmpty(value);
+      }) : requiredLabelValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.question"));
+    }),
+    fieldCode: yup__namespace.string().trim().notOneOf(constants.RESERVED_FIELD_CODES, i18next.t("neetoForm.error.invalidFieldCode")).when("kind", function (kind, schema) {
+      return enableFieldCode && !ramda.includes(kind, constants.QUESTIONS_WITHOUT_FIELD_CODE) ? fieldCodeValidation(schema, i18next.t("neetoForm.questions.common.questionFields.field.fieldCode")) : schema.notRequired();
+    }),
+    optionsAttributes: yup__namespace.array().when("_destroy", {
+      is: true,
+      otherwise: function otherwise(schema) {
+        return schema.when("kind", function (kind, schema) {
+          return ramda.includes(kind, constants.SELECTABLE_KINDS) ? schema.of(yup__namespace.object().shape({
+            label: requiredLabelValidation(yup__namespace.string(), i18next.t("neetoForm.questions.common.questionFields.field.option"))
+          })) : schema.notRequired();
+        });
+      }
+    }),
+    highestRatingLabel: yup__namespace.string().nullable(),
+    averageRatingLabel: yup__namespace.string().nullable(),
+    lowestRatingLabel: yup__namespace.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; }
@@ -1062,7 +1119,7 @@ var Add = function Add(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Form$2, {
       formikProps: {
         initialValues: INITIAL_VALUES,
-        validationSchema: formValidationSchema,
+        validationSchema: formValidationSchema(props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1132,7 +1189,7 @@ var Edit = function Edit(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Form$2, {
       formikProps: {
         initialValues: question,
-        validationSchema: formValidationSchema,
+        validationSchema: formValidationSchema(props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -2025,7 +2082,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) {
@@ -2056,6 +2113,7 @@ var Form = function Form(_ref) {
     enableDomainBlacklisting = _ref.enableDomainBlacklisting,
     enableDomainWhitelisting = _ref.enableDomainWhitelisting,
     helpDocUrls = _ref.helpDocUrls,
+    questionsHelpProps = _ref.questionsHelpProps,
     formDomProps = _objectWithoutProperties(_ref, _excluded);
   var containerRef = React.useRef();
   var _useTranslation = reactI18next.useTranslation(),
@@ -2186,7 +2244,7 @@ var Form = function Form(_ref) {
         return setIsDeleteAlertOpen(false);
       }
     }), /*#__PURE__*/jsxRuntime.jsxs(formik.Form, _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__*/jsxRuntime.jsx(Overview, {
@@ -2197,7 +2255,7 @@ var Form = function Form(_ref) {
         title: formTitle,
         onLanguageChange: handleLanguageChange
       }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
           className: "space-y-6",
           ref: containerRef,
@@ -2223,13 +2281,15 @@ var Form = function Form(_ref) {
               onEdit: handleEdit,
               onSelect: handleSelect
             })
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "w-full mb-8",
-            children: /*#__PURE__*/jsxRuntime.jsx(AddQuestion, {
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "mb-8 flex w-full items-center gap-x-1",
+            children: [/*#__PURE__*/jsxRuntime.jsx(AddQuestion, {
               disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
               isDisabled: ramda.isEmpty(availableQuestionKinds),
               onAdd: handleAdd
-            })
+            }), neetoCist.isPresent(questionsHelpProps) && /*#__PURE__*/jsxRuntime.jsx("span", {
+              children: /*#__PURE__*/jsxRuntime.jsx(HelpPopover, _objectSpread$1({}, questionsHelpProps))
+            })]
           })]
         }) : /*#__PURE__*/jsxRuntime.jsx(AddFirstQuestion, {
           disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
@@ -2237,7 +2297,7 @@ var Form = function Form(_ref) {
           onAdd: handleAdd
         })
       }), (showActionBlock || dirty) && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(ActionBlock, {
           submitButtonProps: submitButtonProps,
           isSubmitting: isReordering,
@@ -2317,7 +2377,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 = reactQuery.useQueryClient();
   var _useReorderQuestions = useFormApi.useReorderQuestions(id, {
       onSuccess: utils.showThumbsUpToastr
@@ -2415,6 +2477,7 @@ var BuildForm = function BuildForm(_ref) {
           kindUniqueOn: kindUniqueOn,
           onLanguageChange: onLanguageChange,
           onValueChange: onValueChange,
+          questionsHelpProps: questionsHelpProps,
           savedTitle: savedTitle,
           selectedLanguage: selectedLanguage,
           showActionBlock: showActionBlock,