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

package/product/components/Rating/index.js

@@ -5,12 +5,20 @@ import { RatingStars, SurroundPortals } from '@shopgate/engage/components';
 import { PRODUCT_RATING } from '@shopgate/engage/product/constants';
 import RatingCount from '@shopgate/engage/reviews/components/Reviews/components/RatingCount';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
-import { container } from "./style";
+import { makeStyles } from '@shopgate/engage/styles';
 import connect from "./connector";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   hasReviews
 } = appConfig;
+const useStyles = makeStyles()(theme => ({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: '12px',
+    marginBottom: theme.spacing(1)
+  }
+}));
 
 /**
  * Scrolls page to reviews excerpt.
@@ -31,6 +39,9 @@ const scrollToRating = () => {
 const Rating = ({
   rating
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     showEmptyRatingStars = false
   } = useWidgetSettings('@shopgate/engage/rating');
@@ -46,7 +57,7 @@ const Rating = ({
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_RATING,
     children: showRatings && /*#__PURE__*/_jsxs("div", {
-      className: container,
+      className: classes.container,
       onClick: scrollToRating,
       role: "presentation",
       children: [/*#__PURE__*/_jsx(RatingStars, {

package/product/components/RelationsSlider/RelationsSheet.js

@@ -1,21 +1,39 @@
-import React, { useState, useCallback, Fragment, memo } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 import PropTypes from 'prop-types';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { useWidgetSettings, useTheme } from "../../../core";
 import { SheetDrawer, I18n, Button } from "../../../components";
 import { WIDGET_ID } from "./constants";
-import { showMore, sheet } from "./style";
 import connect from "./RelationsSheet.connector";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  variables
+} = themeConfig;
+const useStyles = makeStyles()(theme => ({
+  showMore: {
+    position: 'absolute !important',
+    top: theme.spacing(-0.5),
+    right: 0,
+    padding: `${theme.spacing(0.5, 0)} !important`
+  },
+  sheet: {
+    maxHeight: `calc(100vh - ${variables.navigator.height}px)`
+  }
+}));
 
 /**
  * Shows a Sheet Drawer with all related products.
  * @returns {JSX}
  */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const RelationsSheet = /*#__PURE__*/memo(({
   products: {
     products
   }
 }) => {
+  const {
+    classes
+  } = useStyles();
   const [show, setShow] = useState(false);
   const {
     headline
@@ -34,7 +52,7 @@ const RelationsSheet = /*#__PURE__*/memo(({
     children: [/*#__PURE__*/_jsx(Button, {
       onClick: handleOpen,
       flat: true,
-      className: showMore,
+      className: classes.showMore,
       children: /*#__PURE__*/_jsx(I18n.Text, {
         string: "product.relations.showMore"
       })
@@ -43,7 +61,7 @@ const RelationsSheet = /*#__PURE__*/memo(({
       title: headline,
       onClose: handleClose,
       children: /*#__PURE__*/_jsx("div", {
-        className: sheet,
+        className: classes.sheet,
         children: /*#__PURE__*/_jsx(ProductGrid, {
           products: products,
           infiniteLoad: false

package/product/components/RelationsSlider/RelationsSliderContent.js

@@ -1,18 +1,42 @@
 import React, { useEffect, memo } from 'react';
 import PropTypes from 'prop-types';
 import { Swiper, Card } from '@shopgate/engage/components';
+import { makeStyles } from '@shopgate/engage/styles';
 import ProductCard from "../ProductCard";
 import RelationsSheet from "./RelationsSheet";
 import { useWidgetSettings, useCurrentProduct } from "../../../core";
 import connect from "./RelationsSlider.connector";
 import { WIDGET_ID } from "./constants";
-import * as styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useStyles = makeStyles()(theme => ({
+  container: {
+    position: 'relative'
+  },
+  headline: {
+    fontSize: '1rem',
+    fontWeight: 500,
+    padding: theme.spacing(0, 2, 1),
+    margin: 0
+  },
+  sliderContainer: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    position: 'relative',
+    padding: theme.spacing(1, 0, 2)
+  },
+  sliderItem: {
+    paddingBottom: 10
+  },
+  card: {
+    height: '100%',
+    margin: theme.spacing(0, 1)
+  }
+}));
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RelationsSliderContent = /*#__PURE__*/memo(({
   products: {
     products,
@@ -20,6 +44,9 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
   },
   getRelations
 }) => {
+  const {
+    classes
+  } = useStyles();
   const {
     headline,
     hidePrice,
@@ -39,9 +66,9 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    className: styles.container,
+    className: classes.container,
     children: [!!headline && /*#__PURE__*/_jsx("h3", {
-      className: styles.headline,
+      className: classes.headline,
       children: headline
     }), !!showMoreButton && productsCount > 10 && /*#__PURE__*/_jsx(RelationsSheet, {
       limit: 100,
@@ -50,12 +77,12 @@ const RelationsSliderContent = /*#__PURE__*/memo(({
     }), /*#__PURE__*/_jsx(Swiper, {
       slidesPerView: slidesPerView,
       classNames: {
-        container: styles.sliderContainer
+        container: classes.sliderContainer
       },
       children: products.map(product => /*#__PURE__*/_jsx(Swiper.Item, {
-        className: styles.sliderItem,
+        className: classes.sliderItem,
         children: /*#__PURE__*/_jsx(Card, {
-          className: styles.card,
+          className: classes.card,
           children: /*#__PURE__*/_jsx(ProductCard, {
             product: product,
             hidePrice: hidePrice,

package/product/components/Swatch/Swatch.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
+import { css } from '@shopgate/engage/styles';
 import { useWidgetStyles } from "../../../core";
 import SwatchContent from "./SwatchContent";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -19,9 +19,9 @@ const Swatch = ({
     return null;
   }
   const classNames = {
-    swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
-    item: styles && styles.item ? css(styles.item).toString() : null,
-    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
+    swatch: styles && styles.swatch ? css(styles.swatch) : null,
+    item: styles && styles.item ? css(styles.item) : null,
+    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected) : null
   };
   return /*#__PURE__*/_jsx(SwatchContent, {
     swatch: swatch,

package/product/components/Swatch/SwatchContent.js

@@ -1,22 +1,53 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
-import cls from 'classnames';
+import { makeStyles } from '@shopgate/engage/styles';
 import { PRODUCT_SWATCH } from '@shopgate/pwa-common-commerce/product/constants/Portals';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
-import { swatchClass, itemClass, itemSelectedClass } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  colors
+} = themeConfig;
+const useStyles = makeStyles()(() => ({
+  swatch: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(12px, 1fr))',
+    gridGap: '2px',
+    marginBottom: '0.2rem'
+  },
+  item: {
+    minWidth: '12px',
+    width: '12px',
+    maxWidth: '12px',
+    minHeight: '12px',
+    height: '12px',
+    maxHeight: '12px',
+    borderRadius: '50%',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: colors.shade4,
+    backgroundSize: 'cover'
+  },
+  itemSelected: {
+    borderColor: 'var(--color-secondary)'
+  }
+}));
 
 /**
  * The swatch content component.
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const SwatchContent = ({
   swatch,
   classNames,
   onClick
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   if (!swatch) {
     return null;
   }
@@ -26,15 +57,12 @@ const SwatchContent = ({
       swatch
     },
     children: /*#__PURE__*/_jsx("ul", {
-      className: cls(swatchClass, {
-        [classNames.swatch]: !!classNames.swatch
-      }),
+      className: cx(classes.swatch, classNames.swatch),
       children: swatch.values.map(value => /*#__PURE__*/_jsx("li", {
         "aria-hidden": true,
         onClick: () => onClick(value.id),
-        className: cls(itemClass, {
-          [classNames.item]: !!classNames.item,
-          [itemSelectedClass]: !!value.selected,
+        className: cx(classes.item, classNames.item, {
+          [classes.itemSelected]: !!value.selected,
           [classNames.itemSelected]: !!value.selected
         }),
         style: {

package/product/components/Swatch/VariantSwatch.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
-import { css } from 'glamor';
+import { css } from '@shopgate/engage/styles';
 import { useWidgetStyles } from "../../../core";
 import SwatchContent from "./SwatchContent";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,9 +21,9 @@ const VariantSwatch = ({
     return null;
   }
   const classNames = {
-    swatch: styles && styles.swatch ? css(styles.swatch).toString() : null,
-    item: styles && styles.item ? css(styles.item).toString() : null,
-    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected).toString() : null
+    swatch: styles && styles.swatch ? css(styles.swatch) : null,
+    item: styles && styles.item ? css(styles.item) : null,
+    itemSelected: styles && styles.itemSelected ? css(styles.itemSelected) : null
   };
   return /*#__PURE__*/_jsx(SwatchContent, {
     swatch: swatch,

package/product/components/Swatches/Swatches.js

@@ -1,13 +1,24 @@
+import "core-js/modules/es.array.includes.js";
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
 import { PRODUCT_SWATCHES } from '@shopgate/pwa-common-commerce/product/constants/Portals';
+import { makeStyles } from '@shopgate/engage/styles';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
 import { SurroundPortals } from "../../../components";
 import { isBeta, useWidgetSettings } from "../../../core";
 import { Swatch } from "../Swatch";
-import { swatchesClass } from "./style";
 import connect from "./connector";
 import { jsx as _jsx } from "react/jsx-runtime";
 const WIDGET_ID = '@shopgate/engage/product/Swatches';
+const {
+  typography
+} = themeConfig;
+const useStyles = makeStyles()({
+  swatches: {
+    marginTop: '8px',
+    lineHeight: typography.lineHeight
+  }
+});
 
 /**
  * Renders only product swatches from a list of characteristics.
@@ -18,6 +29,9 @@ const Swatches = ({
   productId,
   characteristics
 }) => {
+  const {
+    classes
+  } = useStyles();
   const settings = useWidgetSettings(WIDGET_ID);
   if (!isBeta()) {
     return null;
@@ -44,7 +58,7 @@ const Swatches = ({
       characteristics
     },
     children: /*#__PURE__*/_jsx("div", {
-      className: swatchesClass,
+      className: classes.swatches,
       children: swatches.map(swatch => /*#__PURE__*/_jsx(Swatch, {
         swatch: swatch
       }, `${productId}.${swatch.id}`))

package/product/components/UnitQuantityPicker/CartUnitQuantityPicker.js

@@ -1,14 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import noop from 'lodash/noop';
+import { makeStyles } from '@shopgate/engage/styles';
 import UnitQuantityPicker from "./UnitQuantityPicker";
-import { small, big } from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const useStyles = makeStyles()({
+  small: {
+    width: 120
+  },
+  big: {
+    width: 170
+  }
+});
 
 /**
  * @param {Object} props The component props.
  * @returns {JSX}
  */
-import { jsx as _jsx } from "react/jsx-runtime";
 const CartUnitQuantityPicker = ({
   unit,
   value,
@@ -16,10 +24,13 @@ const CartUnitQuantityPicker = ({
   classNames,
   hasCatchWeight
 }) => {
+  const {
+    classes
+  } = useStyles();
   const hasUnitWithDecimals = unit && hasCatchWeight || false;
   const {
-    withDecimals,
-    withoutDecimals
+    withDecimals = classes.big,
+    withoutDecimals = classes.small
   } = classNames;
   return /*#__PURE__*/_jsx(UnitQuantityPicker, {
     className: !hasUnitWithDecimals ? withDecimals : withoutDecimals,
@@ -34,10 +45,7 @@ const CartUnitQuantityPicker = ({
 CartUnitQuantityPicker.defaultProps = {
   unit: null,
   onChange: noop,
-  classNames: {
-    withDecimals: big,
-    withoutDecimals: small
-  },
+  classNames: {},
   hasCatchWeight: false
 };
 export default CartUnitQuantityPicker;

package/product/components/UnitQuantityPicker/ProductUnitQuantityPicker.js

@@ -1,30 +1,30 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { css } from 'glamor';
-import classNames from 'classnames';
 import { I18n, SurroundPortals } from '@shopgate/engage/components';
-import { themeConfig } from '@shopgate/engage';
 import { PRODUCT_UNIT_QUANTITY_PICKER, ProductContext } from '@shopgate/engage/product';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { withCurrentProduct } from '@shopgate/engage/core/hocs';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks';
+import { makeStyles } from '@shopgate/engage/styles';
 import UnitQuantityPicker from "./UnitQuantityPicker";
 import connect from "./ProductUnitQuantityPicker.connector";
-import { small, big } from "./styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  variables
-} = themeConfig;
-const styles = {
-  root: css({
-    padding: variables.gap.big
-  }),
-  title: css({
+const useStyles = makeStyles()(theme => ({
+  root: {
+    padding: theme.spacing(2)
+  },
+  title: {
     fontSize: '1rem',
     fontWeight: 500,
     marginBottom: '0.5rem'
-  }).toString()
-};
+  },
+  pickerSmall: {
+    width: 120
+  },
+  pickerBig: {
+    width: 170
+  }
+}));
 
 /**
  * Renders the quantity picker enriched with current product data.
@@ -34,7 +34,7 @@ const styles = {
 const ProductUnitQuantityPicker = ({
   children,
   className,
-  classes,
+  classes: customClasses,
   product,
   disabled,
   stockInfo,
@@ -42,6 +42,10 @@ const ProductUnitQuantityPicker = ({
   quantityLabel,
   hideHeadline
 }) => {
+  const {
+    classes,
+    cx
+  } = useStyles();
   const {
     show = hasNewServices()
   } = useWidgetSettings('@shopgate/engage/product/components/UnitQuantityPicker');
@@ -77,17 +81,15 @@ const ProductUnitQuantityPicker = ({
   return /*#__PURE__*/_jsx(SurroundPortals, {
     portalName: PRODUCT_UNIT_QUANTITY_PICKER,
     children: /*#__PURE__*/_jsxs("div", {
-      className: classNames(styles.root, className),
+      className: cx(classes.root, className),
       children: [/*#__PURE__*/_jsxs("div", {
         children: [!hideHeadline && /*#__PURE__*/_jsx("div", {
-          className: styles.title,
+          className: classes.title,
           children: /*#__PURE__*/_jsx(I18n.Text, {
             string: "product.sections.quantity"
           })
-        }), /*#__PURE__*/_jsx(UnitQuantityPicker
-        // eslint-disable-next-line no-nested-ternary
-        , {
-          className: classes?.picker ? classes.picker : hasUnitWithDecimals ? big : small,
+        }), /*#__PURE__*/_jsx(UnitQuantityPicker, {
+          className: customClasses?.picker || (hasUnitWithDecimals ? classes.pickerBig : classes.pickerSmall),
           unit: hasUnitWithDecimals ? unit : null,
           maxDecimals: hasUnitWithDecimals ? 2 : 0,
           incrementStep: hasUnitWithDecimals ? 0.25 : 1,

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts

@@ -0,0 +1,75 @@
+export default UnitQuantityPicker;
+/**
+ * A Quantity Picker with unit support.
+ * @returns {JSX.Element}
+ */
+declare function UnitQuantityPicker({ className, onChange, value, allowDecrement, allowIncrement, allowZero, decrementStep, incrementStep, maxDecimals, unit, disabled, minValue, maxValue, size, toggleTabBarOnFocus, quantityLabel, }: {
+    className: any;
+    onChange: any;
+    value: any;
+    allowDecrement: any;
+    allowIncrement: any;
+    allowZero: any;
+    decrementStep: any;
+    incrementStep: any;
+    maxDecimals: any;
+    unit: any;
+    disabled: any;
+    minValue: any;
+    maxValue: any;
+    size: any;
+    toggleTabBarOnFocus: any;
+    quantityLabel: any;
+}): JSX.Element;
+declare namespace UnitQuantityPicker {
+    namespace propTypes {
+        let onChange: PropTypes.Validator<(...args: any[]) => any>;
+        let value: PropTypes.Validator<number>;
+        let allowDecrement: PropTypes.Requireable<boolean>;
+        let allowIncrement: PropTypes.Requireable<boolean>;
+        let allowZero: PropTypes.Requireable<boolean>;
+        let className: PropTypes.Requireable<string>;
+        let decrementStep: PropTypes.Requireable<number>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let incrementStep: PropTypes.Requireable<number>;
+        let maxDecimals: PropTypes.Requireable<number>;
+        let maxValue: PropTypes.Requireable<number>;
+        let minValue: PropTypes.Requireable<number>;
+        let quantityLabel: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
+        let size: PropTypes.Requireable<string>;
+        let toggleTabBarOnFocus: PropTypes.Requireable<boolean>;
+        let unit: PropTypes.Requireable<string>;
+    }
+    namespace defaultProps {
+        let className_1: string;
+        export { className_1 as className };
+        let allowZero_1: boolean;
+        export { allowZero_1 as allowZero };
+        let allowIncrement_1: boolean;
+        export { allowIncrement_1 as allowIncrement };
+        let allowDecrement_1: boolean;
+        export { allowDecrement_1 as allowDecrement };
+        let incrementStep_1: number;
+        export { incrementStep_1 as incrementStep };
+        let decrementStep_1: number;
+        export { decrementStep_1 as decrementStep };
+        let maxDecimals_1: number;
+        export { maxDecimals_1 as maxDecimals };
+        let unit_1: null;
+        export { unit_1 as unit };
+        let disabled_1: boolean;
+        export { disabled_1 as disabled };
+        let minValue_1: null;
+        export { minValue_1 as minValue };
+        let size_1: string;
+        export { size_1 as size };
+        let maxValue_1: null;
+        export { maxValue_1 as maxValue };
+        let quantityLabel_1: null;
+        export { quantityLabel_1 as quantityLabel };
+        let toggleTabBarOnFocus_1: boolean;
+        export { toggleTabBarOnFocus_1 as toggleTabBarOnFocus };
+    }
+}
+import PropTypes from 'prop-types';
+//# sourceMappingURL=UnitQuantityPicker.d.ts.map

package/product/components/UnitQuantityPicker/UnitQuantityPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitQuantityPicker.d.ts","sourceRoot":"","sources":["../../../../product/components/UnitQuantityPicker/UnitQuantityPicker.jsx"],"names":[],"mappings":";AA6GA;;;GAGG;AACH;;;;;;;;;;;;;;;;;IAFa,GAAG,CAAC,OAAO,CAmNvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA/TqB,YAAY"}