@shopgate/pwa-common 7.30.3 → 7.31.0-alpha.1

package/components/Grid/components/Item/index.js

@@ -1,48 +1,45 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { objectWithoutProps } from "../../../../helpers/data";
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+const useStyles = makeStyles()((_theme, {
+  grow,
+  shrink
+}) => ({
+  root: {
+    ...(grow !== 0 ? {
+      flexGrow: grow
+    } : {}),
+    ...(shrink !== 1 ? {
+      flexShrink: shrink
+    } : {})
+  }
+}));
 
 /**
  * The grid item component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let GridItem = /*#__PURE__*/function (_Component) {
-  function GridItem() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(GridItem, _Component);
-  var _proto = GridItem.prototype;
-  /**
-   * Composes the props.
-   * @returns {Object} The composed props.
-   */
-  _proto.getProps = function getProps() {
-    let {
-      className
-    } = this.props;
-    if (this.props.grow !== 0) {
-      className += ` ${styles.grow(this.props.grow)}`;
-    }
-    if (this.props.shrink !== 1) {
-      className += ` ${styles.shrink(this.props.shrink)}`;
-    }
-    const props = {
-      ...this.props,
-      className
-    };
-    return objectWithoutProps(props, ['component', 'grow', 'shrink']);
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  };
-  return GridItem;
-}(Component);
+const GridItem = ({
+  className,
+  component,
+  grow,
+  shrink,
+  ...rest
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles({
+    grow,
+    shrink
+  });
+  const composedClassName = cx(classes.root, className);
+  return /*#__PURE__*/React.createElement(component, {
+    ...rest,
+    className: composedClassName
+  });
+};
 GridItem.defaultProps = {
   className: '',
   component: 'li',

package/components/Grid/index.js

@@ -1,44 +1,46 @@
-import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { objectWithoutProps } from "../../helpers/data";
 import GridItem from "./components/Item";
-import styles, { wrap } from "./style";
+const useStyles = makeStyles()(() => ({
+  root: {
+    display: 'flex',
+    minWidth: '100%'
+  },
+  wrap: {
+    flexWrap: 'wrap'
+  },
+  noWrap: {
+    flexWrap: 'nowrap'
+  }
+}));
 
 /**
  * The grid component.
+ * @param {Object} props Props.
+ * @returns {JSX.Element}
  */
-let Grid = /*#__PURE__*/function (_Component) {
-  function Grid() {
-    return _Component.apply(this, arguments) || this;
-  }
-  _inheritsLoose(Grid, _Component);
-  var _proto = Grid.prototype;
-  /**
-   * Composes the props.
-   * @returns {Object} The composed props.
-   */
-  _proto.getProps = function getProps() {
-    let className = `${this.props.className} ${styles} common__grid`;
-    if (this.props.wrap) {
-      className += ` ${wrap(this.props.wrap)}`;
-    }
-    const props = {
-      ...this.props,
-      className
-    };
-    return objectWithoutProps(props, ['wrap', 'component']);
-  }
-
-  /**
-   * Renders the component.
-   * @returns {JSX}
-   */;
-  _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(this.props.component, this.getProps());
-  };
-  return Grid;
-}(Component);
+const Grid = ({
+  className,
+  component,
+  wrap,
+  ...rest
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  const composedClassName = cx(classes.root, 'common__grid', {
+    [classes.wrap]: wrap,
+    [classes.noWrap]: !wrap
+  }, className);
+  const props = objectWithoutProps({
+    ...rest,
+    className: composedClassName
+  }, ['wrap', 'component']);
+  return /*#__PURE__*/React.createElement(component, props);
+};
 Grid.Item = GridItem;
 Grid.defaultProps = {
   className: '',

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/I18n/components/FormatNumber/spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import { mount } from 'enzyme';
 import { i18n } from '@shopgate/engage/core';

package/components/Icon/index.d.ts

@@ -0,0 +1,36 @@
+export interface IconProps {
+    /**
+     * Raw SVG markup string that will be injected into the <svg>.
+     */
+    content: string;
+    /**
+     * Additional class name(s) applied to the root element.
+     */
+    className?: string;
+    /**
+     * Overrides the icon color (maps to CSS `fill`).
+     */
+    color?: string;
+    /**
+     * Controls the icon size via `font-size`.
+     * Accepts any valid CSS size value.
+     * @default 'inherit'
+     */
+    size?: string | number;
+    /**
+     * The SVG viewBox attribute.
+     * @default '0 0 24 24'
+     */
+    viewBox?: string;
+}
+/**
+ * The Icon component.
+ *
+ * Renders an inline SVG icon using injected SVG markup.
+ *
+ * Provides basic styling via `currentColor` and supports size and color
+ * overrides through props while allowing external class-based overrides.
+ */
+declare const Icon: ({ content, className, color, viewBox, size, }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default Icon;
+//# sourceMappingURL=index.d.ts.map

package/components/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Icon/index.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,GAAI,+CAMX,SAAS,4CAgBX,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/components/Icon/index.js

@@ -1,33 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styles from "./style";
-
-/**
- * The Icon component.
- * @param {Object} props The component props.
- * @param {string} props.content The SVG content of the icon
- * @param {string} [props.className] Additional CSS styles for this component
- * @param {string} [props.viewBox] The viewBox attribute passed to the SVG
- * @param {number} [props.size=24] The icon size
- * @returns {JSX.Element}
- */
+import { makeStyles } from '@shopgate/engage/styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Icon = props => /*#__PURE__*/_jsx("svg", {
-  className: `${styles} ${props.className} common__icon`,
-  viewBox: props.viewBox,
-  xmlns: "http://www.w3.org/2000/svg",
-  dangerouslySetInnerHTML: {
-    __html: props.content
-  },
-  style: {
-    fontSize: props.size,
-    fill: props.color
+const useStyles = makeStyles()({
+  root: {
+    fill: 'currentColor',
+    width: '1em',
+    height: '1em'
   }
 });
-Icon.defaultProps = {
-  className: '',
-  color: null,
-  viewBox: '0 0 24 24',
-  size: 'inherit'
+/**
+ * The Icon component.
+ *
+ * Renders an inline SVG icon using injected SVG markup.
+ *
+ * Provides basic styling via `currentColor` and supports size and color
+ * overrides through props while allowing external class-based overrides.
+ */
+const Icon = ({
+  content,
+  className,
+  color,
+  viewBox = '0 0 24 24',
+  size = 'inherit'
+}) => {
+  const {
+    cx,
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("svg", {
+    className: cx(classes.root, 'common__icon', className),
+    viewBox: viewBox,
+    xmlns: "http://www.w3.org/2000/svg"
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: content
+    },
+    style: {
+      fontSize: size,
+      fill: color
+    }
+  });
 };
 export default Icon;

package/components/Image/Image.js

@@ -1,15 +1,30 @@
 import React, { useMemo, useState, useEffect, useRef, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { themeConfig } from '@shopgate/engage';
+import { makeStyles } from '@shopgate/engage/styles';
 import { getFullImageSource } from '@shopgate/engage/core/helpers';
-import styles from "./style";
 import ImageInner from "./ImageInner";
 import { jsx as _jsx } from "react/jsx-runtime";
 const {
   colors: themeColors
 } = themeConfig;
+const useStyles = makeStyles()((_theme, {
+  background,
+  paddingTop
+}) => ({
+  container: {
+    background,
+    position: 'relative',
+    zIndex: 0,
+    ':before': {
+      display: 'block',
+      content: '""',
+      width: '100%',
+      paddingTop
+    }
+  }
+}));
 
 /**
  * Calculates the Greatest Common Divisor (GCD) of two numbers using the Euclidean algorithm.
@@ -133,12 +148,19 @@ const Image = ({
       paddingHackRatio: `${(height / width * 100).toFixed(3)}%`
     };
   }, [ratio, resolutions]);
+  const {
+    classes,
+    cx
+  } = useStyles({
+    background: backgroundColor,
+    paddingTop: paddingHackRatio
+  });
   if (unwrapped) {
     if (!(src && !parentRendersPlaceholder)) return null;
     return /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
-      className: classNames(classNameImg),
+      className: cx(classNameImg),
       style: {
         aspectRatio,
         ...(isInView && sources.preview && {
@@ -154,13 +176,12 @@ const Image = ({
       onError: handleOnError
     });
   }
-  const containerStyle = styles.container(backgroundColor, paddingHackRatio);
   return /*#__PURE__*/_jsx("div", {
-    className: classNames(containerStyle, className, 'common__image__container'),
+    className: cx(classes.container, className, 'common__image__container'),
     children: src && !parentRendersPlaceholder && /*#__PURE__*/_jsx(ImageInner, {
       ref: imgRef,
       src: sources.main,
-      className: classNames(classNameImg),
+      className: cx(classNameImg),
       style: {
         aspectRatio,
         ...(isInView && sources.preview && {

package/components/Image/ImageInner.js

@@ -1,8 +1,19 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import noop from 'lodash/noop';
-import styles from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  image: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    maxHeight: '100%',
+    WebkitTouchCallout: 'none',
+    fontSize: 0
+  }
+});
 
 /**
  * The ImageInner component renders tha actual image of the Image component.
@@ -10,7 +21,6 @@ import styles from "./style";
  * @param {Function} ref The component reference
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const ImageInner = /*#__PURE__*/forwardRef(({
   src,
   className,
@@ -19,28 +29,25 @@ const ImageInner = /*#__PURE__*/forwardRef(({
   onLoad,
   onError,
   style
-}, ref) => /*#__PURE__*/_jsx("img", {
-  ref: ref,
-  loading: lazy ? 'lazy' : 'eager',
-  src: src,
-  className: classNames(className, styles.image, 'common__image'),
-  alt: alt,
-  "aria-label": alt,
-  "aria-hidden": !alt,
-  "data-test-id": "image",
-  onLoad: onLoad,
-  onError: onError,
-  style: style
-}));
-ImageInner.propTypes = {
-  alt: PropTypes.string,
-  className: PropTypes.string,
-  lazy: PropTypes.bool,
-  onError: PropTypes.func,
-  onLoad: PropTypes.func,
-  src: PropTypes.string,
-  style: PropTypes.shape()
-};
+}, ref) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("img", {
+    ref: ref,
+    loading: lazy ? 'lazy' : 'eager',
+    src: src,
+    className: cx(classes.image, 'common__image', className),
+    alt: alt,
+    "aria-label": alt,
+    "aria-hidden": !alt,
+    "data-test-id": "image",
+    onLoad: onLoad,
+    onError: onError,
+    style: style
+  });
+});
 ImageInner.defaultProps = {
   src: null,
   alt: null,

package/components/InfiniteContainer/index.js

@@ -405,7 +405,7 @@ let InfiniteContainer = /*#__PURE__*/function (_Component) {
     const {
       wrapper,
       items,
-      iterator,
+      iterator: Iterator,
       loadingIndicator,
       columns
     } = this.props;
@@ -414,13 +414,11 @@ let InfiniteContainer = /*#__PURE__*/function (_Component) {
     } = this.state;
     const [start, length] = this.state.offset;
     // Only show items in offset range. uses iterator component as item factory
-    const children = items.slice(0, start + length).map(item => iterator({
+    const children = items.slice(0, start + length).map((item, index) => /*#__PURE__*/_jsx(Iterator, {
       ...item,
-      columns
-    }));
-    const content = typeof wrapper === 'function' ? wrapper({
-      children
-    }) : (/*#__PURE__*/React.createElement(wrapper, {}, children));
+      columns: columns
+    }, item.id ?? index));
+    const content = /*#__PURE__*/React.createElement(wrapper, {}, children);
     return /*#__PURE__*/_jsxs("div", {
       className: "common__infinite-container",
       children: [/*#__PURE__*/_jsx("div", {

package/components/InfiniteContainer/spec.js

@@ -12,7 +12,7 @@ describe('<InfiniteContainer />', () => {
   let renderedElement;
   let renderedInstance;
   let mockLoader;
-  let mockIterator;
+  let MockIterator;
   let mockItems;
   const mockData = range(100).map(id => ({
     id,
@@ -47,16 +47,16 @@ describe('<InfiniteContainer />', () => {
   };
   beforeEach(() => {
     mockLoader = jest.fn();
-    mockIterator = jest.fn(data => /*#__PURE__*/_jsx("li", {
+    MockIterator = data => /*#__PURE__*/_jsx("li", {
       children: data.title
-    }, data.id));
+    }, data.id);
   });
   describe('Given the component was mounted to the DOM', () => {
     beforeEach(() => {
       renderComponent({
         items: [],
         loader: mockLoader,
-        iterator: mockIterator,
+        iterator: MockIterator,
         totalItems: null
       });
       renderedInstance.componentDidMount();
@@ -73,12 +73,8 @@ describe('<InfiniteContainer />', () => {
       beforeEach(() => {
         receiveItemsByProp(mockItemsLength);
       });
-      it('should call the iterator function according to the number of loaded items', () => {
-        expect(mockIterator).toBeCalled();
-        expect(mockIterator.mock.calls.length).toBe(mockItemsLength);
-      });
       it('should render the loaded items', () => {
-        expect(renderedElement.find('li').length).toBe(mockItemsLength);
+        expect(renderedElement.find(MockIterator)).toHaveLength(mockItemsLength);
       });
     });
     describe('Given the component was mounted within a scroll container', () => {
@@ -121,7 +117,7 @@ describe('<InfiniteContainer />', () => {
       it('should keep state.awaitingItems as true if not all items are rendered', () => {
         expect(renderedInstance.allItemsAreRendered()).toBe(false);
         expect(renderedInstance.state.awaitingItems).toBe(true);
-        expect(renderedElement.find('li').length).toBeLessThan(mockItemsLength);
+        expect(renderedElement.find(MockIterator).length).toBeLessThan(mockItemsLength);
       });
       it('should set state.awaitingItems to false if all items are rendered', () => {
         renderedElement.setState({
@@ -130,7 +126,7 @@ describe('<InfiniteContainer />', () => {
         renderedInstance.handleLoading();
         expect(renderedInstance.allItemsAreRendered()).toBe(true);
         expect(renderedInstance.state.awaitingItems).toBe(false);
-        expect(renderedElement.find('li').length).toBe(mockItemsLength);
+        expect(renderedElement.find(MockIterator).length).toBe(mockItemsLength);
       });
     });
   });
@@ -140,12 +136,12 @@ describe('<InfiniteContainer />', () => {
         renderComponent({
           items: mockData,
           loader: mockLoader,
-          iterator: mockIterator,
+          iterator: MockIterator,
           totalItems: mockData.length
         });
 
         // Check if the iniLimit was used
-        expect(renderedElement.find('li').length).toBe(renderedInstance.props.initialLimit);
+        expect(renderedElement.find(MockIterator).length).toBe(renderedInstance.props.initialLimit);
 
         // Reset the limit from props.initialLimit back to props.limit
         renderedInstance.componentDidMount();
@@ -156,7 +152,7 @@ describe('<InfiniteContainer />', () => {
 
         // Check if the correct limit was used for the second render
         const newLimit = renderedInstance.props.initialLimit + renderedInstance.props.limit;
-        expect(renderedElement.find('li').length).toBe(newLimit);
+        expect(renderedElement.find(MockIterator).length).toBe(newLimit);
       });
     });
     describe('Given that the initialLimit is NOT used', () => {
@@ -164,7 +160,7 @@ describe('<InfiniteContainer />', () => {
         renderComponent({
           items: [],
           loader: mockLoader,
-          iterator: mockIterator,
+          iterator: MockIterator,
           totalItems: null
         });
         renderedInstance.componentDidMount();
@@ -172,7 +168,7 @@ describe('<InfiniteContainer />', () => {
 
         // Check if the iniLimit wasn't used
         expect(renderedElement).toMatchSnapshot();
-        expect(renderedElement.find('li').length).toBe(renderedInstance.props.limit);
+        expect(renderedElement.find(MockIterator).length).toBe(renderedInstance.props.limit);
       });
     });
   });
@@ -181,7 +177,7 @@ describe('<InfiniteContainer />', () => {
       const props = {
         items: mockData,
         loader: mockLoader,
-        iterator: mockIterator,
+        iterator: MockIterator,
         totalItems: mockData.length,
         requestHash: 'default'
       };