@bigbinary/neeto-form-frontend 4.1.10 → 4.2.0

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

@@ -140,7 +140,11 @@
             "hideQuestionHelpDescription": "When enabled, this question will not be visible in the created form. It can be used to track \"reference ids\" and UTM parameters.",
             "responseVisibleOnlyToHostHelpDescription": "When enabled, the response to this question will only be visible to the host",
             "readOnlyHelpDescription": "When enabled, the client will only be able to see the answer of this question, but will not be able to change the answer of this question. Since you are marking this question as \"read-only\" you should pre-fill the question with an answer.",
-            "verifyHuman": "Verify that you are a human"
+            "verifyHuman": "Verify that you are a human",
+            "pictureChoiceSettings": "Picture choice settings",
+            "addPicturesToOptions": "Add pictures to options",
+            "fitImages": "Fit images",
+            "imageHeight": "Image height"
           }
         }
       },

package/dist/BuildForm.js

@@ -4,13 +4,13 @@ import { isPresent, truncate, findBy, isNotPresent, slugify, existsBy, hyphenate
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { equals, path, curry, assoc, prop, dissoc, when, includes, isEmpty, reject, keys, pick, omit, evolve, map, mergeLeft, isNil, pipe, filter, isNotNil, uniq, join, pluck, test, paths, difference, split, last, either, T, F } from 'ramda';
 import { k as useDeleteQuestion, Q as QUESTION_TYPES, a as useForm, l as useCreateQuestion, m as useUpdateQuestion, C as CAPTCHA_TYPES, n as useReorderQuestions, i as QUERY_KEYS } from './constants-51SEJjzI.js';
-import { f as buildDisplayLabel, h as INDEPENDENT_LABELS_MAP, i as QUESTION_ACTIONS, j as isElementOverflowing, D as Drag, k as SELECTABLE_KINDS, l as isAutoGeneratedQuestion, m as isRichTextQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, n as RESERVED_FIELD_CODES, d as LABEL_FIELDS, o as isDefaultLanguage, p as buildAddQuestionButtonProps, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, q as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, r as NON_HIDEABLE_FIELDS, s as NON_READ_ONLY_FIELDS, t as RICH_TEXT_QUESTIONS, u as FILE_TYPES_MAP, w as FILE_GROUPS, M as MINIMUM_OPTIONS, x as RATING_OPTIONS, y as STAR_RATING_MIN_VALUE_OPTIONS, z as STAR_RATING_MAX_VALUE_OPTIONS, A as STAR_RATING_ICONS_MAP, B as buildDisabledAddButtonHelpPopoverProps, G as buildReorderPayload, H as isMandatoryField, J as QUESTION_KINDS, a as QUESTION_KIND, K as getActiveQuestionKindDetails, O as DEFAULT_AVAILABLE_LANGUAGES, T as DEFAULT_ADVANCED_FEATURES, U as QUESTIONS_INITIAL_VALUE } from './constants-Da_Y-J4N.js';
+import { f as buildDisplayLabel, h as INDEPENDENT_LABELS_MAP, i as QUESTION_ACTIONS, j as isElementOverflowing, k as Drag, l as SELECTABLE_KINDS, m as isAutoGeneratedQuestion, n as isRichTextQuestion, N as NON_BASIC_LATIN_CHARACTERS_REGEX, o as RESERVED_FIELD_CODES, d as LABEL_FIELDS, p as isDefaultLanguage, q as buildAddQuestionButtonProps, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, r as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, s as NON_HIDEABLE_FIELDS, t as NON_READ_ONLY_FIELDS, u as RICH_TEXT_QUESTIONS, w as FILE_TYPES_MAP, x as FILE_GROUPS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, M as MINIMUM_OPTIONS, y as IMAGE_HEIGHT_SLIDER_DEFAULTS, z as RATING_OPTIONS, A as STAR_RATING_MIN_VALUE_OPTIONS, B as STAR_RATING_MAX_VALUE_OPTIONS, G as STAR_RATING_ICONS_MAP, H as buildDisabledAddButtonHelpPopoverProps, J as buildReorderPayload, K as isMandatoryField, O as QUESTION_KINDS, a as QUESTION_KIND, T as getActiveQuestionKindDetails, U as DEFAULT_AVAILABLE_LANGUAGES, V as DEFAULT_ADVANCED_FEATURES, W as QUESTIONS_INITIAL_VALUE } from './constants-QPLZ_r-D.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef, useEffect, createElement } from 'react';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { withT, isMetaKeyPressed, useStateWithDependency, useFuncDebounce, useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { showThumbsUpToastr, withEventTargetValue, hyphenize } from '@bigbinary/neeto-commons-frontend/utils';
-import { a as useBuildFormStore } from './buildForm-CsVQHcC7.js';
+import { a as useBuildFormStore } from './buildForm-DcE5kFvR.js';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation, Trans } from 'react-i18next';
@@ -53,6 +53,7 @@ import _regeneratorRuntime from '@babel/runtime/regenerator';
 import Checkbox$1 from '@bigbinary/neetoui/formik/Checkbox';
 import Checkbox from '@bigbinary/neetoui/Checkbox';
 import OptionFields from '@bigbinary/neeto-molecules/OptionFields';
+import Slider from '@bigbinary/neetoui/Slider';
 import '@bigbinary/neeto-commons-frontend/constants';
 import 'axios';
 import 'dompurify';
@@ -1874,12 +1875,17 @@ var Options = function Options(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useBuildFormStore = useBuildFormStore(function (store) {
-      var _store$formState;
+      var _store$formState, _store$formState2;
       return {
-        selectedLanguage: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["selectedLanguage"]
+        selectedLanguage: (_store$formState = store["formState"]) === null || _store$formState === void 0 ? void 0 : _store$formState["selectedLanguage"],
+        isPictureChoiceEnabled: (_store$formState2 = store["formState"]) === null || _store$formState2 === void 0 ? void 0 : _store$formState2["isPictureChoiceEnabled"]
       };
     }, shallow),
-    selectedLanguage = _useBuildFormStore.selectedLanguage;
+    selectedLanguage = _useBuildFormStore.selectedLanguage,
+    isPictureChoiceEnabled = _useBuildFormStore.isPictureChoiceEnabled;
+  var _useFormikContext = useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
   var name = "optionsAttributes";
   var _useField = useField(name),
     _useField2 = _slicedToArray(_useField, 3);
@@ -1898,24 +1904,56 @@ var Options = function Options(_ref) {
   var isManageOptionDisabled = isFunction(freezeOptions) ? freezeOptions(selectedLanguage) : freezeOptions;
   var isAddOptionDisabled = disableAddOption || isManageOptionDisabled;
   var isRemoveOptionDisabled = disableRemoveOption || isManageOptionDisabled;
+  var isDropdown = values.kind === QUESTION_TYPES.DROPDOWN;
+  var isPictureChoice = isPictureChoiceEnabled && !isDropdown && (values.isPictureChoice || DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice);
+  var imageHeight = values.imageHeight || DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight;
+  var handleImageHeightChange = function handleImageHeightChange(value) {
+    setFieldValue("imageHeight", value);
+  };
   return /*#__PURE__*/jsxs("div", {
-    className: "w-full",
-    children: [/*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({
-      className: "mb-2 block"
-    }, optionLabelProps), {}, {
-      children: t("neetoForm.questions.common.questionFields.field.options")
-    })), /*#__PURE__*/jsx(OptionFields, {
-      name: name,
-      shouldDestroy: true,
-      destroyFlagName: "_destroy",
-      disabled: isManageOptionDisabled,
-      draggable: !isManageOptionDisabled,
-      isAddOptionEnabled: !isAddOptionDisabled,
-      isDeleteOptionEnabled: !isRemoveOptionDisabled,
-      isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
-      minOptions: MINIMUM_OPTIONS,
-      shouldResetEmptyOptionOnBlur: false,
-      onChange: setOptionsAttributes
+    className: "w-full space-y-4",
+    children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(Label, _objectSpread$2(_objectSpread$2({
+        className: "mb-2 block"
+      }, optionLabelProps), {}, {
+        children: t("neetoForm.questions.common.questionFields.field.options")
+      })), /*#__PURE__*/jsx(OptionFields, {
+        isPictureChoice: isPictureChoice,
+        name: name,
+        shouldDestroy: true,
+        destroyFlagName: "_destroy",
+        disabled: isManageOptionDisabled,
+        draggable: !isManageOptionDisabled,
+        isAddOptionEnabled: !isAddOptionDisabled,
+        isDeleteOptionEnabled: !isRemoveOptionDisabled,
+        isNewItemsPrefilled: isDefaultLanguage(selectedLanguage),
+        minOptions: MINIMUM_OPTIONS,
+        shouldResetEmptyOptionOnBlur: false,
+        onChange: setOptionsAttributes
+      })]
+    }), !isDropdown && isPictureChoiceEnabled && /*#__PURE__*/jsxs(Block, {
+      title: t("neetoForm.questions.common.questionFields.field.pictureChoiceSettings"),
+      children: [/*#__PURE__*/jsx(Switch, {
+        name: "isPictureChoice",
+        label: t("neetoForm.questions.common.questionFields.field.addPicturesToOptions")
+      }), isPictureChoice && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Switch, {
+          name: "shouldFitImages",
+          label: t("neetoForm.questions.common.questionFields.field.fitImages")
+        }), /*#__PURE__*/jsxs("div", {
+          className: "mt-4",
+          children: [/*#__PURE__*/jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: t("neetoForm.questions.common.questionFields.field.imageHeight")
+          }), /*#__PURE__*/jsx(Slider, {
+            max: IMAGE_HEIGHT_SLIDER_DEFAULTS.max,
+            min: IMAGE_HEIGHT_SLIDER_DEFAULTS.min,
+            value: imageHeight,
+            onChange: handleImageHeightChange
+          })]
+        })]
+      })]
     })]
   });
 };
@@ -2188,7 +2226,8 @@ var Form = function Form(_ref) {
     usesCustomSubmissionComponent = _ref.usesCustomSubmissionComponent,
     questionsFromCache = _ref.questionsFromCache,
     onMutateSuccess = _ref.onMutateSuccess,
-    advancedFeatures = _ref.advancedFeatures;
+    advancedFeatures = _ref.advancedFeatures,
+    isPictureChoiceEnabled = _ref.isPictureChoiceEnabled;
   var containerRef = useRef();
   var _useStateWithDependen = useStateWithDependency(questionsFromCache),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
@@ -2262,9 +2301,10 @@ var Form = function Form(_ref) {
       hostSpecificData: hostSpecificData,
       onMutateSuccess: onMutateSuccess,
       advancedFeatures: advancedFeatures,
-      onLanguageChange: onLanguageChange
+      onLanguageChange: onLanguageChange,
+      isPictureChoiceEnabled: isPictureChoiceEnabled
     });
-  }, [formId, isFormEnabled, savedTitle, setFormData, selectedLanguage, helpDocUrls, isUsingDefaultQuestionKinds, usesCustomSubmissionComponent, hostSpecificData, onMutateSuccess, advancedFeatures, onLanguageChange]);
+  }, [formId, isFormEnabled, savedTitle, setFormData, selectedLanguage, helpDocUrls, isUsingDefaultQuestionKinds, usesCustomSubmissionComponent, hostSpecificData, onMutateSuccess, advancedFeatures, onLanguageChange, isPictureChoiceEnabled]);
   var handleSelect = function handleSelect(question) {
     setSelectedQuestion(question);
   };
@@ -2447,7 +2487,9 @@ var BuildForm = function BuildForm(_ref) {
     onMutateSuccess = _ref$onMutateSuccess === void 0 ? noop : _ref$onMutateSuccess,
     hostSpecificData = _ref.hostSpecificData,
     _ref$canManageQuestio = _ref.canManageQuestions,
-    canManageQuestions = _ref$canManageQuestio === void 0 ? false : _ref$canManageQuestio;
+    canManageQuestions = _ref$canManageQuestio === void 0 ? false : _ref$canManageQuestio,
+    _ref$isPictureChoiceE = _ref.isPictureChoiceEnabled,
+    isPictureChoiceEnabled = _ref$isPictureChoiceE === void 0 ? false : _ref$isPictureChoiceE;
   var queryClient = useQueryClient();
   var _useForm = useForm({
       formId: id,
@@ -2499,6 +2541,7 @@ var BuildForm = function BuildForm(_ref) {
       isDisabledFieldLabel: isDisabledFieldLabel,
       isFormEnabled: isFormEnabled,
       isKindAlreadyActive: isKindAlreadyActive,
+      isPictureChoiceEnabled: isPictureChoiceEnabled,
       isRequiredField: isRequiredField,
       isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
       kindUniqueOn: kindUniqueOn,