@bigbinary/neeto-form-frontend 4.1.9 → 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-D0zli_cv.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';
@@ -140,14 +141,14 @@ var DeleteSmsReminderModal = function DeleteSmsReminderModal(_ref) {
     onClose: onClose,
     children: [/*#__PURE__*/jsx(Modal.Header, {
       children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "delete-sms-reminder-modal-header",
+        "data-testid": "delete-sms-reminder-modal-header",
         style: "h2",
         weight: "medium",
         children: path(["smsReminder", "deleteModal", "title"], hostSpecificData)
       })
     }), /*#__PURE__*/jsx(Modal.Body, {
       children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "delete-sms-reminder-modal-description",
+        "data-testid": "delete-sms-reminder-modal-description",
         style: "body2",
         children: path(["smsReminder", "deleteModal", "description"], hostSpecificData)
       })
@@ -209,7 +210,7 @@ var Overview = function Overview(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center justify-between",
       children: [/*#__PURE__*/jsx(Typography, {
-        "data-cy": "neeto-form-engine-overview-title",
+        "data-testid": "neeto-form-engine-overview-title",
         lineHeight: "neeto-ui-leading-normal",
         style: "h2",
         weight: "neeto-ui-font-semibold",
@@ -231,7 +232,7 @@ var Overview = function Overview(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsx(Typography, {
-      "data-cy": "neeto-form-engine-overview-description",
+      "data-testid": "neeto-form-engine-overview-description",
       style: "body2",
       children: description
     })]
@@ -268,7 +269,7 @@ var Card = function Card(_ref) {
     setIsTooltipEnabled(isElementOverflowing(element));
   }, [questionLabel]);
   return /*#__PURE__*/jsxs("div", {
-    "data-cy": "neeto-form-engine-".concat(slugify(questionLabel)),
+    "data-testid": "neeto-form-engine-".concat(slugify(questionLabel)),
     className: classnames("neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-white neeto-form-nano-form__card flex h-10 w-full items-center justify-between gap-1 border p-2", {
       "neeto-ui-border-primary-500 neeto-form-nano-form__card--active": isActive
     }),
@@ -285,7 +286,7 @@ var Card = function Card(_ref) {
         position: "top",
         children: /*#__PURE__*/jsx(Typography, {
           className: "line-clamp-2 min-w-0 grow truncate break-words",
-          "data-cy": "".concat(slugify(questionLabel), "-question-card-label"),
+          "data-testid": "".concat(slugify(questionLabel), "-question-card-label"),
           lineHeight: "snug",
           ref: questionLabelRef,
           style: "body2",
@@ -301,18 +302,18 @@ var Card = function Card(_ref) {
         strategy: "fixed"
       },
       menuItems: [{
-        "data-cy": "edit-question",
+        "data-testid": "edit-question",
         key: "edit",
         label: t("neetoForm.common.edit"),
         onClick: onEdit
       }, {
-        "data-cy": "clone-question",
+        "data-testid": "clone-question",
         key: "clone",
         label: t("neetoForm.common.clone"),
         isVisible: !isSingular && isFunction(onClone),
         onClick: onClone
       }, {
-        "data-cy": "delete-question",
+        "data-testid": "delete-question",
         key: "delete",
         label: t("neetoForm.common.delete"),
         isVisible: isFunction(onDelete),
@@ -790,13 +791,13 @@ var Properties = function Properties(_ref) {
 var Block = function Block(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    dataCy = _ref.dataCy;
+    dataTestid = _ref.dataTestid;
   return /*#__PURE__*/jsxs("div", {
     className: "mt-4 space-y-4",
-    "data-cy": dataCy,
+    "data-testid": dataTestid,
     children: [/*#__PURE__*/jsx("div", {
       className: "flex items-center justify-between",
-      "data-cy": "properties-header",
+      "data-testid": "properties-header",
       children: /*#__PURE__*/jsx(Typography, {
         lineHeight: "normal",
         style: "body1",
@@ -1084,7 +1085,7 @@ var Form$1 = function Form(_ref) {
           kind: kind,
           questionProps: questionProps
         }), isSettingsBlockVisible && /*#__PURE__*/jsxs(Block, {
-          dataCy: "settings-card",
+          dataTestid: "settings-card",
           title: t("neetoForm.common.settings"),
           children: [!isImmutable && /*#__PURE__*/jsx(RequiredSwitch, {}), shouldShowHideSwitch && /*#__PURE__*/jsx(Switch, {
             label: t("neetoForm.common.hideQuestion"),
@@ -1097,7 +1098,7 @@ var Form$1 = function Form(_ref) {
           })]
         }), (shouldShowFieldCode || canMarkResponsesAsReadOnly) && /*#__PURE__*/jsx(Accordion, {
           className: "neeto-form-nano-advanced-properties-accordion",
-          "data-cy": "advanced-properties-card",
+          "data-testid": "advanced-properties-card",
           defaultActiveKey: isFieldCodeInvalid ? 0 : null // This is to open the accordion when field code is invalid
           ,
           children: /*#__PURE__*/jsx(Accordion.Item, {
@@ -1234,7 +1235,7 @@ var Add = function Add(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
       children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "add-question-pane-header",
+        "data-testid": "add-question-pane-header",
         style: "h2",
         children: t("neetoForm.questions.common.primaryPanel.addQuestion")
       })
@@ -1311,7 +1312,7 @@ var Edit = function Edit(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Pane.Header, {
       children: /*#__PURE__*/jsx(Typography, {
-        "data-cy": "edit-question-pane-header",
+        "data-testid": "edit-question-pane-header",
         style: "h2",
         children: t("neetoForm.questions.common.editQuestion")
       })
@@ -1368,11 +1369,11 @@ var SwitchBlock = function SwitchBlock(_ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/jsxs(Label, {
     className: classnames("flex items-center justify-start gap-2 ", className),
-    "data-cy": "neeto-form-engine-".concat(hyphenate(title && name), "-toggle-label"),
+    "data-testid": "neeto-form-engine-".concat(hyphenate(title && name), "-toggle-label"),
     children: [/*#__PURE__*/jsx(Switch, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
       name: name
     })), {}, {
-      "data-cy": "neeto-form-engine-".concat(hyphenate(title && name), "-switch")
+      "data-testid": "neeto-form-engine-".concat(hyphenate(title && name), "-switch")
     })), /*#__PURE__*/jsx(Typography, {
       component: "span",
       style: "body1",
@@ -1434,7 +1435,7 @@ var STYLES = {
 };
 var MultiValueRemove = function MultiValueRemove(props) {
   return /*#__PURE__*/jsx(components.MultiValueRemove, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-cy", "".concat(hyphenize(props.data.label), "-remove-icon"))),
+    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-testid", "".concat(hyphenize(props.data.label), "-remove-icon"))),
     children: /*#__PURE__*/jsx(Close, {
       size: 16
     })
@@ -1455,7 +1456,7 @@ var ValueContainer = function ValueContainer(_ref) {
     rest = _children.slice(1);
   var shouldCollapse = !isFocused && value.length > visibleDomainsCount;
   return /*#__PURE__*/jsxs(components.ValueContainer, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-cy", "multi-domain-input-container")),
+    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-testid", "multi-domain-input-container")),
     children: [shouldCollapse ? firstChild.slice(0, visibleDomainsCount) : firstChild, shouldCollapse && /*#__PURE__*/jsx(Tag, {
       style: "secondary",
       label: t("neetoForm.common.remainingItemsCount", {
@@ -1466,7 +1467,7 @@ var ValueContainer = function ValueContainer(_ref) {
 };
 var ClearIndicator = function ClearIndicator(props) {
   return /*#__PURE__*/jsx(components.ClearIndicator, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-cy", "clear-all-button")),
+    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-testid", "clear-all-button")),
     children: /*#__PURE__*/jsx(Close, {
       className: "cursor-pointer",
       size: 16
@@ -1587,7 +1588,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       className: "neeto-ui-email-input__label-wrapper",
       children: /*#__PURE__*/jsx(Label, {
         className: "neeto-ui-email-input__label",
-        "data-cy": "".concat(hyphenize(label), "-input-label"),
+        "data-testid": "".concat(hyphenize(label), "-input-label"),
         children: label
       })
     }), /*#__PURE__*/jsx(CreatableSelect, _objectSpread$3({
@@ -1620,7 +1621,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       value: value
     }, otherProps))), !!error && /*#__PURE__*/jsxs("p", {
       className: "neeto-ui-input__error",
-      "data-cy": "".concat(hyphenize(label), "-input-error"),
+      "data-testid": "".concat(hyphenize(label), "-input-error"),
       children: [formatErrorMessage(error), isFilterDomainsLinkVisible && /*#__PURE__*/jsxs("span", {
         className: "neeto-ui-font-semibold cursor-pointer",
         onClick: handleFilterDomains,
@@ -1628,7 +1629,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       })]
     }), /*#__PURE__*/jsx("p", {
       className: "neeto-ui-input__help-text",
-      "data-cy": "".concat(hyphenize(label), "-input-help"),
+      "data-testid": "".concat(hyphenize(label), "-input-help"),
       children: t("neetoForm.domainRestriction.helpText")
     })]
   });
@@ -1719,7 +1720,7 @@ var RestrictDomainsBlock = function RestrictDomainsBlock(_ref) {
     popoverDescription = _mergeLeft.popoverDescription;
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-col space-y-4",
-    "data-cy": "".concat(hyphenate(switchName), "-container"),
+    "data-testid": "".concat(hyphenate(switchName), "-container"),
     children: [/*#__PURE__*/jsx(SwitchBlock, {
       name: switchName,
       title: /*#__PURE__*/jsx(TitleWithHelpPopover, {
@@ -1743,7 +1744,7 @@ var VerifyEmails = function VerifyEmails() {
     title = _mergeLeft.title,
     popoverDescription = _mergeLeft.popoverDescription;
   return /*#__PURE__*/jsx("div", {
-    "data-cy": "email-verification-switch-container",
+    "data-testid": "email-verification-switch-container",
     children: /*#__PURE__*/jsx(Switch, {
       name: "isVerificationEnabled",
       label: /*#__PURE__*/jsx(Typography, {
@@ -1792,7 +1793,7 @@ var FileGroup = function FileGroup(_ref) {
     checked: checked,
     label: label,
     name: name,
-    "data-cy": "neeto-form-engine-file-type-".concat(name),
+    "data-testid": "neeto-form-engine-file-type-".concat(name),
     id: name,
     onChange: handleAllowedFileTypesChange
   });
@@ -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
+          })]
+        })]
+      })]
     })]
   });
 };
@@ -1944,7 +1982,7 @@ var Rating = function Rating() {
               size: 48
             }), /*#__PURE__*/jsx(InputWithMaxLength, {
               name: name,
-              "data-cy": "neeto-form-engine-".concat(hyphenate(name))
+              "data-testid": "neeto-form-engine-".concat(hyphenate(name))
             })]
           }, name);
         })
@@ -1968,7 +2006,7 @@ var StarRating = function StarRating() {
       className: "flex space-x-4",
       children: [/*#__PURE__*/jsx(Select, {
         className: "w-1/2",
-        "data-cy": "neeto-form-engine-star-rating-min-value",
+        "data-testid": "neeto-form-engine-star-rating-min-value",
         label: t("neetoForm.common.start"),
         name: "minValue",
         options: STAR_RATING_MIN_VALUE_OPTIONS,
@@ -1977,7 +2015,7 @@ var StarRating = function StarRating() {
         }
       }), /*#__PURE__*/jsx(Select, {
         className: "w-1/2",
-        "data-cy": "neeto-form-engine-star-rating-max-value",
+        "data-testid": "neeto-form-engine-star-rating-max-value",
         label: t("neetoForm.common.end"),
         name: "maxValue",
         options: STAR_RATING_MAX_VALUE_OPTIONS,
@@ -1995,7 +2033,7 @@ var StarRating = function StarRating() {
           IconType = _ref2[1];
         var isActive = name === iconType;
         return /*#__PURE__*/jsx("div", {
-          "data-cy": "neeto-form-engine-rating-icon-".concat(name),
+          "data-testid": "neeto-form-engine-rating-icon-".concat(name),
           className: classnames("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", {
             "neeto-ui-text-gray-800 neeto-ui-bg-gray-200": !isActive,
             "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
@@ -2079,7 +2117,7 @@ var buildDefaultValueForKind = function buildDefaultValueForKind(questionKind) {
 var hideSwitchLabelProps = function hideSwitchLabelProps(helpUrl) {
   return helpUrl ? {
     helpIconProps: {
-      "data-cy": "help-popover-button",
+      "data-testid": "help-popover-button",
       popoverProps: {
         description: t("neetoForm.questions.common.questionFields.field.hideQuestionHelpDescription"),
         helpLinkProps: {
@@ -2093,7 +2131,7 @@ var hideSwitchLabelProps = function hideSwitchLabelProps(helpUrl) {
 var responseVisibleOnlyToHostSwitchLabelProps = function responseVisibleOnlyToHostSwitchLabelProps(helpUrl) {
   return {
     helpIconProps: {
-      "data-cy": "help-popover-button",
+      "data-testid": "help-popover-button",
       popoverProps: {
         description: t("neetoForm.questions.common.questionFields.field.responseVisibleOnlyToHostHelpDescription"),
         helpLinkProps: {
@@ -2107,7 +2145,7 @@ var responseVisibleOnlyToHostSwitchLabelProps = function responseVisibleOnlyToHo
 var readOnlySwitchLabelProps = function readOnlySwitchLabelProps(helpUrl) {
   return {
     helpIconProps: {
-      "data-cy": "help-popover-button",
+      "data-testid": "help-popover-button",
       popoverProps: {
         description: t("neetoForm.questions.common.questionFields.field.readOnlyHelpDescription"),
         helpLinkProps: helpUrl ? {
@@ -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,