@shopgate/engage 7.30.0-alpha.7 → 7.30.0-alpha.9

package/favorites/components/Item/Item.js

@@ -1,14 +1,365 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{useCallback,useMemo,useLayoutEffect,useState,useEffect,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{MODAL_VARIANT_SELECT}from'@shopgate/pwa-ui-shared/Dialog/constants';import{ProductImage,ITEM_PATH,PriceInfo,isBaseProduct as isBaseProductSelector,isProductOrderable,hasProductVariants,ProductListEntryProvider}from'@shopgate/engage/product';import{bin2hex,showModal as showModalAction,historyPush as historyPushAction,getThemeSettings,i18n}from'@shopgate/engage/core';import{hasNewServices}from'@shopgate/engage/core/helpers';import{Link,TextLink,SurroundPortals}from'@shopgate/engage/components';import{makeIsRopeProductOrderable,getPreferredLocation,StockInfoLists}from'@shopgate/engage/locations';import{FAVORITES_PRODUCT_NAME,FAVORITES_PRODUCT_PRICE,FAVORITES_ADD_TO_CART,FAVORITES_AVAILABILITY_TEXT}from'@shopgate/engage/favorites';import{broadcastLiveMessage}from'@shopgate/engage/a11y';import{responsiveMediaQuery}from'@shopgate/engage/styles';import Price from'@shopgate/pwa-ui-shared/Price';import PriceStriked from'@shopgate/pwa-ui-shared/PriceStriked';import AddToCart from'@shopgate/pwa-ui-shared/AddToCartButton';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{updateFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{openFavoritesCommentDialog}from'@shopgate/pwa-common-commerce/favorites/action-creators';import AvailableText from'@shopgate/pwa-ui-shared/Availability';import classNames from'classnames';import Remove from"../RemoveButton";import ItemCharacteristics from"./ItemCharacteristics";import ItemQuantity from"./ItemQuantity";import ItemNotes from"./ItemNotes";import{FAVORITES_LIST_ITEM,FAVORITES_NOTES,FAVORITES_QUANTITY}from"../../constants/Portals";var variables=themeConfig.variables;/**
+import React, { useCallback, useMemo, useLayoutEffect, useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { css } from 'glamor';
+import { MODAL_VARIANT_SELECT } from '@shopgate/pwa-ui-shared/Dialog/constants';
+import { ProductImage, ITEM_PATH, PriceInfo, isBaseProduct as isBaseProductSelector, isProductOrderable, hasProductVariants, ProductListEntryProvider } from '@shopgate/engage/product';
+import { bin2hex, showModal as showModalAction, historyPush as historyPushAction, getThemeSettings, i18n } from '@shopgate/engage/core';
+import { hasNewServices } from '@shopgate/engage/core/helpers';
+import { Link, TextLink, SurroundPortals } from '@shopgate/engage/components';
+import { makeIsRopeProductOrderable, getPreferredLocation, StockInfoLists } from '@shopgate/engage/locations';
+import { FAVORITES_PRODUCT_NAME, FAVORITES_PRODUCT_PRICE, FAVORITES_ADD_TO_CART, FAVORITES_AVAILABILITY_TEXT } from '@shopgate/engage/favorites';
+import { broadcastLiveMessage } from '@shopgate/engage/a11y';
+import { responsiveMediaQuery } from '@shopgate/engage/styles';
+import Price from '@shopgate/pwa-ui-shared/Price';
+import PriceStriked from '@shopgate/pwa-ui-shared/PriceStriked';
+import AddToCart from '@shopgate/pwa-ui-shared/AddToCartButton';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+import { updateFavorite } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
+import { openFavoritesCommentDialog } from '@shopgate/pwa-common-commerce/favorites/action-creators';
+import AvailableText from '@shopgate/pwa-ui-shared/Availability';
+import classNames from 'classnames';
+import Remove from "../RemoveButton";
+import ItemCharacteristics from "./ItemCharacteristics";
+import ItemQuantity from "./ItemQuantity";
+import ItemNotes from "./ItemNotes";
+import { FAVORITES_LIST_ITEM, FAVORITES_NOTES, FAVORITES_QUANTITY } from "../../constants/Portals";
+const {
+  variables
+} = themeConfig;
+
+/**
  * @return {Function} The extended component props.
- */var makeMapStateToProps=function makeMapStateToProps(){var isRopeProductOrderable=makeIsRopeProductOrderable(function(state,props){var _getPreferredLocation;return(_getPreferredLocation=getPreferredLocation(state,props))===null||_getPreferredLocation===void 0?void 0:_getPreferredLocation.code;},function(state,props){return props.variantId||props.productId||null;});return function(state,props){return{isBaseProduct:isBaseProductSelector(state,props),hasVariants:hasProductVariants(state,props),isOrderable:isProductOrderable(state,props),isRopeProductOrderable:isRopeProductOrderable(state,props)};};};/**
+ */
+const makeMapStateToProps = () => {
+  const isRopeProductOrderable = makeIsRopeProductOrderable((state, props) => getPreferredLocation(state, props)?.code, (state, props) => props.variantId || props.productId || null);
+  return (state, props) => ({
+    isBaseProduct: isBaseProductSelector(state, props),
+    hasVariants: hasProductVariants(state, props),
+    isOrderable: isProductOrderable(state, props),
+    isRopeProductOrderable: isRopeProductOrderable(state, props)
+  });
+};
+
+/**
  * @param {Function} dispatch Dispatch.
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{showModal:function showModal(){return dispatch(showModalAction.apply(void 0,arguments));},historyPush:function historyPush(){return dispatch(historyPushAction.apply(void 0,arguments));},updateFavoriteItem:function updateFavoriteItem(productId,listId,quantity,notes){dispatch(updateFavorite(productId,listId,quantity,notes));},openCommentDialog:function openCommentDialog(productId,listId){return dispatch(openFavoritesCommentDialog(productId,listId));}};};var styles={root:css({display:'flex',position:'relative','&:not(:last-child)':{marginBottom:16}}).toString(),imageContainer:css(_defineProperty(_defineProperty(_defineProperty({flex:0.4,marginRight:18},responsiveMediaQuery('>=xs',{appAlways:true}),{maxWidth:120,minWidth:80}),responsiveMediaQuery('>=md',{webOnly:true}),{maxWidth:120,minWidth:80}),responsiveMediaQuery('>=md',{webOnly:true}),{width:120,flex:'none'})).toString(),infoContainer:css({flex:1,display:'flex',flexDirection:'column',flexWrap:'wrap',gap:8}).toString(),infoContainerRow:css({flexDirection:'row',display:'flex',justifyContent:'space-between'}).toString(),quantityContainer:css({flexDirection:'row',display:'flex',alignItems:'center',flexWrap:'wrap',gap:16}).toString(),priceContainer:css({minWidth:100}).toString(),priceContainerInner:css({display:'inline-block',textAlign:'right'}),price:css({justifyContent:'flex-end'}).toString(),priceInfo:css({wordBreak:'break-word',fontSize:'0.875rem',lineHeight:'0.875rem',color:'var(--color-text-low-emphasis)',padding:"".concat(variables.gap.xsmall,"px 0")}).toString(),titleWrapper:css({display:'flex',flexDirection:'column',gap:8}).toString(),titleContainer:css({marginRight:10,flex:1}).toString(),title:css({fontSize:17,fontWeight:600}).toString(),removeContainer:css({display:'flex',flexShrink:0,alignItems:'flex-start'})};/**
+ */
+const mapDispatchToProps = dispatch => ({
+  showModal: (...args) => dispatch(showModalAction(...args)),
+  historyPush: (...args) => dispatch(historyPushAction(...args)),
+  updateFavoriteItem: (productId, listId, quantity, notes) => {
+    dispatch(updateFavorite(productId, listId, quantity, notes));
+  },
+  openCommentDialog: (productId, listId) => dispatch(openFavoritesCommentDialog(productId, listId))
+});
+const styles = {
+  root: css({
+    display: 'flex',
+    position: 'relative',
+    '&:not(:last-child)': {
+      marginBottom: 16
+    }
+  }).toString(),
+  imageContainer: css({
+    flex: 0.4,
+    marginRight: 18,
+    [responsiveMediaQuery('>=xs', {
+      appAlways: true
+    })]: {
+      maxWidth: 120,
+      minWidth: 80
+    },
+    [responsiveMediaQuery('>=md', {
+      webOnly: true
+    })]: {
+      maxWidth: 120,
+      minWidth: 80
+    },
+    [responsiveMediaQuery('>=md', {
+      webOnly: true
+    })]: {
+      width: 120,
+      flex: 'none'
+    }
+  }).toString(),
+  infoContainer: css({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    gap: 8
+  }).toString(),
+  infoContainerRow: css({
+    flexDirection: 'row',
+    display: 'flex',
+    justifyContent: 'space-between'
+  }).toString(),
+  quantityContainer: css({
+    flexDirection: 'row',
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: 16
+  }).toString(),
+  priceContainer: css({
+    minWidth: 100
+  }).toString(),
+  priceContainerInner: css({
+    display: 'inline-block',
+    textAlign: 'right'
+  }),
+  price: css({
+    justifyContent: 'flex-end'
+  }).toString(),
+  priceInfo: css({
+    wordBreak: 'break-word',
+    fontSize: '0.875rem',
+    lineHeight: '0.875rem',
+    color: 'var(--color-text-low-emphasis)',
+    padding: `${variables.gap.xsmall}px 0`
+  }).toString(),
+  titleWrapper: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8
+  }).toString(),
+  titleContainer: css({
+    marginRight: 10,
+    flex: 1
+  }).toString(),
+  title: css({
+    fontSize: 17,
+    fontWeight: 600
+  }).toString(),
+  removeContainer: css({
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'flex-start'
+  })
+};
+
+/**
  * Favorite Item component
  * @return {JSX.Element}
- */var FavoriteItem=function FavoriteItem(_ref){var _product$price,_product$price2,_product$price3;var listId=_ref.listId,product=_ref.product,notes=_ref.notes,quantity=_ref.quantity,remove=_ref.remove,addToCart=_ref.addToCart,isBaseProduct=_ref.isBaseProduct,isOrderable=_ref.isOrderable,isRopeProductOrderable=_ref.isRopeProductOrderable,hasVariants=_ref.hasVariants,showModal=_ref.showModal,historyPush=_ref.historyPush,updateFavoriteItem=_ref.updateFavoriteItem,openCommentDialog=_ref.openCommentDialog;var _ref2=getThemeSettings('AppImages')||{},gridResolutions=_ref2.ListImage;var _useState=useState(!isOrderable&&!hasVariants),_useState2=_slicedToArray(_useState,2),isDisabled=_useState2[0],setIsDisabled=_useState2[1];var currency=((_product$price=product.price)===null||_product$price===void 0?void 0:_product$price.currency)||'EUR';var defaultPrice=((_product$price2=product.price)===null||_product$price2===void 0?void 0:_product$price2.unitPrice)||0;var specialPrice=(_product$price3=product.price)===null||_product$price3===void 0?void 0:_product$price3.unitPriceStriked;var hasStrikePrice=typeof specialPrice==='number'&&specialPrice>defaultPrice;var characteristics=(product===null||product===void 0?void 0:product.characteristics)||[];var productLink="".concat(ITEM_PATH,"/").concat(bin2hex(product.id));var notesButtonRef=useRef();var _useState3=useState(quantity),_useState4=_slicedToArray(_useState3,2),internalQuantity=_useState4[0],setInternalQuantity=_useState4[1];useEffect(function(){setInternalQuantity(quantity);},[quantity]);useLayoutEffect(function(){setIsDisabled(!isOrderable&&!hasVariants);},[hasVariants,isOrderable]);var handleOpenComment=useCallback(function(e){e.preventDefault();e.stopPropagation();openCommentDialog(product.id,listId);},[listId,openCommentDialog,product.id]);var handleAddToCart=useCallback(function(e){e.preventDefault();e.stopPropagation();if(isBaseProduct&&hasVariants){// Called for a parent product. User needs to confirm the navigation to the PDP
-showModal({title:null,type:MODAL_VARIANT_SELECT,message:'favorites.modal.message',confirm:'favorites.modal.confirm',dismiss:'common.cancel',params:{productId:product.id}});return false;}if(hasNewServices()&&!isRopeProductOrderable){// Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
-historyPush({pathname:productLink});return false;}broadcastLiveMessage('product.adding_item',{params:{count:1}});return addToCart(e);},[addToCart,hasVariants,historyPush,isBaseProduct,isRopeProductOrderable,product.id,productLink,showModal]);var commonPortalProps=useMemo(function(){var availability=product.availability,id=product.id,name=product.name;return{availability:availability,characteristics:characteristics,id:id,name:name,price:defaultPrice,listId:listId};},[characteristics,defaultPrice,listId,product]);var ctaPortalProps=useMemo(function(){return{isLoading:false,noShadow:false,listId:listId,isBaseProduct:isBaseProduct,isDisabled:isDisabled,productId:product.id,handleRemoveFromCart:remove,handleAddToCart:handleAddToCart};},[handleAddToCart,isBaseProduct,isDisabled,listId,product.id,remove]);var handleChangeQuantity=useCallback(function(newQuantity){// Do nothing when quantity didn't change
-if(newQuantity===quantity)return;updateFavoriteItem(product.id,listId,newQuantity,notes);},[listId,notes,product.id,quantity,updateFavoriteItem]);var handleDeleteComment=useCallback(function(event){event.preventDefault();event.stopPropagation();updateFavoriteItem(product.id,listId,quantity,'');setTimeout(function(){if(notesButtonRef===null||notesButtonRef===void 0?void 0:notesButtonRef.current){// Focus the add button after item deletion to improve a11y
-notesButtonRef.current.focus();}broadcastLiveMessage('favorites.comments.removed');},300);},[listId,product.id,quantity,updateFavoriteItem]);return React.createElement(ProductListEntryProvider,{productId:product.id},React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ITEM,portalProps:product},React.createElement("div",{className:classNames(styles.root,'engage__favorites__item')},React.createElement(Link,{className:classNames(styles.imageContainer,'engage__favorites__item__image-container'),component:"div",href:productLink,"aria-hidden":true},React.createElement(ProductImage,{className:classNames('engage__favorites__item__image'),src:product.featuredImageBaseUrl,resolutions:gridResolutions})),React.createElement("div",{className:classNames(styles.infoContainer,'engage__favorites__item__info-container')},React.createElement("div",{className:classNames(styles.infoContainerRow)},React.createElement("div",{className:styles.titleWrapper},React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_NAME,portalProps:commonPortalProps},React.createElement(TextLink,{href:productLink,tag:"span",className:classNames(styles.titleContainer,'engage__favorites__item__title-container')},React.createElement("span",{className:styles.title// eslint-disable-next-line react/no-danger
-,dangerouslySetInnerHTML:{__html:"".concat(product.name)}})))),React.createElement("div",{className:styles.removeContainer},React.createElement(Remove,{onClick:remove}))),React.createElement(ItemCharacteristics,{characteristics:characteristics}),!hasNewServices()?React.createElement(SurroundPortals,{portalName:FAVORITES_AVAILABILITY_TEXT,portalProps:commonPortalProps},React.createElement(AvailableText,{text:commonPortalProps.availability.text,state:commonPortalProps.availability.state,showWhenAvailable:true,className:styles.availability})):React.createElement(StockInfoLists,{product:product}),React.createElement("div",{className:styles.infoContainerRow},React.createElement("div",{className:styles.quantityContainer},React.createElement(SurroundPortals,{portalName:FAVORITES_QUANTITY,portalProps:commonPortalProps},React.createElement(ItemQuantity,{quantity:internalQuantity,onChange:handleChangeQuantity})),React.createElement(SurroundPortals,{portalName:FAVORITES_PRODUCT_PRICE,portalProps:commonPortalProps},React.createElement("div",{className:styles.priceContainer},React.createElement("div",{className:styles.priceContainerInner},hasStrikePrice?React.createElement(PriceStriked,{value:specialPrice,currency:currency}):null,React.createElement(Price,{currency:currency,discounted:hasStrikePrice,unitPrice:defaultPrice,className:styles.price})),React.createElement(PriceInfo,{product:product,currency:currency,className:styles.priceInfo})))),React.createElement(SurroundPortals,{portalName:FAVORITES_ADD_TO_CART,portalProps:ctaPortalProps},React.createElement(AddToCart,{onClick:handleAddToCart,isLoading:false,isDisabled:isDisabled,"aria-label":i18n.text('product.add_to_cart')}))),React.createElement(SurroundPortals,{portalName:FAVORITES_NOTES,portalProps:commonPortalProps},React.createElement(ItemNotes,{notes:notes,onClickDeleteComment:handleDeleteComment,onClickOpenComment:handleOpenComment,notesButtonRef:notesButtonRef}))))));};FavoriteItem.defaultProps={isBaseProduct:true,isOrderable:true,isRopeProductOrderable:true,hasVariants:false,notes:undefined,quantity:1};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteItem);
+ */
+const FavoriteItem = ({
+  listId,
+  product,
+  notes,
+  quantity,
+  remove,
+  addToCart,
+  isBaseProduct,
+  isOrderable,
+  isRopeProductOrderable,
+  hasVariants,
+  showModal,
+  historyPush,
+  updateFavoriteItem,
+  openCommentDialog
+}) => {
+  const {
+    ListImage: gridResolutions
+  } = getThemeSettings('AppImages') || {};
+  const [isDisabled, setIsDisabled] = useState(!isOrderable && !hasVariants);
+  const currency = product.price?.currency || 'EUR';
+  const defaultPrice = product.price?.unitPrice || 0;
+  const specialPrice = product.price?.unitPriceStriked;
+  const hasStrikePrice = typeof specialPrice === 'number' && specialPrice > defaultPrice;
+  const characteristics = product?.characteristics || [];
+  const productLink = `${ITEM_PATH}/${bin2hex(product.id)}`;
+  const notesButtonRef = useRef();
+  const [internalQuantity, setInternalQuantity] = useState(quantity);
+  useEffect(() => {
+    setInternalQuantity(quantity);
+  }, [quantity]);
+  useLayoutEffect(() => {
+    setIsDisabled(!isOrderable && !hasVariants);
+  }, [hasVariants, isOrderable]);
+  const handleOpenComment = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    openCommentDialog(product.id, listId);
+  }, [listId, openCommentDialog, product.id]);
+  const handleAddToCart = useCallback(e => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (isBaseProduct && hasVariants) {
+      // Called for a parent product. User needs to confirm the navigation to the PDP
+      showModal({
+        title: null,
+        type: MODAL_VARIANT_SELECT,
+        message: 'favorites.modal.message',
+        confirm: 'favorites.modal.confirm',
+        dismiss: 'common.cancel',
+        params: {
+          productId: product.id
+        }
+      });
+      return false;
+    }
+    if (hasNewServices() && !isRopeProductOrderable) {
+      // Product is not orderable for ROPE. So users need to do some corrections. Just redirect.
+      historyPush({
+        pathname: productLink
+      });
+      return false;
+    }
+    broadcastLiveMessage('product.adding_item', {
+      params: {
+        count: 1
+      }
+    });
+    return addToCart(e);
+  }, [addToCart, hasVariants, historyPush, isBaseProduct, isRopeProductOrderable, product.id, productLink, showModal]);
+  const commonPortalProps = useMemo(() => {
+    const {
+      availability,
+      id,
+      name
+    } = product;
+    return {
+      availability,
+      characteristics,
+      id,
+      name,
+      price: defaultPrice,
+      listId
+    };
+  }, [characteristics, defaultPrice, listId, product]);
+  const ctaPortalProps = useMemo(() => ({
+    isLoading: false,
+    noShadow: false,
+    listId,
+    isBaseProduct,
+    isDisabled,
+    productId: product.id,
+    handleRemoveFromCart: remove,
+    handleAddToCart
+  }), [handleAddToCart, isBaseProduct, isDisabled, listId, product.id, remove]);
+  const handleChangeQuantity = useCallback(newQuantity => {
+    // Do nothing when quantity didn't change
+    if (newQuantity === quantity) return;
+    updateFavoriteItem(product.id, listId, newQuantity, notes);
+  }, [listId, notes, product.id, quantity, updateFavoriteItem]);
+  const handleDeleteComment = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    updateFavoriteItem(product.id, listId, quantity, '');
+    setTimeout(() => {
+      if (notesButtonRef?.current) {
+        // Focus the add button after item deletion to improve a11y
+        notesButtonRef.current.focus();
+      }
+      broadcastLiveMessage('favorites.comments.removed');
+    }, 300);
+  }, [listId, product.id, quantity, updateFavoriteItem]);
+  return /*#__PURE__*/React.createElement(ProductListEntryProvider, {
+    productId: product.id
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_LIST_ITEM,
+    portalProps: product
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.root, 'engage__favorites__item')
+  }, /*#__PURE__*/React.createElement(Link, {
+    className: classNames(styles.imageContainer, 'engage__favorites__item__image-container'),
+    component: "div",
+    href: productLink,
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement(ProductImage, {
+    className: classNames('engage__favorites__item__image'),
+    src: product.featuredImageBaseUrl,
+    resolutions: gridResolutions
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.infoContainer, 'engage__favorites__item__info-container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.infoContainerRow)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.titleWrapper
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_PRODUCT_NAME,
+    portalProps: commonPortalProps
+  }, /*#__PURE__*/React.createElement(TextLink, {
+    href: productLink,
+    tag: "span",
+    className: classNames(styles.titleContainer, 'engage__favorites__item__title-container')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.title
+    // eslint-disable-next-line react/no-danger
+    ,
+    dangerouslySetInnerHTML: {
+      __html: `${product.name}`
+    }
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: styles.removeContainer
+  }, /*#__PURE__*/React.createElement(Remove, {
+    onClick: remove
+  }))), /*#__PURE__*/React.createElement(ItemCharacteristics, {
+    characteristics: characteristics
+  }), !hasNewServices() ? /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_AVAILABILITY_TEXT,
+    portalProps: commonPortalProps
+  }, /*#__PURE__*/React.createElement(AvailableText, {
+    text: commonPortalProps.availability.text,
+    state: commonPortalProps.availability.state,
+    showWhenAvailable: true,
+    className: styles.availability
+  })) : /*#__PURE__*/React.createElement(StockInfoLists, {
+    product: product
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.infoContainerRow
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.quantityContainer
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_QUANTITY,
+    portalProps: commonPortalProps
+  }, /*#__PURE__*/React.createElement(ItemQuantity, {
+    quantity: internalQuantity,
+    onChange: handleChangeQuantity
+  })), /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_PRODUCT_PRICE,
+    portalProps: commonPortalProps
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.priceContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.priceContainerInner
+  }, hasStrikePrice ? /*#__PURE__*/React.createElement(PriceStriked, {
+    value: specialPrice,
+    currency: currency
+  }) : null, /*#__PURE__*/React.createElement(Price, {
+    currency: currency,
+    discounted: hasStrikePrice,
+    unitPrice: defaultPrice,
+    className: styles.price
+  })), /*#__PURE__*/React.createElement(PriceInfo, {
+    product: product,
+    currency: currency,
+    className: styles.priceInfo
+  })))), /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_ADD_TO_CART,
+    portalProps: ctaPortalProps
+  }, /*#__PURE__*/React.createElement(AddToCart, {
+    onClick: handleAddToCart,
+    isLoading: false,
+    isDisabled: isDisabled,
+    "aria-label": i18n.text('product.add_to_cart')
+  }))), /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: FAVORITES_NOTES,
+    portalProps: commonPortalProps
+  }, /*#__PURE__*/React.createElement(ItemNotes, {
+    notes: notes,
+    onClickDeleteComment: handleDeleteComment,
+    onClickOpenComment: handleOpenComment,
+    notesButtonRef: notesButtonRef
+  }))))));
+};
+FavoriteItem.defaultProps = {
+  isBaseProduct: true,
+  isOrderable: true,
+  isRopeProductOrderable: true,
+  hasVariants: false,
+  notes: undefined,
+  quantity: 1
+};
+export default connect(makeMapStateToProps, mapDispatchToProps)(FavoriteItem);

package/favorites/components/Item/ItemCharacteristics.js

@@ -1,4 +1,33 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';var styles={property:css({fontSize:14,color:'var(--color-text-medium-emphasis)',fontWeight:400})};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+const styles = {
+  property: css({
+    fontSize: 14,
+    color: 'var(--color-text-medium-emphasis)',
+    fontWeight: 400
+  })
+};
+
+/**
  * @param {Object} props The component props
  * @returns {JSX}
- */var ItemCharacteristics=function ItemCharacteristics(_ref){var characteristics=_ref.characteristics;if(!characteristics||characteristics.length===0){return null;}return React.createElement("ul",null,characteristics.map(function(_ref2){var label=_ref2.label,value=_ref2.value;return React.createElement("li",{key:"".concat(label,"-").concat(value),className:styles.property},label,': ',value);}));};ItemCharacteristics.defaultProps={characteristics:null};export default ItemCharacteristics;
+ */
+const ItemCharacteristics = ({
+  characteristics
+}) => {
+  if (!characteristics || characteristics.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("ul", null, characteristics.map(({
+    label,
+    value
+  }) => /*#__PURE__*/React.createElement("li", {
+    key: `${label}-${value}`,
+    className: styles.property
+  }, label, ': ', value)));
+};
+ItemCharacteristics.defaultProps = {
+  characteristics: null
+};
+export default ItemCharacteristics;

package/favorites/components/Item/ItemNotes.js

@@ -1,7 +1,92 @@
-import React from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import{i18n}from'@shopgate/engage/core';import{getWishlistItemNotesEnabled}from"../../../core/selectors/shopSettings";var styles={root:css({display:'flex',flexWrap:'wrap',alignItems:'center'}),addCommentButton:css({fontSize:17,color:'var(--color-secondary)',fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis',paddingLeft:0,paddingRight:0,textAlign:'left'}),comment:css({fontSize:17,color:'var(--color-text-high-emphasis)',fontWeight:500,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}),notes:css({paddingRight:4,fontStyle:'italic'}),buttons:css({whiteSpace:'nowrap'})};/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { connect } from 'react-redux';
+import { i18n } from '@shopgate/engage/core';
+import { getWishlistItemNotesEnabled } from "../../../core/selectors/shopSettings";
+const styles = {
+  root: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center'
+  }),
+  addCommentButton: css({
+    fontSize: 17,
+    color: 'var(--color-secondary)',
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    paddingLeft: 0,
+    paddingRight: 0,
+    textAlign: 'left'
+  }),
+  comment: css({
+    fontSize: 17,
+    color: 'var(--color-text-high-emphasis)',
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }),
+  notes: css({
+    paddingRight: 4,
+    fontStyle: 'italic'
+  }),
+  buttons: css({
+    whiteSpace: 'nowrap'
+  })
+};
+
+/**
  * @return {Function} The extended component props.
- */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{wishlistItemNotesEnabled:getWishlistItemNotesEnabled(state)};};};/**
+ */
+const makeMapStateToProps = () => state => ({
+  wishlistItemNotesEnabled: getWishlistItemNotesEnabled(state)
+});
+
+/**
  *
  * @param {Object} props The component props
  * @returns {JSX}
- */var ItemNotes=function ItemNotes(_ref){var wishlistItemNotesEnabled=_ref.wishlistItemNotesEnabled,notes=_ref.notes,onClickOpenComment=_ref.onClickOpenComment,onClickDeleteComment=_ref.onClickDeleteComment,notesButtonRef=_ref.notesButtonRef;if(!wishlistItemNotesEnabled){return null;}/* eslint-disable jsx-a11y/aria-role */return React.createElement("div",{className:styles.root},notes&&React.createElement("span",{role:"text"},React.createElement("span",{className:styles.comment},"".concat(i18n.text('favorites.comments.notes'),": ")),React.createElement("span",{className:styles.notes},"\"".concat(notes,"\""))),React.createElement("span",{className:styles.buttons},React.createElement("button",{type:"button",onClick:onClickOpenComment,className:styles.addCommentButton,ref:notesButtonRef},notes?i18n.text('favorites.comments.edit'):i18n.text('favorites.comments.add')),notes&&React.createElement(React.Fragment,null,React.createElement("span",{"aria-hidden":true}," | "),React.createElement("button",{type:"button",onClick:onClickDeleteComment,className:styles.addCommentButton},i18n.text('favorites.comments.delete')))));/* eslint-enable jsx-a11y/aria-role */};ItemNotes.defaultProps={notes:null,notesButtonRef:null};export default connect(makeMapStateToProps)(ItemNotes);
+ */
+const ItemNotes = ({
+  wishlistItemNotesEnabled,
+  notes,
+  onClickOpenComment,
+  onClickDeleteComment,
+  notesButtonRef
+}) => {
+  if (!wishlistItemNotesEnabled) {
+    return null;
+  }
+  /* eslint-disable jsx-a11y/aria-role */
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.root
+  }, notes && /*#__PURE__*/React.createElement("span", {
+    role: "text"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.comment
+  }, `${i18n.text('favorites.comments.notes')}: `), /*#__PURE__*/React.createElement("span", {
+    className: styles.notes
+  }, `"${notes}"`)), /*#__PURE__*/React.createElement("span", {
+    className: styles.buttons
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClickOpenComment,
+    className: styles.addCommentButton,
+    ref: notesButtonRef
+  }, notes ? i18n.text('favorites.comments.edit') : i18n.text('favorites.comments.add')), notes && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true
+  }, " | "), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onClickDeleteComment,
+    className: styles.addCommentButton
+  }, i18n.text('favorites.comments.delete')))));
+  /* eslint-enable jsx-a11y/aria-role */
+};
+ItemNotes.defaultProps = {
+  notes: null,
+  notesButtonRef: null
+};
+export default connect(makeMapStateToProps)(ItemNotes);

package/favorites/components/Item/ItemQuantity.js

@@ -1,7 +1,54 @@
-function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_nonIterableRest();}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance");}function _iterableToArrayLimit(arr,i){var _arr=[];var _n=true;var _d=false;var _e=undefined;try{for(var _i=arr[Symbol.iterator](),_s;!(_n=(_s=_i.next()).done);_n=true){_arr.push(_s.value);if(i&&_arr.length===i)break;}}catch(err){_d=true;_e=err;}finally{try{if(!_n&&_i["return"]!=null)_i["return"]();}finally{if(_d)throw _e;}}return _arr;}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr;}import React,{useState,useCallback,useEffect}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import{getWishlistItemQuantityEnabled}from"../../../core/selectors/shopSettings";import UnitQuantityPicker from"../../../product/components/UnitQuantityPicker/UnitQuantityPicker";var styles={root:css({width:120})};/**
+import React, { useState, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'glamor';
+import { connect } from 'react-redux';
+import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
+import UnitQuantityPicker from "../../../product/components/UnitQuantityPicker/UnitQuantityPicker";
+const styles = {
+  root: css({
+    width: 120
+  })
+};
+
+/**
  * @return {Function} The extended component props.
- */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state)};};};/**
+ */
+const makeMapStateToProps = () => state => ({
+  wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
+});
+
+/**
  *
  * @param {Object} props The component props
  * @returns {JSX}
- */var ItemQuantity=function ItemQuantity(_ref){var wishlistItemQuantityEnabled=_ref.wishlistItemQuantityEnabled,quantity=_ref.quantity,onChange=_ref.onChange;var _useState=useState(quantity),_useState2=_slicedToArray(_useState,2),internalQuantity=_useState2[0],setInternalQuantity=_useState2[1];var handleChange=useCallback(function(newQuantity){setInternalQuantity(newQuantity);onChange(newQuantity);},[onChange]);useEffect(function(){setInternalQuantity(quantity);},[quantity]);if(!wishlistItemQuantityEnabled){return null;}return React.createElement("div",{className:styles.root},React.createElement(UnitQuantityPicker,{maxValue:99,minValue:1,maxDecimals:0,incrementStep:1,decrementStep:1,onChange:handleChange,value:internalQuantity,toggleTabBarOnFocus:true}));};export default connect(makeMapStateToProps)(ItemQuantity);
+ */
+const ItemQuantity = ({
+  wishlistItemQuantityEnabled,
+  quantity,
+  onChange
+}) => {
+  const [internalQuantity, setInternalQuantity] = useState(quantity);
+  const handleChange = useCallback(newQuantity => {
+    setInternalQuantity(newQuantity);
+    onChange(newQuantity);
+  }, [onChange]);
+  useEffect(() => {
+    setInternalQuantity(quantity);
+  }, [quantity]);
+  if (!wishlistItemQuantityEnabled) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.root
+  }, /*#__PURE__*/React.createElement(UnitQuantityPicker, {
+    maxValue: 99,
+    minValue: 1,
+    maxDecimals: 0,
+    incrementStep: 1,
+    decrementStep: 1,
+    onChange: handleChange,
+    value: internalQuantity,
+    toggleTabBarOnFocus: true
+  }));
+};
+export default connect(makeMapStateToProps)(ItemQuantity);

package/favorites/components/Item/index.js

@@ -1 +1 @@
-export{default}from"./Item";
+export { default } from "./Item";

package/favorites/components/ItemFulfillmentMethod/ItemFulfillmentMethod.js

@@ -1,4 +1,29 @@
-import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{SheetList,SheetDrawer}from'@shopgate/engage/components';/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core';
+import { SheetList, SheetDrawer } from '@shopgate/engage/components';
+
+/**
  * @param {Object} props Props.
  * @returns {JSX.Element}
- */var ItemFulfillmentMethod=function ItemFulfillmentMethod(_ref){var isOpen=_ref.isOpen,methods=_ref.methods,onClose=_ref.onClose,onSelect=_ref.onSelect;return React.createElement(SheetDrawer,{isOpen:isOpen,title:i18n.text('favorites.fo_method_chooser.title'),onDidClose:function onDidClose(){return onClose(null);}},React.createElement(SheetList,null,methods.includes('ROPIS')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.ropis'),onClick:function onClick(){return onSelect('ROPIS');}}):null,methods.includes('BOPIS')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.bopis'),onClick:function onClick(){return onSelect('BOPIS');}}):null,methods.includes('directShip')?React.createElement(SheetList.Item,{title:i18n.text('locations.method.direct_ship'),onClick:function onClick(){return onSelect('directShip');}}):null));};export default ItemFulfillmentMethod;
+ */
+const ItemFulfillmentMethod = ({
+  isOpen,
+  methods,
+  onClose,
+  onSelect
+}) => /*#__PURE__*/React.createElement(SheetDrawer, {
+  isOpen: isOpen,
+  title: i18n.text('favorites.fo_method_chooser.title'),
+  onDidClose: () => onClose(null)
+}, /*#__PURE__*/React.createElement(SheetList, null, methods.includes('ROPIS') ? /*#__PURE__*/React.createElement(SheetList.Item, {
+  title: i18n.text('locations.method.ropis'),
+  onClick: () => onSelect('ROPIS')
+}) : null, methods.includes('BOPIS') ? /*#__PURE__*/React.createElement(SheetList.Item, {
+  title: i18n.text('locations.method.bopis'),
+  onClick: () => onSelect('BOPIS')
+}) : null, methods.includes('directShip') ? /*#__PURE__*/React.createElement(SheetList.Item, {
+  title: i18n.text('locations.method.direct_ship'),
+  onClick: () => onSelect('directShip')
+}) : null));
+export default ItemFulfillmentMethod;

package/favorites/components/ItemFulfillmentMethod/index.js

@@ -1 +1 @@
-export{default}from"./ItemFulfillmentMethod";
+export { default } from "./ItemFulfillmentMethod";