@shopgate/engage 7.30.0-alpha.8 → 7.30.0-beta.1

package/product/components/ProductCard/index.js

@@ -10,6 +10,7 @@ import { getProductImageSettings } from '@shopgate/engage/product/helpers';
 import { PRODUCT_ITEM_DISCOUNT, PRODUCT_ITEM_PRICE } from '@shopgate/engage/category';
 import ProductGridPrice from "../ProductGridPrice";
 import styles from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const location = 'productCard';
 
 /**
@@ -50,7 +51,7 @@ function ProductCard(props) {
     }
     return false;
   }, [hideRating, product, showEmptyRatingStars]);
-  return /*#__PURE__*/React.createElement(Link, {
+  return /*#__PURE__*/_jsxs(Link, {
     className: "engage__product-card",
     href: url || getProductRoute(product.id),
     itemProp: "item",
@@ -59,53 +60,59 @@ function ProductCard(props) {
     tabIndex: 0,
     state: {
       ...meta
-    }
-  }, isBeta() && product.featuredMedia ? /*#__PURE__*/React.createElement(FeaturedMedia, {
-    type: product.featuredMedia.type,
-    url: product.featuredMedia.url,
-    altText: product.featuredMedia.altText
-  }) : /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.featuredImageBaseUrl,
-    resolutions: gridResolutions,
-    alt: product.name,
-    itemProp: "image"
-  }), /*#__PURE__*/React.createElement(ProductBadges, {
-    location: location,
-    productId: product.id
-  }, !!(!hidePrice && product.price.discount) && /*#__PURE__*/React.createElement("div", {
-    className: styles.badgeWrapper
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_ITEM_DISCOUNT,
-    portalProps: {
-      productId: product.id
-    }
-  }, /*#__PURE__*/React.createElement(DiscountBadge, {
-    text: `-${product.price.discount}%`
-  })))), !(hidePrice && hideRating && hideName) && /*#__PURE__*/React.createElement("div", {
-    className: `${styles.details} engage__product-card__information`
-  }, showRatings && /*#__PURE__*/React.createElement(RatingStars, {
-    value: product.rating.average
-  }), /*#__PURE__*/React.createElement(Swatches, {
-    productId: product.id
-  }), !hideName && /*#__PURE__*/React.createElement(ProductName, {
-    name: product.name,
-    className: styles.title,
-    testId: `Productname: ${product.name}`,
-    itemProp: "name",
-    rows: titleRows || 3
-  }), /*#__PURE__*/React.createElement(MapPriceHint, {
-    productId: product.id
-  }), /*#__PURE__*/React.createElement(OrderQuantityHint, {
-    productId: product.id
-  }), !hidePrice && /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_ITEM_PRICE,
-    portalProps: {
+    },
+    children: [isBeta() && product.featuredMedia ? /*#__PURE__*/_jsx(FeaturedMedia, {
+      type: product.featuredMedia.type,
+      url: product.featuredMedia.url,
+      altText: product.featuredMedia.altText
+    }) : /*#__PURE__*/_jsx(ProductImage, {
+      src: product.featuredImageBaseUrl,
+      resolutions: gridResolutions,
+      alt: product.name,
+      itemProp: "image"
+    }), /*#__PURE__*/_jsx(ProductBadges, {
+      location: location,
       productId: product.id,
-      location
-    }
-  }, /*#__PURE__*/React.createElement(ProductGridPrice, {
-    product: product
-  }))));
+      children: !!(!hidePrice && product.price.discount) && /*#__PURE__*/_jsx("div", {
+        className: styles.badgeWrapper,
+        children: /*#__PURE__*/_jsx(SurroundPortals, {
+          portalName: PRODUCT_ITEM_DISCOUNT,
+          portalProps: {
+            productId: product.id
+          },
+          children: /*#__PURE__*/_jsx(DiscountBadge, {
+            text: `-${product.price.discount}%`
+          })
+        })
+      })
+    }), !(hidePrice && hideRating && hideName) && /*#__PURE__*/_jsxs("div", {
+      className: `${styles.details} engage__product-card__information`,
+      children: [showRatings && /*#__PURE__*/_jsx(RatingStars, {
+        value: product.rating.average
+      }), /*#__PURE__*/_jsx(Swatches, {
+        productId: product.id
+      }), !hideName && /*#__PURE__*/_jsx(ProductName, {
+        name: product.name,
+        className: styles.title,
+        testId: `Productname: ${product.name}`,
+        itemProp: "name",
+        rows: titleRows || 3
+      }), /*#__PURE__*/_jsx(MapPriceHint, {
+        productId: product.id
+      }), /*#__PURE__*/_jsx(OrderQuantityHint, {
+        productId: product.id
+      }), !hidePrice && /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: PRODUCT_ITEM_PRICE,
+        portalProps: {
+          productId: product.id,
+          location
+        },
+        children: /*#__PURE__*/_jsx(ProductGridPrice, {
+          product: product
+        })
+      })]
+    })]
+  });
 }
 
 /**

package/product/components/ProductCharacteristics/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import isMatch from 'lodash/isMatch';
@@ -11,23 +12,25 @@ import { isCharacteristicEnabled, getSelectedValue, prepareState, selectCharacte
 /**
  * The ProductCharacteristics component.
  */
-class ProductCharacteristics extends Component {
+import { jsx as _jsx } from "react/jsx-runtime";
+let ProductCharacteristics = /*#__PURE__*/function (_Component) {
   /**
    * @param {Object} props The component props.
    */
-  constructor(_props) {
-    super(_props);
+  function ProductCharacteristics(_props) {
+    var _this;
+    _this = _Component.call(this, _props) || this;
     /**
      * Sets the refs to the characteristics selects.
      * @param {Object} props The props to check against.
      */
-    this.setRefs = props => {
+    _this.setRefs = props => {
       const {
         variants
       } = props;
       if (variants) {
         variants.characteristics.forEach(char => {
-          this.refsStore[char.id] = /*#__PURE__*/React.createRef();
+          _this.refsStore[char.id] = /*#__PURE__*/React.createRef();
         });
       }
     };
@@ -35,23 +38,23 @@ class ProductCharacteristics extends Component {
      * Checks if all selections have been made.
      * @return {boolean}
      */
-    this.checkSelection = () => {
+    _this.checkSelection = () => {
       const {
         characteristics
-      } = this.state;
+      } = _this.state;
       const {
         variants,
         variantId
-      } = this.props;
+      } = _this.props;
       if (!variants) {
         return true;
       }
       const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
       const selected = !!(filteredValues.length === variants.characteristics.length && variantId);
       if (!selected) {
-        const firstUnselected = this.findUnselectedCharacteristic();
+        const firstUnselected = _this.findUnselectedCharacteristic();
         if (firstUnselected) {
-          const ref = this.refsStore[firstUnselected.id];
+          const ref = _this.refsStore[firstUnselected.id];
 
           // Focus the item for screen readers and broadcast a related live message.
           ref.current.focus();
@@ -73,22 +76,22 @@ class ProductCharacteristics extends Component {
               behavior: 'smooth'
             });
           }
-          this.setState({
+          _this.setState({
             highlight: firstUnselected.id
           });
         }
       }
       return selected;
     };
-    this.checkSelectedCharacteristics = () => {
+    _this.checkSelectedCharacteristics = () => {
       const {
         characteristics
-      } = this.state;
+      } = _this.state;
       const {
         variantId,
         variants,
         finishTimeout
-      } = this.props;
+      } = _this.props;
       if (!variants) {
         return;
       }
@@ -104,23 +107,23 @@ class ProductCharacteristics extends Component {
         return;
       }
       setTimeout(() => {
-        this.props.navigate(products[0].id);
+        _this.props.navigate(products[0].id);
       }, finishTimeout);
     };
     /**
      * Stores a selected characteristic into the local state.
      * @param {Object} selection The selected item.
      */
-    this.handleSelection = selection => {
+    _this.handleSelection = selection => {
       const {
         variants,
         setCharacteristics
-      } = this.props;
+      } = _this.props;
       const {
         id,
         value
       } = selection;
-      this.setState(({
+      _this.setState(({
         characteristics
       }) => {
         const state = prepareState(id, value, characteristics, variants.characteristics, variants.products);
@@ -131,7 +134,7 @@ class ProductCharacteristics extends Component {
           },
           highlight: null
         };
-      }, this.checkSelectedCharacteristics);
+      }, _this.checkSelectedCharacteristics);
     };
     /**
      * @param {Object} selections The selections stored in the state.
@@ -142,7 +145,7 @@ class ProductCharacteristics extends Component {
      * @param {boolean} charDisabled Whether the characteristic for the values is disabled
      * @return {Array}
      */
-    this.buildValues = (selections, charId, values, charIndex, selectedValue, charDisabled) => {
+    _this.buildValues = (selections, charId, values, charIndex, selectedValue, charDisabled) => {
       // If this is the first characteristic then all values are selectable.
       if (charIndex === 0) {
         return values.map(value => ({
@@ -153,7 +156,7 @@ class ProductCharacteristics extends Component {
       }
       const {
         variants
-      } = this.props;
+      } = _this.props;
       const subset = {};
       Object.keys(selections).forEach((item, index) => {
         if (index < charIndex) {
@@ -183,31 +186,34 @@ class ProductCharacteristics extends Component {
     /**
      * Resets the highlight state
      */
-    this.resetHighlight = () => {
-      this.setState({
+    _this.resetHighlight = () => {
+      _this.setState({
         highlight: null
       });
     };
-    this.refsStore = {};
+    _this.refsStore = {};
     const _characteristics = selectCharacteristics(_props);
-    this.state = {
+    _this.state = {
       highlight: null,
       characteristics: _characteristics
     };
     _props.setCharacteristics(_characteristics);
-    this.setRefs(_props);
-    _props.conditioner.addConditioner('product-variants', this.checkSelection);
+    _this.setRefs(_props);
+    _props.conditioner.addConditioner('product-variants', _this.checkSelection);
+    return _this;
   }
 
   /** @inheritDoc */
-  componentDidMount() {
+  _inheritsLoose(ProductCharacteristics, _Component);
+  var _proto = ProductCharacteristics.prototype;
+  _proto.componentDidMount = function componentDidMount() {
     this.checkSelectedCharacteristics();
   }
 
   /**
    * @param {Object} nextProps The next component props.
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+   */;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     if (!this.props.variants && nextProps.variants) {
       // Initialize refs and characteristics when the variants prop was updated with a valid value.
       this.setRefs(nextProps);
@@ -223,12 +229,12 @@ class ProductCharacteristics extends Component {
         characteristics: nextProps.characteristics
       });
     }
-  }
+  };
   /**
    * Finds the first unselected characteristic.
    * @return {Object|null}
    */
-  findUnselectedCharacteristic() {
+  _proto.findUnselectedCharacteristic = function findUnselectedCharacteristic() {
     const {
       characteristics
     } = this.state;
@@ -237,11 +243,11 @@ class ProductCharacteristics extends Component {
       return unselected[0];
     }
     return null;
-  }
+  };
   /**
    * @return {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       characteristics
     } = this.state;
@@ -251,29 +257,31 @@ class ProductCharacteristics extends Component {
     if (!variants) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(VariantsContext.Provider, {
-      value: this.state
-    }, variants.characteristics.map((char, index) => {
-      const disabled = !isCharacteristicEnabled(characteristics, index);
-      const selected = getSelectedValue(char.id, characteristics);
-      const values = this.buildValues(characteristics, char.id, char.values, index, selected, disabled);
-      return this.props.render({
-        charRef: this.refsStore[char.id],
-        disabled,
-        highlight: this.state.highlight === char.id,
-        id: char.id,
-        key: char.id,
-        label: char.label,
-        swatch: !!char.swatch,
-        // BETA
-        select: this.handleSelection,
-        selected,
-        values,
-        resetHighlight: this.resetHighlight
-      });
-    }));
-  }
-}
+    return /*#__PURE__*/_jsx(VariantsContext.Provider, {
+      value: this.state,
+      children: variants.characteristics.map((char, index) => {
+        const disabled = !isCharacteristicEnabled(characteristics, index);
+        const selected = getSelectedValue(char.id, characteristics);
+        const values = this.buildValues(characteristics, char.id, char.values, index, selected, disabled);
+        return this.props.render({
+          charRef: this.refsStore[char.id],
+          disabled,
+          highlight: this.state.highlight === char.id,
+          id: char.id,
+          key: char.id,
+          label: char.label,
+          swatch: !!char.swatch,
+          // BETA
+          select: this.handleSelection,
+          selected,
+          values,
+          resetHighlight: this.resetHighlight
+        });
+      })
+    });
+  };
+  return ProductCharacteristics;
+}(Component);
 ProductCharacteristics.defaultProps = {
   finishTimeout: 0,
   variantId: null,

package/product/components/ProductDiscountBadge/index.js

@@ -13,6 +13,7 @@ import connect from "./connector";
  * ProductDiscountBadge
  * @return {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const ProductDiscountBadge = ({
   productId,
   discount
@@ -23,25 +24,28 @@ const ProductDiscountBadge = ({
       style: {}
     }
   } = useWidgetSettings('@shopgate/engage/product/components/ProductDiscountBadge') || {};
-  return /*#__PURE__*/React.createElement(ProductBadges, {
+  return /*#__PURE__*/_jsx(ProductBadges, {
     className: styles.portal,
     location: "productDiscountBadge",
     productId: productId,
     portalProps: {
       ...pdp
-    }
-  }, pdp.show && discount ? /*#__PURE__*/React.createElement("div", {
-    className: `${styles.container} ${css(pdp.style)} theme__product__product-discount`
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: PRODUCT_DISCOUNT,
-    portalProps: {
-      productId,
-      discount
-    }
-  }, /*#__PURE__*/React.createElement(DiscountBadge, {
-    className: styles.badge,
-    text: `-${discount}%`
-  }))) : null);
+    },
+    children: pdp.show && discount ? /*#__PURE__*/_jsx("div", {
+      className: `${styles.container} ${css(pdp.style)} theme__product__product-discount`,
+      children: /*#__PURE__*/_jsx(SurroundPortals, {
+        portalName: PRODUCT_DISCOUNT,
+        portalProps: {
+          productId,
+          discount
+        },
+        children: /*#__PURE__*/_jsx(DiscountBadge, {
+          className: styles.badge,
+          text: `-${discount}%`
+        })
+      })
+    }) : null
+  });
 };
 ProductDiscountBadge.defaultProps = {
   discount: null

package/product/components/ProductDiscountBadge/spec.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { useWidgetSettings } from '@shopgate/engage/core/hooks/useWidgetSettings';
 import { mockedProduct1, mockedStateWithDiscount, mockedStateWithoutDiscount } from "./mock";
 import ProductDiscountBadge from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/components');
 jest.mock('@shopgate/engage/core/hooks/useWidgetSettings', () => ({
   useWidgetSettings: jest.fn()
@@ -29,11 +30,12 @@ describe('<ProductDiscountBadge />', () => {
    */
   const createComponent = mockedState => {
     const store = mockedStore(mockedState);
-    return mount(/*#__PURE__*/React.createElement(Provider, {
-      store: store
-    }, /*#__PURE__*/React.createElement(ProductDiscountBadge, {
-      productId: mockedProduct1.productId
-    })));
+    return mount(/*#__PURE__*/_jsx(Provider, {
+      store: store,
+      children: /*#__PURE__*/_jsx(ProductDiscountBadge, {
+        productId: mockedProduct1.productId
+      })
+    }));
   };
   it('should render without discount', () => {
     const wrapper = createComponent(mockedStateWithoutDiscount);

package/product/components/ProductFilters/index.js

@@ -6,6 +6,7 @@ import { GlobalLocationSwitcher, FulfillmentSlotSwitcher } from '@shopgate/engag
 import { themeConfig } from '@shopgate/engage';
 import FilterBar from '@shopgate/engage/product/components/FilterBar';
 import { filters } from "./style";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const {
   variables: {
     scroll: {
@@ -46,29 +47,32 @@ const ProductFilters = ({
     valueMatch: 220,
     valueMiss: offset
   });
-  return /*#__PURE__*/React.createElement(ScrollHeader, {
+  return /*#__PURE__*/_jsx(ScrollHeader, {
     className: filters,
     hideOnScroll: hideOnScroll,
-    scrollOffset: responsiveOffset
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: "filter-bar.content",
-    portalProps: {
-      categoryId,
-      hasSubcategories,
-      searchPhrase,
-      showFilters
-    }
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    appAlways: true,
-    breakpoint: "<=xs"
-  }, /*#__PURE__*/React.createElement(GlobalLocationSwitcher, {
-    renderBar: true
-  }), /*#__PURE__*/React.createElement(FulfillmentSlotSwitcher, {
-    renderBar: true
-  })), showFilters && /*#__PURE__*/React.createElement(FilterBar, {
-    categoryId: categoryId,
-    filters: state.filters
-  })));
+    scrollOffset: responsiveOffset,
+    children: /*#__PURE__*/_jsxs(SurroundPortals, {
+      portalName: "filter-bar.content",
+      portalProps: {
+        categoryId,
+        hasSubcategories,
+        searchPhrase,
+        showFilters
+      },
+      children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
+        appAlways: true,
+        breakpoint: "<=xs",
+        children: [/*#__PURE__*/_jsx(GlobalLocationSwitcher, {
+          renderBar: true
+        }), /*#__PURE__*/_jsx(FulfillmentSlotSwitcher, {
+          renderBar: true
+        })]
+      }), showFilters && /*#__PURE__*/_jsx(FilterBar, {
+        categoryId: categoryId,
+        filters: state.filters
+      })]
+    })
+  });
 };
 ProductFilters.defaultProps = {
   showFilters: false,

package/product/components/ProductGrid/components/Item/components/ItemDetails/index.js

@@ -7,6 +7,7 @@ import { StockInfoLists } from '@shopgate/engage/locations/components';
 import { makeStyles } from '@shopgate/engage/styles';
 import ItemName from "../ItemName";
 import ItemPrice from "../ItemPrice";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyles = makeStyles()({
   root: {
     lineHeight: 1.2,
@@ -45,37 +46,40 @@ const ItemDetails = ({
   if (display && !display.name && !display.price && !display.reviews) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Link, {
+  return /*#__PURE__*/_jsxs(Link, {
     className: cx(classes.root, 'theme__product-grid__item__item-details'),
     tabIndex: 0,
     href: getProductRoute(productId),
     state: {
       title: product.name,
       ...productListTypeMeta
-    }
-  }, /*#__PURE__*/React.createElement(Swatches, {
-    productId: productId
-  }), /*#__PURE__*/React.createElement(ItemName, {
-    display: display,
-    productId: productId,
-    name: name
-  }), /*#__PURE__*/React.createElement(MapPriceHint, {
-    productId: productId
-  }), /*#__PURE__*/React.createElement(OrderQuantityHint, {
-    productId: productId,
-    className: classes.quantityHint
-  }), /*#__PURE__*/React.createElement(EffectivityDates, {
-    productId: productId
-  }), hasNewServices && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Availability, {
-    state: !stock || stock.orderable ? AVAILABILITY_STATE_OK : AVAILABILITY_STATE_ALERT,
-    text: i18n.text('product.available.not'),
-    showWhenAvailable: false
-  }), /*#__PURE__*/React.createElement(StockInfoLists, {
-    product: product
-  })), /*#__PURE__*/React.createElement(ItemPrice, {
-    product: product,
-    display: display
-  }));
+    },
+    children: [/*#__PURE__*/_jsx(Swatches, {
+      productId: productId
+    }), /*#__PURE__*/_jsx(ItemName, {
+      display: display,
+      productId: productId,
+      name: name
+    }), /*#__PURE__*/_jsx(MapPriceHint, {
+      productId: productId
+    }), /*#__PURE__*/_jsx(OrderQuantityHint, {
+      productId: productId,
+      className: classes.quantityHint
+    }), /*#__PURE__*/_jsx(EffectivityDates, {
+      productId: productId
+    }), hasNewServices && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Availability, {
+        state: !stock || stock.orderable ? AVAILABILITY_STATE_OK : AVAILABILITY_STATE_ALERT,
+        text: i18n.text('product.available.not'),
+        showWhenAvailable: false
+      }), /*#__PURE__*/_jsx(StockInfoLists, {
+        product: product
+      })]
+    }), /*#__PURE__*/_jsx(ItemPrice, {
+      product: product,
+      display: display
+    })]
+  });
 };
 ItemDetails.defaultProps = {
   display: null,

package/product/components/ProductGrid/components/Item/components/ItemDetails/spec.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { shallow } from 'enzyme';
 import { hasNewServices } from '@shopgate/engage/core/helpers';
 import { Availability } from '@shopgate/engage/components';
 import { StockInfoLists } from '@shopgate/engage/locations/components';
 import ItemDetails from "./index";
+import { jsx as _jsx } from "react/jsx-runtime";
 jest.mock('@shopgate/engage/product', () => ({
   MapPriceHint: () => null,
   OrderQuantityHint: () => null,
@@ -47,22 +47,27 @@ describe('<ItemDetails />', () => {
     reviews: false
   };
   it('should render with minimal props', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemDetails, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemDetails, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Availability).exists()).toBe(false);
     expect(wrapper.find(StockInfoLists).exists()).toBe(false);
   });
   it('should render additional components with new services', () => {
     hasNewServices.mockReturnValueOnce(true);
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemDetails, props));
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemDetails, {
+      ...props
+    }));
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.find(Availability).exists()).toBe(true);
     expect(wrapper.find(StockInfoLists).exists()).toBe(true);
   });
   it('should not render with display props set', () => {
-    const wrapper = shallow(/*#__PURE__*/React.createElement(ItemDetails, _extends({}, props, {
+    const wrapper = shallow(/*#__PURE__*/_jsx(ItemDetails, {
+      ...props,
       display: display
-    })));
+    }));
     expect(wrapper).toBeEmptyRender();
   });
 });