UNPKG

@shopgate/engage

Version:
8 lines 2.37 kB
import React,{useMemo}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import{RippleButton}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{toggleFavoriteWithListChooser}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import{makeIsProductOnFavoriteList,hasMultipleFavoritesList}from'@shopgate/pwa-common-commerce/favorites/selectors';import{getWishlistItemQuantityEnabled}from'@shopgate/engage/core/selectors/shopSettings';import appConfig from'@shopgate/pwa-common/helpers/config';/** * @param {Object} state State. * @returns {Object} */var makeMapStateToProps=function makeMapStateToProps(){var getIsOnList=makeIsProductOnFavoriteList(function(_,props){return props.productId;});return function(state,props){return{isOnList:getIsOnList(state,props),hasMultipleLists:hasMultipleFavoritesList(state),wishlistItemQuantityEnabled:getWishlistItemQuantityEnabled(state)};};};/** * @param {Function} dispatch Dispatch * @returns {Object} * */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{toggle:function toggle(productId){return dispatch(toggleFavoriteWithListChooser(productId));}};};var styles={root:css({'&&':{margin:'0 0px 16px 16px',backgroundColor:'#fff',border:'1px solid var(--color-primary)',color:'var(--color-high-emphasis)',borderRadius:5,fontSize:14,textTransform:'none',padding:0}}).toString(),ripple:css({padding:'8px 16px'}).toString()};/** @returns {JSX} */var FavoriteButtonWide=function FavoriteButtonWide(_ref){var productId=_ref.productId,toggle=_ref.toggle,isOnList=_ref.isOnList,hasMultipleLists=_ref.hasMultipleLists,wishlistItemQuantityEnabled=_ref.wishlistItemQuantityEnabled;var label=useMemo(function(){// When wishlist item quantity is active, items cannot be removed via the button if(!isOnList||wishlistItemQuantityEnabled){return'favorites.add_to_list';}if(hasMultipleLists){return'favorites.edit_lists';}return'favorites.remove_from_list';},[hasMultipleLists,isOnList,wishlistItemQuantityEnabled]);if(!appConfig.hasFavorites){return null;}return React.createElement(RippleButton,{className:styles.root,rippleClassName:styles.ripple,type:"primary",onClick:function onClick(){return toggle(productId);}},i18n.text(label));};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteButtonWide);