@shopgate/engage/locations/components/StoreList/StoreListSearch.js

Shopgate's ENGAGE library.

import _regeneratorRuntime from"@babel/runtime/regenerator";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);});};}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,{memo,useCallback,useContext,useEffect,useLayoutEffect,useRef,useState}from'react';import PropTypes from'prop-types';import{i18n}from'@shopgate/engage/core';import{InfoIcon,LocatorIcon,MagnifierIcon,MessageBar,SurroundPortals}from'@shopgate/engage/components';import{useCountriesNames}from'@shopgate/engage/i18n';import StoreListSearchRadius from"./StoreListSearchRadius";import{FulfillmentContext,StoreFinderContext}from"../../locations.context";import connect from"./StoreListSearch.connector";import{container,countriesCell,inputCell,radiusCell,inputIcon,iconClass,input,inputContainer,select,selectContainer}from"./StoreListSearch.style";import{FULFILLMENT_SHEET_SEARCH}from"../../constants/Portals";/**
 * @param {Function} getProductLocations getProductLocations.
 * @param {Function} storeSearch .
 * @param {Object} search .
 * @returns {JSX}
 */function StoreListSearch(_ref){var postalCode=_ref.postalCode,countryCode=_ref.countryCode,setPostalCode=_ref.setPostalCode,setCountryCode=_ref.setCountryCode,setGeolocation=_ref.setGeolocation,isStoreFinder=_ref.isStoreFinder;var _useContext=useContext(isStoreFinder?StoreFinderContext:FulfillmentContext),isLoading=_useContext.isLoading,setIsLoading=_useContext.setIsLoading,locations=_useContext.locations,_useContext$shopSetti=_useContext.shopSettings,_useContext$shopSetti2=_useContext$shopSetti===void 0?{}:_useContext$shopSetti,supportedCountries=_useContext$shopSetti2.supportedCountries,product=_useContext.product;var _useState=useState(''),_useState2=_slicedToArray(_useState,2),message=_useState2[0],setMessage=_useState2[1];var _useState3=useState(postalCode||''),_useState4=_slicedToArray(_useState3,2),inputPostalCode=_useState4[0],setInputPostalCode=_useState4[1];var isMounted=useRef(false);var productId=(product===null||product===void 0?void 0:product.id)||null;var inputEl=useRef(null);useEffect(function(){isMounted.current=true;return function cleanup(){isMounted.current=false;};});useLayoutEffect(function(){if(!isLoading&&(!locations||locations.length===0)){// Set a message when a location search resulted in zero locations.
setMessage('locations.error_no_store_found');}else{setMessage('');}},[isLoading,locations,message]);/**
   * Triggers an update when the value of the country selector changed.
   * @param {SyntheticEvent} event A React event object.
   */var handleCountrySelectChange=useCallback(function(event){setCountryCode(event.target.value,productId,isStoreFinder);},[isStoreFinder,productId,setCountryCode]);useEffect(function(){if(!Array.isArray(supportedCountries)||!supportedCountries.length){return;}// Check if current countryCode is included in supportedCountries. Update the code to a valid
// one if nothing was found.
if(!supportedCountries.includes(countryCode)){handleCountrySelectChange({target:{value:supportedCountries[0]}});}},[countryCode,handleCountrySelectChange,supportedCountries]);/**
   * Blurs the postal code input to trigger an update.
   * @param {SyntheticEvent} event A React event object.
   */var handlePostalCodeSubmitKeyDown=useCallback(function(event){if(event.keyCode===13){inputEl.current.blur();}},[]);/**
   * Triggers an update when the input blurs.
   */var handlePostalCodeBlur=useCallback(function(){setPostalCode(inputPostalCode,productId,isStoreFinder);},[inputPostalCode,isStoreFinder,productId,setPostalCode]);/**
   * Triggers an update when the locate me button was pressed. Also clears the local state for the
   * postal code input.
   */var handleLocateMeButton=useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(){return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:setInputPostalCode('');setIsLoading(true);_context.next=4;return setGeolocation({productId:productId,isStoreFinder:isStoreFinder});case 4:setIsLoading(false);case 5:case"end":return _context.stop();}},_callee);})),[isStoreFinder,productId,setGeolocation,setIsLoading]);/**
   * Updates the local state for the postal code input.
   * @param {SyntheticEvent} event A React event object
   */var handlePostalCodeChange=function handlePostalCodeChange(event){setInputPostalCode(event.target.value);};var countries=useCountriesNames(supportedCountries);var hasSupportedCountries=supportedCountries&&supportedCountries.length>1;return React.createElement(SurroundPortals,{portalName:FULFILLMENT_SHEET_SEARCH,portalProps:{product:product}},React.createElement("div",{className:container},hasSupportedCountries&&React.createElement("div",{className:countriesCell},React.createElement("div",{className:selectContainer},React.createElement("select",{name:"countryCode",value:countryCode,onChange:handleCountrySelectChange,className:select},Object.keys(countries).map(function(key){return React.createElement("option",{className:"option",value:key,key:key},countries[key]);})))),React.createElement("div",{className:inputCell},React.createElement("div",{className:inputContainer},React.createElement("span",{className:inputIcon,"aria-hidden":true},React.createElement(MagnifierIcon,null)),React.createElement("input",{ref:inputEl,name:"postalCode",className:input,value:inputPostalCode,onChange:handlePostalCodeChange,onBlur:handlePostalCodeBlur,onKeyDown:handlePostalCodeSubmitKeyDown,disabled:isLoading,type:"search",autoComplete:"off",autoCorrect:"off",placeholder:i18n.text('locations.search_placeholder'),"aria-label":i18n.text('locations.search_placeholder')}),React.createElement("button",{onClick:handleLocateMeButton,type:"button",className:inputIcon,"aria-label":i18n.text('locations.stores_near.location')},React.createElement(LocatorIcon,null)))),React.createElement("div",{className:radiusCell},isStoreFinder&&React.createElement(StoreListSearchRadius,null))),message&&React.createElement(MessageBar,{messages:[{type:'error',message:message,icon:InfoIcon}],classNames:{icon:iconClass}}));}StoreListSearch.defaultProps={postalCode:null,isStoreFinder:false};export default connect(memo(StoreListSearch));