@shopgate/engage 7.27.3-alpha.17 → 7.27.3-alpha.19

package/locations/components/GlobalLocationSelector/GlobalLocationSelector.js

@@ -0,0 +1,16 @@
+import React,{useCallback,useMemo}from'react';import PropTypes from'prop-types';import{connect}from'react-redux';import{getCurrentRoute}from'@shopgate/pwa-common/selectors/router';import{selectGlobalLocation}from'@shopgate/engage/locations/action-creators';import{getPreferredLocation,getIsPending}from"../../selectors";import{getIsLocationBasedShopping}from"../../../core/selectors";import{FulfillmentSheet}from"../FulfillmentSheet";import{STAGE_SELECT_STORE,MULTI_LINE_RESERVE}from"../../constants";/**
+ * Maps state to props.
+ * @param {Object} state State
+ * @return {Object}
+ */var mapStateToProps=function mapStateToProps(state){return{currentRoute:getCurrentRoute(state),isLocationBasedShopping:getIsLocationBasedShopping(state),isPending:getIsPending(state),preferredLocation:getPreferredLocation(state)};};/**
+ * Maps the contents of the state to the component props.
+ * @param  {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps={selectGlobalLocation:selectGlobalLocation};/**
+ * Global selector that forces the customer to choose a location
+ * in location based shopping mode.
+ * @param {Object} props Components props.
+ * @return {Object}
+ */var GlobalLocationSelector=function GlobalLocationSelector(_ref){var isLocationBasedShopping=_ref.isLocationBasedShopping,preferredLocation=_ref.preferredLocation,selectLocation=_ref.selectGlobalLocation,routePatternAllowList=_ref.routePatternAllowList,currentRoute=_ref.currentRoute,isPending=_ref.isPending;var closeSheetHandler=useCallback(function(location){if(location){selectLocation(location);}},[selectLocation]);var renderComponent=useMemo(function(){if(!currentRoute){return false;}var _ref2=currentRoute||{},pattern=_ref2.pattern;if(routePatternAllowList&&!routePatternAllowList.includes(pattern)){return false;}// Either when location based shopping is disabled or the customer
+// already chose a location we skip the dialog.
+return!isPending&&isLocationBasedShopping&&!preferredLocation;},[currentRoute,isLocationBasedShopping,isPending,preferredLocation,routePatternAllowList]);if(!renderComponent){return null;}return React.createElement(FulfillmentSheet,{stage:STAGE_SELECT_STORE,fulfillmentPath:MULTI_LINE_RESERVE,allowClose:false,onClose:closeSheetHandler,isInitialized:true,noProduct:true,noInventory:true,changeOnly:true,open:true});};GlobalLocationSelector.defaultProps={preferredLocation:null,isLocationBasedShopping:false,routePatternAllowList:null,currentRoute:null,isPending:false};export default connect(mapStateToProps,mapDispatchToProps)(GlobalLocationSelector);

package/locations/components/GlobalLocationSelector/index.js

@@ -0,0 +1 @@
+export{default as GlobalLocationSelector}from"./GlobalLocationSelector";

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcher.connector.js

@@ -0,0 +1,8 @@
+import{connect}from'react-redux';import{getIsLocationBasedShopping}from'@shopgate/engage/core';import{getPreferredLocation}from'@shopgate/engage/locations/selectors';import{selectGlobalLocation}from'@shopgate/engage/locations/action-creators';import{getIsCartStateConfigurable}from"../../selectors";/**
+ * Creates the mapStateToProps connector function.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){return function(state){return{isLocationBasedShopping:getIsLocationBasedShopping(state),preferredLocation:getPreferredLocation(state),editable:getIsCartStateConfigurable(state)};};};/**
+ * Maps the contents of the state to the component props.
+ * @param  {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps={selectGlobalLocation:selectGlobalLocation};export default connect(makeMapStateToProps,mapDispatchToProps);

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcher.js

@@ -0,0 +1,3 @@
+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,{Fragment,useCallback,useState,useMemo}from'react';import PropTypes from'prop-types';import{FulfillmentSheet}from"../FulfillmentSheet";import{STAGE_SELECT_STORE,MULTI_LINE_RESERVE}from"../../constants";import GlobalLocationSwitcherDefault from"./GlobalLocationSwitcherDefault";import GlobalLocationSwitcherBar from"./GlobalLocationSwitcherBar";import connect from"./GlobalLocationSwitcher.connector";/**
+ * @returns {JSX}
+ */var GlobalLocationSwitcher=function GlobalLocationSwitcher(_ref){var isLocationBasedShopping=_ref.isLocationBasedShopping,preferredLocation=_ref.preferredLocation,renderBar=_ref.renderBar,standalone=_ref.standalone,selectGlobalLocation=_ref.selectGlobalLocation,editable=_ref.editable;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),sheetOpen=_useState2[0],setSheetOpen=_useState2[1];var changeLocationHandler=useCallback(function(){setSheetOpen(true);},[]);var closeSheetHandler=useCallback(function(location){setSheetOpen(false);if(location){selectGlobalLocation(location);}},[selectGlobalLocation]);var locationName=useMemo(function(){return(preferredLocation===null||preferredLocation===void 0?void 0:preferredLocation.name)||null;},[preferredLocation]);if(!isLocationBasedShopping||!preferredLocation){return null;}return React.createElement(Fragment,null,renderBar?React.createElement(GlobalLocationSwitcherBar,{locationName:locationName,handleChange:changeLocationHandler,standalone:standalone}):React.createElement(GlobalLocationSwitcherDefault,{locationName:locationName,handleChange:changeLocationHandler,standalone:standalone,editable:editable}),sheetOpen&&React.createElement(FulfillmentSheet,{stage:STAGE_SELECT_STORE,fulfillmentPath:MULTI_LINE_RESERVE,allowClose:true,onClose:closeSheetHandler,isInitialized:true,noProduct:true,noInventory:true,changeOnly:true,open:true}));};GlobalLocationSwitcher.defaultProps={isLocationBasedShopping:false,preferredLocation:null,renderBar:false,editable:true,standalone:false};export default connect(GlobalLocationSwitcher);

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.js

@@ -0,0 +1,3 @@
+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 from'react';import PropTypes from'prop-types';import classNames from'classnames';import{RippleButton,I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{wrapper,inner,innerStandalone,heading,name,button}from"./GlobalLocationSwitcherBar.style";/**
+ * @returns {JSX.Element}
+ */var GlobalLocationSwitcherBar=function GlobalLocationSwitcherBar(_ref){var locationName=_ref.locationName,handleChange=_ref.handleChange,standalone=_ref.standalone;return React.createElement("div",{className:wrapper},React.createElement("div",{className:classNames(inner,_defineProperty({},innerStandalone,standalone))},React.createElement("span",{"aria-label":"".concat(i18n.text('locations.your_current_location.heading'),": ").concat(locationName)},React.createElement("span",{className:heading},"".concat(i18n.text('locations.your_current_location.heading'),":")),React.createElement("span",{className:name},locationName)),React.createElement(RippleButton,{onClick:handleChange,type:"secondary",className:button,"aria-haspopup":true,flat:true},React.createElement(I18n.Text,{string:"locations.your_current_location.change"}))));};GlobalLocationSwitcherBar.defaultProps={standalone:false};export default GlobalLocationSwitcherBar;

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherBar.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var wrapper=css({fontSize:'0.875rem',color:'var(--color-text-high-emphasis)',background:'var(--color-background-accent)'}).toString();export var inner=css({display:'flex',flexShrink:0,margin:"0 ".concat(variables.gap.big,"px"),borderBottom:'1px solid #eaeaea',alignItems:'center',height:variables.filterbar.height}).toString();export var innerStandalone=css({borderBottom:'none'}).toString();export var heading=css({paddingRight:variables.gap.small}).toString();export var name=css({fontWeight:500}).toString();export var button=css({marginLeft:'auto',letterSpacing:'0.05em',padding:"".concat(variables.gap.xsmall*0.75,"px 0 !important"),' *':{fontSize:'0.875rem',textTransform:'initial',padding:'0 !important',color:'var(--color-text-high-emphasis)',fontWeight:500}}).toString();

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.js

@@ -0,0 +1,3 @@
+import React from'react';import PropTypes from'prop-types';import{RippleButton,I18n}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core';import{wrapper,heading,name,button}from"./GlobalLocationSwitcherDefault.style";/**
+ * @returns {JSX}
+ */var GlobalLocationSwitcherDefault=function GlobalLocationSwitcherDefault(_ref){var locationName=_ref.locationName,handleChange=_ref.handleChange,editable=_ref.editable;return React.createElement("div",{className:wrapper},React.createElement("div",{className:heading},i18n.text('locations.your_current_location.heading')),React.createElement("div",{className:name},React.createElement("span",null,locationName),React.createElement(RippleButton,{onClick:handleChange,type:"secondary",className:button,disabled:!editable,flat:true},React.createElement(I18n.Text,{string:"locations.your_current_location.change"}))));};export default GlobalLocationSwitcherDefault;

package/locations/components/GlobalLocationSwitcher/GlobalLocationSwitcherDefault.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var wrapper=css({display:'flex',flexDirection:'column',fontSize:'0.875rem',padding:"0 ".concat(variables.gap.big,"px"),flexShrink:0});export var heading=css({color:'var(--color-text-medium-emphasis)'});export var name=css({fontWeight:500,color:'var(--color-text-high-emphasis)'});export var button=css({fontSize:'0.625rem !important',letterSpacing:'0.05em',padding:"".concat(variables.gap.xsmall*0.75,"px 0 !important"),' *':{padding:'0 !important'}}).toString();

package/locations/components/GlobalLocationSwitcher/index.js

@@ -0,0 +1 @@
+export{default as GlobalLocationSwitcher}from"./GlobalLocationSwitcher";

package/locations/components/ReservationResponses/ReservationError.js

@@ -0,0 +1,4 @@
+import React from'react';import{i18n}from"../../../core/helpers/i18n";import{container,heading,body}from"./ReservationResponse.style";/**
+ * Renders the reservation error screen.
+ * @returns {JSX}
+ */export function ReservationError(){return React.createElement("div",{className:container},React.createElement("h2",{className:heading},i18n.text('locations.error_title')),React.createElement("p",{className:body},i18n.text('locations.error_copy')));}

package/locations/components/ReservationResponses/ReservationResponse.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var container=css({background:colors.background,padding:"".concat(variables.gap.big,"px ").concat(variables.gap.small*1.5,"px ").concat(variables.gap.xxbig*2,"px"),boxShadow:'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'});export var heading=css({fontSize:'1.125rem',fontWeight:'bold',margin:"".concat(variables.gap.small,"px 0 ").concat(variables.gap.bigger,"px")});export var body=css({padding:"".concat(variables.gap.big,"px 0 0"),margin:"0 0 ".concat(variables.gap.bigger,"px"),border:0});export var orderNum=css({padding:0,fontSize:'1.1875rem',fontWeight:'bold',margin:"0 0 ".concat(variables.gap.big,"px"),border:0});

package/locations/components/ReservationResponses/ReservationSuccess.js

@@ -0,0 +1,4 @@
+import React,{useContext}from'react';import{i18n}from"../../../core/helpers/i18n";import{FulfillmentContext}from"../../locations.context";import{container,heading,body,orderNum}from"./ReservationResponse.style";/**
+ * Renders the reservation success screen.
+ * @returns {JSX}
+ */export function ReservationSuccess(){var _useContext=useContext(FulfillmentContext),orderNumbers=_useContext.orderNumbers;return React.createElement("div",{className:container},React.createElement("h2",{className:heading},i18n.text('locations.success_title')),React.createElement("p",{className:body},i18n.text('locations.success_copy')),React.createElement("p",{className:body},i18n.text('locations.success_order_num')),orderNumbers!==null&&React.createElement("p",{className:orderNum},orderNumbers[0]));}

package/locations/components/ReservationResponses/index.js

@@ -0,0 +1 @@
+export{ReservationSuccess}from"./ReservationSuccess";export{ReservationError}from"./ReservationError";

package/locations/components/ReserveForm/ReserveForm.constraints.js

@@ -0,0 +1 @@
+export var constraints={email:{presence:{message:'validation.required',allowEmpty:false},email:{message:'validation.email'}},firstName:{presence:{message:'validation.required',allowEmpty:false}},lastName:{presence:{message:'validation.required',allowEmpty:false}},cellPhone:{presence:{message:'validation.required',allowEmpty:false},format:{pattern:'^[+0-9]+',message:'validation.mobileNumber'}}};

package/locations/components/ReserveForm/ReserveForm.js

@@ -0,0 +1,10 @@
+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 _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}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{hot}from'react-hot-loader/root';import'react-phone-number-input/style.css';import React,{useState,useContext,useMemo,useRef,useLayoutEffect,useCallback,Fragment}from'react';import{TextField,RippleButton,RadioGroup,RadioGroupItem,ProgressBar}from'@shopgate/engage/components';import{useFormState}from"../../../core/hooks/useFormState";import{i18n}from"../../../core/helpers/i18n";import{FulfillmentContext}from"../../locations.context";import{ReserveFormPhone}from"./ReserveFormPhone";import{constraints}from"./ReserveForm.constraints";import{form,fieldset,formField,formHeading,pickerSwitch,pickerItem,button,progressBar}from"./ReserveForm.style";var PICKUP_PERSON_ME='me';var PICKUP_PERSON_OTHER='someoneelse';/**
+ * Determines the pick up person.
+ * @param {Object} userInput The current user input
+ * @return {string}
+ */var determinePickupPerson=function determinePickupPerson(userInput){if(!userInput){return PICKUP_PERSON_ME;}var meFields=['firstName','lastName','email','cellPhone'];var otherFields=['firstName2','lastName2','email2','cellPhone2'];var hasMeFields=meFields.every(function(field){return typeof userInput[field]!=='undefined';});var hasOtherFields=otherFields.every(function(field){return typeof userInput[field]!=='undefined';});if(!hasOtherFields||!hasMeFields){return PICKUP_PERSON_ME;}var valuesEqual=meFields.every(function(field,index){return userInput[field]===userInput[otherFields[index]];});return valuesEqual?PICKUP_PERSON_ME:PICKUP_PERSON_OTHER;};/**
+ * Renders the quick reservation form.
+ * @returns {JSX}
+ */function ReserveFormUnwrapped(){var _useContext=useContext(FulfillmentContext),sendReservation=_useContext.sendReservation,userInput=_useContext.userInput;var _useState=useState(determinePickupPerson(userInput)),_useState2=_slicedToArray(_useState,2),picker=_useState2[0],setPicker=_useState2[1];var defaultState={firstName:'',lastName:'',cellPhone:'',email:'',firstName2:'',lastName2:'',cellPhone2:'',email2:''};var validationConstraints=useMemo(function(){return _extends({},constraints,{},picker===PICKUP_PERSON_OTHER&&{firstName2:constraints.firstName,lastName2:constraints.lastName,cellPhone2:constraints.cellPhone,email2:constraints.email});},[picker]);var initialState=userInput?_extends({},defaultState,{},userInput):defaultState;/**
+   * @param {Object} values The form values.
+   */var complete=useCallback(/*#__PURE__*/function(){var _ref=_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(values){var response;return _regeneratorRuntime.wrap(function _callee$(_context){while(1)switch(_context.prev=_context.next){case 0:response=values;if(picker===PICKUP_PERSON_ME){response.firstName2=response.firstName;response.lastName2=response.lastName;response.cellPhone2=response.cellPhone;response.email2=response.email;}else{response.firstName2=response.firstName2||response.firstName;response.lastName2=response.lastName2||response.lastName;response.cellPhone2=response.cellPhone2||response.cellPhone;response.email2=response.email2||response.email;}_context.next=4;return sendReservation(response);case 4:case"end":return _context.stop();}},_callee);}));return function(_x){return _ref.apply(this,arguments);};}(),[picker,sendReservation]);var _useFormState=useFormState(initialState,complete,validationConstraints),values=_useFormState.values,handleChange=_useFormState.handleChange,handleSubmit=_useFormState.handleSubmit,changed=_useFormState.changed,valid=_useFormState.valid,_useFormState$validat=_useFormState.validationErrors,validationErrors=_useFormState$validat===void 0?{}:_useFormState$validat,isSubmitting=_useFormState.isSubmitting;var someoneElseRef=useRef(null);useLayoutEffect(function(){if(someoneElseRef.current&&picker===PICKUP_PERSON_OTHER){someoneElseRef.current.scrollIntoView({behavior:'smooth'});}},[picker,someoneElseRef]);return React.createElement(Fragment,null,React.createElement("div",{className:progressBar},React.createElement(ProgressBar,{isVisible:isSubmitting})),React.createElement("form",{onSubmit:handleSubmit,className:form},React.createElement("fieldset",{className:fieldset},React.createElement(TextField,{name:"firstName",value:values.firstName,onChange:handleChange,label:i18n.text('locations.firstName'),className:formField,errorText:i18n.text(validationErrors.firstName)}),React.createElement(TextField,{name:"lastName",value:values.lastName,onChange:handleChange,label:i18n.text('locations.lastName'),className:formField,errorText:i18n.text(validationErrors.lastName)}),React.createElement(ReserveFormPhone,{name:"cellPhone",value:values.cellPhone,onChange:handleChange,label:i18n.text('locations.cellPhone'),errorText:i18n.text(validationErrors.cellPhone)}),React.createElement(TextField,{name:"email",value:values.email,onChange:handleChange,label:i18n.text('locations.emailAddress'),className:formField,errorText:i18n.text(validationErrors.email)})),React.createElement("p",{className:formHeading},i18n.text('locations.who_will_pickup')),React.createElement("div",{className:pickerSwitch},React.createElement(RadioGroup,{name:"picker",direction:"row",value:picker,onChange:setPicker},React.createElement(RadioGroupItem,{label:i18n.text('locations.me'),name:PICKUP_PERSON_ME,className:pickerItem}),React.createElement(RadioGroupItem,{label:i18n.text('locations.someone_else'),name:PICKUP_PERSON_OTHER,className:pickerItem}))),picker===PICKUP_PERSON_OTHER&&React.createElement("fieldset",{className:fieldset,ref:someoneElseRef},React.createElement(TextField,{name:"firstName2",value:values.firstName2,onChange:handleChange,label:i18n.text('locations.firstName'),className:formField,errorText:i18n.text(validationErrors.firstName2)}),React.createElement(TextField,{name:"lastName2",value:values.lastName2,onChange:handleChange,label:i18n.text('locations.lastName'),className:formField,errorText:i18n.text(validationErrors.lastName2)}),React.createElement(ReserveFormPhone,{name:"cellPhone2",value:values.cellPhone2,onChange:handleChange,label:i18n.text('locations.cellPhone'),errorText:i18n.text(validationErrors.cellPhone2)}),React.createElement(TextField,{name:"email2",value:values.email2,onChange:handleChange,label:i18n.text('locations.emailAddress'),className:formField,errorText:i18n.text(validationErrors.email2)})),React.createElement(RippleButton,{type:"secondary",disabled:changed||valid===false||isSubmitting,className:button},i18n.text('locations.place_reservation'))));}export var ReserveForm=hot(ReserveFormUnwrapped);

package/locations/components/ReserveForm/ReserveForm.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables,colors=themeConfig.colors;export var form=css({background:colors.background,padding:"".concat(variables.gap.small*1.5,"px ").concat(variables.gap.small*1.5,"px ").concat(variables.gap.big,"px"),boxShadow:'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'});export var formHeading=css({fontSize:'1.125rem',fontWeight:'bold',margin:"0 0 ".concat(variables.gap.small,"px")});export var fieldset=css({padding:0,margin:"0 0 ".concat(variables.gap.big,"px"),border:0});export var formField=css({width:'100%',paddingBottom:variables.gap.small});export var phoneField=css({position:'relative',width:'100%',paddingTop:variables.gap.big*0.75,paddingBottom:variables.gap.big*1.25,marginBottom:variables.gap.small,' input.PhoneInputInput':{outline:'none',fontSize:'1rem',lineHeight:'1.1875rem',borderRadius:0,paddingBottom:variables.gap.xsmall*1.5,borderBottom:"1px solid ".concat(colors.shade12),'&:focus':{borderBottom:"2px solid ".concat(colors.primary),paddingBottom:variables.gap.xsmall*1.5-1}}});export var phoneFieldError=css({' input.PhoneInputInput':{borderBottom:"2px solid var(--color-state-alert, ".concat(colors.error,") !important"),paddingBottom:variables.gap.xsmall*1.5-1}});export var phoneFieldErrorText=css({position:'absolute',width:'100%',bottom:2,fontSize:'0.75rem',lineHeight:0.875,color:"var(--color-state-alert, ".concat(colors.error,")"),overflow:'hidden',whiteSpace:'nowrap',textOverflow:'ellipsis'});export var pickerSwitch=css({marginTop:'-1rem'});export var pickerItem=css({paddingRight:variables.gap.xbig,':last-of-type':{paddingRight:0}}).toString();export var button=css({width:'100%'}).toString();export var progressBar=css({height:'4px',position:'relative'});

package/locations/components/ReserveForm/ReserveFormPhone.connector.js

@@ -0,0 +1,3 @@
+import{connect}from'react-redux';import{getPreferredLocationAddress}from"../../selectors";/**
+ * @returns {Function}
+ */function makeMapStateToProps(){return function(state){return{userLocation:getPreferredLocationAddress(state)};};}export default connect(makeMapStateToProps);

package/locations/components/ReserveForm/ReserveFormPhone.js

@@ -0,0 +1,5 @@
+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*as React from'react';import classnames from'classnames';import{i18n}from'@shopgate/engage/core';import{parsePhoneNumber}from'react-phone-number-input';import PhoneInput from'react-phone-number-input/mobile';import{getCountries}from'react-phone-number-input/input';import en from'react-phone-number-input/locale/en';import de from'react-phone-number-input/locale/de';import es from'react-phone-number-input/locale/es';import fr from'react-phone-number-input/locale/fr';import pt from'react-phone-number-input/locale/pt';import flags from'react-phone-number-input/flags';import TextField from'@shopgate/pwa-ui-shared/TextField';import{useCountriesNames}from'@shopgate/engage/i18n';import{FulfillmentContext}from"../../locations.context";import{formField,phoneField,phoneFieldError,phoneFieldErrorText}from"./ReserveForm.style";import connect from"./ReserveFormPhone.connector";var builtInCountries=getCountries();var locales={en:en,de:de,es:es,fr:fr,pt:pt};/**
+ * Renders the reserve form phone input maybe with country selection.
+ * @param {Object} props The component props.
+ * @returns {JSX.Element}
+ */var ReserveFormPhoneUnwrapped=React.memo(function(props){var name=props.name,value=props.value,onChange=props.onChange,label=props.label,errorText=props.errorText,userLocation=props.userLocation;var _React$useContext=React.useContext(FulfillmentContext),shopSettings=_React$useContext.shopSettings,userInput=_React$useContext.userInput;var initialValue=React.useMemo(function(){return userInput&&userInput[name]?userInput[name]:'';},[name,userInput]);var supportedCountries=React.useMemo(function(){return shopSettings?shopSettings.supportedCountries:[];},[shopSettings]);var countries=React.useMemo(function(){if(!supportedCountries){return builtInCountries;}var sortedCountries=[].concat(builtInCountries);var sanitizedSupportedCountries=supportedCountries.map(function(country){var pieces=country.split('_');return pieces[0];});sanitizedSupportedCountries.forEach(function(country){sortedCountries.splice(sortedCountries.indexOf(country),1);});return[].concat(sanitizedSupportedCountries,sortedCountries);},[supportedCountries]);var countriesNames=useCountriesNames(supportedCountries,locales);var labels=React.useMemo(function(){var output={};if(!countries){return output;}countries.forEach(function(key){var pieces=key.split('_');output[pieces[0]]=countriesNames[key];});return output;},[countries,countriesNames]);var defaultCountry=React.useMemo(function(){if(!initialValue&&!value&&userLocation){return userLocation.country;}var phoneNumber=parsePhoneNumber(value||'');if(phoneNumber&&phoneNumber.country){return phoneNumber.country;}if(userLocation){return userLocation.country;}return i18n.getLang().split('-')[1];},[initialValue,userLocation,value]);var handleChange=React.useCallback(function(phoneValue){onChange(phoneValue,{target:{name:name}});},[name,onChange]);var phoneClasses=classnames(_defineProperty(_defineProperty({},phoneField,true),phoneFieldError,!!errorText));if(!countries||countries.length===0){return React.createElement(TextField,{name:name,value:value,onChange:onChange,label:label,className:formField,errorText:errorText});}return React.createElement("div",{className:phoneClasses},React.createElement(PhoneInput,{defaultCountry:defaultCountry,addInternationalOption:false,flags:flags,name:name,value:value||'',onChange:handleChange,placeholder:label,countries:countries,labels:labels}),!!errorText&&React.createElement("div",{className:phoneFieldErrorText},errorText));});export var ReserveFormPhone=connect(ReserveFormPhoneUnwrapped);

package/locations/components/ReserveForm/index.js

@@ -0,0 +1 @@
+export{ReserveForm}from"./ReserveForm";

package/locations/components/StockInfo/StockInfo.defaultSettings.js

@@ -0,0 +1 @@
+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{themeColors}from'@shopgate/pwa-common/helpers/config';import{AVAILABILITY_TYPE_AVAILABLE,AVAILABILITY_TYPE_LIMITED_AVAILABILITY,AVAILABILITY_TYPE_NOT_AVAILABLE,AVAILABILITY_TYPE_CUSTOM_AVAILABILITY,AVAILABILITY_TYPE_COMING_SOON}from'@shopgate/engage/product/constants';export default _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({},AVAILABILITY_TYPE_AVAILABLE,{visibleInventoryFrom:11,visibleInventoryTo:null,includeInventoryBlind:false,includeNoRecordStores:false,availabilityText:'locations.stock_info.availableInventory',availabilityTextColor:"var(--color-state-ok, ".concat(themeColors.success,")")}),AVAILABILITY_TYPE_COMING_SOON,{comingSoon:true,visibleInventoryFrom:0,visibleInventoryTo:Number.MAX_VALUE,includeInventoryBlind:true,includeNoRecordStores:true,availabilityText:"locations.stock_info.".concat(AVAILABILITY_TYPE_COMING_SOON),availabilityTextColor:"var(--color-state-warning, ".concat(themeColors.warning,")")}),AVAILABILITY_TYPE_LIMITED_AVAILABILITY,{visibleInventoryFrom:1,visibleInventoryTo:10,includeInventoryBlind:false,includeNoRecordStores:false,availabilityText:"locations.stock_info.".concat(AVAILABILITY_TYPE_LIMITED_AVAILABILITY),availabilityTextColor:"var(--color-state-warning, ".concat(themeColors.warning,")")}),AVAILABILITY_TYPE_NOT_AVAILABLE,{visibleInventoryFrom:0,visibleInventoryTo:0,includeInventoryBlind:false,includeNoRecordStores:false,availabilityText:"locations.stock_info.".concat(AVAILABILITY_TYPE_NOT_AVAILABLE),availabilityTextColor:"var(--color-state-alert, ".concat(themeColors.error,")"),allowOrderingToStore:true}),AVAILABILITY_TYPE_CUSTOM_AVAILABILITY,{visibleInventoryFrom:0,visibleInventoryTo:0,includeInventoryBlind:false,includeNoRecordStores:true,availabilityText:"locations.stock_info.".concat(AVAILABILITY_TYPE_CUSTOM_AVAILABILITY),availabilityTextColor:"var(--color-state-alert, ".concat(themeColors.error,")"),allowOrderingToStore:true}),"maxNumberOfVisibleInventory",100),"aboveMaxExtension",'+');

package/locations/components/StockInfo/StockInfo.js

@@ -0,0 +1,8 @@
+import*as React from'react';import{css}from'glamor';import{connect}from'react-redux';import classNames from'classnames';import defaultsDeep from'lodash/defaultsDeep';import PropTypes from'prop-types';import{makeGetLocationInventory}from"../../selectors";import{getThemeSettings}from"../../../core";import{SurroundPortals}from"../../../components";import{PRODUCT_LOCATION_STOCK_INFO}from"../../constants";import{getAvailabilitySettings}from"../../helpers";import defaultSettings from"./StockInfo.defaultSettings";import{StockInfoInventory}from"./StockInfoInventory";/**
+ * Creates a mapper for redux.
+ * @returns {Function}
+ */var makeMapStateToProps=function makeMapStateToProps(){var getInventory=makeGetLocationInventory(function(_,props){var _props$location;return(_props$location=props.location)===null||_props$location===void 0?void 0:_props$location.code;},function(_,props){var _props$product;return props.productId||((_props$product=props.product)===null||_props$product===void 0?void 0:_props$product.id);});return function(state,props){return{inventory:getInventory(state,props)};};};/**
+ * Renders visible stock information based on the given location.
+ * @param {Object} props The component props.
+ * @return {JSX}
+ */var StockInfoUnwrapped=function StockInfoUnwrapped(_ref){var location=_ref.location,inventory=_ref.inventory,className=_ref.className;var _ref2=getThemeSettings('product')||{},locationStockInfo=_ref2.locationStockInfo;var settings=defaultsDeep(locationStockInfo,defaultSettings);var _getAvailabilitySetti=getAvailabilitySettings(settings,location,inventory),_getAvailabilitySetti2=_getAvailabilitySetti.availabilityText,availabilityText=_getAvailabilitySetti2===void 0?'':_getAvailabilitySetti2,_getAvailabilitySetti3=_getAvailabilitySetti.availabilityTextColor,availabilityTextColor=_getAvailabilitySetti3===void 0?'inherit':_getAvailabilitySetti3,_getAvailabilitySetti4=_getAvailabilitySetti.comingSoon,comingSoon=_getAvailabilitySetti4===void 0?false:_getAvailabilitySetti4;var defaultClassName=css({color:availabilityTextColor,fontSize:'0.75rem',margin:0,':not(:empty) ~ *':{marginLeft:14}}).toString();var portalProps=React.useMemo(function(){return{location:location,inventory:inventory,comingSoon:comingSoon,settings:settings,className:className,availabilityText:availabilityText,availabilityTextColor:availabilityTextColor};},[availabilityText,availabilityTextColor,className,comingSoon,inventory,location,settings]);return React.createElement(SurroundPortals,{portalName:PRODUCT_LOCATION_STOCK_INFO,portalProps:portalProps},React.createElement("span",{className:classNames(defaultClassName,css(className).toString())},React.createElement(StockInfoInventory,{availabilityText:availabilityText,comingSoon:comingSoon,location:location,inventory:inventory,maxNumberVisible:settings.maxNumberOfVisibleInventory,aboveMaxExtension:settings.aboveMaxExtension})));};StockInfoUnwrapped.defaultProps={className:null,inventory:null};export var StockInfo=connect(makeMapStateToProps)(StockInfoUnwrapped);

package/locations/components/StockInfo/StockInfoInventory.js

@@ -0,0 +1,9 @@
+import*as React from'react';import PropTypes from'prop-types';import{I18n}from"../../../components";/**
+ * Renders the inventory given by the location into a given translation string.
+ * @param {Object} props The component props.
+ * @param {string} props.availabilityText The translation string to use.
+ * @param {Object} props.location The component props.
+ * @param {number|undefined} props.maxNumberVisible The component props.
+ * @param {string} props.aboveMaxExtension The component props.
+ * @return {JSX}
+ */export function StockInfoInventory(props){var availabilityText=props.availabilityText,comingSoon=props.comingSoon,location=props.location,inventory=props.inventory,maxNumberVisible=props.maxNumberVisible,aboveMaxExtension=props.aboveMaxExtension;var visibleInventory=React.useMemo(function(){if(!location||!inventory){return null;}if(inventory.visible!==null&&inventory.visible>maxNumberVisible){return"".concat(maxNumberVisible).concat(aboveMaxExtension);}return inventory.visible;},[aboveMaxExtension,inventory,location,maxNumberVisible]);if((!location||!availabilityText||!inventory)&&!comingSoon){return null;}return React.createElement(I18n.Text,{string:availabilityText,params:{visibleInventory:visibleInventory}});}StockInfoInventory.defaultProps={comingSoon:false,inventory:null};

package/locations/components/StockInfo/index.js

@@ -0,0 +1 @@
+export{StockInfo}from"./StockInfo";

package/locations/components/StockInfoLists/index.js

@@ -0,0 +1,9 @@
+import React from'react';import{css}from'glamor';import{connect}from'react-redux';import PlaceholderLabel from'@shopgate/pwa-ui-shared/PlaceholderLabel';import PropTypes from'prop-types';import{getPreferredLocation,makeGetLocationInventory}from"../../selectors";import{I18n,SurroundPortals}from"../../../components";import{StockInfo}from"../StockInfo";import{PRODUCT_LOCATION_STOCK_INFO_LIST}from"../../constants/Portals";import{showInventoryInLists}from"../../helpers/showInventoryInLists";/**
+ * Creates a mapper for redux.
+ * @returns {Function}
+ *
+ */var makeMapStateToProps=function makeMapStateToProps(){var getInventory=makeGetLocationInventory(function(_,props){var _getPreferredLocation;return(_getPreferredLocation=getPreferredLocation(_,props))===null||_getPreferredLocation===void 0?void 0:_getPreferredLocation.code;},function(_,props){var _props$product;return props.productId||((_props$product=props.product)===null||_props$product===void 0?void 0:_props$product.id);});return function(state,props){return{inventory:getInventory(state,props),preferredLocation:getPreferredLocation(state,props),showStockInfo:showInventoryInLists(state)};};};var styles={wrapper:css({flexDirection:'row',alignItems:'flex-end',fontSize:'0.65rem'}),text:css({margin:'0 !important'}).toString(),location:css({marginLeft:'0 !important'})};/**
+ * Renders visible stock information based on the given location.
+ * @param {Object} props The component props.
+ * @return {JSX}
+ */var StockInfoLists=function StockInfoLists(_ref){var preferredLocation=_ref.preferredLocation,product=_ref.product,inventory=_ref.inventory,showStockInfo=_ref.showStockInfo;if(!showStockInfo||!preferredLocation){return null;}var portalProps={inventory:inventory,location:preferredLocation,product:product};/* eslint-disable jsx-a11y/aria-role */return React.createElement(SurroundPortals,{portalName:PRODUCT_LOCATION_STOCK_INFO_LIST,portalProps:portalProps},React.createElement("div",{className:styles.wrapper,role:"text"},React.createElement(PlaceholderLabel,{ready:!!inventory},React.createElement(StockInfo,{product:product,location:preferredLocation}),' ',React.createElement(I18n.Text,{string:"locations.stock_info.pick_up_at",params:{storeName:''},className:styles.text}),' ',React.createElement("span",{className:styles.location},preferredLocation.name))));/* eslint-enable jsx-a11y/aria-role */};StockInfoLists.defaultProps={inventory:null,preferredLocation:null};export default connect(makeMapStateToProps)(StockInfoLists);

package/locations/components/StoreDetails/components/FindMoreStores.js

@@ -0,0 +1,4 @@
+import React from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core/helpers';import{MagnifierIcon,LocatorIcon,Link}from'@shopgate/engage/components';import{themeColors}from'@shopgate/pwa-common/helpers/config';import classNames from'classnames';import{STORE_FINDER_PATTERN}from"../../../constants";var styles={container:css({margin:'16px 0px'}),title:css({fontSize:'20px',fontWeight:'500',color:'var(--color-primary)',marginBottom:'8px'}),inputCell:css({gridArea:'input'}),inputContainer:css({position:'relative',background:themeColors.light,border:"1px solid ".concat(themeColors.shade7),borderRadius:4,display:'flex',alignItems:'center',width:'100%'}),inputIcon:css({padding:0,margin:'0 8px',color:themeColors.shade9,fontSize:'1.23rem',flexShrink:0,outline:0}),input:css({margin:'3px 0',width:'100%',lineHeight:'28px',outline:'none',verticalAlign:'middle',WebkitAppearance:'none'}),inputOverlay:css({position:'absolute',height:'100%',width:'100%'})};/**
+ * Find more stores component.
+  * @returns {JSX}
+  * */var FindMoreStores=function FindMoreStores(){return React.createElement("div",{className:styles.container},React.createElement("div",{className:styles.title,"aria-hidden":true},i18n.text('location.findMoreStores')),React.createElement("div",{className:styles.inputCell},React.createElement("div",{className:styles.inputContainer},React.createElement("span",{className:styles.inputIcon,"aria-hidden":true},React.createElement(MagnifierIcon,null)),React.createElement("input",{name:"postalCode",className:styles.input,disabled:true,type:"search",autoComplete:"off",autoCorrect:"off",placeholder:"","aria-hidden":true}),React.createElement("div",{className:styles.inputIcon},React.createElement(LocatorIcon,null)),React.createElement(Link,{href:STORE_FINDER_PATTERN,className:classNames(styles.inputOverlay),role:"button","aria-label":i18n.text('location.findMoreStores')},React.createElement("div",null)))));};export default FindMoreStores;

package/locations/components/StoreDetails/components/GetDirectionsButton.js

@@ -0,0 +1,7 @@
+import React,{useMemo}from'react';import{css}from'glamor';import{historyPush}from'@shopgate/pwa-common/actions/router';import PropTypes from'prop-types';import{Button}from'@shopgate/engage/components';import{generateGoogleMapsDirectionsUrl,i18n}from'@shopgate/engage/core';import{useDispatch}from'react-redux';var styles={container:css({}),buttonText:css({color:'var(--color-primary)'})};/**
+ * @param {Object} props The component props
+ * @param {Object} props.address The address object.
+ * @returns {JSX}
+ */var GetDirectionsButton=function GetDirectionsButton(_ref){var address=_ref.address;var dispatch=useDispatch();var url=useMemo(function(){return address&&generateGoogleMapsDirectionsUrl(address);},[address]);/**
+   * Handles the button click.
+   */var handleClick=function handleClick(){dispatch(historyPush({pathname:url,state:{target:'_blank'}}));};return React.createElement("div",{className:styles.container},React.createElement(Button,{onClick:handleClick,role:"button",type:"plain"},React.createElement("span",{className:styles.buttonText},i18n.text('location.getDirections'))));};GetDirectionsButton.defaultProps={address:null};export default GetDirectionsButton;

package/locations/components/StoreDetails/components/StoreDetails.js

@@ -0,0 +1,5 @@
+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,{useContext,useMemo}from'react';import{css}from'glamor';import{LocationIcon,Button,Link,ConditionalWrapper}from'@shopgate/engage/components';import{getWeekDaysOrder}from'@shopgate/engage/core';import{i18n}from'@shopgate/engage/core/helpers';import classNames from'classnames';import moment from'moment';import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";import GetDirectionsButton from"./GetDirectionsButton";var styles={headerWrapper:css({display:'flex'}),headerIcon:css({color:'var(--color-primary)',fontSize:20,alignContent:'center',marginRight:4}),header:css({color:'var(--color-primary)',fontWeight:'600',fontSize:20}),locationName:css({fontSize:20,fontWeight:'600',marginBottom:8}),locationRow:css({display:'flex',gap:8,flexWrap:'wrap'}),locationColumn:css({flex:1,minWidth:'200px','& > p':{margin:0}}),storeHoursColumn:css({flex:1,minWidth:'250px',maxWidth:'455px'}),storeHours:css({fontSize:17,fontWeight:'600'}),storeHoursLine:css({}),storeHoursWeekday:css({textAlign:'left'}),bold:css({fontWeight:'600'}),storeHoursOpeningTime:css({textAlign:'right'}),phone:css({fontSize:17,fontWeight:'600'}),phoneNumber:css({textDecoration:'underline'}),makeMyStoreButton:css({color:'var(--color-primary)'}),comingSoon:css({fontStyle:'italic'}),buttonRow:css({display:'flex',alignItems:'center',gap:'8px 30px',flexWrap:'wrap',margin:'8px 0'})};/**
+ * Store details component.
+  * @returns {JSX}
+  */var StoreDetails=function StoreDetails(){var _useContext=useContext(StoreDetailsContext),selectLocation=_useContext.selectLocation,routeLocation=_useContext.routeLocation,isRouteLocationPreferred=_useContext.isRouteLocationPreferred;var _ref=routeLocation||{},_ref$address=_ref.address,address=_ref$address===void 0?{}:_ref$address,_ref$operationHours=_ref.operationHours,operationHours=_ref$operationHours===void 0?{}:_ref$operationHours,isComingSoon=_ref.isComingSoon;var currentDay=moment().format('ddd').toLowerCase();// Check if there are any opening hours to hide the section if not
+var hasOpeningHours=useMemo(function(){return Object.keys(operationHours).length>0&&Object.values(operationHours).some(function(value){return value&&typeof value==='string'&&value.length>0;});},[operationHours]);if(!routeLocation){return null;}return React.createElement("div",null,React.createElement(ConditionalWrapper,{condition:!isRouteLocationPreferred,wrapper:function wrapper(children){return React.createElement(Button,{onClick:function onClick(){return selectLocation(routeLocation,true);},role:"button",type:"plain"},children);}},React.createElement("div",{className:styles.headerWrapper},React.createElement("div",{className:styles.headerIcon},React.createElement(LocationIcon,{className:styles.icon,size:20})),React.createElement("div",{className:styles.header},isRouteLocationPreferred?i18n.text('location.myStore'):i18n.text('location.makeMyStore')))),React.createElement("div",{className:styles.locationName},routeLocation.name),React.createElement("div",{className:styles.locationRow},React.createElement("div",{className:styles.locationColumn},React.createElement("p",null,address===null||address===void 0?void 0:address.street),(address===null||address===void 0?void 0:address.street2)&&address.street2!==''&&React.createElement("p",null,address.street2),(address===null||address===void 0?void 0:address.street3)&&address.street3!==''&&React.createElement("p",null,address.street3),(address===null||address===void 0?void 0:address.street4)&&address.street4!==''&&React.createElement("p",null,address.street4),React.createElement("p",null,i18n.text('locations.address',address)),React.createElement("div",{className:styles.buttonRow},React.createElement(GetDirectionsButton,{address:address}),!isComingSoon&&!isRouteLocationPreferred&&React.createElement(Button,{onClick:function onClick(){return selectLocation(routeLocation,true);},role:"button",type:"plain",className:classNames(styles.makeMyStoreButton)},React.createElement("span",null,i18n.text('location.makeMyStore'))),isComingSoon&&React.createElement("div",{className:styles.comingSoon},i18n.text('location.comingSoon'))),(address===null||address===void 0?void 0:address.phoneNumber)&&React.createElement(React.Fragment,null,React.createElement("div",{className:styles.phone},"".concat(i18n.text('location.phone'),": ")),React.createElement("div",{className:styles.phoneNumber},React.createElement(Link,{href:"tel:".concat(address.phoneNumber),className:classNames(styles.phoneNumber),target:"_blank",role:"button","aria-label":address.phoneNumber},address.phoneNumber)))),hasOpeningHours&&React.createElement("div",{className:styles.storeHoursColumn},React.createElement("div",{className:styles.storeHours},"".concat(i18n.text('location.storeHours'),":")),React.createElement("table",null,React.createElement("tbody",null,getWeekDaysOrder().map(function(weekDay){if(!operationHours[weekDay]){return null;}return React.createElement("tr",{className:styles.storeHoursLine,key:weekDay,"aria-label":"".concat(i18n.text("locations.".concat(weekDay)),": ").concat(operationHours[weekDay]),tabIndex:0},React.createElement("td",{className:classNames(styles.storeHoursWeekday,_defineProperty({},styles.bold,weekDay===currentDay)),"aria-hidden":true},"".concat(i18n.text("locations.".concat(weekDay)),":")),React.createElement("td",{className:classNames(styles.storeHoursOpeningTime,_defineProperty({},styles.bold,weekDay===currentDay)),"aria-hidden":true},operationHours[weekDay]));}))))));};export default StoreDetails;

package/locations/components/StoreDetails/components/StoreFinderMap.js

@@ -0,0 +1,20 @@
+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,{useCallback,useMemo,useContext,useRef,useEffect}from'react';import{useDispatch}from'react-redux';import{Circle,MapContainer,Marker,TileLayer}from'react-leaflet';import{GestureHandling}from'leaflet-gesture-handling';import"../../../assets/leaflet.css";import'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';import Leaflet from'leaflet';import{renderToString}from'react-dom/server';import MapMarkerIcon from'@shopgate/pwa-ui-shared/icons/MapMarkerIcon';import{historyPush}from'@shopgate/engage/core';import{container,markerSelected}from"./StoreFinderMap.style";import{MAP_RADIUS_KM}from"../../../constants";import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";Leaflet.Map.addInitHook('addHandler','gestureHandling',GestureHandling);/**
+ * @returns {JSX.Element}
+ */var StoreFinderMap=function StoreFinderMap(){var mapContainerRef=useRef(null);var dispatch=useDispatch();/**
+   * Handles the click on the OpenStreetMap copyright
+   * Cause the copyright is only a plain a tag
+   * this causes weird routing in the app
+   * To prevent this we need to handle the click on the a tag
+   * @param {Event} e The event
+   * @returns {void}
+   * */var handleOpenStreetMapCopyrightClick=useCallback(function(e){if(e.target.tagName==='A'&&e.target.href){e.preventDefault();dispatch(historyPush({pathname:e.target.href}));}},[dispatch]);// check the mapContainerRef if any a tag is clicked
+// to catch the click on the OpenStreetMap copyright
+useEffect(function(){if(mapContainerRef.current){mapContainerRef.current.addEventListener('click',handleOpenStreetMapCopyrightClick);}return function(){if(mapContainerRef.current){mapContainerRef.current.removeEventListener('click',handleOpenStreetMapCopyrightClick);}};},[handleOpenStreetMapCopyrightClick]);var _useContext=useContext(StoreDetailsContext),routeLocation=_useContext.routeLocation;var iconHTML=useMemo(function(){return renderToString(React.createElement(MapMarkerIcon,null));},[]);var markerIconSelected=useMemo(function(){return Leaflet.divIcon({html:iconHTML,className:markerSelected,iconSize:[40,40]});},[iconHTML]);var _ref=routeLocation||{},code=_ref.code,latitude=_ref.latitude,longitude=_ref.longitude;var viewport=useMemo(function(){if(!latitude||!longitude){return null;}return[latitude,longitude];},[latitude,longitude]);/**
+   * Enables touch and gestures on the map
+   * @param {Object} map available parameters for the map
+   */var handleMapCreated=function handleMapCreated(map){map.gestureHandling.enable();map.attributionControl.setPrefix('');if(Leaflet.Browser.mobile){map.touchZoom.enable();}};/**
+   * Creates coordinates for a bounding box around a center point
+   * @param {Array} center The center point
+   * @param {number} distanceInMeter The distance in meters
+   * @returns {Array} The bounds
+   */var createBounds=useCallback(function(_ref2,distanceInMeter){var _ref3=_slicedToArray(_ref2,2),lat=_ref3[0],lng=_ref3[1];var EARTH_RADIUS_KM=6371;var distanceInKm=distanceInMeter/1000;var distanceToBoundaryInKm=distanceInKm/2;var latInRadians=lat*(Math.PI/180);var deltaLat=distanceToBoundaryInKm/EARTH_RADIUS_KM*(180/Math.PI);var deltaLng=distanceToBoundaryInKm/EARTH_RADIUS_KM*(180/Math.PI)/Math.cos(latInRadians);return[[lat-deltaLat,lng-deltaLng],[lat+deltaLat,lng+deltaLng]];},[]);var radiusinMeters=MAP_RADIUS_KM*1000;var bounds=useMemo(function(){if(!viewport||!MAP_RADIUS_KM){return null;}return createBounds(viewport,radiusinMeters);},[createBounds,radiusinMeters,viewport]);var debug=false;if(!routeLocation){return null;}return React.createElement("div",{className:container,"aria-hidden":true,ref:mapContainerRef},React.createElement(MapContainer,{center:viewport,bounds:bounds,className:container,whenCreated:handleMapCreated},debug&&React.createElement(Circle,{center:viewport,radius:radiusinMeters,color:"blue"}),React.createElement(TileLayer,{attribution:"&copy <a href=\"https://osm.org/copyright\">OpenStreetMap</a>",url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),React.createElement(Marker,{key:code,icon:markerIconSelected,position:[latitude,longitude]})));};export default StoreFinderMap;

package/locations/components/StoreDetails/components/StoreFinderMap.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export var container=css({height:'100%',width:'100%'});export var markerSelected=css({' svg':{height:40,width:40,fontSize:'1.5rem',color:"var(--color-primary, ".concat(themeColors.primary,")")}}).toString();

package/locations/components/StoreDetails/components/StoreLocationMap.js

@@ -0,0 +1,4 @@
+import React,{useRef}from'react';import{css}from'glamor';import{SurroundPortals}from'@shopgate/engage/components';import StoreFinderMap from"./StoreFinderMap";import{StoreFinderProvider}from"../../../providers";import{STORE_DETAILS_LOCATION_MAP}from"../../../constants/Portals";var styles={container:css({maxHeight:'250px',height:'250px',width:'100%',marginTop:'10px',marginBottom:'10px'}).toString()};/**
+* Store location map component.
+* @returns {JSX.Element}
+*/var StoreLocationMap=function StoreLocationMap(){var storeListRef=useRef(null);return React.createElement(StoreFinderProvider,{storeListRef:storeListRef},React.createElement(SurroundPortals,{portalName:STORE_DETAILS_LOCATION_MAP},React.createElement("div",{className:styles.container},React.createElement(StoreFinderMap,null))));};export default StoreLocationMap;

package/locations/components/StoreDetails/components/StoresNearby.js

@@ -0,0 +1,4 @@
+import React,{useContext}from'react';import{css}from'glamor';import{i18n}from'@shopgate/engage/core/helpers';import StoresNearbyListItem from"./StoresNearbyListItem";import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";var styles={title:css({fontSize:20,fontWeight:'600',marginBottom:12}),table:css({width:'100%'})};/**
+* Show stores nearby selected location
+* @returns {JSX}
+*/var StoresNearby=function StoresNearby(){var _useContext=useContext(StoreDetailsContext),nearbyLocations=_useContext.nearbyLocations;return React.createElement("div",null,React.createElement("div",{className:styles.title},i18n.text('location.storesNearby')),nearbyLocations.length>0&&React.createElement("table",{className:styles.table},React.createElement("tbody",null,nearbyLocations.map(function(location){return React.createElement(StoresNearbyListItem,{location:location,key:location.code});}))),nearbyLocations.length===0&&React.createElement("div",null,i18n.text('location.noStoresNearby')));};export default StoresNearby;

package/locations/components/StoreDetails/components/StoresNearbyListItem.js

@@ -0,0 +1,9 @@
+import React,{useContext}from'react';import{useDispatch}from'react-redux';import PropTypes from'prop-types';import{css}from'glamor';import{Button}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core/helpers';import{historyPush}from'@shopgate/engage/core';import formatDistance from"../../../helpers/formatDistance";import{STORE_DETAILS_PATH}from"../../../constants";import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";var styles={button:css({fontSize:'14px !important',padding:'0px !important'}).toString(),locationRow:css({borderBottom:'1px solid #e8e8e8',borderTop:'1px solid #e8e8e8','> td:first-child > div':{paddingLeft:0},'> td:last-child > div':{paddingRight:0}}),distance:css({textWrapMode:'nowrap',alignContent:'center',verticalAlign:'middle',fontWeight:'500'}),makeMyStore:css({textWrapMode:'nowrap',alignContent:'center',verticalAlign:'middle'}),storeInfo:css({textWrapMode:'nowrap',alignContent:'center',verticalAlign:'middle'}),name:css({textAlign:'start'}),cellContainer:css({padding:'8px',textAlign:'end'}),cell:css({verticalAlign:'middle'}),buttonContainer:css({display:'flex',gap:'4px 16px',flexWrap:'wrap',justifyContent:'flex-end'})};/**
+* Shows a location in a row
+* @param {Object} props Props
+* @param {Object} props.location Location
+* @returns {JSX}
+*/var StoresNearbyListItem=function StoresNearbyListItem(_ref){var location=_ref.location;var dispatch=useDispatch();var _useContext=useContext(StoreDetailsContext),preferredLocation=_useContext.preferredLocation,selectLocation=_useContext.selectLocation;var name=location.name,distance=location.distance,unitSystem=location.unitSystem,code=location.code,isComingSoon=location.isComingSoon;var isPreferredLocation=preferredLocation&&preferredLocation.code===code;/**
+   * Opens the store details page
+   * @param {string} locationCode Location code
+   */var openStoreDetails=function openStoreDetails(locationCode){dispatch(historyPush({pathname:"".concat(STORE_DETAILS_PATH,"/").concat(locationCode)}));};return React.createElement("tr",{className:styles.locationRow},React.createElement("td",{className:styles.cell},React.createElement("div",{className:styles.cellContainer},React.createElement("div",{className:styles.name},name))),React.createElement("td",{className:styles.cell},React.createElement("div",{className:styles.cellContainer},React.createElement("div",{className:styles.distance},formatDistance(distance||0,unitSystem==='imperial')))),React.createElement("td",{className:styles.cell},React.createElement("div",{className:styles.cellContainer},React.createElement("div",{className:styles.buttonContainer},React.createElement("div",{className:styles.makeMyStore},!isComingSoon&&React.createElement(Button,{className:styles.button,onClick:function onClick(){return selectLocation(location,true);},role:"button",type:"primary",flat:true,disabled:isPreferredLocation,wrapContent:false},"".concat(i18n.text('location.makeMyStore'))),isComingSoon&&React.createElement(Button,{className:styles.button,role:"button",type:"primary",flat:true,disabled:true,wrapContent:false},i18n.text('location.comingSoon'))),React.createElement("div",{className:styles.storeInfo},React.createElement(Button,{className:styles.button,role:"button",type:"primary",flat:true,onClick:function onClick(){return openStoreDetails(code);},wrapContent:false},i18n.text('locations.details')))))));};export default StoresNearbyListItem;

package/locations/components/StoreDetails/index.js

@@ -0,0 +1,4 @@
+import React from'react';import{css}from'glamor';import{themeConfig}from'@shopgate/engage';import StoreDetails from"./components/StoreDetails";import StoreLocationMap from"./components/StoreLocationMap";import StoresNearby from"./components/StoresNearby";import FindMoreStores from"./components/FindMoreStores";import{StoreDetailsProvider}from"../../providers";var styles={page:css({padding:"".concat(themeConfig.variables.gap.small,"px ").concat(themeConfig.variables.gap.big,"px")}).toString()};/**
+ * @param {Object} props .
+ * @returns {JSX}
+ */var StoreDetailsContent=function StoreDetailsContent(){return React.createElement(StoreDetailsProvider,null,React.createElement("div",{className:styles.page},React.createElement(StoreDetails,null),React.createElement(StoreLocationMap,null),React.createElement(StoresNearby,null),React.createElement(FindMoreStores,null)));};export default StoreDetailsContent;

package/locations/components/StoreFinder/Store.context.js

@@ -0,0 +1 @@
+import{createContext}from'react';export var StoreContext=createContext({});

package/locations/components/StoreFinder/StoreFinder.js

@@ -0,0 +1,3 @@
+import React,{useRef}from'react';import{hot}from'react-hot-loader/root';import{StoreFinderProvider}from"../../providers";import StoreFinderSearch from"./StoreFinderSearch";import StoreFinderLocations from"./StoreFinderLocations";import{container,storeSearch,storeList}from"./StoreFinder.style";/**
+ * @returns {JSX.Element}
+ */var StoreFinder=function StoreFinder(){var storeListRef=useRef(null);return React.createElement(StoreFinderProvider,{storeListRef:storeListRef},React.createElement("div",{className:container},React.createElement("div",{className:storeSearch},React.createElement(StoreFinderSearch,null)),React.createElement("div",{className:storeList},React.createElement(StoreFinderLocations,{ref:storeListRef}))));};export default hot(StoreFinder);

package/locations/components/StoreFinder/StoreFinder.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({display:'grid',gridTemplateColumns:'1fr',gridTemplateRows:'auto 1fr',gridTemplateAreas:'"search" "store-list"',height:'inherit'});export var storeSearch=css({gridArea:'search',padding:"".concat(variables.gap.big,"px 4px 0 4px"),' select':{color:'var(--color-text-medium-emphasis)'}});export var storeList=css({gridArea:'store-list',width:'100%',overflow:'hidden',padding:'0 12px 8px 12px'});

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.connector.js

@@ -0,0 +1,4 @@
+import{connect}from'react-redux';import{historyPush}from'@shopgate/pwa-common/actions/router/historyPush';/**
+ * @param {Function} dispatch The redux dispatch function.
+ * @return {Object} The extended component props.
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{openMap:function openMap(url){return dispatch(historyPush({pathname:url,state:{target:'_blank'}}));}};};export default connect(null,mapDispatchToProps);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -0,0 +1,4 @@
+import React,{useMemo,useCallback}from'react';import PropTypes from'prop-types';import classNames from'classnames';import{i18n,generateGoogleMapsDirectionsUrl}from'@shopgate/engage/core';import{RippleButton}from'@shopgate/engage/components';import{container,button}from"./StoreFinderGetDirectionsButton.style";import connect from"./StoreFinderGetDirectionsButton.connector";/**
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var StoreFinderGetDirectionsButton=function StoreFinderGetDirectionsButton(_ref){var address=_ref.address,openMap=_ref.openMap,className=_ref.className;var url=useMemo(function(){return address&&generateGoogleMapsDirectionsUrl(address);},[address]);var handleClick=useCallback(function(){openMap(url);},[openMap,url]);if(!address){return null;}return React.createElement("div",{className:classNames(container,className)},React.createElement(RippleButton,{onClick:handleClick,className:button},i18n.text('locations.get_directions')));};StoreFinderGetDirectionsButton.defaultProps={address:null,openMap:function openMap(){},className:null};export default connect(StoreFinderGetDirectionsButton);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors;export var container=css({}).toString();export var button=css({width:'100%',background:"var(--color-primary, ".concat(colors.primary,")!important"),color:"var(--color-primary-contrast, ".concat(colors.primaryContrast,")!important"),fontSize:'0.875rem !important'}).toString();

package/locations/components/StoreFinder/StoreFinderLocation.js

@@ -0,0 +1,3 @@
+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,{useContext,useMemo}from'react';import classNames from'classnames';import{StoreContext}from"./Store.context";import{StoreFinderContext}from"../../locations.context";import StoreFinderLocationHeader from"./StoreFinderLocationHeader";import{container,selected}from"./StoreFinderLocation.style";import{StoreFinderSelectLocationButton}from"./StoreFinderSelectLocationButton";import StoreFinderStoreInfoButton from"./StoreFinderStoreInfoButton";/**
+ * @returns {JSX}
+ */var StoreFinderLocation=function StoreFinderLocation(){var store=useContext(StoreContext);var _useContext=useContext(StoreFinderContext),selectedLocation=_useContext.selectedLocation;var isSelected=useMemo(function(){var _ref=selectedLocation||{},code=_ref.code;return store.code===code;},[selectedLocation,store.code]);return React.createElement("div",{className:classNames(container,_defineProperty({},selected,isSelected)),"data-location-code":store.code},React.createElement(StoreFinderLocationHeader,null),React.createElement(StoreFinderSelectLocationButton,null),React.createElement(StoreFinderStoreInfoButton,null));};export default StoreFinderLocation;

package/locations/components/StoreFinder/StoreFinderLocation.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({}).toString();export var selected=css({}).toString();export var directionsButton=css({padding:"0 ".concat(variables.gap.big,"px ").concat(variables.gap.big,"px")}).toString();

package/locations/components/StoreFinder/StoreFinderLocationDetails.js

@@ -0,0 +1,3 @@
+import _isEmpty from"lodash/isEmpty";import _every from"lodash/every";import React,{useContext}from'react';import{StoreContext}from"./Store.context";import{StoreOpeningHours}from"../StoreList/StoreOpeningHours";import{Accordion,I18n}from"../../../components";import{accordionHeader,accordionContent}from"./StoreFinderLocationDetails.style";/**
+ * @returns {JSX}
+ */var StoreFinderLocationDetails=function StoreFinderLocationDetails(){var _useContext=useContext(StoreContext),operationHours=_useContext.operationHours;if(!operationHours||_every(operationHours,_isEmpty)){return null;}return React.createElement(Accordion,{className:accordionHeader,renderLabel:function renderLabel(){return React.createElement(I18n.Text,{string:"locations.details"});}},React.createElement("div",{className:accordionContent},React.createElement(StoreOpeningHours,{hours:operationHours,pure:true})));};export default StoreFinderLocationDetails;

package/locations/components/StoreFinder/StoreFinderLocationDetails.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeColors}from'@shopgate/pwa-common/helpers/config';export var accordionHeader=css({borderTop:"1px solid ".concat(themeColors.shade7),cursor:'pointer',' svg':{display:'inline'}}).toString();export var accordionContent=css({fontSize:'0.875rem',' > div':{padding:0}}).toString();

package/locations/components/StoreFinder/StoreFinderLocationHeader.js

@@ -0,0 +1,3 @@
+import React,{useContext,useMemo}from'react';import{Grid,LocationIcon}from'@shopgate/engage/components';import{i18n}from'@shopgate/engage/core/helpers';import{StoreContext}from"./Store.context";import{StoreFinderContext}from"../../locations.context";import{StoreDistance}from"../StoreList/StoreDistance";import{StoreHoursToday}from"../StoreList/StoreHoursToday";import{StoreAddress}from"../StoreList/StoreAddress";import StoreFinderLocationHeaderPhoneNumber from"./StoreFinderLocationHeaderPhoneNumber";import{container,storeName,storeDistance,storeHoursToday,clickable,storeNameWrapper,myStore,myStoreIcon,myStoreWrapper}from"./StoreFinderLocationHeader.style";/**
+ * @returns {JSX}
+ */var StoreFinderLocationHeader=function StoreFinderLocationHeader(){var store=useContext(StoreContext);var name=store.name,distance=store.distance,unitSystem=store.unitSystem,operationHours=store.operationHours,address=store.address;var _useContext=useContext(StoreFinderContext),selectedLocation=_useContext.selectedLocation;var isSelectedLocation=useMemo(function(){return(selectedLocation===null||selectedLocation===void 0?void 0:selectedLocation.code)===(store===null||store===void 0?void 0:store.code);},[selectedLocation,store]);return React.createElement("div",{className:container},React.createElement("div",{className:clickable},React.createElement(Grid,null,React.createElement(Grid.Item,{grow:1},React.createElement("div",{className:storeNameWrapper},React.createElement("div",{className:storeName},name),isSelectedLocation&&React.createElement("div",{className:myStoreWrapper},React.createElement("div",{className:myStoreIcon},React.createElement(LocationIcon,{size:20})),React.createElement("div",{className:myStore},i18n.text('location.myStore'))))),React.createElement(Grid.Item,{className:storeDistance},React.createElement(StoreDistance,{distance:distance,unitSystem:unitSystem}))),React.createElement("div",{className:storeHoursToday},React.createElement(StoreHoursToday,{hours:operationHours})),React.createElement(StoreAddress,{address:address})),React.createElement(StoreFinderLocationHeaderPhoneNumber,{phone:address.phoneNumber}));};export default StoreFinderLocationHeader;

package/locations/components/StoreFinder/StoreFinderLocationHeader.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var variables=themeConfig.variables;export var container=css({padding:variables.gap.big,display:'flex',flexDirection:'column',color:'var(--color-text-low-emphasis)',' > *':{margin:0},' svg':{color:'var(--color-text-low-emphasis)'},' li':{paddingTop:0},' a':{color:'var(--color-primary)',textDecoration:'underline'},fontSize:'0.875rem',lineHeight:'1.5rem',' > *:not(:last-child)':{paddingBottom:variables.gap.xsmall,paddingTop:0}}).toString();export var clickable=css({' > *':{margin:0,paddingTop:0},' > *:not(:last-child)':{paddingBottom:variables.gap.xsmall,paddingTop:0}}).toString();export var storeName=css({fontSize:'1rem',fontWeight:500,color:'var(--color-text-high-emphasis)'}).toString();export var myStoreWrapper=css({display:'flex',alignItems:'center'}).toString();export var myStore=css({color:'var(--color-primary)',fontSize:'1rem',fontWeight:500}).toString();export var myStoreIcon=css({' svg':{color:'var(--color-primary)'},marginRight:'4px'}).toString();export var storeNameWrapper=css({flexWrap:'wrap',display:'flex',gap:'2px 12px'});export var storeDistance=css({lineHeight:'1.65rem',paddingLeft:variables.gap.small}).toString();export var storeHoursToday=css({' > *':{color:'var(--color-text-low-emphasis)'}}).toString();

package/locations/components/StoreFinder/StoreFinderLocationHeaderPhoneNumber.js

@@ -0,0 +1,4 @@
+import React from'react';import PropTypes from'prop-types';import PhoneIcon from'@shopgate/pwa-ui-shared/icons/PhoneIcon';import{StoreDetailsLine}from"../StoreList/StoreDetailsLine";/**
+ * @param {Object} props The component props
+ * @returns {JSX}
+ */var StoreFinderLocationHeaderPhoneNumber=function StoreFinderLocationHeaderPhoneNumber(_ref){var phone=_ref.phone,pure=_ref.pure;if(!phone){return null;}if(pure){return React.createElement("a",{href:"tel:".concat(phone)},phone);}return React.createElement(StoreDetailsLine,{icon:PhoneIcon},React.createElement("a",{href:"tel:".concat(phone)},phone));};StoreFinderLocationHeaderPhoneNumber.defaultProps={phone:null,pure:false};export default StoreFinderLocationHeaderPhoneNumber;

package/locations/components/StoreFinder/StoreFinderLocations.js

@@ -0,0 +1,5 @@
+import React,{useContext,forwardRef}from'react';import{CardList}from'@shopgate/engage/components';import{StoreFinderContext}from"../../locations.context";import{StoreContext}from"./Store.context";import StoreFinderLocation from"./StoreFinderLocation";import{container,cardList,card}from"./StoreFinderLocations.style";/**
+ * @param {Object} props The component props
+ * @param {Object} ref A forwarded ref
+ * @returns {JSX}
+ */var StoreFinderLocations=function StoreFinderLocations(props,ref){var _useContext=useContext(StoreFinderContext),locations=_useContext.locations;if(!locations||locations.length===0){return null;}return React.createElement("div",{ref:ref,className:container},React.createElement(CardList,{className:cardList},locations.map(function(location){return React.createElement(CardList.Item,{className:card,key:location.code},React.createElement(StoreContext.Provider,{value:location},React.createElement(StoreFinderLocation,null)));})));};export default forwardRef(StoreFinderLocations);

package/locations/components/StoreFinder/StoreFinderLocations.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeConfig}from'@shopgate/pwa-common/helpers/config';var colors=themeConfig.colors,variables=themeConfig.variables;var gapM=variables.gap.small+variables.gap.xsmall;export var container=css({paddingTop:2,borderTop:'none',overflowY:'unset',WebkitOverflowScrolling:'unset'});export var cardList=css({paddingTop:0}).toString();export var card=css({background:colors.light,border:"1px solid ".concat(colors.shade7),boxSizing:'border-box',boxShadow:'0px 1px 2px rgba(0, 0, 0, 0.25)',borderRadius:3,':not(:last-child)':{marginBottom:gapM}}).toString();

package/locations/components/StoreFinder/StoreFinderSearch.js

@@ -0,0 +1,3 @@
+import React from'react';import StoreListSearch from"../StoreList/StoreListSearch";import{container}from"./StoreFinderSearch.style";/**
+ * @returns {JSX}
+ */var StoreFinderSearch=function StoreFinderSearch(){return React.createElement("div",{className:container},React.createElement(StoreListSearch,{isStoreFinder:true}));};export default StoreFinderSearch;

package/locations/components/StoreFinder/StoreFinderSearch.style.js

@@ -0,0 +1 @@
+import{css}from'glamor';import{themeVariables}from'@shopgate/pwa-common/helpers/config';export var container=css({paddingBottom:themeVariables.gap.small});

package/locations/components/StoreFinder/StoreFinderSelectLocationButton.js

@@ -0,0 +1,5 @@
+import React,{useCallback,useContext,useMemo}from'react';import{RippleButton}from'@shopgate/engage/components';import{StoreContext}from"./Store.context";import{i18n}from"../../../core";import{StoreFinderContext}from"../../locations.context";import{selectLocationButton,selectLocationButtonWrapper}from"../StoreList/Store.style";/**
+ * The StoreFinderSelectLocationButton component.
+ * Renders if route query.selectLocation param is passed
+ * @returns {JSX.Element}
+ */export var StoreFinderSelectLocationButton=function StoreFinderSelectLocationButton(){var store=useContext(StoreContext);var _useContext=useContext(StoreFinderContext),selectLocation=_useContext.selectLocation,isLoading=_useContext.isLoading,selectedLocation=_useContext.selectedLocation;var handleClick=useCallback(function(e){e.stopPropagation();selectLocation(store);},[selectLocation,store]);var isSelected=useMemo(function(){return(selectedLocation===null||selectedLocation===void 0?void 0:selectedLocation.code)===(store===null||store===void 0?void 0:store.code);},[selectedLocation,store]);return React.createElement("div",{className:selectLocationButtonWrapper},React.createElement(RippleButton,{onClick:handleClick,className:selectLocationButton.toString(),disabled:isLoading||(store===null||store===void 0?void 0:store.isComingSoon)||isSelected},i18n.text((store===null||store===void 0?void 0:store.isComingSoon)?'location.comingSoon':'locations.select_location')));};

package/locations/components/StoreFinder/StoreFinderStoreInfoButton.js

@@ -0,0 +1,8 @@
+import React,{useCallback,useContext}from'react';import classNames from'classnames';import PropTypes from'prop-types';import{RippleButton}from'@shopgate/engage/components';import{historyPush}from'@shopgate/engage/core';import{connect}from'react-redux';import{css}from'glamor';import{themeColors,themeVariables}from'@shopgate/pwa-common/helpers/config';import{StoreContext}from"./Store.context";import{i18n}from"../../../core";import{StoreFinderContext}from"../../locations.context";import{STORE_DETAILS_PATH}from"../../constants";var gap=themeVariables.gap;var styles={showStoreInfoButton:css({width:'100%',fontSize:'.875rem !important',':not(:disabled)':{background:"var(--color-primary, ".concat(themeColors.primary,")!important"),color:"var(--color-primary-contrast, ".concat(themeColors.primaryContrast,")!important")}}),showStoreInfoButtonWrapper:css({padding:"0 ".concat(gap.big,"px ").concat(gap.small,"px ").concat(gap.big,"px")})};/**
+ * @param {Function} dispatch The dispatch function.
+ * @returns {Object}
+ */var mapDispatchToProps=function mapDispatchToProps(dispatch){return{openStoreDetail:function openStoreDetail(code){return dispatch(historyPush({pathname:"".concat(STORE_DETAILS_PATH,"/").concat(code)}));}};};/**
+ * The StoreFinderStoreInfoButton component.
+ * @param {Function} openStoreDetail The openStoreDetail function.
+ * @returns {JSX}
+ */var StoreFinderStoreInfoButton=function StoreFinderStoreInfoButton(_ref){var openStoreDetail=_ref.openStoreDetail;var store=useContext(StoreContext);var _useContext=useContext(StoreFinderContext),isLoading=_useContext.isLoading;var handleClick=useCallback(function(e){e.stopPropagation();openStoreDetail(store===null||store===void 0?void 0:store.code);},[openStoreDetail,store]);return React.createElement("div",{className:styles.showStoreInfoButtonWrapper},React.createElement(RippleButton,{onClick:handleClick,className:classNames(styles.showStoreInfoButton),disabled:isLoading},i18n.text('locations.store_info')));};export default connect(null,mapDispatchToProps)(StoreFinderStoreInfoButton);

package/locations/components/StoreFinder/index.js

@@ -0,0 +1 @@
+export{default as StoreFinder}from"./StoreFinder";

package/locations/components/StoreList/Store.context.js

@@ -0,0 +1 @@
+import{createContext}from'react';export var StoreContext=createContext({});

package/locations/components/StoreList/Store.style.js

@@ -0,0 +1 @@
+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{css}from'glamor';import{themeVariables,themeColors}from'@shopgate/pwa-common/helpers/config';import{responsiveMediaQuery}from'@shopgate/engage/styles';var gap=themeVariables.gap;var baseCardPadding="".concat(gap.small,"px ").concat(gap.big,"px");var gapM=gap.small+gap.xsmall;export var stores=css({background:"var(--color-background-accent, ".concat(themeColors.background,")"),padding:"".concat(gapM,"px ").concat(gapM,"px ").concat(gap.big,"px"),fontSize:'0.875rem',boxShadow:'inset rgba(0, 0, 0, .117647) 0 1px 6px, inset rgba(0, 0, 0, .117647) 0 1px 4px'}).toString();export var storeCard=css({background:themeColors.light,marginBottom:gapM,':last-of-type':{marginBottom:0},border:"1px solid ".concat(themeColors.shade7),boxSizing:'border-box',boxShadow:'0px 1px 2px rgba(0, 0, 0, 0.25)',borderRadius:'0px 0px 3px 3px'}).toString();export var storeCardPlaceholder=css({margin:'10px 0',height:36}).toString();export var storeHeader=css({cursor:'pointer',padding:"".concat(baseCardPadding," ").concat(gap.xsmall,"px")}).toString();export var disabled=css({cursor:'not-allowed'}).toString();export var storeName=css({fontSize:'1rem',fontWeight:500}).toString();export var storeDistance=css(_defineProperty({whiteSpace:'nowrap',color:"var(--color-text-medium-emphasis, ".concat(themeColors.gray,")")},responsiveMediaQuery('>sm',{webOnly:true}),{fontSize:'0.875rem'})).toString();export var storeDetailsBody=css({padding:baseCardPadding,borderTop:"1px solid ".concat(themeColors.shade7)}).toString();export var storeDetailsAccordion=css({justifyContent:'space-between'}).toString();export var storeHoursToday=css({color:"var(--color-text-medium-emphasis, ".concat(themeColors.gray,")")}).toString();export var address=css({display:'flex',flexFlow:'row nowrap',color:"var(--color-text-medium-emphasis, ".concat(themeColors.gray,")"),marginBottom:4}).toString();export var addressIcon=css({color:'var(--color-text-medium-emphasis)',fontSize:'1.4rem',padding:"".concat(gap.xsmall,"px ").concat(gap.big,"px 0 0")}).toString();export var detailsIcon=css({color:'var(--color-text-medium-emphasis)',fontSize:'1.4rem',padding:"".concat(gap.xsmall,"px ").concat(gap.big,"px 0 0")}).toString();export var detailsIconLinked=css({color:'var(--color-primary)'}).toString();export var detailsLine=css({marginTop:gapM}).toString();export var details=css({paddingTop:gap.xsmall}).toString();export var openingHours=css({display:'table',color:'var(--color-text-medium-emphasis)'}).toString();export var openingHoursRow=css({display:'table-row'}).toString();export var openingHoursDay=css({display:'table-cell',paddingRight:gap.big}).toString();export var detailsPrimary=css({margin:0,color:"var(--color-primary, ".concat(themeColors.primary,")"),lineHeight:'1.375rem'}).toString();export var detailsSecondary=css({color:"var(--color-text-medium-emphasis, ".concat(themeColors.shade11,")"),fontSize:'0.75rem'}).toString();export var selectLocationButtonWrapper=css({padding:"0 ".concat(gap.big,"px ").concat(gap.small,"px ").concat(gap.big,"px")});export var stockInfoContainer=css({marginTop:8,':empty':{display:'none'}});export var selectLocationButton=css({width:'100%',fontSize:'.875rem !important',':not(:disabled)':{background:"var(--color-primary, ".concat(themeColors.primary,")!important"),color:"var(--color-primary-contrast, ".concat(themeColors.primaryContrast,")!important")}});

package/locations/components/StoreList/StoreAddress.js

@@ -0,0 +1,7 @@
+import*as React from'react';import PropTypes from'prop-types';import{StoreContext}from"./Store.context";import{FulfillmentContext}from"../../locations.context";import{StockInfo}from"../StockInfo";import{LocationIcon}from"../../../components";import{i18n}from"../../../core";import{address as container,addressIcon,stockInfoContainer}from"./Store.style";/**
+ * Renders the pickup location's address information.
+ * @param {Object} props The component props.
+ * @param {Object} props.address The address object.
+ * @param {boolean} props.pure Whether to only render the address without any wrapper components.
+ * @returns {JSX.Element}
+ */export function StoreAddress(_ref){var address=_ref.address,pure=_ref.pure;var store=React.useContext(StoreContext);var _React$useContext=React.useContext(FulfillmentContext),product=_React$useContext.product;if(!address){return null;}var addressContent=React.createElement("div",null,React.createElement("div",{"data-test-id":"street"},address.street),address.street2&&address.street2!==''&&React.createElement("div",{"data-test-id":"street2"},address.street2),address.street3&&address.street3!==''&&React.createElement("div",{"data-test-id":"street3"},address.street3),address.street4&&address.street4!==''&&React.createElement("div",{"data-test-id":"street4"},address.street4),i18n.text('locations.address',address));if(pure){return addressContent;}return React.createElement("div",{className:container},React.createElement("div",{className:addressIcon,"aria-hidden":true},React.createElement(LocationIcon,null)),React.createElement("div",null,addressContent,product&&React.createElement("div",{className:stockInfoContainer},React.createElement(StockInfo,{location:store,product:product,showStoreName:false}))));}StoreAddress.defaultProps={address:null,pure:false};

package/locations/components/StoreList/StoreAddressShort.js

@@ -0,0 +1,7 @@
+import React,{Fragment,useMemo}from'react';import PropTypes from'prop-types';import{i18n,generateGoogleMapsDirectionsUrl}from'@shopgate/engage/core';import{LocationIcon,Link,Ellipsis,I18n}from'@shopgate/engage/components';import{StoreDetailsLine}from"./StoreDetailsLine";import{detailsPrimary,detailsSecondary}from"./Store.style";/**
+ * Renders the pickup location's address information.
+ * @param {Object} props The component props.
+ * @param {Object} props.address The address object.
+ * @param {boolean} props.showFull Whether to show the full address.
+ * @returns {JSX.Element}
+ */export function StoreAddressShort(_ref){var address=_ref.address,showFull=_ref.showFull;var mapsUrl=useMemo(function(){return address&&generateGoogleMapsDirectionsUrl(address);},[address]);if(!address){return null;}var addressLabel="".concat(address.street+(address.street2?", ".concat(address.street2):'')+(address.street3?", ".concat(address.street3):'')+(address.street4?", ".concat(address.street4):'')+i18n.text('locations.address',address),": ").concat(i18n.text('locations.map_open'));return React.createElement(Link,{target:"_blank",href:mapsUrl,role:"button","aria-label":addressLabel},React.createElement(StoreDetailsLine,{icon:LocationIcon,linked:true},showFull&&React.createElement(Fragment,null,React.createElement("p",{className:detailsPrimary},address.street),address.street2&&address.street2!==''&&React.createElement("p",{className:detailsPrimary},address.street2),address.street3&&address.street3!==''&&React.createElement("p",{className:detailsPrimary},address.street3),address.street4&&address.street4!==''&&React.createElement("p",{className:detailsPrimary},address.street4)),React.createElement(Ellipsis,{rows:1,className:detailsPrimary},i18n.text('locations.address',address)),React.createElement(I18n.Text,{string:"locations.map_open",className:detailsSecondary,"aria-label":": ".concat(i18n.text('locations.map_open'))})));}StoreAddressShort.defaultProps={address:null,showFull:false};

package/locations/components/StoreList/StoreCard.js

@@ -0,0 +1,4 @@
+import React,{useContext,Fragment}from'react';import{StoreContext}from"./Store.context";import{StoreHeader}from"./StoreHeader";import{StoreDetails}from"./StoreDetails";import{StoreSelectLocationButton}from"./StoreSelectLocationButton";/**
+ * Renders the store's card.
+ * @returns {JSX}
+ */export function StoreCard(){var store=useContext(StoreContext);if(!store||!store.address){return null;}return React.createElement(Fragment,null,React.createElement(StoreHeader,null),React.createElement(StoreDetails,null),React.createElement(StoreSelectLocationButton,null));}

package/locations/components/StoreList/StoreDetails.js

@@ -0,0 +1,4 @@
+import React,{useContext}from'react';import{Accordion}from"../../../components";import{StoreContext}from"./Store.context";import{StoreOpeningHours}from"./StoreOpeningHours";import{StoreAddress}from"./StoreAddress";import{StorePhoneNumber}from"./StorePhoneNumber";import{StoreAddressShort}from"./StoreAddressShort";import{storeDetailsBody,storeDetailsAccordion}from"./Store.style";/**
+ * Renders a single store details.
+ * @returns {JSX}
+ */export function StoreDetails(){var store=useContext(StoreContext);if(!store){return null;}return React.createElement(Accordion,{className:storeDetailsAccordion,renderLabel:function renderLabel(){return React.createElement(StoreAddress,{address:store.address});},contentClassName:storeDetailsBody},React.createElement(StoreOpeningHours,{hours:store.operationHours}),store.address&&React.createElement(StorePhoneNumber,{phone:store.address.phoneNumber}),React.createElement(StoreAddressShort,{showFull:true,address:store.address}));}

package/locations/components/StoreList/StoreDetailsLine.js

@@ -0,0 +1,8 @@
+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*as React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{Grid}from'@shopgate/engage/components';import{detailsLine,detailsIcon,detailsIconLinked,details}from"./Store.style";/**
+ * Renders a single store headline.
+ * @param {Object} props The component props.
+ * @param {React.ReactElement} props.icon The icon component.
+ * @param {boolean} props.linked Whether the details should be linked.
+ * @param {React.ReactNode} props.children The component children.
+ * @returns {JSX.Element}
+ */export function StoreDetailsLine(_ref){var Icon=_ref.icon,children=_ref.children,linked=_ref.linked;return React.createElement(Grid,{className:detailsLine},React.createElement(Grid.Item,{shrink:0,className:classNames(detailsIcon,_defineProperty({},detailsIconLinked,linked))},React.createElement(Icon,{"aria-hidden":true})),React.createElement(Grid.Item,{grow:1,className:details},children));}StoreDetailsLine.defaultProps={linked:false};

package/locations/components/StoreList/StoreDistance.js

@@ -0,0 +1,7 @@
+import React from'react';import PropTypes from'prop-types';import formatDistance from"../../helpers/formatDistance";import{storeDistance}from"./Store.style";export var UNIT_SYSTEM_METRIC='metric';export var UNIT_SYSTEM_IMPERIAL='imperial';/**
+ * Renders a single store distance.
+ * @param {Object} props The component props.
+ * @param {number} props.distance The distance.
+ * @param {string} props.unitSystem The unit system.
+ * @returns {JSX.Element}
+ */export function StoreDistance(_ref){var _ref$distance=_ref.distance,distance=_ref$distance===void 0?null:_ref$distance,_ref$unitSystem=_ref.unitSystem,unitSystem=_ref$unitSystem===void 0?UNIT_SYSTEM_METRIC:_ref$unitSystem;if(distance===null){return null;}return React.createElement("span",{className:storeDistance},formatDistance(distance,unitSystem===UNIT_SYSTEM_IMPERIAL));}StoreDistance.defaultProps={distance:null,unitSystem:UNIT_SYSTEM_METRIC};

package/locations/components/StoreList/StoreHeader.js

@@ -0,0 +1,4 @@
+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,{useContext}from'react';import classNames from'classnames';import{Grid,ResponsiveContainer}from'@shopgate/engage/components';import{isProductAvailable}from"../../helpers";import{FulfillmentContext}from"../../locations.context";import{StoreContext}from"./Store.context";import{StoreDistance}from"./StoreDistance";import{StoreHoursToday}from"./StoreHoursToday";import{StoreSelectLocationButton}from"./StoreSelectLocationButton";import{StockInfo}from"../StockInfo";import{storeHeader,storeName,disabled}from"./Store.style";/**
+ * Renders a single store headline.
+ * @returns {JSX}
+ */export function StoreHeader(){var store=useContext(StoreContext);var _useContext=useContext(FulfillmentContext),product=_useContext.product;var isAvailable=isProductAvailable(store,store===null||store===void 0?void 0:store.inventory);var name=store.name,distance=store.distance,unitSystem=store.unitSystem;return React.createElement("div",{className:classNames(storeHeader,_defineProperty({},disabled,!isAvailable))},React.createElement(Grid,null,React.createElement(Grid.Item,{grow:1,className:storeName},name,React.createElement(ResponsiveContainer,{breakpoint:">=sm",webOnly:true},React.createElement("ul",null,React.createElement(Grid.Item,{shrink:0},React.createElement(StockInfo,{location:store,product:product,showStoreName:false}),React.createElement(StoreDistance,{distance:distance,unitSystem:unitSystem}))))),React.createElement(ResponsiveContainer,{breakpoint:"<sm",appAlways:true},React.createElement(Grid.Item,{shrink:0},React.createElement(StoreDistance,{distance:distance,unitSystem:unitSystem}))),React.createElement(ResponsiveContainer,{breakpoint:">=sm",webOnly:true},React.createElement(Grid.Item,{shrink:0},React.createElement(StoreSelectLocationButton,null)))),React.createElement(StoreHoursToday,{hours:store.operationHours}));}

package/locations/components/StoreList/StoreHoursToday.js

@@ -0,0 +1,7 @@
+import React from'react';import PropTypes from'prop-types';import{i18n}from"../../../core";import{storeHoursToday}from"./Store.style";var weekdays=['sun','mon','tue','wed','thu','fri','sat'];/**
+ * Renders the store's opening hours for "today".
+ * @param {Object} props The component props.
+ * @param {Object} props.hours The store's opening hours.
+ * @param {boolean} props.longLabel Whether to render the opening hours with a long label
+ * @returns {JSX.Element}
+ */export function StoreHoursToday(_ref){var hours=_ref.hours,longLabel=_ref.longLabel;if(!hours){return null;}var today=weekdays[new Date().getDay()];var hoursToday=hours[today]||null;if(!hoursToday||hoursToday===''){return null;}var label=longLabel?'locations.today_hours_long':'locations.today_hours';return React.createElement("div",{className:storeHoursToday},i18n.text(label,{hours:hoursToday}));}StoreHoursToday.defaultProps={hours:null,longLabel:false};