@shopgate/engage 7.30.4-beta.1 → 7.31.0-alpha.2

package/product/components/FilterBar/index.js

@@ -4,38 +4,48 @@ import { ResponsiveContainer } from '@shopgate/engage/components';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { themeConfig } from '@shopgate/engage';
 import { SortProvider, SORT_SCOPE_CATEGORY, SORT_SCOPE_SEARCH } from '@shopgate/engage/filter';
+import { makeStyles, useTheme } from '@shopgate/engage/styles';
 import Provider from "./FilterBarProvider";
 import Content from "./components/Content";
 import Modal from "./components/FilterModal";
-import styles from "./style";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   colors
 } = themeConfig;
+const useStyles = makeStyles()({
+  root: {
+    transition: 'transform 200ms cubic-bezier(0.25, 0.1, 0.25, 1)'
+  }
+});
 
 /**
  * The FilterBar component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-function FilterBar({
+const FilterBar = ({
   filters,
   categoryId
-}) {
+}) => {
+  const theme = useTheme();
+  const {
+    classes,
+    cx
+  } = useStyles();
   const [active, setActive] = useState(filters !== null && Object.keys(filters).length > 0);
   const handleChipCountUpdate = useCallback(count => {
     setActive(count > 0);
   }, []);
   const style = useMemo(() => hasNewServices() ? {
     background: active ? 'var(--color-background-accent)' : 'var(--color-background-accent)',
-    color: active ? 'var(--color-primary)' : 'var(--color-text-high-emphasis)'
+    color: active ? 'var(--color-primary)' : theme.palette.text.primary
   } : {
     background: active ? 'var(--color-secondary)' : colors.background,
     color: active ? 'var(--color-secondary-contrast)' : colors.dark
-  }, [active]);
+  }, [active, theme]);
   const sortScope = useMemo(() => categoryId ? SORT_SCOPE_CATEGORY : SORT_SCOPE_SEARCH, [categoryId]);
   return /*#__PURE__*/_jsx("div", {
-    className: `${styles} theme__filter-bar`,
+    className: cx(classes.root, 'theme__filter-bar'),
     "data-test-id": "filterBar",
     style: style,
     children: /*#__PURE__*/_jsx(SortProvider, {
@@ -51,7 +61,7 @@ function FilterBar({
       })
     })
   });
-}
+};
 FilterBar.defaultProps = {
   filters: null,
   categoryId: null

package/product/components/Header/PriceStriked/index.js

@@ -1,21 +1,45 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Portal, I18n, PlaceholderLabel, PriceStriked as StrikePrice } from '@shopgate/engage/components';
 import { PRODUCT_PRICE_STRIKED, PRODUCT_PRICE_STRIKED_AFTER, PRODUCT_PRICE_STRIKED_BEFORE } from '@shopgate/engage/product/constants';
 import { withPriceCalculation } from '@shopgate/engage/product/hocs';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import connect from "./connector";
-import styles from "./style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  placeholder: {
+    height: 16,
+    width: '70%',
+    marginTop: 5,
+    marginBottom: 2
+  },
+  msrp: {
+    color: colors.shade11,
+    fontSize: '0.875rem',
+    marginRight: theme.spacing(0.5)
+  },
+  msrpStriked: {
+    display: 'inline',
+    fontSize: '0.875rem'
+  }
+}));
 
 /**
  * The PriceStriked component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const PriceStriked = ({
   price
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     msrpLabel = 'price.msrp',
     unitPriceStrikedLabel
@@ -26,21 +50,21 @@ const PriceStriked = ({
     }), /*#__PURE__*/_jsx(Portal, {
       name: PRODUCT_PRICE_STRIKED,
       children: /*#__PURE__*/_jsxs(PlaceholderLabel, {
-        className: styles.placeholder,
+        className: classes.placeholder,
         ready: price !== null,
         children: [price && price.msrp > 0 && price.unitPrice !== price.msrp && /*#__PURE__*/_jsxs(_Fragment, {
           children: [!!msrpLabel && /*#__PURE__*/_jsx(I18n.Text, {
             string: msrpLabel,
-            className: styles.msrp
+            className: classes.msrp
           }), /*#__PURE__*/_jsx(StrikePrice, {
-            className: styles.msrpStriked,
+            className: classes.msrpStriked,
             value: price.msrp,
             currency: price.currency
           })]
         }), price && !price.msrp && price.unitPriceStriked > 0 && price.unitPrice !== price.unitPriceStriked && /*#__PURE__*/_jsxs(_Fragment, {
           children: [!!unitPriceStrikedLabel && /*#__PURE__*/_jsx(I18n.Text, {
             string: unitPriceStrikedLabel,
-            className: styles.msrp
+            className: classes.msrp
           }), /*#__PURE__*/_jsx(StrikePrice, {
             value: price.unitPriceStriked,
             currency: price.currency

package/product/components/Header/Shipping/components/Label/index.js

@@ -1,35 +1,47 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "./style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  text: {
+    color: theme.palette.success.main
+  }
+}));
 
 /**
  * The Shipping Label component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Label = ({
   className,
   price,
   currency
-}) =>
-/*#__PURE__*/
-// eslint-disable-next-line jsx-a11y/aria-role
-_jsx("div", {
-  role: "text",
-  className: `${className} ${styles.text}`,
-  children: price > 0 ? /*#__PURE__*/_jsx(I18n.Text, {
-    string: "shipping.cost",
-    children: /*#__PURE__*/_jsx(I18n.Price, {
-      forKey: "price",
-      price: price,
-      currency: currency
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/aria-role
+    _jsx("div", {
+      role: "text",
+      className: cx(classes.text, className),
+      children: price > 0 ? /*#__PURE__*/_jsx(I18n.Text, {
+        string: "shipping.cost",
+        children: /*#__PURE__*/_jsx(I18n.Price, {
+          forKey: "price",
+          price: price,
+          currency: currency
+        })
+      }) : /*#__PURE__*/_jsx(I18n.Text, {
+        string: "shipping.free"
+      })
     })
-  }) : /*#__PURE__*/_jsx(I18n.Text, {
-    string: "shipping.free"
-  })
-});
+  );
+};
 Label.defaultProps = {
   className: ''
 };

package/product/components/Header/Shipping/index.js

@@ -1,38 +1,55 @@
-import React, { Fragment, memo } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
 import { PRODUCT_SHIPPING, PRODUCT_SHIPPING_AFTER, PRODUCT_SHIPPING_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
 import PlaceholderLabel from '@shopgate/pwa-ui-shared/PlaceholderLabel';
+import { makeStyles } from '@shopgate/engage/styles';
 import Label from "./components/Label";
 import connect from "./connector";
-import styles from "./style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  placeholder: {
+    height: 16,
+    width: '70%',
+    marginTop: 5,
+    marginBottom: 2
+  },
+  shipping: {
+    fontSize: '0.875rem'
+  }
+});
 
 /**
  * The Shipping Info component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Shipping = ({
   shipping
-}) => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx(Portal, {
-    name: PRODUCT_SHIPPING_BEFORE
-  }), /*#__PURE__*/_jsx(Portal, {
-    name: PRODUCT_SHIPPING,
-    children: /*#__PURE__*/_jsx(PlaceholderLabel, {
-      className: styles.placeholder,
-      ready: shipping !== null,
-      children: shipping && typeof shipping.price !== 'undefined' && shipping.price !== null && /*#__PURE__*/_jsx(Label, {
-        className: `${styles.shipping} engage__product__header__shipping`,
-        price: shipping.price,
-        currency: shipping.currency
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_SHIPPING_BEFORE
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_SHIPPING,
+      children: /*#__PURE__*/_jsx(PlaceholderLabel, {
+        className: classes.placeholder,
+        ready: shipping !== null,
+        children: shipping && typeof shipping.price !== 'undefined' && shipping.price !== null && /*#__PURE__*/_jsx(Label, {
+          className: cx(classes.shipping, 'engage__product__header__shipping'),
+          price: shipping.price,
+          currency: shipping.currency
+        })
       })
-    })
-  }), /*#__PURE__*/_jsx(Portal, {
-    name: PRODUCT_SHIPPING_AFTER
-  })]
-});
+    }), /*#__PURE__*/_jsx(Portal, {
+      name: PRODUCT_SHIPPING_AFTER
+    })]
+  });
+};
 Shipping.defaultProps = {
   shipping: null
 };

package/product/components/Header/Shipping/spec.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 import React from 'react';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';

package/product/components/Header/Tiers/components/Tier/index.js

@@ -1,17 +1,30 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import I18n from '@shopgate/pwa-common/components/I18n';
-import styles from "../../style";
+import { I18n } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  tier: {
+    display: 'block',
+    lineHeight: 1.35
+  },
+  price: {
+    fontWeight: 500
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const Tier = ({
   tier,
   price
 }) => {
+  const {
+    classes
+  } = useStyles();
+
   // Skip tier with quantity 1
   if (tier.from <= 1) {
     return null;
@@ -26,13 +39,13 @@ const Tier = ({
     _jsx(I18n.Text, {
       string: i18nKey,
       params: params,
-      className: styles.tier,
+      className: classes.tier,
       role: "text",
       children: /*#__PURE__*/_jsx(I18n.Price, {
         forKey: "price",
         price: tier.unitPrice,
         currency: price.currency,
-        className: styles.price
+        className: classes.price
       })
     }, tier.from)
   );

package/product/components/Header/Tiers/index.js

@@ -1,20 +1,30 @@
-import React, { Fragment, memo } from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import Portal from '@shopgate/pwa-common/components/Portal';
 import { PRODUCT_TIERS, PRODUCT_TIERS_AFTER, PRODUCT_TIERS_BEFORE } from '@shopgate/pwa-common-commerce/product/constants/Portals';
+import { makeStyles } from '@shopgate/engage/styles';
 import Tier from "./components/Tier";
 import connect from "./connector";
-import styles from "./style";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  wrapper: {
+    marginTop: 4,
+    fontSize: '0.875rem'
+  }
+});
 
 /**
  * The Tiers component.
  * @param {Object} props The component props.
  * @return {JSX}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const Tiers = ({
   price
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!(price && price.tiers && price.tiers.length > 0)) {
     return null;
   }
@@ -24,7 +34,7 @@ const Tiers = ({
     }), /*#__PURE__*/_jsx(Portal, {
       name: PRODUCT_TIERS,
       children: /*#__PURE__*/_jsx("div", {
-        className: `${styles.wrapper} engage__product__header__tiers`,
+        className: cx(classes.wrapper, 'engage__product__header__tiers'),
         children: price.tiers.map(tier => /*#__PURE__*/_jsx(Tier, {
           tier: tier,
           price: price

package/product/components/MapPriceHint/index.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import { SurroundPortals, I18n, TimeBoundary } from '@shopgate/engage/components';
 import { isBeta, useWidgetSettings, useWidgetStyles } from '@shopgate/engage/core';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_MAP_PRICE } from '@shopgate/engage/product';
 import { showHint } from "./helpers";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
-const defaultStyle = css({
-  fontSize: '0.75rem'
-}).toString();
+const useStyles = makeStyles()((_, {
+  hintStyle
+}) => ({
+  defaultStyle: {
+    fontSize: '0.75rem'
+  },
+  hintStyle: hintStyle || {}
+}));
 
 /**
  * The Product Map Price Hint component.
@@ -22,6 +26,12 @@ const MapPriceHint = ({
 }) => {
   const styles = useWidgetStyles('@shopgate/engage/product/MapPrice');
   const settings = useWidgetSettings('@shopgate/engage/product/MapPrice');
+  const {
+    classes,
+    cx
+  } = useStyles({
+    hintStyle: styles?.hint
+  });
   if (!settings.showHint || !settings.hint) {
     return null;
   }
@@ -37,7 +47,7 @@ const MapPriceHint = ({
         between
       }) => between && /*#__PURE__*/_jsx(I18n.Text, {
         string: settings.hint,
-        className: classNames('engage__product__map-price-hint', defaultStyle, css(styles.hint).toString())
+        className: cx('engage__product__map-price-hint', cx(classes.defaultStyle, classes.hintStyle))
       })
     })
   });

package/product/components/Media/MediaImage.js

@@ -1,39 +1,57 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import Image from '@shopgate/pwa-common/components/Image';
-import appConfig from '@shopgate/pwa-common/helpers/config';
+import appConfig, { themeShadows } from '@shopgate/pwa-common/helpers/config';
+import { makeStyles } from '@shopgate/engage/styles';
 import { SurroundPortals } from "../../../components";
 import { PORTAL_PRODUCT_IMAGE } from "../../../components/constants";
 import { useWidgetSettings } from "../../../core";
 import { defaultProps, propTypes } from "./props";
 import MediaPlaceholder from "./MediaPlaceholder";
-import { innerShadow } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  innerShadow: {
+    ':after': {
+      display: 'block',
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      boxShadow: themeShadows.productImage,
+      pointerEvents: 'none'
+    }
+  }
+});
 
 /**
  * The featured image component.
  * @returns {JSX.Element}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MediaImage = ({
   url,
   altText,
   className,
   resolutions
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const [placeholder, setPlaceholderEnabled] = useState(!url);
   const {
     showInnerShadow = !appConfig.hideProductImageShadow
   } = useWidgetSettings('@shopgate/engage/product/MediaImage');
   useEffect(() => setPlaceholderEnabled(!url), [url]);
-  const classes = classnames(className, {
-    [innerShadow]: showInnerShadow
+  const mergedClassName = cx(className, {
+    [classes.innerShadow]: showInnerShadow
   });
   if (placeholder) {
     return /*#__PURE__*/_jsx(SurroundPortals, {
       portalName: PORTAL_PRODUCT_IMAGE,
       children: /*#__PURE__*/_jsx(MediaPlaceholder, {
-        className: classes
+        className: mergedClassName
       })
     });
   }
@@ -47,7 +65,7 @@ const MediaImage = ({
       src: url,
       resolutions: resolutions,
       alt: altText,
-      className: classes,
+      className: mergedClassName,
       backgroundColor: "transparent",
       onError: () => setPlaceholderEnabled(true),
       animating: true

package/product/components/Media/MediaPlaceholder.js

@@ -1,26 +1,60 @@
 import React from 'react';
-import classnames from 'classnames';
 import PlaceholderIcon from '@shopgate/pwa-ui-shared/icons/PlaceholderIcon';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
 import { defaultProps, propTypes } from "./props";
-import { placeholderContainer, placeholderContent, placeholderIcon } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const placeholderIconScale = 0.65;
+const useStyles = makeStyles()({
+  placeholderContainer: {
+    position: 'relative',
+    width: '100%',
+    ':before': {
+      display: 'block',
+      content: '""',
+      width: '100%',
+      paddingTop: '100%'
+    }
+  },
+  placeholderContent: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    textAlign: 'center'
+  },
+  placeholderIcon: {
+    position: 'absolute',
+    width: `${placeholderIconScale * 100}% !important`,
+    height: `${placeholderIconScale * 100}% !important`,
+    top: `${(1.0 - placeholderIconScale) * 50}%`,
+    left: `${(1.0 - placeholderIconScale) * 50}%`,
+    color: themeColors.placeholder
+  }
+});
 
 /**
  * The media placeholder component.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MediaPlaceholder = ({
   className
-}) => /*#__PURE__*/_jsx("div", {
-  className: classnames(placeholderContainer, className),
-  children: /*#__PURE__*/_jsx("div", {
-    className: placeholderContent,
-    "data-test-id": "placeHolder",
-    children: /*#__PURE__*/_jsx(PlaceholderIcon, {
-      className: placeholderIcon
+}) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    className: cx(classes.placeholderContainer, className),
+    children: /*#__PURE__*/_jsx("div", {
+      className: classes.placeholderContent,
+      "data-test-id": "placeHolder",
+      children: /*#__PURE__*/_jsx(PlaceholderIcon, {
+        className: classes.placeholderIcon
+      })
     })
-  })
-});
+  });
+};
 MediaPlaceholder.defaultProps = {
   className: defaultProps.className
 };

package/product/components/Media/helpers.d.ts

@@ -0,0 +1,2 @@
+export function buildMediaImageUrl(url: string, params?: Object): string;
+//# sourceMappingURL=helpers.d.ts.map

package/product/components/Media/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../product/components/Media/helpers.js"],"names":[],"mappings":"AAsBO,wCAJI,MAAM,WACN,MAAM,GACJ,MAAM,CAiBlB"}

package/product/components/MediaSlider/components/MediaImage/index.js

@@ -1,28 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
 import { MediaImage as Image } from "../../../Media";
-import { full } from "../../style";
 import { PRODUCT_SLIDER_IMAGE_FORMATS } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  full: {
+    width: '100%',
+    height: '100%',
+    transform: 'translate3d(0, 0, 0)'
+  }
+});
 
 /**
  * The product media video slide component.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const MediaImage = ({
   media,
   onClick
-}) => /*#__PURE__*/_jsx("div", {
-  onClick: onClick,
-  onKeyDown: onClick,
-  role: "button",
-  tabIndex: "0",
-  className: full,
-  children: /*#__PURE__*/_jsx(Image, {
-    url: media.url,
-    altText: media.altText,
-    resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
-  })
-});
+}) => {
+  const {
+    classes
+  } = useStyles();
+  return /*#__PURE__*/_jsx("div", {
+    onClick: onClick,
+    onKeyDown: onClick,
+    role: "button",
+    tabIndex: "0",
+    className: classes.full,
+    children: /*#__PURE__*/_jsx(Image, {
+      url: media.url,
+      altText: media.altText,
+      resolutions: PRODUCT_SLIDER_IMAGE_FORMATS
+    })
+  });
+};
 MediaImage.displayName = 'MediaSliderImage';
 export default MediaImage;