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

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

@@ -1,20 +1,133 @@
-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);/**
+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();/**
+ */
+const StoreFinderMap = () => {
+  const mapContainerRef = useRef(null);
+  const 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]);/**
+   * */
+  const handleOpenStreetMapCopyrightClick = useCallback(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(() => {
+    if (mapContainerRef.current) {
+      mapContainerRef.current.addEventListener('click', handleOpenStreetMapCopyrightClick);
+    }
+    return () => {
+      if (mapContainerRef.current) {
+        mapContainerRef.current.removeEventListener('click', handleOpenStreetMapCopyrightClick);
+      }
+    };
+  }, [handleOpenStreetMapCopyrightClick]);
+  const {
+    routeLocation
+  } = useContext(StoreDetailsContext);
+  const iconHTML = useMemo(() => renderToString(/*#__PURE__*/React.createElement(MapMarkerIcon, null)), []);
+  const markerIconSelected = useMemo(() => Leaflet.divIcon({
+    html: iconHTML,
+    className: markerSelected,
+    iconSize: [40, 40]
+  }), [iconHTML]);
+  const {
+    code,
+    latitude,
+    longitude
+  } = routeLocation || {};
+  const viewport = useMemo(() => {
+    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();}};/**
+   */
+  const 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;
+   */
+  const createBounds = useCallback(([lat, lng], distanceInMeter) => {
+    const EARTH_RADIUS_KM = 6371;
+    const distanceInKm = distanceInMeter / 1000;
+    const distanceToBoundaryInKm = distanceInKm / 2;
+    const latInRadians = lat * (Math.PI / 180);
+    const deltaLat = distanceToBoundaryInKm / EARTH_RADIUS_KM * (180 / Math.PI);
+    const deltaLng = distanceToBoundaryInKm / EARTH_RADIUS_KM * (180 / Math.PI) / Math.cos(latInRadians);
+    return [[lat - deltaLat, lng - deltaLng], [lat + deltaLat, lng + deltaLng]];
+  }, []);
+  const radiusinMeters = MAP_RADIUS_KM * 1000;
+  const bounds = useMemo(() => {
+    if (!viewport || !MAP_RADIUS_KM) {
+      return null;
+    }
+    return createBounds(viewport, radiusinMeters);
+  }, [createBounds, radiusinMeters, viewport]);
+  const debug = false;
+  if (!routeLocation) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: container,
+    "aria-hidden": true,
+    ref: mapContainerRef
+  }, /*#__PURE__*/React.createElement(MapContainer, {
+    center: viewport,
+    bounds: bounds,
+    className: container,
+    whenCreated: handleMapCreated
+  }, debug && /*#__PURE__*/React.createElement(Circle, {
+    center: viewport,
+    radius: radiusinMeters,
+    color: "blue"
+  }), /*#__PURE__*/React.createElement(TileLayer, {
+    attribution: "&copy <a href=\"https://osm.org/copyright\">OpenStreetMap</a>",
+    url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  }), /*#__PURE__*/React.createElement(Marker, {
+    key: code,
+    icon: markerIconSelected,
+    position: [latitude, longitude]
+  })));
+};
+export default StoreFinderMap;

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

@@ -1 +1,14 @@
-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();
+import { css } from 'glamor';
+import { themeColors } from '@shopgate/pwa-common/helpers/config';
+export const container = css({
+  height: '100%',
+  width: '100%'
+});
+export const markerSelected = css({
+  ' svg': {
+    height: 40,
+    width: 40,
+    fontSize: '1.5rem',
+    color: `var(--color-primary, ${themeColors.primary})`
+  }
+}).toString();

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

@@ -1,4 +1,31 @@
-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()};/**
+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";
+const 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;
+*/
+const StoreLocationMap = () => {
+  const storeListRef = useRef(null);
+  return /*#__PURE__*/React.createElement(StoreFinderProvider, {
+    storeListRef: storeListRef
+  }, /*#__PURE__*/React.createElement(SurroundPortals, {
+    portalName: STORE_DETAILS_LOCATION_MAP
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, /*#__PURE__*/React.createElement(StoreFinderMap, null))));
+};
+export default StoreLocationMap;

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

@@ -1,4 +1,34 @@
-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%'})};/**
+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";
+const 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;
+*/
+const StoresNearby = () => {
+  const {
+    nearbyLocations
+  } = useContext(StoreDetailsContext);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: styles.title
+  }, i18n.text('location.storesNearby')), nearbyLocations.length > 0 && /*#__PURE__*/React.createElement("table", {
+    className: styles.table
+  }, /*#__PURE__*/React.createElement("tbody", null, nearbyLocations.map(location => /*#__PURE__*/React.createElement(StoresNearbyListItem, {
+    location: location,
+    key: location.code
+  })))), nearbyLocations.length === 0 && /*#__PURE__*/React.createElement("div", null, i18n.text('location.noStoresNearby')));
+};
+export default StoresNearby;

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

@@ -1,9 +1,140 @@
-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'})};/**
+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";
+const 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;/**
+*/
+const StoresNearbyListItem = ({
+  location
+}) => {
+  const dispatch = useDispatch();
+  const {
+    preferredLocation,
+    selectLocation
+  } = useContext(StoreDetailsContext);
+  const {
+    name,
+    distance,
+    unitSystem,
+    code,
+    isComingSoon
+  } = location;
+  const 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;
+   */
+  const openStoreDetails = locationCode => {
+    dispatch(historyPush({
+      pathname: `${STORE_DETAILS_PATH}/${locationCode}`
+    }));
+  };
+  return /*#__PURE__*/React.createElement("tr", {
+    className: styles.locationRow
+  }, /*#__PURE__*/React.createElement("td", {
+    className: styles.cell
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.cellContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.name
+  }, name))), /*#__PURE__*/React.createElement("td", {
+    className: styles.cell
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.cellContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.distance
+  }, formatDistance(distance || 0, unitSystem === 'imperial')))), /*#__PURE__*/React.createElement("td", {
+    className: styles.cell
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.cellContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.buttonContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.makeMyStore
+  }, !isComingSoon && /*#__PURE__*/React.createElement(Button, {
+    className: styles.button,
+    onClick: () => selectLocation(location, true),
+    role: "button",
+    type: "primary",
+    flat: true,
+    disabled: isPreferredLocation,
+    wrapContent: false
+  }, `${i18n.text('location.makeMyStore')}`), isComingSoon && /*#__PURE__*/React.createElement(Button, {
+    className: styles.button,
+    role: "button",
+    type: "primary",
+    flat: true,
+    disabled: true,
+    wrapContent: false
+  }, i18n.text('location.comingSoon'))), /*#__PURE__*/React.createElement("div", {
+    className: styles.storeInfo
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: styles.button,
+    role: "button",
+    type: "primary",
+    flat: true,
+    onClick: () => openStoreDetails(code),
+    wrapContent: false
+  }, i18n.text('locations.details')))))));
+};
+export default StoresNearbyListItem;

package/locations/components/StoreDetails/index.js

@@ -1,4 +1,22 @@
-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()};/**
+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";
+const styles = {
+  page: css({
+    padding: `${themeConfig.variables.gap.small}px ${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;
+ */
+const StoreDetailsContent = () => /*#__PURE__*/React.createElement(StoreDetailsProvider, null, /*#__PURE__*/React.createElement("div", {
+  className: styles.page
+}, /*#__PURE__*/React.createElement(StoreDetails, null), /*#__PURE__*/React.createElement(StoreLocationMap, null), /*#__PURE__*/React.createElement(StoresNearby, null), /*#__PURE__*/React.createElement(FindMoreStores, null)));
+export default StoreDetailsContent;

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

@@ -1 +1,7 @@
-import{createContext}from'react';export var StoreContext=createContext({});
+import { createContext } from 'react';
+
+/**
+ * @typedef {import('../../locations.types').Location} Location
+ */
+
+export const StoreContext = /*#__PURE__*/createContext(/** @type {Location} */{});

package/locations/components/StoreFinder/StoreFinder.js

@@ -1,3 +1,24 @@
-import React,{useRef}from'react';import{StoreFinderProvider}from"../../providers";import StoreFinderSearch from"./StoreFinderSearch";import StoreFinderLocations from"./StoreFinderLocations";import{container,storeSearch,storeList}from"./StoreFinder.style";/**
+import React, { useRef } from 'react';
+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 StoreFinder;
+ */
+const StoreFinder = () => {
+  const storeListRef = useRef(null);
+  return /*#__PURE__*/React.createElement(StoreFinderProvider, {
+    storeListRef: storeListRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: storeSearch
+  }, /*#__PURE__*/React.createElement(StoreFinderSearch, null)), /*#__PURE__*/React.createElement("div", {
+    className: storeList
+  }, /*#__PURE__*/React.createElement(StoreFinderLocations, {
+    ref: storeListRef
+  }))));
+};
+export default StoreFinder;

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

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

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

@@ -1,4 +1,16 @@
-import{connect}from'react-redux';import{historyPush}from'@shopgate/pwa-common/actions/router/historyPush';/**
+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);
+ */
+const mapDispatchToProps = dispatch => ({
+  openMap: url => dispatch(historyPush({
+    pathname: url,
+    state: {
+      target: '_blank'
+    }
+  }))
+});
+export default connect(null, mapDispatchToProps);

package/locations/components/StoreFinder/StoreFinderGetDirectionsButton.js

@@ -1,4 +1,37 @@
-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";/**
+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);
+ */
+const StoreFinderGetDirectionsButton = ({
+  address,
+  openMap,
+  className
+}) => {
+  const url = useMemo(() => address && generateGoogleMapsDirectionsUrl(address), [address]);
+  const handleClick = useCallback(() => {
+    openMap(url);
+  }, [openMap, url]);
+  if (!address) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(container, className)
+  }, /*#__PURE__*/React.createElement(RippleButton, {
+    onClick: handleClick,
+    className: button
+  }, i18n.text('locations.get_directions')));
+};
+StoreFinderGetDirectionsButton.defaultProps = {
+  address: null,
+  openMap: () => {},
+  className: null
+};
+export default connect(StoreFinderGetDirectionsButton);

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

@@ -1 +1,12 @@
-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();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  colors
+} = themeConfig;
+export const container = css({}).toString();
+export const button = css({
+  width: '100%',
+  background: `var(--color-primary, ${colors.primary})!important`,
+  color: `var(--color-primary-contrast, ${colors.primaryContrast})!important`,
+  fontSize: '0.875rem !important'
+}).toString();

package/locations/components/StoreFinder/StoreFinderLocation.js

@@ -1,3 +1,31 @@
-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;
+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.Element}
+ */
+const StoreFinderLocation = () => {
+  const store = useContext(StoreContext);
+  const {
+    selectedLocation
+  } = useContext(StoreFinderContext);
+  const isSelected = useMemo(() => {
+    const {
+      code
+    } = selectedLocation || {};
+    return store.code === code;
+  }, [selectedLocation, store.code]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(container, {
+      [selected]: isSelected
+    }),
+    "data-location-code": store.code
+  }, /*#__PURE__*/React.createElement(StoreFinderLocationHeader, null), /*#__PURE__*/React.createElement(StoreFinderSelectLocationButton, null), /*#__PURE__*/React.createElement(StoreFinderStoreInfoButton, null));
+};
+export default StoreFinderLocation;

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

@@ -1 +1,10 @@
-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();
+import { css } from 'glamor';
+import { themeConfig } from '@shopgate/pwa-common/helpers/config';
+const {
+  variables
+} = themeConfig;
+export const container = css({}).toString();
+export const selected = css({}).toString();
+export const directionsButton = css({
+  padding: `0 ${variables.gap.big}px ${variables.gap.big}px`
+}).toString();

package/locations/components/StoreFinder/StoreFinderLocationDetails.js

@@ -1,3 +1,31 @@
-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";/**
+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;
+ */
+const StoreFinderLocationDetails = () => {
+  const {
+    operationHours
+  } = useContext(StoreContext);
+  if (!operationHours || _every(operationHours, _isEmpty)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Accordion, {
+    className: accordionHeader,
+    renderLabel: () => /*#__PURE__*/React.createElement(I18n.Text, {
+      string: "locations.details"
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: accordionContent
+  }, /*#__PURE__*/React.createElement(StoreOpeningHours, {
+    hours: operationHours,
+    pure: true
+  })));
+};
+export default StoreFinderLocationDetails;