@shopgate/engage/favorites/components/Lists/Lists.js

Shopgate's ENGAGE library.

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,{useState,useCallback,useRef}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{css}from'glamor';import{RippleButton,SurroundPortals}from'@shopgate/engage/components';import{hasNewServices}from'@shopgate/engage/core/helpers';import{i18n}from'@shopgate/engage/core';import{getFavoritesLists,isInitialLoading,getHasMultipleFavoritesListsSupport}from'@shopgate/pwa-common-commerce/favorites/selectors';import addFavoritesList from'@shopgate/pwa-common-commerce/favorites/actions/addFavoritesList';import updateFavoritesList from'@shopgate/pwa-common-commerce/favorites/actions/updateFavoritesList';import removeFavoritesList from'@shopgate/pwa-common-commerce/favorites/actions/removeFavoritesList';import{removeFavorites}from'@shopgate/pwa-common-commerce/favorites/actions/toggleFavorites';import addProductsToCart from'@shopgate/pwa-common-commerce/cart/actions/addProductsToCart';import{FulfillmentSheet,MULTI_LINE_RESERVE,STAGE_SELECT_STORE}from'@shopgate/engage/locations';import{openSheet}from'@shopgate/engage/locations/providers/FulfillmentProvider';import{getWishlistMode}from'@shopgate/engage/core/selectors/shopSettings';import{WISHLIST_MODE_PERSIST_ON_ADD}from'@shopgate/engage/core/constants/shopSettings';import{getPreferredLocation,getPreferredFulfillmentMethod,getUserSearch}from'@shopgate/engage/locations/selectors';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{makeGetEnabledFulfillmentMethods}from'@shopgate/engage/core/config';import{fetchProductLocations}from'@shopgate/engage/locations/actions';import List from"../List";import ListsModal from"./ListsModal";import CommentDialog from"../CommentDialog";import ItemFulfillmentMethod from"../ItemFulfillmentMethod";import{FAVORITES_LIST_ADD_BUTTON,FAVORITES_LIST}from"../../constants/Portals";/**
 * @param {Object} state State
 * @param {Object} props Props
 * @returns {Object}
 */var makeMapStateToProps=function makeMapStateToProps(){var getFulfillmentMethods=makeGetEnabledFulfillmentMethods();return function(state,props){return{isInitializing:isInitialLoading(state),lists:getFavoritesLists(state),preferredLocation:getPreferredLocation(state,props),preferredFulfillmentMethod:getPreferredFulfillmentMethod(state,props),shopFulfillmentMethods:getFulfillmentMethods(state,props),wishlistMode:getWishlistMode(state),userSearch:getUserSearch(state),hasMultipleFavoritesListsSupport:getHasMultipleFavoritesListsSupport(state)};};};/**
 * @param {Object} dispatch Dispatch
 * @returns {Object}
 */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{addList:function addList(name){return dispatch(addFavoritesList(name));},updateList:function updateList(id,name){return dispatch(updateFavoritesList(id,name));},removeList:function removeList(id){return dispatch(removeFavoritesList(id));},removeItem:function removeItem(listId,productId){return dispatch(removeFavorites(productId,false,listId));},addToCart:function addToCart(){return dispatch(addProductsToCart.apply(void 0,arguments));},fetchLocations:function fetchLocations(productId,params){return dispatch(fetchProductLocations(productId,params));}};};var styles={root:css(_defineProperty({},responsiveMediaQuery('>=md',{webOnly:true}),{margin:8})),addButton:css(_defineProperty({width:'calc(100% - 32px)',margin:16,backgroundColor:'var(--color-primary)',borderRadius:5},responsiveMediaQuery('>=md',{webOnly:true}),{width:240,"float":'right'})).toString()};/**
 * @param {Object} props Props
 * @returns {Object}
 */var FavoriteLists=function FavoriteLists(_ref){var addList=_ref.addList,updateList=_ref.updateList,removeList=_ref.removeList,_removeItem=_ref.removeItem,addToCart=_ref.addToCart,preferredFulfillmentMethod=_ref.preferredFulfillmentMethod,preferredLocation=_ref.preferredLocation,wishlistMode=_ref.wishlistMode,lists=_ref.lists,isInitializing=_ref.isInitializing,shopFulfillmentMethods=_ref.shopFulfillmentMethods,userSearch=_ref.userSearch,fetchLocations=_ref.fetchLocations,hasMultipleFavoritesListsSupport=_ref.hasMultipleFavoritesListsSupport;// Add to cart state.
var promiseRef=useRef(null);var _useState=useState(null),_useState2=_slicedToArray(_useState,2),activeProductId=_useState2[0],setActiveProductId=_useState2[1];var _useState3=useState([]),_useState4=_slicedToArray(_useState3,2),fulfillmentMethods=_useState4[0],setFulfillmentMethods=_useState4[1];var _useState5=useState(null),_useState6=_slicedToArray(_useState5,2),fulfillmentMethod=_useState6[0],setFulfillmentMethod=_useState6[1];var _useState7=useState(false),_useState8=_slicedToArray(_useState7,2),foMethodChooser=_useState8[0],setFOMethodChooser=_useState8[1];var handleAddToCartWithMethod=useCallback(function(method){// Hide modal if visible.
setFOMethodChooser(false);// Handle cancellation.
if(!method){return;}setFulfillmentMethod(method);// Direct ship.
if(method==='directShip'){addToCart([{productId:activeProductId,quantity:1}]);promiseRef.current.resolve();return;}// Open the sheet
fetchLocations(activeProductId,userSearch);setTimeout(function(){openSheet({callback:function callback(state){var _promiseRef$current2;if(state){var _promiseRef$current;return(_promiseRef$current=promiseRef.current)===null||_promiseRef$current===void 0?void 0:_promiseRef$current.resolve();}return(_promiseRef$current2=promiseRef.current)===null||_promiseRef$current2===void 0?void 0:_promiseRef$current2.reject();},fulfillmentPath:MULTI_LINE_RESERVE,stage:STAGE_SELECT_STORE});},10);},[activeProductId,addToCart,fetchLocations,userSearch]);var handleAddToCart=useCallback(function(listId,product){var quantity=arguments.length>2&&arguments[2]!==undefined?arguments[2]:1;// Create promise to inform add to cart button when ready.
var promise=new Promise(function(_resolve,reject){promiseRef.current={resolve:function resolve(){// Remove item from wishlist after adding to cart.
if(wishlistMode!==WISHLIST_MODE_PERSIST_ON_ADD){_removeItem(listId,product.id);}_resolve();},reject:reject};});if(!hasNewServices()){addToCart([{productId:product.id,quantity:quantity}]);promiseRef.current.resolve();return promise;}// Get location.
var activeLocation=null;if(preferredLocation){activeLocation=preferredLocation;}// Get fulfillment method that is both active for location and product.
var activeFulfillmentMethod=preferredFulfillmentMethod||fulfillmentMethod;var availableFulfillmentMethods=(shopFulfillmentMethods===null||shopFulfillmentMethods===void 0?void 0:shopFulfillmentMethods.filter(function(s){return product.fulfillmentMethods.indexOf(s)!==-1;}))||[];if(activeLocation&&!activeFulfillmentMethod&&availableFulfillmentMethods.length===1){var _availableFulfillment=_slicedToArray(availableFulfillmentMethods,1);activeFulfillmentMethod=_availableFulfillment[0];}// If all options are already configured immediately add it to the cart.
if(activeFulfillmentMethod&&activeLocation){addToCart([{productId:product.id,quantity:quantity,fulfillment:{method:activeFulfillmentMethod,location:{code:activeLocation.code,name:activeLocation.name||''}}}]);promiseRef.current.resolve();return promise;}// Location not set but FO method is set.
setActiveProductId(product.id);if(activeFulfillmentMethod&&!activeLocation){handleAddToCartWithMethod(activeFulfillmentMethod);return promise;}if(!activeFulfillmentMethod&&!activeFulfillmentMethod){// Long path is required <- fo method and location unset.
setFulfillmentMethods(shopFulfillmentMethods);setFOMethodChooser(true);return promise;}// Short path is required <- fo method is unset.
setFulfillmentMethods(availableFulfillmentMethods);setFOMethodChooser(true);return promise;},[addToCart,fulfillmentMethod,handleAddToCartWithMethod,preferredFulfillmentMethod,preferredLocation,_removeItem,shopFulfillmentMethods,wishlistMode]);var handleMethodClose=useCallback(function(){setFOMethodChooser(false);promiseRef.current.reject();},[]);// Modal for renaming and adding.
var _useState9=useState(false),_useState10=_slicedToArray(_useState9,2),modalOpen=_useState10[0],setModalOpen=_useState10[1];var _useState11=useState(null),_useState12=_slicedToArray(_useState11,2),modalType=_useState12[0],setModalType=_useState12[1];var _useState13=useState(null),_useState14=_slicedToArray(_useState13,2),modalTarget=_useState14[0],setModalTarget=_useState14[1];var openAddModal=useCallback(function(){setModalOpen(true);setModalType('add_list');setModalTarget(null);},[]);var openRenameModal=useCallback(function(code){setModalOpen(true);setModalType('rename_list');setModalTarget(code);},[]);var closeModal=useCallback(function(){setModalOpen(false);setModalType(null);setModalTarget(null);},[]);var confirmModal=useCallback(function(name){if(modalType==='add_list'){addList(name);}else if(modalType==='rename_list'){updateList(modalTarget,name);}closeModal();},[addList,closeModal,modalTarget,modalType,updateList]);if(isInitializing){return null;}return React.createElement("div",{className:styles.root},lists.map(function(list){return React.createElement(SurroundPortals,{key:list.id,portalName:FAVORITES_LIST,portalProps:list},React.createElement(List,{id:list.id,name:list.name,rename:openRenameModal,remove:function remove(){return removeList(list.id);},removeItem:function removeItem(productId){return _removeItem(list.id,productId);},addToCart:function addToCart(product,quantity){return handleAddToCart(list.id,product,quantity);},hasMultipleFavoritesListsSupport:hasMultipleFavoritesListsSupport}));}),modalOpen?React.createElement(ListsModal,{type:modalType,onDismiss:closeModal,onConfirm:confirmModal}):null,activeProductId?React.createElement(FulfillmentSheet,{productId:activeProductId,fulfillmentMethod:fulfillmentMethod}):null,React.createElement(CommentDialog,null),React.createElement(ItemFulfillmentMethod,{isOpen:foMethodChooser,methods:fulfillmentMethods,onSelect:handleAddToCartWithMethod,onClose:handleMethodClose}),React.createElement(SurroundPortals,{portalName:FAVORITES_LIST_ADD_BUTTON},hasMultipleFavoritesListsSupport?React.createElement(RippleButton,{type:"primary",className:styles.addButton,onClick:openAddModal,disabled:false},i18n.text('favorites.add_list')):null));};FavoriteLists.defaultProps={lists:[],userSearch:{},preferredFulfillmentMethod:null,shopFulfillmentMethods:[],preferredLocation:null,isInitializing:true};export default connect(makeMapStateToProps,mapDispatchToProps)(FavoriteLists);