@bigbinary/neeto-form-frontend 4.1.9 → 4.2.0

package/dist/{utils-C-ermU02.js → utils-BwFLBXs2.js}

@@ -24,7 +24,7 @@ var yup = require('yup');
 var i18next = require('i18next');
 var jsxRuntime = require('react/jsx-runtime');
 var _toArray = require('@babel/runtime/helpers/toArray');
-var constants = require('./constants-DXeRH2r2.js');
+var constants = require('./constants-BjWWA3Oq.js');
 var classnames = require('classnames');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var Refresh = require('@bigbinary/neeto-icons/Refresh');
@@ -44,6 +44,7 @@ var FileUpload = require('@bigbinary/neeto-molecules/FileUpload');
 var Label = require('@bigbinary/neetoui/Label');
 var Select = require('@bigbinary/neetoui/Select');
 var Radio = require('@bigbinary/neetoui/Radio');
+var Image = require('@bigbinary/neeto-icons/Image');
 var NeetoEditor = require('@bigbinary/neeto-editor/Editor');
 var Textarea = require('@bigbinary/neetoui/Textarea');
 
@@ -932,7 +933,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
         className: "flex flex-col gap-2 items-end",
         children: [/*#__PURE__*/jsxRuntime.jsx(Button, _defineProperty(_defineProperty(_defineProperty({
           label: label,
-          "data-cy": "add-guest-button",
+          "data-testid": "add-guest-button",
           disabled: isReadOnly,
           icon: Plus,
           iconPosition: "left"
@@ -1002,7 +1003,7 @@ var CaptchaField = function CaptchaField(_ref) {
       })
     }), touched && error && /*#__PURE__*/jsxRuntime.jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-captcha-error",
+      "data-testid": "neeto-form-engine-captcha-error",
       children: error
     })]
   });
@@ -1068,7 +1069,7 @@ var MathCaptcha = function MathCaptcha(_ref) {
   }, [userInput]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-form-nano-math-captcha",
-    "data-cy": "math-captcha",
+    "data-testid": "math-captcha",
     ref: captchaRef,
     children: [/*#__PURE__*/jsxRuntime.jsx("button", {
       className: "neeto-form-nano-math-captcha__button",
@@ -1078,13 +1079,13 @@ var MathCaptcha = function MathCaptcha(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "neeto-form-nano-math-captcha__equation",
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        "data-cy": "first-number",
+        "data-testid": "first-number",
         children: firstNumber
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        "data-cy": "operator",
+        "data-testid": "operator",
         children: operator
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        "data-cy": "second-number",
+        "data-testid": "second-number",
         children: secondNumber
       }), /*#__PURE__*/jsxRuntime.jsx("span", {
         children: "="
@@ -1092,7 +1093,7 @@ var MathCaptcha = function MathCaptcha(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx(Input, {
       required: true,
       className: "neeto-form-nano-math-captcha__input",
-      "data-cy": "math-captcha-input",
+      "data-testid": "math-captcha-input",
       value: userInput,
       onBlur: handleBlur,
       onChange: utils.withEventTargetValue(setUserInput)
@@ -1177,7 +1178,7 @@ var DateField = function DateField(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: label && /*#__PURE__*/jsxRuntime.jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "".concat(neetoCist.hyphenate(label), "-input-label"),
+        "data-testid": "".concat(neetoCist.hyphenate(label), "-input-label"),
         children: getLabel(label, isRequired)
       })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1199,7 +1200,7 @@ var DateField = function DateField(_ref) {
           return /*#__PURE__*/jsxRuntime.jsx(DatePicker, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, field), {}, {
             type: type
           })), {}, {
-            "data-cy": "".concat(neetoCist.hyphenate(label), "-input-field"),
+            "data-testid": "".concat(neetoCist.hyphenate(label), "-input-field"),
             dateFormat: "MMM D, YYYY",
             disabled: isReadOnly,
             error: meta.touched ? meta.error : "",
@@ -1306,7 +1307,7 @@ var SendCodeButton = function SendCodeButton(_ref) {
     return /*#__PURE__*/jsxRuntime.jsx(CheckCircle, {});
   }
   return /*#__PURE__*/jsxRuntime.jsx(Button, {
-    "data-cy": "send-code-button",
+    "data-testid": "send-code-button",
     disabled: isDisabled,
     size: "small",
     style: "secondary",
@@ -1350,7 +1351,7 @@ var ResendVerificationCode = function ResendVerificationCode(_ref) {
       i18nKey: "neetoForm.emailVerification.resendCode",
       components: {
         button: /*#__PURE__*/jsxRuntime.jsx(Button, {
-          "data-cy": "otp-resend-button",
+          "data-testid": "otp-resend-button",
           disabled: isResendDisabled,
           size: "small",
           style: "link",
@@ -1430,7 +1431,7 @@ var VerifyCode = function VerifyCode(_ref) {
   }, [code, hasError]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$c(_objectSpread$c({}, _objectSpread$c({}, field)), {}, {
-      "data-cy": "otp-input-field",
+      "data-testid": "otp-input-field",
       disabled: isVerifyingCode,
       error: touched ? error : "",
       loading: isVerifyingCode,
@@ -1746,6 +1747,56 @@ var NameField = function NameField(props) {
   }));
 };
 
+var ChoiceImage = function ChoiceImage(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    height = _ref.height,
+    shouldFitImages = _ref.shouldFitImages;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasError = _useState2[0],
+    setHasError = _useState2[1];
+  var _useState3 = React.useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var handleLoad = function handleLoad() {
+    return setIsLoading(false);
+  };
+  var handleError = function handleError() {
+    setHasError(true);
+    setIsLoading(false);
+  };
+  if (hasError || !src) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "neeto-form-engine-choice__image-placeholder neeto-ui-bg-gray-100",
+      style: {
+        height: height
+      },
+      children: /*#__PURE__*/jsxRuntime.jsx(Image, {
+        size: 32
+      })
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    style: {
+      height: height
+    },
+    className: classnames("neeto-form-engine-choice__image-wrapper", {
+      "neeto-form-engine-choice__image-wrapper--loading": isLoading
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx("img", {
+      alt: alt,
+      src: src,
+      className: classnames("neeto-form-engine-choice__image", {
+        "neeto-form-engine-choice__image--fit": shouldFitImages
+      }),
+      onError: handleError,
+      onLoad: handleLoad
+    })
+  });
+};
+
 var Choices = function Choices(_ref) {
   var label = _ref.label,
     options = _ref.options,
@@ -1754,51 +1805,66 @@ var Choices = function Choices(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     error = _ref.error,
-    disabled = _ref.isDisabled;
+    disabled = _ref.isDisabled,
+    _ref$isPictureChoice = _ref.isPictureChoice,
+    isPictureChoice = _ref$isPictureChoice === void 0 ? constants.DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice : _ref$isPictureChoice,
+    _ref$imageHeight = _ref.imageHeight,
+    imageHeight = _ref$imageHeight === void 0 ? constants.DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight : _ref$imageHeight,
+    _ref$shouldFitImages = _ref.shouldFitImages,
+    shouldFitImages = _ref$shouldFitImages === void 0 ? constants.DEFAULT_CHOICE_QUESTION_ATTRIBUTES.shouldFitImages : _ref$shouldFitImages;
   var isCheckBox = type === "checkbox";
   var ChoiceWrapper = isCheckBox ? "div" : Radio;
   var Component = isCheckBox ? Checkbox : Radio.Item;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
-    "data-cy": "".concat(neetoCist.hyphenate(label), "-select-container-wrapper"),
+    "data-testid": "".concat(neetoCist.hyphenate(label), "-select-container-wrapper"),
     children: [/*#__PURE__*/jsxRuntime.jsx("label", {
       className: "neeto-form-engine-label",
-      "data-cy": "".concat(neetoCist.hyphenate(label), "-input-label"),
+      "data-testid": "".concat(neetoCist.hyphenate(label), "-input-label"),
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx(ChoiceWrapper, {
-      className: "neeto-form-engine-choices",
       stacked: !isCheckBox,
+      className: classnames("neeto-form-engine-choices", {
+        "neeto-form-engine-choices--picture": isPictureChoice
+      }),
       children: options.map(function (option, index) {
-        var _value$index;
-        return /*#__PURE__*/jsxRuntime.jsx("label", {
+        var _value$index, _option$image;
+        var isChecked = isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id;
+        return /*#__PURE__*/jsxRuntime.jsxs("label", {
           htmlFor: option.id,
           className: classnames("neeto-form-engine-choice", {
-            active: false,
+            "neeto-form-engine-choice--picture": isPictureChoice,
+            "neeto-form-engine-choice--selected": isChecked,
             "cursor-not-allowed": disabled
           }),
-          children: /*#__PURE__*/jsxRuntime.jsx(Component, {
+          children: [isPictureChoice && /*#__PURE__*/jsxRuntime.jsx(ChoiceImage, {
+            shouldFitImages: shouldFitImages,
+            alt: option.label,
+            height: imageHeight,
+            src: (_option$image = option.image) === null || _option$image === void 0 ? void 0 : _option$image.url
+          }), /*#__PURE__*/jsxRuntime.jsx(Component, {
             disabled: disabled,
             onChange: onChange,
             type: type,
+            checked: isChecked,
             className: classnames({
               "cursor-not-allowed": disabled
             }),
             id: option.id,
+            label: option.label,
+            name: isCheckBox ? "".concat(name, ".").concat(index) : name,
+            value: option.id,
             labelProps: {
               className: classnames({
                 "cursor-not-allowed": disabled
               })
-            },
-            label: option.label,
-            name: isCheckBox ? "".concat(name, ".").concat(index) : name,
-            value: option.id,
-            checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id
-          })
+            }
+          })]
         }, option.id);
       })
     }), !!error && typeof error === "string" && /*#__PURE__*/jsxRuntime.jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-".concat(type, "-error"),
+      "data-testid": "neeto-form-engine-".concat(type, "-error"),
       children: error
     })]
   });
@@ -1819,8 +1885,12 @@ var OptionsField = function OptionsField(_ref) {
     kind = question.kind,
     isRequired = question.isRequired,
     isReadOnly = question.isReadOnly,
+    isPictureChoiceFromQuestion = question.isPictureChoice,
+    imageHeight = question.imageHeight,
+    shouldFitImages = question.shouldFitImages,
     _question$optionsAttr = question.optionsAttributes,
     options = _question$optionsAttr === void 0 ? [] : _question$optionsAttr;
+  var isPictureChoice = isPictureChoiceFromQuestion;
   var isDropdown = kind === constants.QUESTION_KIND.DROPDOWN.value;
   var label = index.fieldWithFallback(question, "label");
   var Component = isDropdown ? Select : Choices$1;
@@ -1860,17 +1930,22 @@ var OptionsField = function OptionsField(_ref) {
       var onChange = field.onChange,
         value = field.value;
       return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread$8(_objectSpread$8({
-        isRequired: isRequired,
-        name: name,
         error: getError(meta),
         isDisabled: isReadOnly,
         label: getLabel(label, isRequired),
         options: transformedOptions,
         strategy: "fixed",
         type: kind
+      }, _objectSpread$8(_objectSpread$8({
+        isRequired: isRequired,
+        name: name
       }, isDropdown && {
         filterOption: customFilter
-      }), {}, {
+      }), !isDropdown && {
+        imageHeight: imageHeight,
+        isPictureChoice: isPictureChoice,
+        shouldFitImages: shouldFitImages
+      })), {}, {
         value: isDropdown ? neetoCist.findBy({
           value: value
         }, transformedOptions) || null : value,
@@ -1983,15 +2058,15 @@ var Rating = function Rating(_ref) {
     className: "neeto-form-engine-rating",
     children: [/*#__PURE__*/jsxRuntime.jsx("label", {
       className: "neeto-form-engine-label",
-      "data-cy": "rating-input-label",
+      "data-testid": "rating-input-label",
       children: label
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-form-engine-rating__row",
-      "data-cy": "rating-input-field",
+      "data-testid": "rating-input-field",
       children: render()
     }), !!error && typeof error === "string" && /*#__PURE__*/jsxRuntime.jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-rating-error",
+      "data-testid": "neeto-form-engine-rating-error",
       children: error
     })]
   });
@@ -2059,7 +2134,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: label && /*#__PURE__*/jsxRuntime.jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "".concat(neetoCist.hyphenate(label), "-input-label"),
+        "data-testid": "".concat(neetoCist.hyphenate(label), "-input-label"),
         children: getLabel(label, isRequired)
       })
     }), /*#__PURE__*/jsxRuntime.jsx(formik.FastField, {
@@ -2158,12 +2233,12 @@ var StarRating = function StarRating(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: /*#__PURE__*/jsxRuntime.jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "star-rating-input-label",
+        "data-testid": "star-rating-input-label",
         children: label
       })
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-form-engine-star-rating__row",
-      "data-cy": "star-rating-input-field",
+      "data-testid": "star-rating-input-field",
       children: constants.generateArray(minValue, maxValue).map(function (index) {
         return /*#__PURE__*/jsxRuntime.jsx(RatingButton$1, _objectSpread$3({
           label: index,
@@ -2172,7 +2247,7 @@ var StarRating = function StarRating(_ref) {
       })
     }), !!error && typeof error === "string" && /*#__PURE__*/jsxRuntime.jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-star-rating-error",
+      "data-testid": "neeto-form-engine-star-rating-error",
       children: error
     })]
   });
@@ -2356,4 +2431,4 @@ exports.getFieldComponent = getFieldComponent;
 exports.getWithExpiry = getWithExpiry;
 exports.mergeRefs = mergeRefs;
 exports.renderButtonsInOrder = renderButtonsInOrder;
-//# sourceMappingURL=utils-C-ermU02.js.map
+//# sourceMappingURL=utils-BwFLBXs2.js.map