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

package/favorites/components/List/List.js

@@ -1,15 +1,69 @@
-import _regeneratorRuntime from"@babel/runtime/regenerator";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 asyncGeneratorStep(gen,resolve,reject,_next,_throw,key,arg){try{var info=gen[key](arg);var value=info.value;}catch(error){reject(error);return;}if(info.done){resolve(value);}else{Promise.resolve(value).then(_next,_throw);}}function _asyncToGenerator(fn){return function(){var self=this,args=arguments;return new Promise(function(resolve,reject){var gen=fn.apply(self,args);function _next(value){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"next",value);}function _throw(err){asyncGeneratorStep(gen,resolve,reject,_next,_throw,"throw",err);}_next(undefined);});};}import React,{useState,useEffect,useCallback,useMemo}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{showModal}from'@shopgate/engage/core/actions';import{Accordion,Card,ConditionalWrapper}from'@shopgate/engage/components';import{makeGetFavorites,getUseGetFavoriteIdsPipeline}from'@shopgate/pwa-common-commerce/favorites/selectors';import{FAVORITES_SHOW_LIMIT}from'@shopgate/engage/favorites/constants';import ListAccordionLabel from"./ListAccordionLabel";import ListContent from"./ListContent";import styles from"./styles";import ListAccordionHeader from"./ListAccordionHeader";/**
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { showModal } from '@shopgate/engage/core/actions';
+import { Accordion, Card, ConditionalWrapper } from '@shopgate/engage/components';
+import { makeGetFavorites, getUseGetFavoriteIdsPipeline } from '@shopgate/pwa-common-commerce/favorites/selectors';
+import { FAVORITES_SHOW_LIMIT } from '@shopgate/engage/favorites/constants';
+import ListAccordionLabel from "./ListAccordionLabel";
+import ListContent from "./ListContent";
+import styles from "./styles";
+import ListAccordionHeader from "./ListAccordionHeader";
+
+/**
  * @param {Object} _ State
  * @param {Object} props Props
  * @returns {Object}
- */var makeMapStateToProps=function makeMapStateToProps(_,_ref){var id=_ref.id;var getFavorites=makeGetFavorites(function(){return id;});return function(state){return{items:getFavorites(state),useGetFavoriteIdsPipeline:getUseGetFavoriteIdsPipeline(state)};};};/**
+ */
+const makeMapStateToProps = (_, {
+  id
+}) => {
+  const getFavorites = makeGetFavorites(() => id);
+  return state => ({
+    items: getFavorites(state),
+    useGetFavoriteIdsPipeline: getUseGetFavoriteIdsPipeline(state)
+  });
+};
+
+/**
  * @param {Object} dispatch Dispatch
  * @param {Object} props The component props
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch,props){return{remove:function(){var _remove=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id){var confirmed;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:_context.next=2;return dispatch(showModal({message:'favorites.delete_list_modal.message',title:'favorites.delete_list_modal.title',params:{name:props.name}}));case 2:confirmed=_context.sent;if(confirmed){props.remove(id);}case 4:case"end":return _context.stop();}},_callee);}));function remove(_x){return _remove.apply(this,arguments);}return remove;}()};};/**
+ */
+const mapDispatchToProps = (dispatch, props) => ({
+  remove: async id => {
+    // Protect list deletion with a confirmation modal
+    const confirmed = await dispatch(showModal({
+      message: 'favorites.delete_list_modal.message',
+      title: 'favorites.delete_list_modal.title',
+      params: {
+        name: props.name
+      }
+    }));
+    if (confirmed) {
+      props.remove(id);
+    }
+  }
+});
+
+/**
  * Favorite List component
  * @return {JSX.Element}
- */var FavoriteList=function FavoriteList(_ref2){var id=_ref2.id,name=_ref2.name,items=_ref2.items,_rename=_ref2.rename,remove=_ref2.remove,removeItem=_ref2.removeItem,addToCart=_ref2.addToCart,hasMultipleFavoritesListsSupport=_ref2.hasMultipleFavoritesListsSupport,useGetFavoriteIdsPipeline=_ref2.useGetFavoriteIdsPipeline;var _useState=useState(FAVORITES_SHOW_LIMIT),_useState2=_slicedToArray(_useState,2),offset=_useState2[0],setOffset=_useState2[1];var filteredItems=useMemo(function(){/**
+ */
+const FavoriteList = ({
+  id,
+  name,
+  items,
+  rename,
+  remove,
+  removeItem,
+  addToCart,
+  hasMultipleFavoritesListsSupport,
+  useGetFavoriteIdsPipeline
+}) => {
+  const [offset, setOffset] = useState(FAVORITES_SHOW_LIMIT);
+  const filteredItems = useMemo(() => {
+    /**
      * The getFavoriteIds pipeline doesn't return full products, but only product ids. Product data
      * is selected inside the ListContent component via the ProductProvider. To avoid requests with
      * huge response data, the favlist items are splitted into chunks, so that the ProductProvider
@@ -17,10 +71,64 @@ import _regeneratorRuntime from"@babel/runtime/regenerator";function _slicedToAr
      *
      * As long as not all products from the list are shown, a "Load More" button is presented to the
      * user, which will add an additional chunk of product ids to the ListContent component.
-     */if(useGetFavoriteIdsPipeline){return items.slice(0,offset);}// When the getFavorites pipeline is used, no special handling is necessary. "items" can passed
-// the the ListContent component as they are.
-return items;},[items,offset,useGetFavoriteIdsPipeline]);var allFavoritesLoaded=useMemo(function(){if(useGetFavoriteIdsPipeline){return items.length-filteredItems.length>0;}/**
+     */
+    if (useGetFavoriteIdsPipeline) {
+      return items.slice(0, offset);
+    }
+
+    // When the getFavorites pipeline is used, no special handling is necessary. "items" can passed
+    // the the ListContent component as they are.
+    return items;
+  }, [items, offset, useGetFavoriteIdsPipeline]);
+  const allFavoritesLoaded = useMemo(() => {
+    if (useGetFavoriteIdsPipeline) {
+      return items.length - filteredItems.length > 0;
+    }
+    /**
      * In case of getFavorites pipeline is used, and all favorites are always loaded, "false" as
      * return value might seem a bit weird, but the value is actually used to determine if the
      * load more button is supposed to be shown (not needed if all favorites are already present).
-     */return false;},[filteredItems.length,items.length,useGetFavoriteIdsPipeline]);var _useState3=useState(allFavoritesLoaded),_useState4=_slicedToArray(_useState3,2),showLoadMoreButton=_useState4[0],setShowLoadMoreButton=_useState4[1];var handleLoadMore=useCallback(function(){setOffset(offset+FAVORITES_SHOW_LIMIT);},[offset]);useEffect(function(){setShowLoadMoreButton(allFavoritesLoaded);},[offset,allFavoritesLoaded]);return React.createElement(ConditionalWrapper,{condition:hasMultipleFavoritesListsSupport,wrapperFalsy:function wrapperFalsy(children){return React.createElement("div",{className:styles.rootNoFavoritesLists},children);},wrapper:function wrapper(children){return React.createElement(Card,{className:styles.root},React.createElement(Accordion,{className:"",renderAdditionalHeaderContent:function renderAdditionalHeaderContent(){return React.createElement(ListAccordionHeader,{rename:function rename(newName){return _rename(id,newName);},remove:remove,id:id});},renderLabel:function renderLabel(){return React.createElement(ListAccordionLabel,{title:name});},chevronPosition:"left",startOpened:true},children));}},React.createElement(ListContent,{listId:id,items:filteredItems,removeItem:removeItem,addToCart:addToCart,onLoadMore:handleLoadMore,showLoadMoreButton:showLoadMoreButton}));};FavoriteList.defaultProps={hasMultipleFavoritesListsSupport:false,useGetFavoriteIdsPipeline:false};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteList);
+     */
+    return false;
+  }, [filteredItems.length, items.length, useGetFavoriteIdsPipeline]);
+  const [showLoadMoreButton, setShowLoadMoreButton] = useState(allFavoritesLoaded);
+  const handleLoadMore = useCallback(() => {
+    setOffset(offset + FAVORITES_SHOW_LIMIT);
+  }, [offset]);
+  useEffect(() => {
+    setShowLoadMoreButton(allFavoritesLoaded);
+  }, [offset, allFavoritesLoaded]);
+  return /*#__PURE__*/React.createElement(ConditionalWrapper, {
+    condition: hasMultipleFavoritesListsSupport,
+    wrapperFalsy: children => /*#__PURE__*/React.createElement("div", {
+      className: styles.rootNoFavoritesLists
+    }, children),
+    wrapper: children => /*#__PURE__*/React.createElement(Card, {
+      className: styles.root
+    }, /*#__PURE__*/React.createElement(Accordion, {
+      className: "",
+      renderAdditionalHeaderContent: () => /*#__PURE__*/React.createElement(ListAccordionHeader, {
+        rename: newName => rename(id, newName),
+        remove: remove,
+        id: id
+      }),
+      renderLabel: () => /*#__PURE__*/React.createElement(ListAccordionLabel, {
+        title: name
+      }),
+      chevronPosition: "left",
+      startOpened: true
+    }, children))
+  }, /*#__PURE__*/React.createElement(ListContent, {
+    listId: id,
+    items: filteredItems,
+    removeItem: removeItem,
+    addToCart: addToCart,
+    onLoadMore: handleLoadMore,
+    showLoadMoreButton: showLoadMoreButton
+  }));
+};
+FavoriteList.defaultProps = {
+  hasMultipleFavoritesListsSupport: false,
+  useGetFavoriteIdsPipeline: false
+};
+export default connect(makeMapStateToProps, mapDispatchToProps)(FavoriteList);

package/favorites/components/List/ListAccordionHeader.js

@@ -1,8 +1,30 @@
-import React from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core/helpers';import{ContextMenu,SurroundPortals}from'@shopgate/engage/components';import{FAVORITES_LIST_CONTEXT_MENU}from"../../constants";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { ContextMenu, SurroundPortals } from '@shopgate/engage/components';
+import { FAVORITES_LIST_CONTEXT_MENU } from "../../constants";
+
+/**
  * Favorite List Accordion header component
  * @param {Object} props The component props
  * @param {Function} props.rename The rename function
  * @param {Function} props.remove The remove function
  * @param {string} props.id The label name
  * @return {JSX.Element}
- */var ListAccordionHeader=function ListAccordionHeader(_ref){var rename=_ref.rename,remove=_ref.remove,id=_ref.id;return React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_CONTEXT_MENU,portalProps:{id:id}},React.createElement(ContextMenu,null,React.createElement(ContextMenu.Item,{onClick:rename},i18n.text('favorites.rename_list')),React.createElement(ContextMenu.Item,{onClick:remove,disabled:id==='DEFAULT'},i18n.text('favorites.remove_list'))));};export default ListAccordionHeader;
+ */
+const ListAccordionHeader = ({
+  rename,
+  remove,
+  id
+}) => /*#__PURE__*/React.createElement(SurroundPortals, {
+  portalName: FAVORITES_LIST_CONTEXT_MENU,
+  portalProps: {
+    id
+  }
+}, /*#__PURE__*/React.createElement(ContextMenu, null, /*#__PURE__*/React.createElement(ContextMenu.Item, {
+  onClick: rename
+}, i18n.text('favorites.rename_list')), /*#__PURE__*/React.createElement(ContextMenu.Item, {
+  onClick: remove,
+  disabled: id === 'DEFAULT'
+}, i18n.text('favorites.remove_list'))));
+export default ListAccordionHeader;

package/favorites/components/List/ListAccordionLabel.js

@@ -1,5 +1,15 @@
-import React from'react';import PropTypes from'prop-types';import styles from"./styles";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from "./styles";
+
+/**
  * Favorite List Accordion Label component
  * @param {string} title The label name
  * @return {JSX.Element}
- */var ListAccordionLabel=function ListAccordionLabel(_ref){var title=_ref.title;return React.createElement("span",{className:styles.title},title);};export default ListAccordionLabel;
+ */
+const ListAccordionLabel = ({
+  title
+}) => /*#__PURE__*/React.createElement("span", {
+  className: styles.title
+}, title);
+export default ListAccordionLabel;

package/favorites/components/List/ListContent.js

@@ -1,8 +1,72 @@
-import React from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{i18n}from'@shopgate/engage/core/helpers';import{ProductListTypeProvider,ProductProvider}from'@shopgate/engage/product/providers';import{RippleButton}from'@shopgate/engage/components';import{getUseGetFavoriteIdsPipeline}from'@shopgate/engage/favorites';import ListItemWrapper from"./ListItemWrapper";import styles from"./styles";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { i18n } from '@shopgate/engage/core/helpers';
+import { ProductListTypeProvider, ProductProvider } from '@shopgate/engage/product/providers';
+import { RippleButton } from '@shopgate/engage/components';
+import { getUseGetFavoriteIdsPipeline } from '@shopgate/engage/favorites';
+import ListItemWrapper from "./ListItemWrapper";
+import styles from "./styles";
+
+/**
  * @param {Object} state State
  * @param {Object} props Props
  * @returns {Object}
- */var mapStateToProps=function mapStateToProps(state,props){return{useGetFavoriteIdsPipeline:getUseGetFavoriteIdsPipeline(state,props)};};/**
+ */
+const mapStateToProps = (state, props) => ({
+  useGetFavoriteIdsPipeline: getUseGetFavoriteIdsPipeline(state, props)
+});
+
+/**
  * @param {Object} props The component props
  * @returns {JSX.Element}
- */var ListContent=function ListContent(_ref){var listId=_ref.listId,items=_ref.items,removeItem=_ref.removeItem,addToCart=_ref.addToCart,useGetFavoriteIdsPipeline=_ref.useGetFavoriteIdsPipeline,showLoadMoreButton=_ref.showLoadMoreButton,onLoadMore=_ref.onLoadMore;return React.createElement(React.Fragment,null,React.createElement("div",{className:styles.divider}),items.length===0?React.createElement("span",null,i18n.text('favorites.empty')):null,React.createElement(ProductListTypeProvider,{type:"favoritesList"},useGetFavoriteIdsPipeline?items.map(function(_ref2,index){var productId=_ref2.productId;return React.createElement(ProductProvider,{productId:productId,key:productId},function(_ref3){var product=_ref3.product;return product?React.createElement(ListItemWrapper,{listId:listId,product:product,items:items,addToCart:addToCart,removeItem:removeItem,index:index,key:product.id}):null;});}):null,!useGetFavoriteIdsPipeline&&items.filter(function(_ref4){var product=_ref4.product;return product;}).map(function(_ref5,index){var product=_ref5.product,notes=_ref5.notes,quantity=_ref5.quantity;return React.createElement(ListItemWrapper,{listId:listId,product:product,notes:notes,quantity:quantity,items:items,addToCart:addToCart,removeItem:removeItem,index:index,key:product.id});})),showLoadMoreButton&&React.createElement(RippleButton,{type:"primary",className:styles.loadMoreButton,onClick:onLoadMore},i18n.text('favorites.load_more_button')));};export default connect(mapStateToProps)(ListContent);
+ */
+const ListContent = ({
+  listId,
+  items,
+  removeItem,
+  addToCart,
+  useGetFavoriteIdsPipeline,
+  showLoadMoreButton,
+  onLoadMore
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  className: styles.divider
+}), items.length === 0 ? /*#__PURE__*/React.createElement("span", null, i18n.text('favorites.empty')) : null, /*#__PURE__*/React.createElement(ProductListTypeProvider, {
+  type: "favoritesList"
+}, useGetFavoriteIdsPipeline ? items.map(({
+  productId
+}, index) => /*#__PURE__*/React.createElement(ProductProvider, {
+  productId: productId,
+  key: productId
+}, ({
+  product
+}) => product ? /*#__PURE__*/React.createElement(ListItemWrapper, {
+  listId: listId,
+  product: product,
+  items: items,
+  addToCart: addToCart,
+  removeItem: removeItem,
+  index: index,
+  key: product.id
+}) : null)) : null, !useGetFavoriteIdsPipeline && items.filter(({
+  product
+}) => product).map(({
+  product,
+  notes,
+  quantity
+}, index) => /*#__PURE__*/React.createElement(ListItemWrapper, {
+  listId: listId,
+  product: product,
+  notes: notes,
+  quantity: quantity,
+  items: items,
+  addToCart: addToCart,
+  removeItem: removeItem,
+  index: index,
+  key: product.id
+}))), showLoadMoreButton && /*#__PURE__*/React.createElement(RippleButton, {
+  type: "primary",
+  className: styles.loadMoreButton,
+  onClick: onLoadMore
+}, i18n.text('favorites.load_more_button')));
+export default connect(mapStateToProps)(ListContent);

package/favorites/components/List/ListItemWrapper.js

@@ -1,6 +1,44 @@
-import React from'react';import PropTypes from'prop-types';import Item from"../Item";import styles from"./styles";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import Item from "../Item";
+import styles from "./styles";
+
+/**
  * Wrapper around the Item component to simplify item rendering based on the two different "items"
  * lists within ListItemContent.
  * @param {Object} props The component props
  * @returns {JSX.Element}
- */var ListItemWrapper=function ListItemWrapper(_ref){var listId=_ref.listId,product=_ref.product,notes=_ref.notes,quantity=_ref.quantity,_addToCart=_ref.addToCart,removeItem=_ref.removeItem,items=_ref.items,index=_ref.index;return React.createElement("div",null,React.createElement(Item,{product:product,notes:notes,quantity:quantity,listId:listId,productId:product.id,addToCart:function addToCart(e){e.preventDefault();e.stopPropagation();return _addToCart(product,quantity);},remove:function remove(e){e.preventDefault();e.stopPropagation();removeItem(product.id);}}),index===items.length-1?null:React.createElement("div",{className:styles.divider}));};ListItemWrapper.defaultProps={notes:undefined,quantity:1};export default ListItemWrapper;
+ */
+const ListItemWrapper = ({
+  listId,
+  product,
+  notes,
+  quantity,
+  addToCart,
+  removeItem,
+  items,
+  index
+}) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Item, {
+  product: product,
+  notes: notes,
+  quantity: quantity,
+  listId: listId,
+  productId: product.id,
+  addToCart: e => {
+    e.preventDefault();
+    e.stopPropagation();
+    return addToCart(product, quantity);
+  },
+  remove: e => {
+    e.preventDefault();
+    e.stopPropagation();
+    removeItem(product.id);
+  }
+}), index === items.length - 1 ? null : /*#__PURE__*/React.createElement("div", {
+  className: styles.divider
+}));
+ListItemWrapper.defaultProps = {
+  notes: undefined,
+  quantity: 1
+};
+export default ListItemWrapper;

package/favorites/components/List/index.js

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

package/favorites/components/List/styles.js

@@ -1 +1,35 @@
-import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var styles={root:css({margin:'8px 8px 10px'}).toString(),rootNoFavoritesLists:css({background:colors.light,flexGrow:1,paddingBottom:variables.gap.small,paddingLeft:'16px',paddingRight:'16px'}),title:css({flex:1}),divider:css({height:1,width:'calc(100% + 32px)',backgroundColor:'rgb(234, 234, 234)',marginLeft:-16,marginRight:-16,marginBottom:16}),loadMoreButton:css({width:'calc(100% - 32px)',margin:'16px 16px 0 16px',borderRadius:5}).toString()};export default styles;
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors,
+  variables
+} = themeConfig;
+const styles = {
+  root: css({
+    margin: '8px 8px 10px'
+  }).toString(),
+  rootNoFavoritesLists: css({
+    background: colors.light,
+    flexGrow: 1,
+    paddingBottom: variables.gap.small,
+    paddingLeft: '16px',
+    paddingRight: '16px'
+  }),
+  title: css({
+    flex: 1
+  }),
+  divider: css({
+    height: 1,
+    width: 'calc(100% + 32px)',
+    backgroundColor: 'rgb(234, 234, 234)',
+    marginLeft: -16,
+    marginRight: -16,
+    marginBottom: 16
+  }),
+  loadMoreButton: css({
+    width: 'calc(100% - 32px)',
+    margin: '16px 16px 0 16px',
+    borderRadius: 5
+  }).toString()
+};
+export default styles;

package/favorites/components/ListChooser/ListChooser.js

@@ -1,10 +1,63 @@
-import React from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{getFavoritesListState,getFavoritesLists}from'@shopgate/pwa-common-commerce/favorites/selectors';import{i18n}from'@shopgate/engage/core';import{SheetList,SheetDrawer}from'@shopgate/engage/components';import{closeFavoritesListChooser}from'@shopgate/pwa-common-commerce/favorites/action-creators';import{toggleFavorite}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import ListChooserItem from"./ListChooserItem";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { getFavoritesListState, getFavoritesLists } from '@shopgate/pwa-common-commerce/favorites/selectors';
+import { i18n } from '@shopgate/engage/core';
+import { SheetList, SheetDrawer } from '@shopgate/engage/components';
+import { closeFavoritesListChooser } from '@shopgate/pwa-common-commerce/favorites/action-creators';
+import { toggleFavorite } from '@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';
+import ListChooserItem from "./ListChooserItem";
+
+/**
  * @param {Object} state State.
  * @returns {Object}
- */var mapStateToProps=function mapStateToProps(state){return{settings:getFavoritesListState(state).chooser,lists:getFavoritesLists(state)};};/**
+ */
+const mapStateToProps = state => ({
+  settings: getFavoritesListState(state).chooser,
+  lists: getFavoritesLists(state)
+});
+
+/**
  * @param {Object} dispatch Dispatch.
  * @returns {Object}
- */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{close:function close(){return dispatch(closeFavoritesListChooser());},toggle:function toggle(){return dispatch(toggleFavorite.apply(void 0,arguments));}};};/**
+ */
+const mapDispatchToProps = dispatch => ({
+  close: () => dispatch(closeFavoritesListChooser()),
+  toggle: (...params) => dispatch(toggleFavorite(...params))
+});
+
+/**
  * @param {Object} props Props.
  * @returns {JSX.Element}
- */var ListChooser=function ListChooser(_ref){var settings=_ref.settings,lists=_ref.lists,close=_ref.close,toggle=_ref.toggle;var isVisible=!!settings;var productId=settings===null||settings===void 0?void 0:settings.productId;var withRelatives=settings===null||settings===void 0?void 0:settings.withRelatives;return React.createElement(SheetDrawer,{isOpen:isVisible,title:i18n.text('favorites.list_chooser.title'),onDidClose:close},React.createElement(SheetList,null,lists.map(function(list){return React.createElement(SheetList.Item,{key:list.id,title:list.name,onClick:function onClick(){close();toggle(productId,list.id,withRelatives);},rightComponent:React.createElement(ListChooserItem,{listId:list.id,productId:productId})});})));};ListChooser.defaultProps={settings:null,lists:[]};export default connect(mapStateToProps,mapDispatchToProps)(ListChooser);
+ */
+const ListChooser = ({
+  settings,
+  lists,
+  close,
+  toggle
+}) => {
+  const isVisible = !!settings;
+  const productId = settings?.productId;
+  const withRelatives = settings?.withRelatives;
+  return /*#__PURE__*/React.createElement(SheetDrawer, {
+    isOpen: isVisible,
+    title: i18n.text('favorites.list_chooser.title'),
+    onDidClose: close
+  }, /*#__PURE__*/React.createElement(SheetList, null, lists.map(list => /*#__PURE__*/React.createElement(SheetList.Item, {
+    key: list.id,
+    title: list.name,
+    onClick: () => {
+      close();
+      toggle(productId, list.id, withRelatives);
+    },
+    rightComponent: /*#__PURE__*/React.createElement(ListChooserItem, {
+      listId: list.id,
+      productId: productId
+    })
+  }))));
+};
+ListChooser.defaultProps = {
+  settings: null,
+  lists: []
+};
+export default connect(mapStateToProps, mapDispatchToProps)(ListChooser);

package/favorites/components/ListChooser/ListChooserItem.js

@@ -1,6 +1,51 @@
-import React from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{makeIsProductOnSpecificFavoriteList}from'@shopgate/pwa-common-commerce/favorites/selectors';import{i18n}from'@shopgate/engage/core';import{getWishlistItemQuantityEnabled}from"../../../core/selectors/shopSettings";/**
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { css } from 'glamor';
+import { makeIsProductOnSpecificFavoriteList } from '@shopgate/pwa-common-commerce/favorites/selectors';
+import { i18n } from '@shopgate/engage/core';
+import { getWishlistItemQuantityEnabled } from "../../../core/selectors/shopSettings";
+
+/**
  * @returns {Object}
- */var makeMapStateToProps=function makeMapStateToProps(){var getIsOnList=makeIsProductOnSpecificFavoriteList(function(_,props){return props.productId;},function(_,props){return props.listId;});return function(state,props){return{isOnList:getIsOnList(state,props),wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state)};};};var styles={remove:css({color:'var(--color-state-alert)'}).toString(),add:css({color:'var(--color-state-ok)',whiteSpace:'noWrap'}).toString()};/**
+ */
+const makeMapStateToProps = () => {
+  const getIsOnList = makeIsProductOnSpecificFavoriteList((_, props) => props.productId, (_, props) => props.listId);
+  return (state, props) => ({
+    isOnList: getIsOnList(state, props),
+    wishlistItemQuantityEnabled: getWishlistItemQuantityEnabled(state)
+  });
+};
+const styles = {
+  remove: css({
+    color: 'var(--color-state-alert)'
+  }).toString(),
+  add: css({
+    color: 'var(--color-state-ok)',
+    whiteSpace: 'noWrap'
+  }).toString()
+};
+
+/**
  * @param {Object} props Props.
  * @returns {JSX.Element}
- */var ListChooserItem=function ListChooserItem(_ref){var isOnList=_ref.isOnList,wishlistItemQuantityEnabled=_ref.wishlistItemQuantityEnabled;if(wishlistItemQuantityEnabled&&isOnList){return React.createElement("span",{className:styles.add},i18n.text('favorites.list_chooser.add_more'));}if(isOnList){return React.createElement("span",{className:styles.remove},i18n.text('favorites.list_chooser.remove'));}return React.createElement("span",{className:styles.add},i18n.text('favorites.list_chooser.add'));};export default connect(makeMapStateToProps)(ListChooserItem);
+ */
+const ListChooserItem = ({
+  isOnList,
+  wishlistItemQuantityEnabled
+}) => {
+  if (wishlistItemQuantityEnabled && isOnList) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.add
+    }, i18n.text('favorites.list_chooser.add_more'));
+  }
+  if (isOnList) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: styles.remove
+    }, i18n.text('favorites.list_chooser.remove'));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: styles.add
+  }, i18n.text('favorites.list_chooser.add'));
+};
+export default connect(makeMapStateToProps)(ListChooserItem);

package/favorites/components/ListChooser/index.js

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