@bigbinary/neeto-form-frontend 3.10.26 → 3.11.1

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

@@ -58,7 +58,8 @@
       "remainingItemsCount": "{{count}} more",
       "domain": "Domain",
       "domains": "Domains",
-      "viewHelpArticle": "View help article"
+      "viewHelpArticle": "View help article",
+      "splitAsFirstAndLastNames": "Split as \"First name\" and \"Last name\""
     },
     "fields": {
       "mcf": "Multiple choice",
@@ -119,7 +120,11 @@
         "questionFields": {
           "field": {
             "question": "Question",
+            "firstNameQuestion": "First name question",
+            "lastNameQuestion": "Last name question",
             "placeholder": "Placeholder text",
+            "firstNamePlaceholder": "First name placeholder",
+            "lastNamePlaceholder": "Last name placeholder",
             "required": "Required",
             "addOption": "Add new option",
             "option": "Option",

package/dist/BuildForm.js

@@ -6,10 +6,10 @@ import { useFormikContext, useField, Form as Form$3, Formik } from 'formik';
 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, 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-Bp5eA5dg.js';
+import { equals, path, curry, assoc, prop, dissoc, when, includes, isEmpty, reject, keys, pick, omit, evolve, map, modify, without, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, pluck, test, difference, split, last, __, concat, F } from 'ramda';
+import { i as useDeleteQuestion, Q as QUESTION_TYPES, j as useFetchQuestions, k as useCreateQuestion, l as useUpdateQuestion, C as CAPTCHA_TYPES, m as useReorderQuestions, h as QUERY_KEYS } from './constants-LQk7jxH9.js';
 import { Q as QUESTION_KIND } from './constants-Byuu9IoS.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-C0I-orlh.js';
+import { b as buildDisplayLabel, I as INDEPENDENT_LABELS_MAP, i as isElementOverflowing, D as Drag, S as SELECTABLE_KINDS, c as isAutoGeneratedQuestion, d as isRichTextQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, R as RESERVED_FIELD_CODES, L as LABEL_FIELDS, e as isDefaultLanguage, f as buildDisabledAddButtonTooltipProps, h as buildAddQuestionButtonProps, 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, 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-DdGn1rF4.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
@@ -17,16 +17,16 @@ 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-D5-1L1Je.js';
+import { a as useBuildFormStore } from './buildForm-CuAJYr6B.js';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
-import { f as fieldWithFallback, i as isFunction } from './index-BL5SirYx.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Typography from '@bigbinary/neetoui/Typography';
 import Modal from '@bigbinary/neetoui/Modal';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
+import { i as isFunction, f as fieldWithFallback, c as isNameQuestion } from './index-OmmVAj8-.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { t } from 'i18next';
 import { v4 } from 'uuid';
@@ -80,7 +80,7 @@ var DeleteAlert = function DeleteAlert(_ref) {
     var questionKind = selectedQuestion.kind;
     var independentLabel = INDEPENDENT_LABELS_MAP[questionKind];
     if (isPresent(independentLabel)) return independentLabel;
-    var questionLabel = fieldWithFallback(selectedQuestion, "label");
+    var questionLabel = buildDisplayLabel(selectedQuestion);
     return truncate(questionLabel, 40);
   };
   var _useDeleteQuestion = useDeleteQuestion(selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.formId, selectedLanguage, {
@@ -280,10 +280,8 @@ var Card = function Card(_ref) {
       allQuestionKinds: allQuestionKinds,
       item: question
     }),
-    kind = _getActiveKindDetails.kind,
     isSingular = _getActiveKindDetails.isSingular;
-  var label = fieldWithFallback(question, "label");
-  var questionLabel = isRichTextQuestion(kind) ? htmlToPlainText(label) : label;
+  var questionLabel = buildDisplayLabel(question);
   useEffect(function () {
     var element = questionLabelRef.current;
     if (isNotPresent(element)) return;
@@ -346,8 +344,8 @@ var Card = function Card(_ref) {
   });
 };
 
-function ownKeys$e(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$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Questions = function Questions(_ref) {
   var questions = _ref.questions,
     isDeletable = _ref.isDeletable,
@@ -364,7 +362,7 @@ var Questions = function Questions(_ref) {
       var droppableProps = _ref2.droppableProps,
         placeholder = _ref2.placeholder,
         innerRef = _ref2.innerRef;
-      return /*#__PURE__*/jsxs("div", _objectSpread$e(_objectSpread$e({}, droppableProps), {}, {
+      return /*#__PURE__*/jsxs("div", _objectSpread$g(_objectSpread$g({}, droppableProps), {}, {
         className: "space-y-2",
         ref: innerRef,
         children: [questions.map(function (question, index) {
@@ -377,7 +375,7 @@ var Questions = function Questions(_ref) {
             var draggableProps = _ref3.draggableProps,
               dragHandleProps = _ref3.dragHandleProps,
               innerRef = _ref3.innerRef;
-            return /*#__PURE__*/jsx("div", _objectSpread$e(_objectSpread$e(_objectSpread$e({}, draggableProps), dragHandleProps), {}, {
+            return /*#__PURE__*/jsx("div", _objectSpread$g(_objectSpread$g(_objectSpread$g({}, draggableProps), dragHandleProps), {}, {
               ref: innerRef,
               children: /*#__PURE__*/jsx(Card, {
                 allQuestionKinds: allQuestionKinds,
@@ -409,8 +407,8 @@ var arrayHelpers = {
   moveItem: moveItem
 };
 
-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; }
-function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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(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 isChoiceQuestion = function isChoiceQuestion(question) {
   return includes(question === null || question === void 0 ? void 0 : question.kind, SELECTABLE_KINDS);
 };
@@ -429,7 +427,7 @@ var getUniqueNumbersFromExistingFieldCodes = function getUniqueNumbersFromExisti
 };
 var generateFieldCodePrefix = function generateFieldCodePrefix(label, kind) {
   var prefix;
-  if (NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || isEmpty(label)) {
+  if (isNameQuestion(kind) || NON_BASIC_LATIN_CHARACTERS_REGEX.test(label) || isEmpty(label)) {
     prefix = kind;
   } else {
     var sanitizedLabel = underscoredWithoutSpecialCharacters(label).slice(0, 30);
@@ -437,11 +435,17 @@ var generateFieldCodePrefix = function generateFieldCodePrefix(label, kind) {
   }
   return addSuffixForReservedFieldCode(prefix) || "";
 };
+var renameKey = curry(function (oldKey, newKey, obj) {
+  return assoc(newKey, prop(oldKey, obj), dissoc(oldKey, obj));
+});
 var modifyDefaultValues = function modifyDefaultValues(_ref) {
   var values = _ref.values,
     kind = _ref.kind,
     selectedLanguage = _ref.selectedLanguage,
     isUsingDefaultQuestionKinds = _ref.isUsingDefaultQuestionKinds;
+  if (isNameQuestion(kind)) {
+    return renameKey(LABEL_FIELDS.DEFAULT, LABEL_FIELDS.FULL_NAME, values);
+  }
   if (!includes(kind, SELECTABLE_KINDS) || isDefaultLanguage(selectedLanguage) || !isUsingDefaultQuestionKinds) {
     return values;
   }
@@ -486,7 +490,7 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref4) {
   var nextItems = _toConsumableArray(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
   var orderedItems = nextItems.map(function (item, index) {
-    return _objectSpread$d(_objectSpread$d({}, item), {}, {
+    return _objectSpread$f(_objectSpread$f({}, item), {}, {
       displayOrder: index
     });
   });
@@ -508,7 +512,7 @@ var createFieldData = function createFieldData(_ref5) {
     selectedLanguage: selectedLanguage,
     isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds
   });
-  return _objectSpread$d(_objectSpread$d({}, modifiedDefaultValues), {}, {
+  return _objectSpread$f(_objectSpread$f({}, modifiedDefaultValues), {}, {
     metadata: metadata,
     isRequired: isRequired,
     kind: type,
@@ -536,7 +540,7 @@ var duplicateFieldData = function duplicateFieldData(_ref6) {
   var newQuestionLabel = isRichTextQuestion(kind) ? label : t("neetoForm.common.clonedElementLabel", {
     label: label
   });
-  return _objectSpread$d(_objectSpread$d({}, defaultAttributes), {}, {
+  return _objectSpread$f(_objectSpread$f({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: newQuestionLabel,
@@ -615,13 +619,14 @@ var DEFAULT_PLACEHOLDERS = {
 var INITIAL_VALUES = {
   kind: "",
   label: "",
-  fieldCode: ""
+  fieldCode: "",
+  isSplitMode: false
 };
 var VALID_FIELD_CODE_REGEX = /^[a-z0-9]+(_[a-z0-9]+)*$/;
 
 var _excluded$8 = ["label", "name"];
-function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$e(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$e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -640,7 +645,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/jsx(Textarea, _objectSpread$c({
+  return /*#__PURE__*/jsx(Textarea, _objectSpread$e({
     label: label,
     name: name,
     className: "neeto-form-nano-adaptive-input",
@@ -654,6 +659,132 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   }, otherProps));
 };
 
+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; }
+function _objectSpread$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
+  var kind = _ref.kind,
+    isLabelDisabled = _ref.isLabelDisabled,
+    handleLabelChange = _ref.handleLabelChange,
+    _ref$labelProps = _ref.labelProps,
+    labelProps = _ref$labelProps === void 0 ? {} : _ref$labelProps,
+    _ref$placeholderProps = _ref.placeholderProps,
+    placeholderProps = _ref$placeholderProps === void 0 ? {} : _ref$placeholderProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var shouldShowPlaceholder = includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4",
+    children: [/*#__PURE__*/jsx(FormikAdaptiveInput, _objectSpread$d({
+      required: true,
+      disabled: isLabelDisabled,
+      label: t("neetoForm.questions.common.questionFields.field.question"),
+      name: "label",
+      placeholder: DEFAULT_PLACEHOLDERS[kind],
+      onChange: withEventTargetValue(handleLabelChange)
+    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/jsx(FormikAdaptiveInput, _objectSpread$d({
+      className: "neeto-form-nano-placeholder-input neeto-form-nano-placeholder-input-".concat(kind),
+      name: "placeholder",
+      label: t("neetoForm.questions.common.questionFields.field.placeholder")
+    }, placeholderProps))]
+  });
+};
+
+function ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Name = function Name(_ref) {
+  var isLabelDisabled = _ref.isLabelDisabled,
+    _handleLabelChange = _ref.handleLabelChange;
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values.isSplitMode,
+    isSplitMode = _useFormikContext$val === void 0 ? false : _useFormikContext$val;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var usesCustomSubmissionComponent = useBuildFormStore(path(["formState", "usesCustomSubmissionComponent"]));
+  var commonProps = {
+    kind: QUESTION_TYPES.NAME,
+    isLabelDisabled: isLabelDisabled
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4",
+    children: [!usesCustomSubmissionComponent && /*#__PURE__*/jsx(Switch, {
+      label: t("neetoForm.common.splitAsFirstAndLastNames"),
+      name: "isSplitMode"
+    }), isSplitMode && !usesCustomSubmissionComponent ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+        handleLabelChange: function handleLabelChange(value) {
+          return _handleLabelChange(value, LABEL_FIELDS.FIRST_NAME);
+        },
+        labelProps: {
+          label: t("neetoForm.questions.common.questionFields.field.firstNameQuestion"),
+          name: LABEL_FIELDS.FIRST_NAME
+        },
+        placeholderProps: {
+          label: t("neetoForm.questions.common.questionFields.field.firstNamePlaceholder"),
+          name: "firstNamePlaceholder"
+        }
+      })), /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+        handleLabelChange: function handleLabelChange(value) {
+          return _handleLabelChange(value, LABEL_FIELDS.LAST_NAME);
+        },
+        labelProps: {
+          label: t("neetoForm.questions.common.questionFields.field.lastNameQuestion"),
+          name: LABEL_FIELDS.LAST_NAME
+        },
+        placeholderProps: {
+          label: t("neetoForm.questions.common.questionFields.field.lastNamePlaceholder"),
+          name: "lastNamePlaceholder"
+        }
+      }))]
+    }) : /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$c(_objectSpread$c({}, commonProps), {}, {
+      labelProps: {
+        name: LABEL_FIELDS.FULL_NAME
+      },
+      placeholderProps: {
+        name: "fullNamePlaceholder"
+      },
+      handleLabelChange: function handleLabelChange(value) {
+        return _handleLabelChange(value, LABEL_FIELDS.FULL_NAME);
+      }
+    }))]
+  });
+};
+
+var Properties = function Properties(_ref) {
+  var kind = _ref.kind,
+    isLabelDisabled = _ref.isLabelDisabled,
+    handleLabelChange = _ref.handleLabelChange,
+    questionProps = _ref.questionProps;
+  var _useBuildFormStore = useBuildFormStore(function (store) {
+      var _store$formState, _store$formState2;
+      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"]
+      };
+    }, shallow),
+    enableDomainWhitelisting = _useBuildFormStore.enableDomainWhitelisting,
+    enableDomainBlacklisting = _useBuildFormStore.enableDomainBlacklisting;
+  var hasAdditionalData = includes(kind, QUESTIONS_WITH_ADDITIONAL_DATA);
+  if (isNameQuestion(kind)) {
+    return /*#__PURE__*/jsx(Name, {
+      handleLabelChange: handleLabelChange,
+      isLabelDisabled: isLabelDisabled
+    });
+  }
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4",
+    children: [/*#__PURE__*/jsx(LabelWithPlaceholder, {
+      handleLabelChange: handleLabelChange,
+      isLabelDisabled: isLabelDisabled,
+      kind: kind
+    }), hasAdditionalData && renderAdditionalData({
+      kind: kind,
+      questionProps: questionProps,
+      enableDomainWhitelisting: enableDomainWhitelisting,
+      enableDomainBlacklisting: enableDomainBlacklisting
+    })]
+  });
+};
+
 var Block = function Block(_ref) {
   var title = _ref.title,
     children = _ref.children,
@@ -861,17 +992,13 @@ var Form$1 = function Form(_ref) {
   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, _store$formState5;
+      var _store$formState, _store$formState2, _store$formState3;
       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"],
-        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"]
+        showReadOnlySwitch: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["showReadOnlySwitch"],
+        selectedLanguage: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["selectedLanguage"],
+        isUsingDefaultQuestionKinds: (_store$formState3 = store["formState"]) === null || _store$formState3 === void 0 ? void 0 : _store$formState3["isUsingDefaultQuestionKinds"]
       };
     }, shallow),
-    enableDomainWhitelisting = _useBuildFormStore.enableDomainWhitelisting,
-    enableDomainBlacklisting = _useBuildFormStore.enableDomainBlacklisting,
     showReadOnlySwitch = _useBuildFormStore.showReadOnlySwitch,
     selectedLanguage = _useBuildFormStore.selectedLanguage,
     isUsingDefaultQuestionKinds = _useBuildFormStore.isUsingDefaultQuestionKinds;
@@ -892,8 +1019,6 @@ var Form$1 = function Form(_ref) {
   var isRequired = questionKind && isRequiredField(questionKind);
   var isLabelDisabled = questionKind && isDisabledFieldLabel(questionKind);
   var isImmutable = questionKind && isImmutableField(questionKind);
-  var shouldShowPlaceholder = includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
-  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);
@@ -927,7 +1052,8 @@ var Form$1 = function Form(_ref) {
     setTouched({});
   };
   var handleLabelChange = function handleLabelChange(label) {
-    setFieldValue("label", label);
+    var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LABEL_FIELDS.DEFAULT;
+    setFieldValue(name, label);
     if (isEdit) return;
     var uniqueFieldCode = generateUniqueFieldCode({
       questions: questions,
@@ -953,25 +1079,11 @@ var Form$1 = function Form(_ref) {
         isLabelDisabled: isLabelDisabled
       }) : /*#__PURE__*/jsxs("div", {
         className: "space-y-6",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: "space-y-4",
-          children: [/*#__PURE__*/jsx(FormikAdaptiveInput, {
-            required: true,
-            disabled: isLabelDisabled,
-            name: "label",
-            placeholder: DEFAULT_PLACEHOLDERS[kind],
-            label: t("neetoForm.questions.common.questionFields.field.question"),
-            onChange: withEventTargetValue(handleLabelChange)
-          }), shouldShowPlaceholder && /*#__PURE__*/jsx(FormikAdaptiveInput, {
-            className: "neeto-form-nano-placeholder-input neeto-form-nano-placeholder-input-".concat(kind),
-            name: "placeholder",
-            label: t("neetoForm.questions.common.questionFields.field.placeholder")
-          }), hasAdditionalData && renderAdditionalData({
-            kind: kind,
-            questionProps: questionProps,
-            enableDomainWhitelisting: enableDomainWhitelisting,
-            enableDomainBlacklisting: enableDomainBlacklisting
-          })]
+        children: [/*#__PURE__*/jsx(Properties, {
+          handleLabelChange: handleLabelChange,
+          isLabelDisabled: isLabelDisabled,
+          kind: kind,
+          questionProps: questionProps
         }), isSettingsBlockVisible && /*#__PURE__*/jsxs(Block, {
           dataCy: "settings-card",
           title: t("neetoForm.common.settings"),
@@ -1019,17 +1131,30 @@ var richTextFieldMissingErrorMessage = function richTextFieldMissingErrorMessage
     field: field
   });
 };
-var formValidationSchema = function formValidationSchema() {
-  var enableFieldCode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+var buildLabelValidationSchema = function buildLabelValidationSchema(kind, schema) {
+  if (isNameQuestion(kind)) {
+    return schema.notRequired();
+  }
+  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"));
+};
+var buildNameLabelValidationSchema = function buildNameLabelValidationSchema(question, schema) {
+  var isFullName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var isRequired = isFullName ? !question.isSplitMode : question.isSplitMode;
+  return isNameQuestion(question.kind) && isRequired ? requiredLabelValidation(schema, t("neetoForm.questions.common.questionFields.field.question")) : schema.notRequired();
+};
+var stringSchema = yup.string();
+var formValidationSchema = function formValidationSchema(question) {
+  var enableFieldCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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("required", richTextFieldMissingErrorMessage(kind), function (value) {
-        return !isEditorEmpty(value);
-      }) : requiredLabelValidation(schema, t("neetoForm.questions.common.questionFields.field.question"));
-    }),
+    label: yup.string().when("kind", buildLabelValidationSchema),
+    fullNameLabel: buildNameLabelValidationSchema(question, stringSchema, true),
+    firstNameLabel: buildNameLabelValidationSchema(question, stringSchema),
+    lastNameLabel: buildNameLabelValidationSchema(question, stringSchema),
     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();
     }),
@@ -1105,7 +1230,7 @@ var Add = function Add(_ref) {
     }), /*#__PURE__*/jsx(Form$2, {
       formikProps: {
         initialValues: INITIAL_VALUES,
-        validationSchema: formValidationSchema(props["enableFieldCode"]),
+        validationSchema: formValidationSchema(INITIAL_VALUES, props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxs(Fragment, {
@@ -1175,7 +1300,7 @@ var Edit = function Edit(_ref) {
     }), /*#__PURE__*/jsx(Form$2, {
       formikProps: {
         initialValues: question,
-        validationSchema: formValidationSchema(props["enableFieldCode"]),
+        validationSchema: formValidationSchema(question, props["enableFieldCode"]),
         onSubmit: handleSubmit
       },
       children: /*#__PURE__*/jsxs(Fragment, {
@@ -1970,7 +2095,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", "showReadOnlySwitch", "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", "usesCustomSubmissionComponent"];
 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) {
@@ -2005,6 +2130,7 @@ var Form = function Form(_ref) {
     hostSpecificData = _ref.hostSpecificData,
     questionsHelpProps = _ref.questionsHelpProps,
     isUsingDefaultQuestionKinds = _ref.isUsingDefaultQuestionKinds,
+    usesCustomSubmissionComponent = _ref.usesCustomSubmissionComponent,
     formDomProps = _objectWithoutProperties(_ref, _excluded);
   var containerRef = useRef();
   var _useTranslation = useTranslation(),
@@ -2060,9 +2186,10 @@ var Form = function Form(_ref) {
       enableDomainBlacklisting: enableDomainBlacklisting,
       enableDomainWhitelisting: enableDomainWhitelisting,
       isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
-      showReadOnlySwitch: showReadOnlySwitch
+      showReadOnlySwitch: showReadOnlySwitch,
+      usesCustomSubmissionComponent: usesCustomSubmissionComponent
     });
-  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds, showReadOnlySwitch]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, values, dirty, isSubmitting, isValid, errors, submitForm, resetForm, selectedLanguage, helpDocUrls, enableDomainBlacklisting, enableDomainWhitelisting, isUsingDefaultQuestionKinds, showReadOnlySwitch, usesCustomSubmissionComponent]);
   var questions = values.questions;
   var handleSelect = function handleSelect(question) {
     setSelectedQuestion(question);
@@ -2290,7 +2417,9 @@ var BuildForm = function BuildForm(_ref) {
     _ref$hostSpecificData = _ref.hostSpecificData,
     hostSpecificData = _ref$hostSpecificData === void 0 ? {} : _ref$hostSpecificData,
     _ref$showReadOnlySwit = _ref.showReadOnlySwitch,
-    showReadOnlySwitch = _ref$showReadOnlySwit === void 0 ? false : _ref$showReadOnlySwit;
+    showReadOnlySwitch = _ref$showReadOnlySwit === void 0 ? false : _ref$showReadOnlySwit,
+    _ref$usesCustomSubmis = _ref.usesCustomSubmissionComponent,
+    usesCustomSubmissionComponent = _ref$usesCustomSubmis === void 0 ? false : _ref$usesCustomSubmis;
   var queryClient = useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: showThumbsUpToastr
@@ -2396,7 +2525,8 @@ var BuildForm = function BuildForm(_ref) {
           selectedLanguage: selectedLanguage,
           showActionBlock: showActionBlock,
           showReadOnlySwitch: showReadOnlySwitch,
-          submitButtonProps: submitButtonProps
+          submitButtonProps: submitButtonProps,
+          usesCustomSubmissionComponent: usesCustomSubmissionComponent
         })), {}, {
           formId: id,
           questionKinds: isUsingDefaultQuestionKinds ? defaultQuestionKinds : questionKinds,