@bigbinary/neeto-form-frontend 4.1.9 → 4.2.0

package/dist/cjs/BuildForm.js

@@ -6,13 +6,13 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var ramda = require('ramda');
 var constants = require('../constants-C9wKMfgo.js');
-var constants$1 = require('../constants-DXeRH2r2.js');
+var constants$1 = require('../constants-BjWWA3Oq.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var dnd = require('@hello-pangea/dnd');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
-var buildForm = require('../buildForm-BwhLCvEE.js');
+var buildForm = require('../buildForm-CooylMLL.js');
 var shallow = require('zustand/shallow');
 var Alert = require('@bigbinary/neetoui/Alert');
 var reactI18next = require('react-i18next');
@@ -55,6 +55,7 @@ var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var Checkbox$1 = require('@bigbinary/neetoui/formik/Checkbox');
 var Checkbox = require('@bigbinary/neetoui/Checkbox');
 var OptionFields = require('@bigbinary/neeto-molecules/OptionFields');
+var Slider = require('@bigbinary/neetoui/Slider');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('axios');
 require('dompurify');
@@ -161,14 +162,14 @@ var DeleteSmsReminderModal = function DeleteSmsReminderModal(_ref) {
     onClose: onClose,
     children: [/*#__PURE__*/jsxRuntime.jsx(Modal.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "delete-sms-reminder-modal-header",
+        "data-testid": "delete-sms-reminder-modal-header",
         style: "h2",
         weight: "medium",
         children: ramda.path(["smsReminder", "deleteModal", "title"], hostSpecificData)
       })
     }), /*#__PURE__*/jsxRuntime.jsx(Modal.Body, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "delete-sms-reminder-modal-description",
+        "data-testid": "delete-sms-reminder-modal-description",
         style: "body2",
         children: ramda.path(["smsReminder", "deleteModal", "description"], hostSpecificData)
       })
@@ -230,7 +231,7 @@ var Overview = function Overview(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center justify-between",
       children: [/*#__PURE__*/jsxRuntime.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",
@@ -252,7 +253,7 @@ var Overview = function Overview(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
-      "data-cy": "neeto-form-engine-overview-description",
+      "data-testid": "neeto-form-engine-overview-description",
       style: "body2",
       children: description
     })]
@@ -289,7 +290,7 @@ var Card = function Card(_ref) {
     setIsTooltipEnabled(constants$1.isElementOverflowing(element));
   }, [questionLabel]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    "data-cy": "neeto-form-engine-".concat(neetoCist.slugify(questionLabel)),
+    "data-testid": "neeto-form-engine-".concat(neetoCist.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
     }),
@@ -306,7 +307,7 @@ var Card = function Card(_ref) {
         position: "top",
         children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
           className: "line-clamp-2 min-w-0 grow truncate break-words",
-          "data-cy": "".concat(neetoCist.slugify(questionLabel), "-question-card-label"),
+          "data-testid": "".concat(neetoCist.slugify(questionLabel), "-question-card-label"),
           lineHeight: "snug",
           ref: questionLabelRef,
           style: "body2",
@@ -322,18 +323,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 && index.isFunction(onClone),
         onClick: onClone
       }, {
-        "data-cy": "delete-question",
+        "data-testid": "delete-question",
         key: "delete",
         label: t("neetoForm.common.delete"),
         isVisible: index.isFunction(onDelete),
@@ -811,13 +812,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__*/jsxRuntime.jsxs("div", {
     className: "mt-4 space-y-4",
-    "data-cy": dataCy,
+    "data-testid": dataTestid,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex items-center justify-between",
-      "data-cy": "properties-header",
+      "data-testid": "properties-header",
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         lineHeight: "normal",
         style: "body1",
@@ -1105,7 +1106,7 @@ var Form$1 = function Form(_ref) {
           kind: kind,
           questionProps: questionProps
         }), isSettingsBlockVisible && /*#__PURE__*/jsxRuntime.jsxs(Block, {
-          dataCy: "settings-card",
+          dataTestid: "settings-card",
           title: t("neetoForm.common.settings"),
           children: [!isImmutable && /*#__PURE__*/jsxRuntime.jsx(RequiredSwitch, {}), shouldShowHideSwitch && /*#__PURE__*/jsxRuntime.jsx(Switch, {
             label: t("neetoForm.common.hideQuestion"),
@@ -1118,7 +1119,7 @@ var Form$1 = function Form(_ref) {
           })]
         }), (shouldShowFieldCode || canMarkResponsesAsReadOnly) && /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Accordion.Item, {
@@ -1255,7 +1256,7 @@ var Add = function Add(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "add-question-pane-header",
+        "data-testid": "add-question-pane-header",
         style: "h2",
         children: t("neetoForm.questions.common.primaryPanel.addQuestion")
       })
@@ -1332,7 +1333,7 @@ var Edit = function Edit(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Pane.Header, {
       children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-        "data-cy": "edit-question-pane-header",
+        "data-testid": "edit-question-pane-header",
         style: "h2",
         children: t("neetoForm.questions.common.editQuestion")
       })
@@ -1389,11 +1390,11 @@ var SwitchBlock = function SwitchBlock(_ref) {
     otherProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/jsxRuntime.jsxs(Label, {
     className: classnames("flex items-center justify-start gap-2 ", className),
-    "data-cy": "neeto-form-engine-".concat(neetoCist.hyphenate(title && name), "-toggle-label"),
+    "data-testid": "neeto-form-engine-".concat(neetoCist.hyphenate(title && name), "-toggle-label"),
     children: [/*#__PURE__*/jsxRuntime.jsx(Switch, _objectSpread$6(_objectSpread$6({}, _objectSpread$6(_objectSpread$6({}, otherProps), {}, {
       name: name
     })), {}, {
-      "data-cy": "neeto-form-engine-".concat(neetoCist.hyphenate(title && name), "-switch")
+      "data-testid": "neeto-form-engine-".concat(neetoCist.hyphenate(title && name), "-switch")
     })), /*#__PURE__*/jsxRuntime.jsx(Typography, {
       component: "span",
       style: "body1",
@@ -1455,7 +1456,7 @@ var STYLES = {
 };
 var MultiValueRemove = function MultiValueRemove(props) {
   return /*#__PURE__*/jsxRuntime.jsx(reactSelect.components.MultiValueRemove, _objectSpread$4(_objectSpread$4({}, props), {}, {
-    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-cy", "".concat(utils.hyphenize(props.data.label), "-remove-icon"))),
+    innerProps: _objectSpread$4(_objectSpread$4({}, props.innerProps), {}, _defineProperty({}, "data-testid", "".concat(utils.hyphenize(props.data.label), "-remove-icon"))),
     children: /*#__PURE__*/jsxRuntime.jsx(Close, {
       size: 16
     })
@@ -1476,7 +1477,7 @@ var ValueContainer = function ValueContainer(_ref) {
     rest = _children.slice(1);
   var shouldCollapse = !isFocused && value.length > visibleDomainsCount;
   return /*#__PURE__*/jsxRuntime.jsxs(reactSelect.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__*/jsxRuntime.jsx(Tag, {
       style: "secondary",
       label: t("neetoForm.common.remainingItemsCount", {
@@ -1487,7 +1488,7 @@ var ValueContainer = function ValueContainer(_ref) {
 };
 var ClearIndicator = function ClearIndicator(props) {
   return /*#__PURE__*/jsxRuntime.jsx(reactSelect.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__*/jsxRuntime.jsx(Close, {
       className: "cursor-pointer",
       size: 16
@@ -1608,7 +1609,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       className: "neeto-ui-email-input__label-wrapper",
       children: /*#__PURE__*/jsxRuntime.jsx(Label, {
         className: "neeto-ui-email-input__label",
-        "data-cy": "".concat(utils.hyphenize(label), "-input-label"),
+        "data-testid": "".concat(utils.hyphenize(label), "-input-label"),
         children: label
       })
     }), /*#__PURE__*/jsxRuntime.jsx(CreatableSelect, _objectSpread$3({
@@ -1641,7 +1642,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       value: value
     }, otherProps))), !!error && /*#__PURE__*/jsxRuntime.jsxs("p", {
       className: "neeto-ui-input__error",
-      "data-cy": "".concat(utils.hyphenize(label), "-input-error"),
+      "data-testid": "".concat(utils.hyphenize(label), "-input-error"),
       children: [formatErrorMessage(error), isFilterDomainsLinkVisible && /*#__PURE__*/jsxRuntime.jsxs("span", {
         className: "neeto-ui-font-semibold cursor-pointer",
         onClick: handleFilterDomains,
@@ -1649,7 +1650,7 @@ var MultiDomainInput = function MultiDomainInput(_ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("p", {
       className: "neeto-ui-input__help-text",
-      "data-cy": "".concat(utils.hyphenize(label), "-input-help"),
+      "data-testid": "".concat(utils.hyphenize(label), "-input-help"),
       children: t("neetoForm.domainRestriction.helpText")
     })]
   });
@@ -1740,7 +1741,7 @@ var RestrictDomainsBlock = function RestrictDomainsBlock(_ref) {
     popoverDescription = _mergeLeft.popoverDescription;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-col space-y-4",
-    "data-cy": "".concat(neetoCist.hyphenate(switchName), "-container"),
+    "data-testid": "".concat(neetoCist.hyphenate(switchName), "-container"),
     children: [/*#__PURE__*/jsxRuntime.jsx(SwitchBlock, {
       name: switchName,
       title: /*#__PURE__*/jsxRuntime.jsx(TitleWithHelpPopover, {
@@ -1764,7 +1765,7 @@ var VerifyEmails = function VerifyEmails() {
     title = _mergeLeft.title,
     popoverDescription = _mergeLeft.popoverDescription;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    "data-cy": "email-verification-switch-container",
+    "data-testid": "email-verification-switch-container",
     children: /*#__PURE__*/jsxRuntime.jsx(Switch, {
       name: "isVerificationEnabled",
       label: /*#__PURE__*/jsxRuntime.jsx(Typography, {
@@ -1813,7 +1814,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
   });
@@ -1895,12 +1896,17 @@ var Options = function Options(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useBuildFormStore = buildForm.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.shallow),
-    selectedLanguage = _useBuildFormStore.selectedLanguage;
+    selectedLanguage = _useBuildFormStore.selectedLanguage,
+    isPictureChoiceEnabled = _useBuildFormStore.isPictureChoiceEnabled;
+  var _useFormikContext = formik.useFormikContext(),
+    values = _useFormikContext.values,
+    setFieldValue = _useFormikContext.setFieldValue;
   var name = "optionsAttributes";
   var _useField = formik.useField(name),
     _useField2 = _slicedToArray(_useField, 3);
@@ -1919,24 +1925,56 @@ var Options = function Options(_ref) {
   var isManageOptionDisabled = index.isFunction(freezeOptions) ? freezeOptions(selectedLanguage) : freezeOptions;
   var isAddOptionDisabled = disableAddOption || isManageOptionDisabled;
   var isRemoveOptionDisabled = disableRemoveOption || isManageOptionDisabled;
+  var isDropdown = values.kind === constants.QUESTION_TYPES.DROPDOWN;
+  var isPictureChoice = isPictureChoiceEnabled && !isDropdown && (values.isPictureChoice || constants$1.DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice);
+  var imageHeight = values.imageHeight || constants$1.DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight;
+  var handleImageHeightChange = function handleImageHeightChange(value) {
+    setFieldValue("imageHeight", value);
+  };
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "w-full",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$2(_objectSpread$2({
-      className: "mb-2 block"
-    }, optionLabelProps), {}, {
-      children: t("neetoForm.questions.common.questionFields.field.options")
-    })), /*#__PURE__*/jsxRuntime.jsx(OptionFields, {
-      name: name,
-      shouldDestroy: true,
-      destroyFlagName: "_destroy",
-      disabled: isManageOptionDisabled,
-      draggable: !isManageOptionDisabled,
-      isAddOptionEnabled: !isAddOptionDisabled,
-      isDeleteOptionEnabled: !isRemoveOptionDisabled,
-      isNewItemsPrefilled: constants$1.isDefaultLanguage(selectedLanguage),
-      minOptions: constants$1.MINIMUM_OPTIONS,
-      shouldResetEmptyOptionOnBlur: false,
-      onChange: setOptionsAttributes
+    className: "w-full space-y-4",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Label, _objectSpread$2(_objectSpread$2({
+        className: "mb-2 block"
+      }, optionLabelProps), {}, {
+        children: t("neetoForm.questions.common.questionFields.field.options")
+      })), /*#__PURE__*/jsxRuntime.jsx(OptionFields, {
+        isPictureChoice: isPictureChoice,
+        name: name,
+        shouldDestroy: true,
+        destroyFlagName: "_destroy",
+        disabled: isManageOptionDisabled,
+        draggable: !isManageOptionDisabled,
+        isAddOptionEnabled: !isAddOptionDisabled,
+        isDeleteOptionEnabled: !isRemoveOptionDisabled,
+        isNewItemsPrefilled: constants$1.isDefaultLanguage(selectedLanguage),
+        minOptions: constants$1.MINIMUM_OPTIONS,
+        shouldResetEmptyOptionOnBlur: false,
+        onChange: setOptionsAttributes
+      })]
+    }), !isDropdown && isPictureChoiceEnabled && /*#__PURE__*/jsxRuntime.jsxs(Block, {
+      title: t("neetoForm.questions.common.questionFields.field.pictureChoiceSettings"),
+      children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
+        name: "isPictureChoice",
+        label: t("neetoForm.questions.common.questionFields.field.addPicturesToOptions")
+      }), isPictureChoice && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Switch, {
+          name: "shouldFitImages",
+          label: t("neetoForm.questions.common.questionFields.field.fitImages")
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "mt-4",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+            style: "body2",
+            weight: "medium",
+            children: t("neetoForm.questions.common.questionFields.field.imageHeight")
+          }), /*#__PURE__*/jsxRuntime.jsx(Slider, {
+            max: constants$1.IMAGE_HEIGHT_SLIDER_DEFAULTS.max,
+            min: constants$1.IMAGE_HEIGHT_SLIDER_DEFAULTS.min,
+            value: imageHeight,
+            onChange: handleImageHeightChange
+          })]
+        })]
+      })]
     })]
   });
 };
@@ -1965,7 +2003,7 @@ var Rating = function Rating() {
               size: 48
             }), /*#__PURE__*/jsxRuntime.jsx(InputWithMaxLength, {
               name: name,
-              "data-cy": "neeto-form-engine-".concat(neetoCist.hyphenate(name))
+              "data-testid": "neeto-form-engine-".concat(neetoCist.hyphenate(name))
             })]
           }, name);
         })
@@ -1989,7 +2027,7 @@ var StarRating = function StarRating() {
       className: "flex space-x-4",
       children: [/*#__PURE__*/jsxRuntime.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: constants$1.STAR_RATING_MIN_VALUE_OPTIONS,
@@ -1998,7 +2036,7 @@ var StarRating = function StarRating() {
         }
       }), /*#__PURE__*/jsxRuntime.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: constants$1.STAR_RATING_MAX_VALUE_OPTIONS,
@@ -2016,7 +2054,7 @@ var StarRating = function StarRating() {
           IconType = _ref2[1];
         var isActive = name === iconType;
         return /*#__PURE__*/jsxRuntime.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
@@ -2100,7 +2138,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: i18next.t("neetoForm.questions.common.questionFields.field.hideQuestionHelpDescription"),
         helpLinkProps: {
@@ -2114,7 +2152,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: i18next.t("neetoForm.questions.common.questionFields.field.responseVisibleOnlyToHostHelpDescription"),
         helpLinkProps: {
@@ -2128,7 +2166,7 @@ var responseVisibleOnlyToHostSwitchLabelProps = function responseVisibleOnlyToHo
 var readOnlySwitchLabelProps = function readOnlySwitchLabelProps(helpUrl) {
   return {
     helpIconProps: {
-      "data-cy": "help-popover-button",
+      "data-testid": "help-popover-button",
       popoverProps: {
         description: i18next.t("neetoForm.questions.common.questionFields.field.readOnlyHelpDescription"),
         helpLinkProps: helpUrl ? {
@@ -2209,7 +2247,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 = React.useRef();
   var _useStateWithDependen = reactUtils.useStateWithDependency(questionsFromCache),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
@@ -2283,9 +2322,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);
   };
@@ -2468,7 +2508,9 @@ var BuildForm = function BuildForm(_ref) {
     onMutateSuccess = _ref$onMutateSuccess === void 0 ? neetoCist.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 = reactQuery.useQueryClient();
   var _useForm = constants.useForm({
       formId: id,
@@ -2520,6 +2562,7 @@ var BuildForm = function BuildForm(_ref) {
       isDisabledFieldLabel: isDisabledFieldLabel,
       isFormEnabled: isFormEnabled,
       isKindAlreadyActive: isKindAlreadyActive,
+      isPictureChoiceEnabled: isPictureChoiceEnabled,
       isRequiredField: isRequiredField,
       isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds,
       kindUniqueOn: kindUniqueOn,