@bigbinary/neeto-form-frontend 4.1.9 → 4.2.0

package/dist/{utils-CdeIdZRi.js → utils-GRfGBny0.js}

@@ -22,7 +22,7 @@ import * as yup from 'yup';
 import i18next from 'i18next';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _toArray from '@babel/runtime/helpers/toArray';
-import { a as QUESTION_KIND, P as PARENTHESES_REGEX, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, d as LABEL_FIELDS, e as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-D0zli_cv.js';
+import { a as QUESTION_KIND, P as PARENTHESES_REGEX, E as EMAIL_REGEX, R as RATING_VALUES, S as SCHEMA_LESS_QUESTION_KINDS, c as SIX_DIGIT_NUMBER_REGEX, d as LABEL_FIELDS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, e as RATING_OPTIONS, I as ICONS_MAP, g as generateArray } from './constants-QPLZ_r-D.js';
 import classnames from 'classnames';
 import { useUpdateEffect, useStateWithDependency, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Refresh from '@bigbinary/neeto-icons/Refresh';
@@ -42,6 +42,7 @@ import { FileUpload } from '@bigbinary/neeto-molecules/FileUpload';
 import Label from '@bigbinary/neetoui/Label';
 import Select from '@bigbinary/neetoui/Select';
 import Radio from '@bigbinary/neetoui/Radio';
+import Image from '@bigbinary/neeto-icons/Image';
 import NeetoEditor from '@bigbinary/neeto-editor/Editor';
 import Textarea from '@bigbinary/neetoui/Textarea';
 
@@ -911,7 +912,7 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
         className: "flex flex-col gap-2 items-end",
         children: [/*#__PURE__*/jsx(Button, _defineProperty(_defineProperty(_defineProperty({
           label: label,
-          "data-cy": "add-guest-button",
+          "data-testid": "add-guest-button",
           disabled: isReadOnly,
           icon: Plus,
           iconPosition: "left"
@@ -981,7 +982,7 @@ var CaptchaField = function CaptchaField(_ref) {
       })
     }), touched && error && /*#__PURE__*/jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-captcha-error",
+      "data-testid": "neeto-form-engine-captcha-error",
       children: error
     })]
   });
@@ -1047,7 +1048,7 @@ var MathCaptcha = function MathCaptcha(_ref) {
   }, [userInput]);
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-form-nano-math-captcha",
-    "data-cy": "math-captcha",
+    "data-testid": "math-captcha",
     ref: captchaRef,
     children: [/*#__PURE__*/jsx("button", {
       className: "neeto-form-nano-math-captcha__button",
@@ -1057,13 +1058,13 @@ var MathCaptcha = function MathCaptcha(_ref) {
     }), /*#__PURE__*/jsxs("div", {
       className: "neeto-form-nano-math-captcha__equation",
       children: [/*#__PURE__*/jsx("span", {
-        "data-cy": "first-number",
+        "data-testid": "first-number",
         children: firstNumber
       }), /*#__PURE__*/jsx("span", {
-        "data-cy": "operator",
+        "data-testid": "operator",
         children: operator
       }), /*#__PURE__*/jsx("span", {
-        "data-cy": "second-number",
+        "data-testid": "second-number",
         children: secondNumber
       }), /*#__PURE__*/jsx("span", {
         children: "="
@@ -1071,7 +1072,7 @@ var MathCaptcha = function MathCaptcha(_ref) {
     }), /*#__PURE__*/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: withEventTargetValue(setUserInput)
@@ -1156,7 +1157,7 @@ var DateField = function DateField(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: label && /*#__PURE__*/jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "".concat(hyphenate(label), "-input-label"),
+        "data-testid": "".concat(hyphenate(label), "-input-label"),
         children: getLabel(label, isRequired)
       })
     }), /*#__PURE__*/jsx("div", {
@@ -1178,7 +1179,7 @@ var DateField = function DateField(_ref) {
           return /*#__PURE__*/jsx(DatePicker, _objectSpread$e(_objectSpread$e({}, _objectSpread$e(_objectSpread$e({}, field), {}, {
             type: type
           })), {}, {
-            "data-cy": "".concat(hyphenate(label), "-input-field"),
+            "data-testid": "".concat(hyphenate(label), "-input-field"),
             dateFormat: "MMM D, YYYY",
             disabled: isReadOnly,
             error: meta.touched ? meta.error : "",
@@ -1285,7 +1286,7 @@ var SendCodeButton = function SendCodeButton(_ref) {
     return /*#__PURE__*/jsx(CheckCircle, {});
   }
   return /*#__PURE__*/jsx(Button, {
-    "data-cy": "send-code-button",
+    "data-testid": "send-code-button",
     disabled: isDisabled,
     size: "small",
     style: "secondary",
@@ -1329,7 +1330,7 @@ var ResendVerificationCode = function ResendVerificationCode(_ref) {
       i18nKey: "neetoForm.emailVerification.resendCode",
       components: {
         button: /*#__PURE__*/jsx(Button, {
-          "data-cy": "otp-resend-button",
+          "data-testid": "otp-resend-button",
           disabled: isResendDisabled,
           size: "small",
           style: "link",
@@ -1409,7 +1410,7 @@ var VerifyCode = function VerifyCode(_ref) {
   }, [code, hasError]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/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,
@@ -1725,6 +1726,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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasError = _useState2[0],
+    setHasError = _useState2[1];
+  var _useState3 = 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__*/jsx("div", {
+      className: "neeto-form-engine-choice__image-placeholder neeto-ui-bg-gray-100",
+      style: {
+        height: height
+      },
+      children: /*#__PURE__*/jsx(Image, {
+        size: 32
+      })
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    style: {
+      height: height
+    },
+    className: classnames("neeto-form-engine-choice__image-wrapper", {
+      "neeto-form-engine-choice__image-wrapper--loading": isLoading
+    }),
+    children: /*#__PURE__*/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,
@@ -1733,51 +1784,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 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.isPictureChoice : _ref$isPictureChoice,
+    _ref$imageHeight = _ref.imageHeight,
+    imageHeight = _ref$imageHeight === void 0 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.imageHeight : _ref$imageHeight,
+    _ref$shouldFitImages = _ref.shouldFitImages,
+    shouldFitImages = _ref$shouldFitImages === void 0 ? DEFAULT_CHOICE_QUESTION_ATTRIBUTES.shouldFitImages : _ref$shouldFitImages;
   var isCheckBox = type === "checkbox";
   var ChoiceWrapper = isCheckBox ? "div" : Radio;
   var Component = isCheckBox ? Checkbox : Radio.Item;
   return /*#__PURE__*/jsxs("div", {
     className: "neeto-form-engine-choices__wrapper",
-    "data-cy": "".concat(hyphenate(label), "-select-container-wrapper"),
+    "data-testid": "".concat(hyphenate(label), "-select-container-wrapper"),
     children: [/*#__PURE__*/jsx("label", {
       className: "neeto-form-engine-label",
-      "data-cy": "".concat(hyphenate(label), "-input-label"),
+      "data-testid": "".concat(hyphenate(label), "-input-label"),
       children: label
     }), /*#__PURE__*/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__*/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__*/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__*/jsx(Component, {
+          children: [isPictureChoice && /*#__PURE__*/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__*/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__*/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
     })]
   });
@@ -1798,8 +1864,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 === QUESTION_KIND.DROPDOWN.value;
   var label = fieldWithFallback(question, "label");
   var Component = isDropdown ? Select : Choices$1;
@@ -1839,17 +1909,22 @@ var OptionsField = function OptionsField(_ref) {
       var onChange = field.onChange,
         value = field.value;
       return /*#__PURE__*/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 ? findBy({
           value: value
         }, transformedOptions) || null : value,
@@ -1962,15 +2037,15 @@ var Rating = function Rating(_ref) {
     className: "neeto-form-engine-rating",
     children: [/*#__PURE__*/jsx("label", {
       className: "neeto-form-engine-label",
-      "data-cy": "rating-input-label",
+      "data-testid": "rating-input-label",
       children: label
     }), /*#__PURE__*/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__*/jsx("p", {
       className: "neeto-form-engine-input__error",
-      "data-cy": "neeto-form-engine-rating-error",
+      "data-testid": "neeto-form-engine-rating-error",
       children: error
     })]
   });
@@ -2038,7 +2113,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: label && /*#__PURE__*/jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "".concat(hyphenate(label), "-input-label"),
+        "data-testid": "".concat(hyphenate(label), "-input-label"),
         children: getLabel(label, isRequired)
       })
     }), /*#__PURE__*/jsx(FastField, {
@@ -2137,12 +2212,12 @@ var StarRating = function StarRating(_ref) {
       className: "neeto-form-engine-input__label-wrapper",
       children: /*#__PURE__*/jsx("label", {
         className: "neeto-form-engine-label",
-        "data-cy": "star-rating-input-label",
+        "data-testid": "star-rating-input-label",
         children: label
       })
     }), /*#__PURE__*/jsx("div", {
       className: "neeto-form-engine-star-rating__row",
-      "data-cy": "star-rating-input-field",
+      "data-testid": "star-rating-input-field",
       children: generateArray(minValue, maxValue).map(function (index) {
         return /*#__PURE__*/jsx(RatingButton$1, _objectSpread$3({
           label: index,
@@ -2151,7 +2226,7 @@ var StarRating = function StarRating(_ref) {
       })
     }), !!error && typeof error === "string" && /*#__PURE__*/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
     })]
   });
@@ -2325,4 +2400,4 @@ var containsIgnoreCase = function containsIgnoreCase(string, substring) {
 };
 
 export { FormikWrap as F, getFieldComponent as a, buildAutoCompleteAttribute as b, clientI18nInstance as c, getWithExpiry as d, clearEmailVerificationDetails as e, generateFormResponse as f, generateInitValues as g, clearLocalStorageValues as h, mergeRefs as m, renderButtonsInOrder as r };
-//# sourceMappingURL=utils-CdeIdZRi.js.map
+//# sourceMappingURL=utils-GRfGBny0.js.map