@bigbinary/neeto-form-frontend 1.2.38 → 1.2.40

package/dist/index.cjs.js

@@ -5,22 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React$2 = require('react');
 var formik = require('formik');
 var neetoCist = require('@bigbinary/neeto-cist');
+var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var reactQuery = require('react-query');
 var i18next = require('i18next');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var axios = require('axios');
 var ReactDOM = require('react-dom');
 var formik$1 = require('@bigbinary/neetoui/formik');
 var reactI18next = require('react-i18next');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var zustand = require('zustand');
 var classnames = require('classnames');
-var neetoEditor = require('@bigbinary/neeto-editor');
 var yup = require('yup');
-var utils = require('@bigbinary/neeto-commons-frontend/utils');
+var neetoEditor = require('@bigbinary/neeto-editor');
 var useHotkeys = require('@bigbinary/neeto-hotkeys');
 var dayjs = require('dayjs');
 var PhoneNumber$1 = require('@bigbinary/neeto-molecules/PhoneNumber');
@@ -548,11 +548,19 @@ var updateForm = function updateForm(formId, payload) {
 var destroyForm = function destroyForm(formId) {
   return axios__default["default"]["delete"](getFormsUrl(formId));
 };
-var getQuestions = function getQuestions(formId) {
-  return axios__default["default"].get(getQuestionsUrl(formId));
+var getQuestions = function getQuestions(formId, language) {
+  return axios__default["default"].get(getQuestionsUrl(formId), {
+    params: {
+      language: language
+    }
+  });
 };
-var getPublicQuestions = function getPublicQuestions(formId) {
-  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/forms/").concat(formId, "/public/questions/"));
+var getPublicQuestions = function getPublicQuestions(formId, language) {
+  return axios__default["default"].get("".concat(BASE_URL, "/api/v1/forms/").concat(formId, "/public/questions/"), {
+    params: {
+      language: language
+    }
+  });
 };
 var updateQuestions = function updateQuestions(formId, payload) {
   return axios__default["default"].patch(getQuestionsUrl(formId), payload);
@@ -591,21 +599,25 @@ var neetoFormApi = {
   updatePublicSubmission: updatePublicSubmission
 };
 
-var _excluded$b = ["formId", "preview"],
+var _excluded$b = ["formId", "preview", "language"],
   _excluded3$1 = ["formId", "submissionId"];
 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$f(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$6(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 useForm = function useForm(_ref) {
   var formId = _ref.formId,
-    preview = _ref.preview,
+    _ref$preview = _ref.preview,
+    preview = _ref$preview === void 0 ? null : _ref$preview,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? "en" : _ref$language,
     options = _objectWithoutProperties$1(_ref, _excluded$b);
-  return reactQuery.useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId], function () {
-    return neetoFormApi.getPublicQuestions(formId);
+  return reactQuery.useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language], function () {
+    return neetoFormApi.getPublicQuestions(formId, language);
   }, _objectSpread$f({
     keepPreviousData: true
   }, options));
 };
 var useCreateForm = function useCreateForm(options) {
+  var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "en";
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(neetoFormApi.createForm, _objectSpread$f(_objectSpread$f({}, options), {}, {
     onSuccess: function onSuccess(form) {
@@ -613,14 +625,15 @@ var useCreateForm = function useCreateForm(options) {
       queryClient.setQueryData(QUERY_KEYS.QUESTIONS, function (forms) {
         return forms && [].concat(_toConsumableArray$1(forms), [form]);
       });
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, form.id], form);
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(form.id)], form);
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, form.id, language], form);
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(form.id), language], form);
       queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
       options === null || options === void 0 || (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 || _options$onSuccess.call(options, form);
     }
   }));
 };
 var useUpdateForm = function useUpdateForm(options) {
+  var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "en";
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(function (_ref2) {
     var id = _ref2.id,
@@ -629,25 +642,25 @@ var useUpdateForm = function useUpdateForm(options) {
   }, _objectSpread$f(_objectSpread$f({}, options), {}, {
     onSuccess: function onSuccess(data, _ref3) {
       var id = _ref3.id;
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id], function (form) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], function (form) {
         return _objectSpread$f(_objectSpread$f({}, form), {}, {
           title: data.title
         });
       });
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id)], function (form) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], function (form) {
         return _objectSpread$f(_objectSpread$f({}, form), {}, {
           title: data.title,
           questions: data.questions
         });
       });
       queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id)]);
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id, language]);
+      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language]);
       options.onSuccess && options.onSuccess(data);
     }
   }));
 };
-var useUpdateQuestions = function useUpdateQuestions(options) {
+var useUpdateQuestions = function useUpdateQuestions(options, language) {
   var queryClient = reactQuery.useQueryClient();
   return reactQuery.useMutation(function (_ref4) {
     var id = _ref4.id,
@@ -660,12 +673,12 @@ var useUpdateQuestions = function useUpdateQuestions(options) {
       }
       var data = args[0],
         id = args[1].id;
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id], function (form) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], function (form) {
         return _objectSpread$f(_objectSpread$f({}, form), {}, {
           questions: data.questions
         });
       });
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id)], function (form) {
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), language], function (form) {
         return _objectSpread$f(_objectSpread$f({}, form), {}, {
           questions: data.questions
         });
@@ -680,27 +693,23 @@ var useForms = function useForms(options) {
   }, options));
 };
 var useDeleteForm = function useDeleteForm(options) {
-  var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref5) {
+  return reactUtils.useMutationWithInvalidation(function (_ref5) {
     var id = _ref5.id;
     return neetoFormApi.destroyForm(id);
   }, _objectSpread$f(_objectSpread$f({}, options), {}, {
+    keysToInvalidate: function keysToInvalidate(_, _ref6) {
+      var id = _ref6.id;
+      return [QUERY_KEYS.FORMS, [QUERY_KEYS.QUESTIONS, id], [QUERY_KEYS.QUESTIONS, "preview/".concat(id)]];
+    },
     onSuccess: function onSuccess() {
-      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-        args[_key2] = arguments[_key2];
-      }
-      var id = args[1].id;
-      queryClient.invalidateQueries([QUERY_KEYS.FORMS]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, id]);
-      queryClient.invalidateQueries([QUERY_KEYS.QUESTIONS, "preview/".concat(id)]);
-      options.onSuccess && options.onSuccess.apply(options, args);
+      options.onSuccess && options.onSuccess.apply(options, arguments);
     }
   }));
 };
-var useSubmission = function useSubmission(_ref7) {
-  var formId = _ref7.formId,
-    submissionId = _ref7.submissionId,
-    options = _objectWithoutProperties$1(_ref7, _excluded3$1);
+var useSubmission = function useSubmission(_ref8) {
+  var formId = _ref8.formId,
+    submissionId = _ref8.submissionId,
+    options = _objectWithoutProperties$1(_ref8, _excluded3$1);
   return reactQuery.useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
     return neetoFormApi.getPublicSubmission(formId, submissionId);
   }, _objectSpread$f(_objectSpread$f({}, options), {}, {
@@ -709,15 +718,15 @@ var useSubmission = function useSubmission(_ref7) {
 };
 var useCreateSubmission = function useCreateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref8) {
-    var formId = _ref8.formId,
-      values = _ref8.values;
+  return reactQuery.useMutation(function (_ref9) {
+    var formId = _ref9.formId,
+      values = _ref9.values;
     return neetoFormApi.submitPublicForm(formId, values);
   }, _objectSpread$f(_objectSpread$f({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission, _data$submission2;
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
       }
       var data = args[0],
         formId = args[1].formId;
@@ -730,15 +739,15 @@ var useCreateSubmission = function useCreateSubmission(options) {
 };
 var useUpdateSubmission = function useUpdateSubmission(options) {
   var queryClient = reactQuery.useQueryClient();
-  return reactQuery.useMutation(function (_ref9) {
-    var formId = _ref9.formId,
-      values = _ref9.values;
+  return reactQuery.useMutation(function (_ref10) {
+    var formId = _ref10.formId,
+      values = _ref10.values;
     return neetoFormApi.updatePublicSubmission(formId, values);
   }, _objectSpread$f(_objectSpread$f({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission3;
-      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-        args[_key4] = arguments[_key4];
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
       }
       var data = args[0],
         formId = args[1].formId;
@@ -840,12 +849,12 @@ var useUpdateSubmission = function useUpdateSubmission(options) {
     nodeId: "37683bae-da1b-4890-ade9-0664006dc57d"
   }]
 });
-var THUMBS_UP = {
-  icon: "👍",
-  className: "w-20"
-};
 var QUESTIONS_WITHOUT_FIELD_CODE = ["paragraph", "termsandcondition", "condition", "file_upload"];
 var RESERVED_FIELD_CODES = ["month", "date", "time"];
+var DEFAULT_AVAILABLE_LANGUAGES = [{
+  code: "en",
+  name: "English"
+}];
 
 function _arrayWithHoles$3(arr) {
   if (Array.isArray(arr)) return arr;
@@ -9902,6 +9911,60 @@ var useBuildFormState = function useBuildFormState() {
   return useBuildFormStore(ramda.prop("formState"));
 };
 
+var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
+  var dirty = _ref.dirty,
+    initialLanguage = _ref.initialLanguage,
+    languages = _ref.languages,
+    onChange = _ref.onChange;
+  var _useState = React$2.useState(false),
+    _useState2 = _slicedToArray$3(_useState, 2),
+    isUnsavedChangesAlertOpen = _useState2[0],
+    setIsUnsavedChangesAlertOpen = _useState2[1];
+  var _useState3 = React$2.useState(initialLanguage),
+    _useState4 = _slicedToArray$3(_useState3, 2),
+    selectedLanguage = _useState4[0],
+    setSelectedLanguage = _useState4[1];
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var languageChangeHandler = function languageChangeHandler(code) {
+    if (!dirty) {
+      onChange(code);
+      return;
+    }
+    setSelectedLanguage(code);
+    setIsUnsavedChangesAlertOpen(true);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    content: t("neetoForm.questions.changeLanguage")
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, {
+    buttonStyle: "text",
+    icon: neetoIcons.Globe,
+    position: "top-start"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown.Menu, null, languages.map(function (_ref2) {
+    var code = _ref2.code,
+      name = _ref2.name;
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown.MenuItem.Button, {
+      isActive: initialLanguage === code,
+      key: code,
+      onClick: function onClick() {
+        return languageChangeHandler(code);
+      }
+    }, name);
+  }))))), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+    isOpen: isUnsavedChangesAlertOpen,
+    message: t("neetoForm.questions.unsavedChangesAlert.message"),
+    submitButtonLabel: t("neetoForm.questions.unsavedChangesAlert.discard"),
+    title: t("neetoForm.questions.unsavedChangesAlert.title"),
+    onClose: function onClose() {
+      return setIsUnsavedChangesAlertOpen(false);
+    },
+    onSubmit: function onSubmit() {
+      onChange(selectedLanguage);
+      setIsUnsavedChangesAlertOpen(false);
+    }
+  }));
+};
+
 var ListItem = function ListItem(_ref) {
   var _ref$icon = _ref.icon,
     Icon = _ref$icon === void 0 ? null : _ref$icon,
@@ -10256,6 +10319,7 @@ var FILE_TYPES = {
   IMAGES: "images",
   AUDIO_VIDEO: "audio/video"
 };
+var MULTIPLE_CHOICE_FIELD_MIN_OPTIONS = 2;
 var SINGLE_CHOICE_FIELD_MIN_OPTIONS$1 = 2;
 var DROPDOWN_FIELD_MIN_OPTIONS$1 = 2;
 var STAR_RATING_ICONS_MAP = {
@@ -10277,6 +10341,8 @@ var FILE_GROUPS = [{
   label: i18next.t("neetoForm.fileTypes.audioVideo"),
   name: FILE_TYPES.AUDIO_VIDEO
 }];
+var STAR_RATING_MIN_COUNT = 0;
+var STAR_RATING_MAX_COUNT = 10;
 
 var Dropdown$1 = function Dropdown(_ref) {
   var item = _ref.item,
@@ -10578,7 +10644,10 @@ var MultipleChoice$1 = function MultipleChoice(_ref) {
     disabled: isLabelDisabled,
     label: t("neetoForm.questions.common.questionFields.field.question"),
     name: "".concat(name, ".label"),
-    rows: 1
+    rows: 1,
+    placeholder: t("neetoForm.questions.common.questionFields.field.labelExample", {
+      what: t("neetoForm.common.hobbies")
+    })
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
@@ -10597,14 +10666,17 @@ var MultipleChoice$1 = function MultipleChoice(_ref) {
       }, /*#__PURE__*/React__default["default"].createElement(InputWithMaxLength, {
         required: true,
         disabled: freezeOptions,
-        name: "".concat(name, ".optionsAttributes.").concat(index, ".label")
+        name: "".concat(name, ".optionsAttributes.").concat(index, ".label"),
+        placeholder: t("neetoForm.questions.common.questionFields.field.numberedOption", {
+          number: index + 1
+        })
       }), !freezeOptions && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-        className: classnames__default["default"]({
-          invisible: index === 0
-        }),
         icon: neetoIcons.Delete,
         size: "small",
         style: "text",
+        className: classnames__default["default"]({
+          invisible: index < MULTIPLE_CHOICE_FIELD_MIN_OPTIONS
+        }),
         tooltipProps: {
           position: "top",
           content: t("neetoForm.common.delete")
@@ -10821,7 +10893,10 @@ var SingleChoice$1 = function SingleChoice(_ref) {
     disabled: isLabelDisabled,
     label: t("neetoForm.questions.common.questionFields.field.question"),
     name: "".concat(name, ".label"),
-    rows: 1
+    rows: 1,
+    placeholder: t("neetoForm.questions.common.questionFields.field.labelExample", {
+      what: t("neetoForm.common.country")
+    })
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full"
   }, /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
@@ -10881,6 +10956,26 @@ var SingleChoice$1 = function SingleChoice(_ref) {
   }));
 };
 
+var validateStarRatingCount = function validateStarRatingCount(value) {
+  try {
+    var schema = yup__namespace.number().integer().transform(function (value) {
+      return isNaN(value) ? null : value;
+    }).min(STAR_RATING_MIN_COUNT, i18next.t("neetoForm.error.minCount", {
+      field: i18next.t("neetoForm.common.count"),
+      value: STAR_RATING_MIN_COUNT
+    })).max(STAR_RATING_MAX_COUNT, i18next.t("neetoForm.error.maxCount", {
+      field: i18next.t("neetoForm.common.count"),
+      value: STAR_RATING_MAX_COUNT
+    })).nullable().required(i18next.t("neetoForm.common.fieldReq", {
+      field: i18next.t("neetoForm.common.count")
+    }));
+    schema.validateSync(value);
+    return undefined;
+  } catch (error) {
+    return error.message;
+  }
+};
+
 var StarRating$3 = function StarRating(_ref) {
   var name = _ref.name,
     isRequired = _ref.isRequired,
@@ -10890,8 +10985,19 @@ var StarRating$3 = function StarRating(_ref) {
     t = _useTranslation.t;
   var _useField = formik.useField("".concat(name, ".shape")),
     _useField2 = _slicedToArray$3(_useField, 3),
-    value = _useField2[0].value,
-    setValue = _useField2[2].setValue;
+    shape = _useField2[0].value;
+    _useField2[1];
+    var setShape = _useField2[2].setValue;
+  var _useField3 = formik.useField({
+      name: "".concat(name, ".count"),
+      validate: validateStarRatingCount
+    }),
+    _useField4 = _slicedToArray$3(_useField3, 3),
+    countField = _useField4[0],
+    _useField4$ = _useField4[1],
+    countTouched = _useField4$.touched,
+    countError = _useField4$.error,
+    setCount = _useField4[2].setValue;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10902,19 +11008,22 @@ var StarRating$3 = function StarRating(_ref) {
     label: t("neetoForm.questions.common.questionFields.field.question"),
     name: "".concat(name, ".label"),
     rows: 1
-  })), /*#__PURE__*/React__default["default"].createElement(InputWithMaxLength, {
+  })), /*#__PURE__*/React__default["default"].createElement(InputWithMaxLength, _extends$8({
+    required: true
+  }, countField, {
+    error: countTouched ? countError : "",
     label: t("neetoForm.common.count"),
-    max: 15,
-    min: 0,
-    name: "".concat(name, ".count"),
-    type: "number"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoForm.common.icon")), /*#__PURE__*/React__default["default"].createElement("div", {
+    max: STAR_RATING_MAX_COUNT,
+    min: STAR_RATING_MIN_COUNT,
+    type: "number",
+    onChange: utils.withEventTargetValue(setCount)
+  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, t("neetoForm.common.icon")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex gap-2"
   }, Object.entries(STAR_RATING_ICONS_MAP).map(function (_ref2) {
     var _ref3 = _slicedToArray$3(_ref2, 2),
       name = _ref3[0],
       Shape = _ref3[1];
-    var isActive = name === value;
+    var isActive = name === shape;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: name,
       className: classnames__default["default"]("flex h-10 w-10 items-center justify-center gap-2", "neeto-ui-border-gray-800 neeto-ui-rounded-full cursor-pointer border", "transition-all duration-300 ease-in-out", {
@@ -10922,7 +11031,7 @@ var StarRating$3 = function StarRating(_ref) {
         "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
       }),
       onClick: function onClick() {
-        return setValue(name);
+        return setShape(name);
       }
     }, /*#__PURE__*/React__default["default"].createElement(Shape, null));
   })), !isRequired && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -11010,22 +11119,28 @@ var Editor = function Editor(_ref) {
       name: fieldName,
       validate: validateContent
     }),
-    _useField2 = _slicedToArray$3(_useField, 2),
+    _useField2 = _slicedToArray$3(_useField, 3),
     value = _useField2[0].value,
-    error = _useField2[1].error;
+    _useField2$ = _useField2[1],
+    touched = _useField2$.touched,
+    error = _useField2$.error,
+    setTouched = _useField2[2].setTouched;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full cursor-auto"
   }, /*#__PURE__*/React__default["default"].createElement(neetoEditor.Editor, {
-    error: error,
     className: "px-2 pb-2",
     contentClassName: "border-none",
     disabled: isLabelDisabled,
+    error: touched ? error : "",
     errorWrapperClassName: "border-none",
     id: "editor",
     initialValue: value,
     menuClassName: "border-none",
     name: fieldName,
     ref: editorRef,
+    onBlur: function onBlur() {
+      setTouched(true);
+    },
     onChange: function onChange(text) {
       var _editorRef$current$ed;
       setFieldValue((_editorRef$current$ed = editorRef.current.editor) === null || _editorRef$current$ed === void 0 || (_editorRef$current$ed = _editorRef$current$ed.contentComponent) === null || _editorRef$current$ed === void 0 || (_editorRef$current$ed = _editorRef$current$ed.props) === null || _editorRef$current$ed === void 0 ? void 0 : _editorRef$current$ed.name, text);
@@ -11153,9 +11268,9 @@ var QUESTION_KINDS = [{
   defaults: {
     label: "",
     isRequired: false,
-    optionsAttributes: [{
+    optionsAttributes: new Array(MULTIPLE_CHOICE_FIELD_MIN_OPTIONS).fill({
       label: ""
-    }]
+    })
   }
 }, {
   type: "radio",
@@ -11607,7 +11722,7 @@ var List = function List(_ref) {
   })))));
 };
 
-var _excluded$5 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode"];
+var _excluded$5 = ["questionKinds", "showAddQuestionDivider", "onValueChange", "showActionBlock", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "kindUniqueOn", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange"];
 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$6(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 Form = function Form(_ref) {
@@ -11627,6 +11742,11 @@ var Form = function Form(_ref) {
     isDisabledFieldLabel = _ref.isDisabledFieldLabel,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
     enableFieldCode = _ref.enableFieldCode,
+    formTitle = _ref.formTitle,
+    formDescription = _ref.formDescription,
+    selectedLanguage = _ref.selectedLanguage,
+    availableLanguages = _ref.availableLanguages,
+    onLanguageChange = _ref.onLanguageChange,
     formDomProps = _objectWithoutProperties$1(_ref, _excluded$5);
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
@@ -11740,7 +11860,24 @@ var Form = function Form(_ref) {
     noValidate: true
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full flex-grow overflow-y-auto"
-  }, hasActiveQuestions ? /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-4"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    "data-cy": "meeting-header",
+    lineHeight: "normal",
+    style: "h4",
+    weight: "semibold"
+  }, formTitle), availableLanguages.length > 1 && /*#__PURE__*/React__default["default"].createElement(ChangeLanguageDropdown, {
+    dirty: dirty,
+    initialLanguage: selectedLanguage,
+    languages: availableLanguages,
+    onChange: function onChange(code) {
+      resetForm();
+      onLanguageChange(code);
+    }
+  })), formDescription), hasActiveQuestions ? /*#__PURE__*/React__default["default"].createElement(formik.FieldArray, {
     name: "questions"
   }, function (_ref2) {
     var insert = _ref2.insert,
@@ -11894,20 +12031,27 @@ var BuildForm = function BuildForm(_ref) {
     allowAdditionalGuests = _ref$allowAdditionalG === void 0 ? false : _ref$allowAdditionalG,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
     _ref$enableFieldCode = _ref.enableFieldCode,
-    enableFieldCode = _ref$enableFieldCode === void 0 ? false : _ref$enableFieldCode;
+    enableFieldCode = _ref$enableFieldCode === void 0 ? false : _ref$enableFieldCode,
+    _ref$availableLanguag = _ref.availableLanguages,
+    availableLanguages = _ref$availableLanguag === void 0 ? DEFAULT_AVAILABLE_LANGUAGES : _ref$availableLanguag,
+    formDescription = _ref.formDescription,
+    _ref$formTitle = _ref.formTitle,
+    formTitle = _ref$formTitle === void 0 ? "" : _ref$formTitle,
+    _ref$selectedLanguage = _ref.selectedLanguage,
+    selectedLanguage = _ref$selectedLanguage === void 0 ? "en" : _ref$selectedLanguage,
+    _ref$onLanguageChange = _ref.onLanguageChange,
+    onLanguageChange = _ref$onLanguageChange === void 0 ? neetoCist.noop : _ref$onLanguageChange;
   var queryClient = reactQuery.useQueryClient();
   var _useUpdateQuestions = useUpdateQuestions({
       formId: id,
-      onError: function onError(error) {
-        return neetoui.Toastr.error(error);
-      },
-      onSuccess: function onSuccess() {
-        return neetoui.Toastr.success("", THUMBS_UP);
-      }
+      language: selectedLanguage,
+      onError: neetoui.Toastr.error,
+      onSuccess: utils.showThumbsUpToastr
     }),
     updateQuestions = _useUpdateQuestions.mutateAsync;
   var _useForm = useForm({
       formId: id,
+      language: selectedLanguage,
       onSuccess: function onSuccess(data) {
         return onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(data);
       },
@@ -11941,15 +12085,17 @@ var BuildForm = function BuildForm(_ref) {
     return updateQuestions({
       id: id,
       values: _objectSpread$b({
-        neetoFormQuestion: payload
+        neetoFormQuestion: _objectSpread$b(_objectSpread$b({}, payload), {}, {
+          language: selectedLanguage
+        })
       }, buildRequestArgs)
     });
   };
   var onValueChange = function onValueChange(questions) {
-    var _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, id]),
+    var _queryClient$getQuery = queryClient.getQueryState([QUERY_KEYS.QUESTIONS, id, selectedLanguage]),
       dataUpdateCount = _queryClient$getQuery.dataUpdateCount;
     if (dataUpdateCount > 0) {
-      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id)], ramda.assoc("questions", questions));
+      queryClient.setQueryData([QUERY_KEYS.QUESTIONS, "preview/".concat(id), selectedLanguage], ramda.assoc("questions", questions));
     }
   };
   var isDeletable = isQuestionDeletable !== null && isQuestionDeletable !== void 0 ? isQuestionDeletable : function (question) {
@@ -11978,16 +12124,21 @@ var BuildForm = function BuildForm(_ref) {
     var errors = _ref3.errors,
       setFieldError = _ref3.setFieldError;
     return /*#__PURE__*/React__default["default"].createElement(Form, _extends$8({}, _objectSpread$b(_objectSpread$b({}, formDomProps), {}, {
+      availableLanguages: availableLanguages,
       cancelButtonProps: cancelButtonProps,
       disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
       enableFieldCode: enableFieldCode,
+      formDescription: formDescription,
+      formTitle: formTitle,
       getActiveKindDetails: getActiveKindDetails,
       isDeletable: isDeletable,
       isDisabledFieldLabel: isDisabledFieldLabel,
       isKindAlreadyActive: isKindAlreadyActive,
       isRequiredField: isRequiredField,
       kindUniqueOn: kindUniqueOn,
+      onLanguageChange: onLanguageChange,
       onValueChange: onValueChange,
+      selectedLanguage: selectedLanguage,
       showActionBlock: showActionBlock,
       showAddQuestionDivider: showAddQuestionDivider,
       submitButtonProps: submitButtonProps
@@ -26656,6 +26807,7 @@ var StarRatingField = function StarRatingField(_ref) {
     isRequired = question.isRequired,
     count = question.count,
     shape = question.shape;
+  var sanitizedCount = ramda.clamp(0, 10, parseInt(count)) || 0;
   return /*#__PURE__*/React__default["default"].createElement(formik.Field, {
     name: name,
     validate: validateFieldValue({
@@ -26668,11 +26820,11 @@ var StarRatingField = function StarRatingField(_ref) {
     var meta = _ref2.meta,
       field = _ref2.field;
     return /*#__PURE__*/React__default["default"].createElement(StarRating$1, _extends$8({
-      count: count,
-      error: meta.touched ? meta.error : "",
-      label: getLabel$1(label, isRequired),
       name: name,
-      shape: shape
+      shape: shape,
+      count: sanitizedCount,
+      error: meta.touched ? meta.error : "",
+      label: getLabel$1(label, isRequired)
     }, field));
   });
 };
@@ -26889,7 +27041,9 @@ var ExternalForm = function ExternalForm(_ref) {
     _ref$autoCompleteKind = _ref.autoCompleteKinds,
     autoCompleteKinds = _ref$autoCompleteKind === void 0 ? [] : _ref$autoCompleteKind,
     _ref$enablePreFilling = _ref.enablePreFilling,
-    enablePreFilling = _ref$enablePreFilling === void 0 ? false : _ref$enablePreFilling;
+    enablePreFilling = _ref$enablePreFilling === void 0 ? false : _ref$enablePreFilling,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? "en" : _ref$language;
   var _useState = React$2.useState(false),
     _useState2 = _slicedToArray$3(_useState, 2),
     isSubmitted = _useState2[0],
@@ -27100,6 +27254,7 @@ var ExternalForm = function ExternalForm(_ref) {
   var _useForm = useForm({
       formId: formId,
       preview: preview,
+      language: language,
       onError: neetoui.Toastr.error,
       enabled: !preview,
       placeholderData: {