@shopgate/engage 7.24.0-beta.1 → 7.24.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,11 +1,21 @@
|
|
|
1
|
-
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}from'react';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{container,markerSelected}from"./StoreFinderMap.style";import{MAP_RADIUS_KM}from"../../../constants";import{StoreDetailsContext}from"../../../providers/StoreDetailsContext";Leaflet.Map.addInitHook('addHandler','gestureHandling',GestureHandling);/**
|
|
1
|
+
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);/**
|
|
2
2
|
* @returns {JSX.Element}
|
|
3
|
-
*/var StoreFinderMap=function StoreFinderMap(){var
|
|
3
|
+
*/var StoreFinderMap=function StoreFinderMap(){var mapContainerRef=useRef(null);var dispatch=useDispatch();/**
|
|
4
|
+
* Handles the click on the OpenStreetMap copyright
|
|
5
|
+
* Cause the copyright is only a plain a tag
|
|
6
|
+
* this causes weird routing in the app
|
|
7
|
+
* To prevent this we need to handle the click on the a tag
|
|
8
|
+
* @param {Event} e The event
|
|
9
|
+
* @returns {void}
|
|
10
|
+
* */var handleOpenStreetMapCopyrightClick=function handleOpenStreetMapCopyrightClick(e){if(e.target.tagName==='A'&&e.target.id==='OpenStreetMapCopyright'){e.preventDefault();dispatch(historyPush({pathname:e.target.href}));}};// check the mapContainerRef if any a tag is clicked
|
|
11
|
+
// to catch the click on the OpenStreetMap copyright
|
|
12
|
+
useEffect(function(){if(mapContainerRef.current){mapContainerRef.current.addEventListener('click',handleOpenStreetMapCopyrightClick);}return function(){if(mapContainerRef.current){mapContainerRef.current.removeEventListener('click',handleOpenStreetMapCopyrightClick);}};// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
13
|
+
},[]);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]);/**
|
|
4
14
|
* Enables touch and gestures on the map
|
|
5
15
|
* @param {Object} map available parameters for the map
|
|
6
|
-
*/var handleMapCreated=function handleMapCreated(map){map.gestureHandling.enable();if(Leaflet.Browser.mobile){map.touchZoom.enable();}};/**
|
|
16
|
+
*/var handleMapCreated=function handleMapCreated(map){map.gestureHandling.enable();map.attributionControl.setPrefix('');if(Leaflet.Browser.mobile){map.touchZoom.enable();}};/**
|
|
7
17
|
* Creates coordinates for a bounding box around a center point
|
|
8
18
|
* @param {Array} center The center point
|
|
9
19
|
* @param {number} distanceInMeter The distance in meters
|
|
10
20
|
* @returns {Array} The bounds
|
|
11
|
-
*/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},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:"© <a href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors",url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),React.createElement(Marker,{key:code,icon:markerIconSelected,position:[latitude,longitude]})));};export default StoreFinderMap;
|
|
21
|
+
*/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:"© <a id=\"OpenStreetMapCopyright\" href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors",url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),React.createElement(Marker,{key:code,icon:markerIconSelected,position:[latitude,longitude]})));};export default StoreFinderMap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React,{useRef}from'react';import{css}from'glamor';import StoreFinderMap from"./StoreFinderMap";import{StoreFinderProvider}from"../../../providers";var styles={container:css({maxHeight:'
|
|
1
|
+
import React,{useRef}from'react';import{css}from'glamor';import StoreFinderMap from"./StoreFinderMap";import{StoreFinderProvider}from"../../../providers";var styles={container:css({maxHeight:'250px',height:'250px',width:'100%',marginTop:'10px',marginBottom:'10px'}).toString()};/**
|
|
2
2
|
* Store location map component.
|
|
3
3
|
* @returns {JSX.Element}
|
|
4
4
|
*/var StoreLocationMap=function StoreLocationMap(){var storeListRef=useRef(null);return React.createElement(StoreFinderProvider,{storeListRef:storeListRef},React.createElement("div",{className:styles.container},React.createElement(StoreFinderMap,null)));};export default StoreLocationMap;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
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={locationRow:css({borderBottom:'1px solid #e8e8e8',borderTop:'1px solid #e8e8e8'}),distance:css({textWrapMode:'nowrap',alignContent:'center',verticalAlign:'middle',fontWeight:'500'}),makeMyStore:css({textWrapMode:'nowrap',alignContent:'center',verticalAlign:'middle'}),
|
|
1
|
+
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'}),locationRow:css({borderBottom:'1px solid #e8e8e8',borderTop:'1px solid #e8e8e8'}),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'})};/**
|
|
2
2
|
* Shows a location in a row
|
|
3
3
|
* @param {Object} props Props
|
|
4
4
|
* @param {Object} props.location Location
|
|
@@ -6,4 +6,4 @@ import React,{useContext}from'react';import{useDispatch}from'react-redux';import
|
|
|
6
6
|
*/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;/**
|
|
7
7
|
* Opens the store details page
|
|
8
8
|
* @param {string} locationCode Location code
|
|
9
|
-
*/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}
|
|
9
|
+
*/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},"".concat(i18n.text('location.makeMyStore'))),isComingSoon&&React.createElement(Button,{className:styles.button,role:"button",type:"primary",flat:true,disabled:true},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);}},i18n.text('locations.details')))))));};export default StoresNearbyListItem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopgate/engage",
|
|
3
|
-
"version": "7.24.0-beta.
|
|
3
|
+
"version": "7.24.0-beta.2",
|
|
4
4
|
"description": "Shopgate's ENGAGE library.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Shopgate <support@shopgate.com>",
|
|
@@ -16,12 +16,12 @@
|
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@shopgate/native-modules": "1.0.0-beta.18",
|
|
19
|
-
"@shopgate/pwa-common": "7.24.0-beta.
|
|
20
|
-
"@shopgate/pwa-common-commerce": "7.24.0-beta.
|
|
21
|
-
"@shopgate/pwa-core": "7.24.0-beta.
|
|
22
|
-
"@shopgate/pwa-ui-ios": "7.24.0-beta.
|
|
23
|
-
"@shopgate/pwa-ui-material": "7.24.0-beta.
|
|
24
|
-
"@shopgate/pwa-ui-shared": "7.24.0-beta.
|
|
19
|
+
"@shopgate/pwa-common": "7.24.0-beta.2",
|
|
20
|
+
"@shopgate/pwa-common-commerce": "7.24.0-beta.2",
|
|
21
|
+
"@shopgate/pwa-core": "7.24.0-beta.2",
|
|
22
|
+
"@shopgate/pwa-ui-ios": "7.24.0-beta.2",
|
|
23
|
+
"@shopgate/pwa-ui-material": "7.24.0-beta.2",
|
|
24
|
+
"@shopgate/pwa-ui-shared": "7.24.0-beta.2",
|
|
25
25
|
"@stripe/react-stripe-js": "^1.16.5",
|
|
26
26
|
"@stripe/stripe-js": "^1.3.1",
|
|
27
27
|
"@virtuous/conductor": "~2.5.0",
|