@shopgate/engage 7.30.4-beta.1 → 7.30.4-beta.3

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

@@ -4,6 +4,7 @@ import "core-js/modules/es.string.replace.js";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
+import classNames from 'classnames';
 import ResponsiveContainer from '@shopgate/engage/components/ResponsiveContainer';
 import appConfig from '@shopgate/pwa-common/helpers/config';
 import event from '@shopgate/pwa-core/classes/Event';
@@ -17,7 +18,7 @@ import { ConditionalWrapper } from "../../../ConditionalWrapper";
 import Above from "../Above";
 import Below from "../Below";
 import ParallaxProvider from "./components/ParallaxProvider";
-import { container, containerInner } from "./style";
+import { container, containerInner, scrollableContent } from "./style";
 
 /**
  * The ViewContent component.
@@ -155,7 +156,7 @@ let ViewContent = /*#__PURE__*/function (_Component) {
         children: /*#__PURE__*/_jsx("div", {
           className: containerInner,
           children: /*#__PURE__*/_jsxs("div", {
-            className: "engage__view__content__scrollable-content",
+            className: classNames(scrollableContent, 'engage__view__content__scrollable-content'),
             children: [/*#__PURE__*/_jsx(Helmet, {
               title: appConfig.shopName
             }), /*#__PURE__*/_jsx(Above, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {

package/components/View/components/Content/style.js

@@ -27,6 +27,9 @@ export const container = css({
   }
 });
 export const containerInner = css({
+  display: 'flex',
+  flexGrow: 1,
+  flexDirection: 'column',
   ...(isIOs && useScrollContainer() ? {
     // Make the scroll container content a bit higher than the actual scroll container to
     // get a rubber band effect in all situations
@@ -38,4 +41,9 @@ export const containerInner = css({
     pointerEvents: 'none',
     paddingBottom: 'calc(var(--page-content-offset-bottom) + var(--keyboard-height))'
   }
+});
+export const scrollableContent = css({
+  display: 'flex',
+  flexDirection: 'column',
+  flexGrow: 1
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.30.4-beta.1",
+  "version": "7.30.4-beta.3",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.30.4-beta.1",
-    "@shopgate/pwa-common-commerce": "7.30.4-beta.1",
-    "@shopgate/pwa-core": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-ios": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-material": "7.30.4-beta.1",
-    "@shopgate/pwa-ui-shared": "7.30.4-beta.1",
+    "@shopgate/pwa-common": "7.30.4-beta.3",
+    "@shopgate/pwa-common-commerce": "7.30.4-beta.3",
+    "@shopgate/pwa-core": "7.30.4-beta.3",
+    "@shopgate/pwa-ui-ios": "7.30.4-beta.3",
+    "@shopgate/pwa-ui-material": "7.30.4-beta.3",
+    "@shopgate/pwa-ui-shared": "7.30.4-beta.3",
     "@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

@@ -24,7 +24,8 @@ const MediaSlider = ({
   'aria-hidden': ariaHidden,
   renderPlaceholder,
   className,
-  paginationType
+  paginationType,
+  swiperProps
 }) => {
   let currentSlide = 0;
 
@@ -58,6 +59,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, {
@@ -79,6 +81,7 @@ MediaSlider.defaultProps = {
   media: null,
   renderPlaceholder: featuredMedia => /*#__PURE__*/_jsx(MediaImage, {
     ...featuredMedia
-  })
+  }),
+  swiperProps: {}
 };
 export default connect(MediaSlider);