@shopgate/engage 7.31.0-alpha.6 → 7.31.0-alpha.7

package/components/View/components/Content/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAyPe,+EAUd"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../components/View/components/Content/index.jsx"],"names":[],"mappings":"AAiQe,+EAUd"}

package/components/View/components/Content/index.js

@@ -12,7 +12,7 @@ import { EVENT_KEYBOARD_WILL_CHANGE } from '@shopgate/pwa-core/constants/AppEven
 import SurroundPortals from '@shopgate/pwa-common/components/SurroundPortals';
 import { VIEW_CONTENT } from '@shopgate/pwa-common/constants/Portals';
 import { applyScrollContainer, isIOs } from '@shopgate/engage/core/helpers';
-import { makeStyles, cx, responsiveMediaQuery } from '@shopgate/engage/styles';
+import { makeStyles, responsiveMediaQuery } from '@shopgate/engage/styles';
 import { IS_PAGE_PREVIEW_ACTIVE } from '@shopgate/engage/page/constants';
 import { ConditionalWrapper } from "../../../ConditionalWrapper";
 import Above from "../Above";
@@ -46,6 +46,9 @@ const useStyles = makeStyles()({
     backgroundColor: 'var(--page-background-color)'
   },
   containerInner: {
+    display: 'flex',
+    flexGrow: 1,
+    flexDirection: 'column',
     ':after': {
       content: "''",
       display: 'block',
@@ -55,6 +58,11 @@ const useStyles = makeStyles()({
   },
   containerInnerIosScroll: {
     minHeight: 'calc(100% + var(--extra-ios-scroll-space, 0px))'
+  },
+  scrollableContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1
   }
 });
 
@@ -75,7 +83,8 @@ const ViewContent = ({
   const routeContext = useContext(RouteContext);
   const scrollContainer = applyScrollContainer();
   const {
-    classes
+    classes,
+    cx
   } = useStyles();
   const ref = useRef((() => {
     if (scrollContainer) {
@@ -179,7 +188,7 @@ const ViewContent = ({
       children: /*#__PURE__*/_jsx("div", {
         className: cx(classes.containerInner, isIOs && scrollContainer && classes.containerInnerIosScroll),
         children: /*#__PURE__*/_jsxs("div", {
-          className: "engage__view__content__scrollable-content",
+          className: cx(classes.scrollableContent, 'engage__view__content__scrollable-content'),
           children: [/*#__PURE__*/_jsx(Helmet, {
             title: appConfig.shopName
           }), /*#__PURE__*/_jsx(Above, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.31.0-alpha.6",
+  "version": "7.31.0-alpha.7",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -18,12 +18,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.31.0-alpha.6",
-    "@shopgate/pwa-common-commerce": "7.31.0-alpha.6",
-    "@shopgate/pwa-core": "7.31.0-alpha.6",
-    "@shopgate/pwa-ui-ios": "7.31.0-alpha.6",
-    "@shopgate/pwa-ui-material": "7.31.0-alpha.6",
-    "@shopgate/pwa-ui-shared": "7.31.0-alpha.6",
+    "@shopgate/pwa-common": "7.31.0-alpha.7",
+    "@shopgate/pwa-common-commerce": "7.31.0-alpha.7",
+    "@shopgate/pwa-core": "7.31.0-alpha.7",
+    "@shopgate/pwa-ui-ios": "7.31.0-alpha.7",
+    "@shopgate/pwa-ui-material": "7.31.0-alpha.7",
+    "@shopgate/pwa-ui-shared": "7.31.0-alpha.7",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.44.1",
     "@virtuous/conductor": "~2.5.0",

package/page/widgets/ImageSlider/ImageSlider.js

@@ -19,7 +19,8 @@ const ImageSliderWidget = () => {
   const {
     slides,
     swiperProps,
-    borderRadius
+    borderRadius,
+    paginationType
   } = useImageSliderWidget();
   const {
     classes
@@ -29,6 +30,7 @@ const ImageSliderWidget = () => {
   }
   return /*#__PURE__*/_jsx(Swiper, {
     indicators: true,
+    paginationType: paginationType,
     ...swiperProps,
     children: slides.map(slide => {
       if (!slide.image.url) {

package/page/widgets/ImageSlider/hooks.js

@@ -30,7 +30,7 @@ import { resolveBorderRadiusFromWidgetConfig } from "../../helpers";
  * @property {number} slidesPerViewCustomMedium Slides per view for medium screens.
  * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
  * @property {number} imageSpacing Optional gap between image slides (in pixels).
- * @property {"default"|"off"|"bullets"|"progressbar"|"fraction"} paginationStyle
+ * @property {"default"|"off"|"bullets"|"bulletsBelow"|"progressbar"|"fraction"} paginationStyle
  * @property {"default"|"none"|"rounded"|"custom"} borderRadius The border radius option.
  * @property {number} [borderRadiusCustom] The custom border radius value.
  * the pagination type for the slider.
@@ -71,7 +71,7 @@ export const useImageSliderWidget = () => {
     borderRadius,
     borderRadiusCustom
   });
-  const paginationType = useMemo(() => paginationStyle === 'default' ? 'bullets' : paginationStyle.toLowerCase(), [paginationStyle]);
+  const paginationType = useMemo(() => paginationStyle === 'default' ? 'bullets' : paginationStyle, [paginationStyle]);
   const imagesWithUrls = useMemo(() => images.filter(img => img?.image?.url), [images]);
 
   /**
@@ -134,7 +134,9 @@ export const useImageSliderWidget = () => {
       slidesPerView: slidesPerViewSmall,
       breakpoints,
       pagination: showPagination ? {
-        type: paginationType,
+        // The "bulletsBelow" pagination type is a custom variant of "bullets" and needs to be set
+        // to "bullets" for Swiper to render it
+        type: paginationType === 'bulletsBelow' ? 'bullets' : paginationType,
         clickable: true,
         dynamicBullets: true
       } : false,
@@ -166,6 +168,9 @@ export const useImageSliderWidget = () => {
   return {
     slides: imagesWithUrls,
     swiperProps,
-    borderRadius: borderRadiusResolved
+    borderRadius: borderRadiusResolved,
+    // Since "bulletsBelow" is a custom pagination type we need to use the paginationType prop of
+    // our Swiper component, since it's can't be passed with the pagination object in swiperProps
+    paginationType: paginationType === 'bulletsBelow' ? 'bulletsBelow' : undefined
   };
 };

package/product/components/MediaSlider/index.js

@@ -34,7 +34,8 @@ const MediaSlider = ({
   'aria-hidden': ariaHidden,
   renderPlaceholder,
   className,
-  paginationType
+  paginationType,
+  swiperProps
 }) => {
   const {
     classes
@@ -71,6 +72,7 @@ const MediaSlider = ({
         controls: media.some(m => m.type === MEDIA_TYPE_VIDEO),
         className: className,
         "aria-hidden": ariaHidden,
+        ...swiperProps,
         children: media.map(singleMedia => {
           const Type = typeRenders[singleMedia.type];
           return /*#__PURE__*/_jsx(Swiper.Item, {
@@ -92,6 +94,7 @@ MediaSlider.defaultProps = {
   media: null,
   renderPlaceholder: featuredMedia => /*#__PURE__*/_jsx(MediaImage, {
     ...featuredMedia
-  })
+  }),
+  swiperProps: {}
 };
 export default connect(MediaSlider);