@shopgate/engage 7.30.0-alpha.1 → 7.30.0-alpha.11

package/product/product.types.js

@@ -0,0 +1,38 @@
+/**
+ * @typedef {Object} ProductCharacteristic
+ * @property {string|number} id
+ * @property {string} label
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} ProductTierPrice
+ * @property {number|null} from
+ * @property {number|null} to
+ * @property {number} unitPrice
+ */
+
+/**
+ * @typedef {Object} ProductPrice
+ * @property {string} currency
+ * @property {string} info
+ * @property {number} unitPrice
+ * @property {number} [unitPriceStriked]
+ * @property {number} [unitPriceMin]
+ * @property {number} [unitPriceMax]
+ * @property {number} unitPriceNet
+ * @property {number} unitPriceWithTax
+ * @property {number} taxAmount
+ * @property {number} taxPercent
+ * @property {number} [msrp]
+ * @property {ProductTierPrice[]} tiers
+ * @property {number} [discount]
+ */
+
+/**
+ * @typedef {Object} Product
+ * @property {string} id
+ * @property {string} name
+ * @property {ProductCharacteristic[]|null} [characteristics]
+ * @property {ProductPrice|null} [price]
+ */

package/product/providers/Product/connector.js

@@ -1,5 +1,16 @@
-import{connect}from'react-redux';import provideProduct from'@shopgate/pwa-common-commerce/product/action-creators/provideProduct';import{getProduct}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
+import { connect } from 'react-redux';
+import provideProduct from '@shopgate/pwa-common-commerce/product/action-creators/provideProduct';
+import { getProduct } from '@shopgate/pwa-common-commerce/product/selectors/product';
+
+/**
  * @param {Object} state .
  * @param {Object} props .
  * @return {Object}
- */var mapStateToProps=function mapStateToProps(state,props){return{product:getProduct(state,props)};};var mapDispatchToProps={provideProduct:provideProduct};export default connect(mapStateToProps,mapDispatchToProps);
+ */
+const mapStateToProps = (state, props) => ({
+  product: getProduct(state, props)
+});
+const mapDispatchToProps = {
+  provideProduct
+};
+export default connect(mapStateToProps, mapDispatchToProps);

package/product/providers/Product/index.js

@@ -1,4 +1,35 @@
-function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{useEffect}from'react';import PropTypes from'prop-types';import connect from"./connector";/**
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import connect from "./connector";
+
+/**
  * The ProductProvider component.
  * @return {JSX}
- */var ProductProvider=function ProductProvider(_ref){var children=_ref.children,productId=_ref.productId,provideProduct=_ref.provideProduct,product=_ref.product;useEffect(function(){if(!product){provideProduct(productId);}},[provideProduct,product,productId]);var props={productId:productId,product:product};if(typeof children==='function'){return children(props);}return React.cloneElement(children,_extends({},props,{},children.props));};ProductProvider.defaultProps={product:null};export default connect(ProductProvider);
+ */
+const ProductProvider = ({
+  children,
+  productId,
+  provideProduct,
+  product
+}) => {
+  useEffect(() => {
+    if (!product) {
+      provideProduct(productId);
+    }
+  }, [provideProduct, product, productId]);
+  const props = {
+    productId,
+    product
+  };
+  if (typeof children === 'function') {
+    return children(props);
+  }
+  return /*#__PURE__*/React.cloneElement(children, {
+    ...props,
+    ...children.props
+  });
+};
+ProductProvider.defaultProps = {
+  product: null
+};
+export default connect(ProductProvider);

package/product/providers/ProductListEntry/context.js

@@ -1,4 +1,9 @@
-import React from'react';/* eslint-disable import/named, no-unused-vars */import{ProductListTypeContextType,ProductListTypeContextSubType}from"../ProductListType/context";/* eslint-enable import/named, no-unused-vars */ /**
+import React from 'react';
+/* eslint-disable import/named, no-unused-vars */
+import { ProductListTypeContextType, ProductListTypeContextSubType } from "../ProductListType/context";
+/* eslint-enable import/named, no-unused-vars */
+
+/**
  * @typedef ProductListEntryContextValue
  * @property {string} productId A product identifier.
  * @property {ProductListTypeContextType} [productListType=null] Type of the active
@@ -6,4 +11,10 @@ import React from'react';/* eslint-disable import/named, no-unused-vars */import
  * @property {ProductListTypeContextSubType} [productListSubType=null] Optional sub type of the
  * active ProductListTypeContext. Depending on its usage it can make a statement about in which
  * context the product list is used e.g. "widgets".
- */export{};export default React.createContext({productListType:null,productListSubType:null,productId:null});
+ */
+export {};
+export default /*#__PURE__*/React.createContext({
+  productListType: null,
+  productListSubType: null,
+  productId: null
+});

package/product/providers/ProductListEntry/index.js

@@ -1,4 +1,9 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import useProductListType from"../../hooks/useProductListType";import Context from"./context";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import useProductListType from "../../hooks/useProductListType";
+import Context from "./context";
+
+/**
  * The ProductListEntryProvider is usually wrapped around components that render products and
  * provides basic information about them.
  *
@@ -8,4 +13,27 @@ import React,{useMemo}from'react';import PropTypes from'prop-types';import usePr
  * @param {Object} param The component props
  * @param {string} param.productId Product identifier.
  * @returns {JSX}
- */function ProductListEntryProvider(_ref){var children=_ref.children,productId=_ref.productId;var _useProductListType=useProductListType(),type=_useProductListType.type,subType=_useProductListType.subType;var value=useMemo(function(){return{productListType:type,productListSubType:subType,productId:productId};},[productId,subType,type]);return React.createElement(Context.Provider,{value:value},children);}ProductListEntryProvider.defaultProps={children:null};export default ProductListEntryProvider;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function ProductListEntryProvider({
+  children,
+  productId
+}) {
+  const {
+    type,
+    subType
+  } = useProductListType();
+  const value = useMemo(() => ({
+    productListType: type,
+    productListSubType: subType,
+    productId
+  }), [productId, subType, type]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
+}
+ProductListEntryProvider.defaultProps = {
+  children: null
+};
+export default ProductListEntryProvider;

package/product/providers/ProductListType/context.js

@@ -1,8 +1,19 @@
-import React from'react';/* eslint-disable max-len */ /**
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
  * @typedef {"productSlider"|"productGrid"|"productList"|"favoritesList"|"cart"|"liveshopping"|"pdp"|"productGallery"} ProductListTypeContextType
- */export{};/**
+ */
+export {};
+
+/**
  * @typedef {"widgets"|"category"} ProductListTypeContextSubType
- */export{};/* eslint-enable max-len */ /**
+ */
+export {};
+
+/* eslint-enable max-len */
+
+/**
  * @typedef ProductListTypeContextValue
  * @property {ProductListTypeContextType} [type=null] Type of the active ProductListTypeContext
  * e.g. "productSlider" or "productGrid".
@@ -10,4 +21,10 @@ import React from'react';/* eslint-disable max-len */ /**
  * ProductListTypeContext. Depending on its usage it can make a statement about in which context
  * the product list is used e.g. "widgets".
  * @property {Object} [meta=null] Optional meta information that can be used by child components
- */export{};export default React.createContext({type:null,subType:null,meta:null});
+ */
+export {};
+export default /*#__PURE__*/React.createContext({
+  type: null,
+  subType: null,
+  meta: null
+});

package/product/providers/ProductListType/index.js

@@ -1,4 +1,8 @@
-import React,{useMemo}from'react';import PropTypes from'prop-types';import Context from"./context";/**
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import Context from "./context";
+
+/**
  * The ProductListTypeProvider is usually wrapped around components that render product lists.
  * It provides information about the type / purpose of those product lists which can be used
  * by child components or extensions to determine how they are supposed to render their content.
@@ -12,4 +16,27 @@ import React,{useMemo}from'react';import PropTypes from'prop-types';import Conte
  * make a statement about in which context the product list is used e.g. "widgets".
  * @param {Object} param.meta Optional meta information that can be used by child components
  * @returns {JSX}
- */function ProductListTypeProvider(_ref){var children=_ref.children,type=_ref.type,subType=_ref.subType,meta=_ref.meta;var value=useMemo(function(){return{type:type,subType:subType,meta:meta};},[meta,subType,type]);return React.createElement(Context.Provider,{value:value},children);}ProductListTypeProvider.defaultProps={children:null,subType:null,meta:null};export default ProductListTypeProvider;
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function ProductListTypeProvider({
+  children,
+  type,
+  subType,
+  meta
+}) {
+  const value = useMemo(() => ({
+    type,
+    subType,
+    meta
+  }), [meta, subType, type]);
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: value,
+    children: children
+  });
+}
+ProductListTypeProvider.defaultProps = {
+  children: null,
+  subType: null,
+  meta: null
+};
+export default ProductListTypeProvider;

package/product/providers/index.js

@@ -1 +1,3 @@
-export{default as ProductProvider}from"./Product";export{default as ProductListTypeProvider}from"./ProductListType";export{default as ProductListEntryProvider}from"./ProductListEntry";
+export { default as ProductProvider } from "./Product";
+export { default as ProductListTypeProvider } from "./ProductListType";
+export { default as ProductListEntryProvider } from "./ProductListEntry";

package/product/selectors/helpers/filterProperties.js

@@ -1,9 +1,33 @@
-import appConfig from'@shopgate/pwa-common/helpers/config';import{PROPERTIES_FILTER_BLACKLIST,PROPERTIES_FILTER_WHITELIST}from'@shopgate/pwa-common-commerce/product/constants';/**
+import appConfig from '@shopgate/pwa-common/helpers/config';
+import { PROPERTIES_FILTER_BLACKLIST, PROPERTIES_FILTER_WHITELIST } from '@shopgate/pwa-common-commerce/product/constants';
+
+/**
  * Reads the setting for product properties whitelisting/blacklisting
  * and filters the properties accordingly.
  * @param {Array} properties Array of properties with label and value attributes.
  * @return {Array} Filtered properties.
- */export function filterProperties(properties){// If there is no setting, we won't filter
-if(!appConfig||!appConfig.productPropertiesFilter){return properties;}return properties.filter(function(_ref){var label=_ref.label,type=_ref.type;var inList=appConfig.productPropertiesFilter.properties.indexOf(label)!==-1;if(appConfig.productPropertiesFilter.type===PROPERTIES_FILTER_WHITELIST){// Show item if allowed in whitelist
-return inList;}if(appConfig.productPropertiesFilter.type===PROPERTIES_FILTER_BLACKLIST){// Hide item if not allowed in blacklist
-return!inList;}if(type&&type!=='simple'){return false;}return true;});}
+ */
+export function filterProperties(properties) {
+  // If there is no setting, we won't filter
+  if (!appConfig || !appConfig.productPropertiesFilter) {
+    return properties;
+  }
+  return properties.filter(({
+    label,
+    type
+  }) => {
+    const inList = appConfig.productPropertiesFilter.properties.indexOf(label) !== -1;
+    if (appConfig.productPropertiesFilter.type === PROPERTIES_FILTER_WHITELIST) {
+      // Show item if allowed in whitelist
+      return inList;
+    }
+    if (appConfig.productPropertiesFilter.type === PROPERTIES_FILTER_BLACKLIST) {
+      // Hide item if not allowed in blacklist
+      return !inList;
+    }
+    if (type && type !== 'simple') {
+      return false;
+    }
+    return true;
+  });
+}

package/product/selectors/helpers/index.js

@@ -1 +1,2 @@
-export{filterProperties}from"./filterProperties";export{wrapMemoizedSelector}from"./wrapMemoizedSelector";
+export { filterProperties } from "./filterProperties";
+export { wrapMemoizedSelector } from "./wrapMemoizedSelector";

package/product/selectors/helpers/wrapMemoizedSelector.js

@@ -2,4 +2,11 @@
  * Memoization test
  * @param {Function} selector selector
  * @returns {Function}
- */export var wrapMemoizedSelector=function wrapMemoizedSelector(selector){return function(){var result=selector.apply(void 0,arguments);if(selector.apply(void 0,arguments)!==result){throw new Error('Memoization check failed.');}return result;};};
+ */
+export const wrapMemoizedSelector = selector => (...args) => {
+  const result = selector.apply(void 0, args);
+  if (selector.apply(void 0, args) !== result) {
+    throw new Error('Memoization check failed.');
+  }
+  return result;
+};

package/product/selectors/media.js

@@ -1,13 +1,30 @@
-import{createSelector}from'reselect';import{getProductId,getProductState}from'@shopgate/pwa-common-commerce/product/selectors/product';/**
+import { createSelector } from 'reselect';
+import { getProductId, getProductState } from '@shopgate/pwa-common-commerce/product/selectors/product';
+
+/**
  * Retrieves the product media state.
  * @param {Object} state The application state.
  * @returns {Object} The product options state.
- */export var getProductMediaState=createSelector(getProductState,function(state){return state.mediaByProductId;});/**
+ */
+export const getProductMediaState = createSelector(getProductState, state => state.mediaByProductId);
+/**
  * Creates a selector that retrieves product media for a passed product id.
  * @returns {Function}
- */export var makeGetProductMedia=function makeGetProductMedia(){return(/**
-   * Retrieves the current products media.
-   * @param {Object} state The application state.
-   * @param {Object} props The component props.
-   * @returns {Object[]|null} The product media collection.
-   */createSelector(getProductId,function(state,props){return props.types;},getProductMediaState,function(productId,types,productMediaState){var productMedia=productMediaState[productId];if(!productMedia||productMedia.isFetching){return null;}if(!types||!productMedia.media){return productMedia.media;}return productMedia.media.filter(function(media){return types.includes(media.type);});}));};
+ */
+export const makeGetProductMedia = () =>
+/**
+ * Retrieves the current products media.
+ * @param {Object} state The application state.
+ * @param {Object} props The component props.
+ * @returns {Object[]|null} The product media collection.
+ */
+createSelector(getProductId, (state, props) => props.types, getProductMediaState, (productId, types, productMediaState) => {
+  const productMedia = productMediaState[productId];
+  if (!productMedia || productMedia.isFetching) {
+    return null;
+  }
+  if (!types || !productMedia.media) {
+    return productMedia.media;
+  }
+  return productMedia.media.filter(media => types.includes(media.type));
+});

package/product/selectors/price.js

@@ -1,8 +1,27 @@
-import{createSelector}from'reselect';import{getProductPriceData}from'@shopgate/pwa-common-commerce/product';/**
+import { createSelector } from 'reselect';
+import { getProductPriceData } from '@shopgate/pwa-common-commerce/product';
+
+/**
  * Creates the selector to get a product's price.
  * @returns {Function}
- */export function makeGetProductPriceData(){return createSelector(getProductPriceData,function(price){return price;});}/**
+ */
+export function makeGetProductPriceData() {
+  return createSelector(getProductPriceData, price => price);
+}
+
+/**
  * Creates the selector to get a product's map pricing.
  * @returns {Function}
- */export function makeGetProductMapPrice(){return createSelector(getProductPriceData,function(price){if(!price){return null;}if(!price.mapPricing){return null;}// mapPricing can be array or pojo. force it to pojo
-return[].concat(price.mapPricing)[0];});}
+ */
+export function makeGetProductMapPrice() {
+  return createSelector(getProductPriceData, price => {
+    if (!price) {
+      return null;
+    }
+    if (!price.mapPricing) {
+      return null;
+    }
+    // mapPricing can be array or pojo. force it to pojo
+    return [].concat(price.mapPricing)[0];
+  });
+}