@shopgate/pwa-common 7.30.3 → 7.30.4-beta.2

package/components/HtmlSanitizer/index.js

@@ -2,15 +2,23 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { embeddedMedia } from '@shopgate/pwa-common/collections';
+import { embeddedMedia, configuration } from '@shopgate/engage/core/collections';
+import { CONFIGURATION_COLLECTION_KEY_UNIVERSAL_LINK_HANDLER } from '@shopgate/engage/core/constants';
 import EmbeddedMedia from "../EmbeddedMedia";
 import parseHTML from "../../helpers/html/parseHTML";
 import connect from "./connector";
 
 /**
- * HtmlSanitizer component.
+ * Checks if a link is a universal link.
+ * @param {string} link The link to check.
+ * @returns {boolean} True if the link is a universal link, false otherwise.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
+const isUniversalLink = link => link.startsWith('http://') || link.startsWith('https://');
+
+/**
+ * HtmlSanitizer component.
+ */
 let HtmlSanitizer = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
@@ -23,19 +31,64 @@ let HtmlSanitizer = /*#__PURE__*/function (_Component) {
      * @param {Object} event The touchstart event.
      */
     _this.handleClick = event => {
+      // Prevent multiple clicks on links while the first one is still being processed.
+      if (_this.state.openingLink) {
+        event.preventDefault();
+        return;
+      }
+      _this.setState({
+        openingLink: true
+      });
       const linkTag = event.target.closest('a');
       if (!linkTag) return;
       const href = linkTag.getAttribute('href');
       const target = linkTag.getAttribute('target') || '';
       if (!href) return;
       event.preventDefault();
-      if (_this.props.settings.handleClick) {
-        _this.props.settings.handleClick(href, target);
-      } else {
-        _this.props.navigate(href, target);
-      }
+
+      /**
+       * Runs async logic to open links to potentially resolve universal links.
+       */
+      const openLink = async () => {
+        const universalLinkHandler = configuration.get(CONFIGURATION_COLLECTION_KEY_UNIVERSAL_LINK_HANDLER);
+        let link = href;
+        // If the universalLinkHandler is registered by an extension and the link looks like a
+        // qualified URL, we try to resolve it as a universal link.
+        if (typeof universalLinkHandler === 'function' && isUniversalLink(link)) {
+          const {
+            redirectLink = null,
+            handled = false
+          } = (await universalLinkHandler({
+            link
+          })) ?? {};
+          if (handled) {
+            _this.setState({
+              openingLink: false
+            });
+            return;
+          }
+          if (redirectLink) {
+            link = redirectLink;
+          }
+        }
+        _this.setState({
+          openingLink: false
+        });
+        if (!link) {
+          return;
+        }
+        if (_this.props.settings.handleClick) {
+          _this.props.settings.handleClick(link, target);
+        } else {
+          _this.props.navigate(link, target);
+        }
+      };
+      openLink();
     };
     _this.htmlContainer = /*#__PURE__*/React.createRef();
+    _this.state = {
+      openingLink: false
+    };
     return _this;
   }
 

package/components/Swiper/index.js

@@ -67,6 +67,7 @@ const Swiper = ({
   paginationType: paginationTypeProp,
   ...swiperProps
 }) => {
+  const isBulletsBelow = paginationTypeProp === 'bulletsBelow';
   const useFraction = maxIndicators && maxIndicators < children.length;
   const paginationType = useFraction ? 'fraction' : 'bullets';
   const showPagination = indicators && children.length > 1;
@@ -111,7 +112,7 @@ const Swiper = ({
     ...(showPagination && {
       pagination: {
         el: undefined,
-        type: paginationTypeProp || paginationType,
+        type: isBulletsBelow ? 'bullets' : paginationTypeProp || paginationType,
         bulletClass: classNames.bulletClass || 'swiper-pagination-bullet',
         bulletActiveClass: classNames.bulletActiveClass || 'swiper-pagination-bullet-active',
         dynamicBullets: true,
@@ -122,7 +123,7 @@ const Swiper = ({
     allowSlidePrev: !disabled,
     allowSlideNext: !disabled,
     onSlideChange: handleSlideChange
-  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange]);
+  }), [additionalModules, classNames.container, classNames.bulletClass, classNames.bulletActiveClass, swiperProps, autoPlay, interval, navigation, showPagination, paginationTypeProp, paginationType, indicators, children.length, disabled, handleSlideChange, isBulletsBelow]);
   useEffect(() => {
     if (!internalProps.autoplay && !swiperProps.autoplay) {
       if (swiperRef.current?.swiper?.autoplay) {
@@ -187,7 +188,9 @@ const Swiper = ({
     }
   }, [delay, loopProp, onBreakpoint]);
   return /*#__PURE__*/_jsx("div", {
-    className: cls(container, className, 'common__swiper'),
+    className: cls(container, className, 'common__swiper', {
+      'pagination-below': isBulletsBelow
+    }),
     "aria-hidden": ariaHidden,
     children: /*#__PURE__*/_jsxs(OriginalSwiper, {
       "aria-live": "off",

package/components/Swiper/styles.js

@@ -2,10 +2,15 @@ import { css } from 'glamor';
 import { themeColors } from '@shopgate/pwa-common/helpers/config';
 export const container = css({
   position: 'relative',
-  maxHeight: '100%'
-  // This needs to be 100vw to compensate a chrome 80 bug - see related ticket / pr. (PWA-2509)
-  // commented out for now since it causes issues in the responsive layout
-  // width: '100vw',
+  maxHeight: '100%',
+  '&.pagination-below': {
+    '& .swiper-pagination.swiper-pagination-bullets': {
+      '--swiper-pagination-bottom': 0,
+      position: 'relative',
+      height: 32,
+      lineHeight: '40px'
+    }
+  }
 }).toString();
 export const innerContainer = css({
   overflow: 'hidden',

package/constants/Configuration.js

@@ -33,4 +33,5 @@ export const IS_CONNECT_EXTENSION_ATTACHED = 'IS_CONNECT_EXTENSION_ATTACHED';
  * );
  */
 export const CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL = 'CONFIGURATION_COLLECTION_CREATE_EXTERNAL_IMAGE_URL';
-export const CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY = 'CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY';
+export const CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY = 'CONFIGURATION_COLLECTION_KEY_THEME_TYPOGRAPHY';
+export const CONFIGURATION_COLLECTION_KEY_UNIVERSAL_LINK_HANDLER = 'universalLinkHandler';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/pwa-common",
-  "version": "7.30.3",
+  "version": "7.30.4-beta.2",
   "description": "Common library for the Shopgate Connect PWA.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@redux-devtools/extension": "^3.3.0",
     "@sentry/browser": "6.0.1",
-    "@shopgate/pwa-benchmark": "7.30.3",
+    "@shopgate/pwa-benchmark": "7.30.4-beta.2",
     "@virtuous/conductor": "~2.5.0",
     "@virtuous/react-conductor": "~2.5.0",
     "@virtuous/redux-persister": "1.1.0-beta.7",
@@ -40,7 +40,7 @@
     "swiper": "12.1.0"
   },
   "devDependencies": {
-    "@shopgate/pwa-core": "7.30.3",
+    "@shopgate/pwa-core": "7.30.4-beta.2",
     "@types/react-portal": "^3.0.9",
     "lodash": "^4.17.23",
     "prop-types": "~15.8.1",