@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/page/hooks/index.js

@@ -1,7 +1,6 @@
 import { useContext, useMemo, useCallback, useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { WidgetContext } from '@shopgate/engage/page/components/Widgets';
-import { showInventoryInLists } from '@shopgate/engage/locations/helpers';
 import { ITEMS_PER_LOAD } from '@shopgate/engage/core/constants';
 import { transformDisplayOptions } from '@shopgate/engage/core/helpers';
 import { fetchProductsByQuery } from '@shopgate/engage/product';
@@ -51,15 +50,12 @@ export const useWidgetProducts = (options = {}) => {
   } = useWidget();
 
   // ###### Products selection ######
-  const showInventoryInProductLists = useSelector(showInventoryInLists);
+
   const selectorOptions = useMemo(() => ({
     sort: transformDisplayOptions(sort),
     value,
-    useDefaultRequestForProductIds: true,
-    ...(showInventoryInProductLists && {
-      useDefaultRequestForProductIds: true
-    })
-  }), [showInventoryInProductLists, sort, value]);
+    useDefaultRequestForProductIds: true
+  }), [sort, value]);
   const getWidgetProducts = useMemo(() => makeGetWidgetProducts(type, selectorOptions, code), [code, selectorOptions, type]);
   const widgetProducts = useSelector(getWidgetProducts);
 
@@ -76,11 +72,8 @@ export const useWidgetProducts = (options = {}) => {
   const baseRequestOptions = useMemo(() => ({
     limit,
     sort: transformDisplayOptions(sort),
-    useDefaultRequestForProductIds: true,
-    ...(showInventoryInProductLists && {
-      useDefaultRequestForProductIds: true
-    })
-  }), [limit, showInventoryInProductLists, sort]);
+    useDefaultRequestForProductIds: true
+  }), [limit, sort]);
 
   /**
    * Callback to dispatch the initial fetch request for products when the hook mounts,
@@ -103,7 +96,7 @@ export const useWidgetProducts = (options = {}) => {
     setOffset(limit);
     // When the result comes from a real pipeline request there will be "totalProductCount".
     // When the result are cached products, it can also be "totalResultCount".
-    setHasNext((result.totalProductCount ?? result.totalResultCount) > limit);
+    setHasNext((result?.totalProductCount ?? result?.totalResultCount) > limit);
   }, [code, dispatch, type, value, limit, baseRequestOptions]);
 
   // Effect to trigger the initial fetch when the component mounts or the parameters change.
@@ -135,7 +128,7 @@ export const useWidgetProducts = (options = {}) => {
     setOffset(offset + limit);
     // When the result comes from a real pipeline request there will be "totalProductCount".
     // When the result are cached products, it can also be "totalResultCount".
-    setHasNext((result.totalProductCount ?? result.totalResultCount) > offset + limit);
+    setHasNext((result?.totalProductCount ?? result?.totalResultCount) > offset + limit);
   }, [code, dispatch, hasNext, isFetching, value, offset, limit, baseRequestOptions, type]);
   return {
     fetchNext,

package/page/selectors/index.js

@@ -2,7 +2,7 @@ import { createSelector } from 'reselect';
 import { makeGetMenu, makeGetIsFetchingMenu, getEnableCms2ForAllShoppers } from '@shopgate/engage/core/selectors';
 import { getFulfillmentParams, getPopulatedProductsResult, SHOPGATE_CATALOG_GET_HIGHLIGHT_PRODUCTS } from '@shopgate/engage/product';
 import { getProductState } from '@shopgate/engage/product/selectors/product';
-import { LEGAL_MENU, SORT_PRICE_ASC, SORT_PRICE_DESC } from '@shopgate/engage/core/constants';
+import { LEGAL_MENU } from '@shopgate/engage/core/constants';
 import { hasNewServices, transformDisplayOptions, generateResultHash } from '@shopgate/engage/core/helpers';
 import { getIsCMS2PreviewEnabled } from '@shopgate/engage/development/selectors';
 import { makeGetPageConfigById } from '@shopgate/pwa-common/selectors/page';
@@ -120,7 +120,7 @@ export const makeGetUnifiedCMSPageData = ({
         isFetching: pageV2?.isFetching ?? false,
         expires: pageV2?.expires ?? null,
         title: pageV2?.data?.pageTitle || pageV2?.data?.name || '',
-        widgets: pageV2?.data?.dropzones?.['cmsWidgetList'] ?? [],
+        widgets: pageV2?.data?.dropzones?.cmsWidgetList ?? [],
         cmsVersion: 2,
         hasError: pageV2?.hasError ?? false
       };
@@ -149,7 +149,6 @@ const makeGetWidgetProductsResultHash = (type, options, id) => {
   const {
     value,
     sort,
-    useDefaultRequestForProductIds,
     productIdType
   } = options;
   const transformedSort = transformDisplayOptions(sort);
@@ -177,9 +176,7 @@ const makeGetWidgetProductsResultHash = (type, options, id) => {
           id,
           productIds: value,
           productIdType,
-          ...(!useDefaultRequestForProductIds && {
-            sort: transformedSort
-          }),
+          sort: transformedSort,
           ...fulfillmentParams
         };
         break;
@@ -220,22 +217,8 @@ const makeGetWidgetProductResultsByHash = (type, options, id) => {
 export const makeGetWidgetProducts = (type, options, id) => {
   const getWidgetProductResultsHash = makeGetWidgetProductsResultHash(type, options, id);
   const getWidgetProductResultsByHash = makeGetWidgetProductResultsByHash(type, options, id);
-  return createSelector(state => state, (state, props) => props ?? {}, getWidgetProductResultsHash, getWidgetProductResultsByHash, (state, props, resultsHash, resultsByHash) => {
-    const result = {
-      isFetching: resultsByHash?.isFetching || false,
-      ...getPopulatedProductsResult(state, props, resultsHash, resultsByHash)
-    };
-
-    // Since the getProducts pipeline does not support sorting when a product ID list is
-    // provided, we need to sort the products manually here.
-    if (type === 'productIds') {
-      if (options.sort === SORT_PRICE_ASC) {
-        result.products = result.products.sort((p1, p2) => p1.price.unitPrice - p2.price.unitPrice);
-      }
-      if (options.sort === SORT_PRICE_DESC) {
-        result.products = result.products.sort((p1, p2) => p2.price.unitPrice - p1.price.unitPrice);
-      }
-    }
-    return result;
-  });
+  return createSelector(state => state, (state, props) => props ?? {}, getWidgetProductResultsHash, getWidgetProductResultsByHash, (state, props, resultsHash, resultsByHash) => ({
+    isFetching: resultsByHash?.isFetching || false,
+    ...getPopulatedProductsResult(state, props, resultsHash, resultsByHash)
+  }));
 };

package/page/widgets/Button/Button.js

@@ -3,6 +3,7 @@ import { Button } from '@shopgate/engage/components';
 import { useWidget } from '@shopgate/engage/page/hooks';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useNavigation } from '@shopgate/engage/core';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     display: 'flex',
@@ -42,14 +43,17 @@ const ButtonWidget = () => {
     });
   }, [link, isPreview, push]);
   if (!text) return null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classes.root
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    onClick: handleClick,
-    wrapContent: false
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classes.text
-  }, text)));
+  return /*#__PURE__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(Button, {
+      type: "secondary",
+      onClick: handleClick,
+      wrapContent: false,
+      children: /*#__PURE__*/_jsx("span", {
+        className: classes.text,
+        children: text
+      })
+    })
+  });
 };
 export default ButtonWidget;

package/page/widgets/CategoryList/CategoryList.js

@@ -3,6 +3,7 @@ import { CategoryList } from '@shopgate/engage/category/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useCategoryListWidget } from "./hooks";
 import WidgetHeadline from "../../components/WidgetHeadline";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   headline: {
     paddingBottom: theme.spacing(0)
@@ -27,13 +28,15 @@ const CategoryListWidget = () => {
   if (!categories) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, showHeadline && headline && categories.length ? /*#__PURE__*/React.createElement(WidgetHeadline, {
-    headline: headline,
-    className: classes.headline
-  }) : null, /*#__PURE__*/React.createElement(CategoryList, {
-    categories: categories,
-    parentCategory: parentCategory,
-    showLeftSideImages: showImages
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showHeadline && headline && categories.length ? /*#__PURE__*/_jsx(WidgetHeadline, {
+      headline: headline,
+      className: classes.headline
+    }) : null, /*#__PURE__*/_jsx(CategoryList, {
+      categories: categories,
+      parentCategory: parentCategory,
+      showLeftSideImages: showImages
+    })]
+  });
 };
 export default CategoryListWidget;

package/page/widgets/CategoryList/hooks.js

@@ -56,7 +56,7 @@ export const useCategoryListWidget = () => {
       return categories;
     }
     const isAsc = sortCC === 'nameAsc';
-    return [...categories].sort((a, b) => a.name.localeCompare(b.name, undefined, {
+    return [].concat(categories).sort((a, b) => a.name.localeCompare(b.name, undefined, {
       sensitivity: 'base'
     }) * (isAsc ? 1 : -1));
   }, [categories, sortCC]);

package/page/widgets/HTML/HTML.js

@@ -3,6 +3,7 @@ import { HtmlSanitizer } from '@shopgate/engage/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { themeConfig } from '@shopgate/engage';
 import { useHtmlWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
@@ -81,12 +82,13 @@ const HtmlWidget = () => {
   const {
     html
   } = useHtmlWidget();
-  return /*#__PURE__*/React.createElement(HtmlSanitizer, {
+  return /*#__PURE__*/_jsx(HtmlSanitizer, {
     settings: {
       html
     },
     processStyles: true,
-    className: classes.root
-  }, html);
+    className: classes.root,
+    children: html
+  });
 };
 export default HtmlWidget;

package/page/widgets/Headline/Headline.js

@@ -6,6 +6,7 @@ import { useWidget } from "../../hooks";
  * The HeadlineWidget is used to display a headline text.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const Headline = () => {
   const {
     config
@@ -14,7 +15,7 @@ const Headline = () => {
     headline
   } = config;
   if (!headline) return null;
-  return /*#__PURE__*/React.createElement(WidgetHeadline, {
+  return /*#__PURE__*/_jsx(WidgetHeadline, {
     headline: headline
   });
 };

package/page/widgets/HeroBanner/HeroBanner.js

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useCallback, useState, useMemo } from 'react';
 import { ConditionalWrapper, Link } from '@shopgate/engage/components';
 import { WidgetRichText, ResponsiveWidgetImage } from '@shopgate/engage/page/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import { useHeroBannerWidget } from "./hooks";
+import WidgetVideo from "../../components/WidgetVideo";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()(theme => ({
   link: {
     width: '100%'
@@ -15,7 +17,8 @@ const useStyles = makeStyles()(theme => ({
     minHeight: 300,
     [theme.breakpoints.up('md')]: {
       minHeight: 400
-    }
+    },
+    overflow: 'hidden'
   },
   richText: {
     position: 'relative',
@@ -37,34 +40,59 @@ const useStyles = makeStyles()(theme => ({
 const HeroBanner = () => {
   const {
     text,
-    backgroundImage,
+    altText,
     link,
     borderRadius,
-    parallax
+    parallax,
+    imageFit = 'fillAndCrop',
+    mediaType,
+    mediaUrl
   } = useHeroBannerWidget();
   const {
-    cx,
     classes
   } = useStyles();
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  const [aspectRatio, setAspectRatio] = useState(null);
+  const contentStyle = useMemo(() => {
+    if (imageFit !== 'showFull') {
+      return null;
+    }
+    return {
+      aspectRatio,
+      minHeight: 'unset'
+    };
+  }, [aspectRatio, imageFit]);
+  const handleImageRatioChange = useCallback(ratio => {
+    setAspectRatio(ratio);
+  }, []);
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: !!link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+    wrapper: children => /*#__PURE__*/_jsx(Link, {
       href: link,
-      className: cx(classes.link)
-    }, children)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cx(classes.content)
-  }, /*#__PURE__*/React.createElement(WidgetRichText, {
-    content: text,
-    className: cx(classes.richText)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: cx(classes.imageContainer)
-  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: backgroundImage?.url,
-    alt: backgroundImage?.alt,
-    borderRadius: borderRadius,
-    enableParallax: parallax,
-    isBanner: true
-  }))));
+      className: classes.link,
+      children: children
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: classes.content,
+      style: contentStyle,
+      children: [/*#__PURE__*/_jsx(WidgetRichText, {
+        content: text,
+        className: classes.richText
+      }), /*#__PURE__*/_jsxs("div", {
+        className: classes.imageContainer,
+        children: [mediaType === 'image' ? /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+          src: mediaUrl,
+          alt: altText,
+          borderRadius: borderRadius,
+          enableParallax: parallax,
+          isBanner: imageFit === 'fillAndCrop',
+          onImageRatioChange: handleImageRatioChange
+        }) : null, mediaType === 'video' ? /*#__PURE__*/_jsx(WidgetVideo, {
+          isBanner: true,
+          url: mediaUrl,
+          borderRadius: borderRadius
+        }) : null]
+      })]
+    })
+  });
 };
 export default HeroBanner;

package/page/widgets/HeroBanner/hooks.js

@@ -4,13 +4,16 @@ import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 /**
  * @typedef {Object} HeroBanner
  * @property {string} text Banner text content
- * @property {Object} backgroundImage Banner background image
- * @property {string} backgroundImage.url Banner background image URL
- * @property {string} backgroundImage.alt Banner background image alt text
  * @property {string} link Optional banner link
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * @property {boolean} parallax Whether to apply a parallax effect to the image
+ * @property {Object} backgroundImage Banner background image
+ * @property {string} backgroundImage.url Banner background image URL
+ * @property {string} backgroundImage.alt Banner background image alt text
+ * @property {"fillAndCrop"|"showFull"} imageFit How the image should be displayed
+ * @property {"image"|"video"} mediaType The type of media to display
+ * @property {string} url The URL of the media to display
  */
 
 /**
@@ -20,7 +23,7 @@ import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
 
 // eslint-disable-next-line valid-jsdoc
 /**
- * Hook to access the Image widget configuration and data.
+ * Hook to access the hero banner widget configuration and data.
  */
 export const useHeroBannerWidget = () => {
   /** @type {UseWidgetReturnType}  */
@@ -30,14 +33,26 @@ export const useHeroBannerWidget = () => {
   const {
     borderRadius,
     borderRadiusCustom,
+    mediaType = 'image',
+    backgroundImage,
+    url,
     ...rest
   } = config || {};
+  let mediaUrl;
+  if (mediaType === 'video') {
+    mediaUrl = url;
+  } else if (mediaType === 'image') {
+    mediaUrl = backgroundImage?.url;
+  }
   const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
     borderRadius,
     borderRadiusCustom
   });
   return {
     ...rest,
+    mediaType,
+    mediaUrl,
+    altText: backgroundImage?.alt || '',
     borderRadius: borderRadiusResolved
   };
 };

package/page/widgets/Image/Image.js

@@ -3,6 +3,7 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { Link, ConditionalWrapper } from '@shopgate/engage/components';
 import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
 import { useImageWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   link: {},
   image: {
@@ -26,18 +27,20 @@ const Image = () => {
     parallax
   } = useImageWidget();
   if (!url) return null;
-  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+  return /*#__PURE__*/_jsx(ConditionalWrapper, {
     condition: !!link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
+    wrapper: children => /*#__PURE__*/_jsx(Link, {
       href: link,
-      className: cx(classes.link)
-    }, children)
-  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: url,
-    alt: altText,
-    className: cx(classes.image),
-    borderRadius: borderRadius,
-    enableParallax: parallax
-  }));
+      className: cx(classes.link),
+      children: children
+    }),
+    children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+      src: url,
+      alt: altText,
+      className: cx(classes.image),
+      borderRadius: borderRadius,
+      enableParallax: parallax
+    })
+  });
 };
 export default Image;

package/page/widgets/ImageRow/ImageRow.js

@@ -3,8 +3,12 @@ import { makeStyles } from '@shopgate/engage/styles';
 import { Link, ConditionalWrapper, Grid } from '@shopgate/engage/components';
 import { useImageRowWidget } from "./hooks";
 import ResponsiveWidgetImage from "../../components/ResponsiveWidgetImage";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()((theme, {
-  imageSpacing
+  imageSpacing,
+  slidesPerViewCustomLarge,
+  slidesPerViewCustomMedium,
+  slidesPerViewCustomSmall
 }) => ({
   imageContainer: {
     width: '100%',
@@ -40,6 +44,17 @@ const useStyles = makeStyles()((theme, {
   },
   itemContainerNoWrap: {
     flex: ' 1 1 0%'
+  },
+  imageContainerCustom: {
+    [theme.breakpoints.up('lg')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomLarge}% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.between('sm', 'lg')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomMedium}% - ${imageSpacing}px)`
+    },
+    [theme.breakpoints.down('sm')]: {
+      flex: `1 1 calc(${100 / slidesPerViewCustomSmall}% - ${imageSpacing}px)`
+    }
   }
 }));
 
@@ -50,41 +65,51 @@ const useStyles = makeStyles()((theme, {
 const ImageRow = () => {
   const {
     images,
-    imageWrapping,
+    imageWrapping = 'responsiveDefault',
     imageSpacing,
     borderRadius,
-    parallax
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
   } = useImageRowWidget();
   const {
     cx,
     classes
   } = useStyles({
-    imageSpacing
+    imageSpacing,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
   });
-  if (images.length === 0) return null;
-  return /*#__PURE__*/React.createElement(Grid, {
-    className: cx(classes.imageContainer),
-    component: "div"
-  }, images.map(img => /*#__PURE__*/React.createElement(Grid.Item, {
-    key: img.url,
+  if (!images || images.length === 0) return null;
+  return /*#__PURE__*/_jsx(Grid, {
+    className: classes.imageContainer,
     component: "div",
-    className: cx({
-      [classes.itemContainerDefault]: imageWrapping === 'responsiveDefault',
-      [classes.itemContainerDense]: imageWrapping === 'responsiveDense',
-      [classes.itemContainerNoWrap]: imageWrapping === 'responsiveNoWrap'
-    })
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: !!img.link,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
-      href: img.link,
-      className: cx(classes.image)
-    }, children)
-  }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-    src: img.url,
-    alt: img.altText,
-    className: cx(classes.image),
-    borderRadius: borderRadius,
-    enableParallax: parallax
-  })))));
+    children: images.map(img => /*#__PURE__*/_jsx(Grid.Item, {
+      component: "div",
+      className: cx({
+        [classes.itemContainerDefault]: imageWrapping === 'responsiveDefault',
+        [classes.itemContainerDense]: imageWrapping === 'responsiveDense',
+        [classes.itemContainerNoWrap]: imageWrapping === 'responsiveNoWrap',
+        [classes.imageContainerCustom]: imageWrapping === 'responsiveCustom'
+      }),
+      children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+        condition: !!img.link,
+        wrapper: children => /*#__PURE__*/_jsx(Link, {
+          href: img.link,
+          className: classes.image,
+          children: children
+        }),
+        children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+          src: img.url,
+          alt: img.altText,
+          className: classes.image,
+          borderRadius: borderRadius,
+          enableParallax: parallax
+        })
+      })
+    }, img.url))
+  });
 };
 export default ImageRow;

package/page/widgets/ImageRow/hooks.js

@@ -12,6 +12,12 @@ import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * @property {boolean} [parallax] Whether to apply a parallax effect to the image.
+ * @property {number} [slidesPerViewCustomLarge] Number of slides to show on large screens
+ * (only for 'responsiveCustom' wrapping).
+ * @property {number} [slidesPerViewCustomMedium] Number of slides to show on medium screens
+ * (only for 'responsiveCustom' wrapping).
+ * @property {number} [slidesPerViewCustomSmall] Number of slides to show on small screens
+ * (only for 'responsiveCustom' wrapping).
  */
 
 /**
@@ -35,7 +41,10 @@ export const useImageRowWidget = () => {
     imageSpacing = 0,
     borderRadius,
     borderRadiusCustom,
-    parallax
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
   } = config || {};
   const borderRadiusResolved = resolveBorderRadiusFromWidgetConfig({
     borderRadius,
@@ -60,6 +69,9 @@ export const useImageRowWidget = () => {
     imageWrapping,
     imageSpacing,
     borderRadius: borderRadiusResolved,
-    parallax
+    parallax,
+    slidesPerViewCustomLarge,
+    slidesPerViewCustomMedium,
+    slidesPerViewCustomSmall
   };
 };

package/page/widgets/ImageSlider/ImageSlider.js

@@ -1,12 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { makeStyles } from '@shopgate/engage/styles';
 import { Swiper, Link, ConditionalWrapper } from '@shopgate/engage/components';
 import { ResponsiveWidgetImage } from '@shopgate/engage/page/components';
 import { useImageSliderWidget } from "./hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   image: {
-    width: '100%'
+    width: '100%',
+    minHeight: 1
   }
 });
 
@@ -26,25 +27,29 @@ const ImageSliderWidget = () => {
   if (slides.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Swiper, _extends({
-    indicators: true
-  }, swiperProps), slides.map(slide => {
-    if (!slide.image.url) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement(Swiper.Item, {
-      key: slide.image.url
-    }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-      condition: !!slide.link,
-      wrapper: children => /*#__PURE__*/React.createElement(Link, {
-        href: slide.link
-      }, children)
-    }, /*#__PURE__*/React.createElement(ResponsiveWidgetImage, {
-      className: classes.image,
-      src: slide.image.url,
-      alt: slide.image.altText || '',
-      borderRadius: borderRadius
-    })));
-  }));
+  return /*#__PURE__*/_jsx(Swiper, {
+    indicators: true,
+    ...swiperProps,
+    children: slides.map(slide => {
+      if (!slide.image.url) {
+        return null;
+      }
+      return /*#__PURE__*/_jsx(Swiper.Item, {
+        children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+          condition: !!slide.link,
+          wrapper: children => /*#__PURE__*/_jsx(Link, {
+            href: slide.link,
+            children: children
+          }),
+          children: /*#__PURE__*/_jsx(ResponsiveWidgetImage, {
+            className: classes.image,
+            src: slide.image.url,
+            alt: slide.image.altText || '',
+            borderRadius: borderRadius
+          })
+        })
+      }, slide.image.url);
+    })
+  });
 };
 export default ImageSliderWidget;