@woosmap/ui 2.35.0 → 2.39.0

package/src/components/Demo/LocalitiesAddressDemo.js

@@ -2,15 +2,14 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
-import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
 import AddressAutocomplete from '../Woosmap/AddressAutocomplete';
-import Marker from '../Map/Marker';
 import Constants from '../../Constants';
-import { viewpoint } from '../Map/drawOnMap';
 import CountrySelect from '../Select/CountrySelect';
 import { tr } from '../utils/locale';
 import Input from '../Input/Input';
+import markerIcon from '../../images/marker.png';
+import Script from '../utils/Script';
 
 export default class LocalitiesAddressDemo extends Component {
     constructor(props) {
@@ -31,6 +30,11 @@ export default class LocalitiesAddressDemo extends Component {
         this.requestDetailsUrl = 'https://api.woosmap.com/localities/details';
         this.inputRef = React.createRef();
         this.addressAutocompleteRef = React.createRef();
+        this.mapDivRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -83,12 +87,15 @@ export default class LocalitiesAddressDemo extends Component {
             })
             .then((response) => {
                 if (this.mounted) {
-                    this.setState({
-                        error: null,
-                        showDetails: true,
-                        response: response.data.result,
-                        selectedLocality: response.data.result,
-                    });
+                    this.setState(
+                        {
+                            error: null,
+                            showDetails: true,
+                            response: response.data.result,
+                            selectedLocality: response.data.result,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -124,14 +131,23 @@ export default class LocalitiesAddressDemo extends Component {
     };
 
     displayOnMap = () => {
-        const { selectedAddress } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && selectedAddress) {
-            if (selectedAddress.viewpoint) {
-                this.viewport = viewpoint(this.map, selectedAddress.viewpoint);
-                this.map.fitBounds(selectedAddress.viewpoint.bounds, 10);
+        if (this.map) {
+            const { selectedLocality } = this.state;
+
+            if (selectedLocality?.geometry?.location) {
+                this.map.setCenter(selectedLocality.geometry.location);
+                this.map.setZoom(17);
+
+                if (this.marker) {
+                    this.marker.setMap(null);
+                    this.marker = null;
+                }
+
+                this.marker = new window.woosmap.map.Marker({
+                    icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                    position: selectedLocality.geometry.location,
+                    map: this.map,
+                });
             } else {
                 this.map.setZoom(10);
             }
@@ -304,31 +320,21 @@ export default class LocalitiesAddressDemo extends Component {
         );
     };
 
-    renderMap = () => {
-        const { selectedLocality } = this.state;
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
 
-        const location =
-            selectedLocality && selectedLocality.geometry
-                ? selectedLocality.geometry.location
-                : { lat: 48.863350992156306, lng: 2.3484066674237796 };
-        const marker =
-            selectedLocality && selectedLocality.geometry ? <Marker lat={location.lat} lng={location.lng} /> : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.displayOnMap();
-                }}
-            >
-                {marker}
-            </GoogleMapReact>
-        );
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestAddress();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     render() {
         const { response, error, showDetails } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
@@ -337,21 +343,24 @@ export default class LocalitiesAddressDemo extends Component {
             request = this.requestDetailsUrl;
         }
         return (
-            <Demo
-                noheader={noheader}
-                header={headerLabels}
-                subHeader={subHeader}
-                id="localities-demo"
-                className="demo--localitiesaddress"
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={request}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || response}
-                result={this.renderAddress()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    noheader={noheader}
+                    header={headerLabels}
+                    subHeader={subHeader}
+                    id="localities-demo"
+                    className="demo--localitiesaddress"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={request}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || response}
+                    result={this.renderAddress()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/LocalitiesDemo.js

@@ -3,17 +3,17 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import GoogleMapReact from 'google-map-react';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
 import Input from '../Input/Input';
 import Select from '../Select/Select';
 import Button from '../Button/Button';
 import ButtonGroup from '../Button/ButtonGroup';
 import CountrySelect from '../Select/CountrySelect';
-import { viewpoint } from '../Map/drawOnMap';
 import Constants from '../../Constants';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import Script from '../utils/Script';
+import { WoosmapMapBoundingBox } from '../Map/drawOnMap';
 
 const languages = [
     { value: 'fr', label: 'French' },
@@ -64,10 +64,12 @@ export default class LocalitiesDemo extends Component {
         this.marker = null;
         this.viewport = null;
         this.requestUrl = 'https://api.woosmap.com/localities/autocomplete/';
+        this.mapDivRef = React.createRef();
+        this.overlay = null;
     }
 
     componentDidMount() {
-        this.requestLocalities();
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -114,14 +116,31 @@ export default class LocalitiesDemo extends Component {
 
     displayOnMap = () => {
         const { selectedLocality } = this.state;
-        if (this.viewport) {
-            this.viewport.setMap(null);
-        }
-        if (this.map && selectedLocality) {
+
+        if (this.map && selectedLocality?.location) {
+            if (this.marker) {
+                this.marker.setMap(null);
+                this.marker = null;
+            }
+
+            if (this.overlay) {
+                this.overlay.setMap(null);
+                this.overlay = null;
+            }
+
+            this.marker = new window.woosmap.map.Marker({
+                icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                position: selectedLocality.location,
+                map: this.map,
+            });
+
             if (selectedLocality.viewpoint) {
-                this.viewport = viewpoint(this.map, selectedLocality.viewpoint);
-                this.map.fitBounds(selectedLocality.viewpoint.bounds, 10);
+                this.overlay = new WoosmapMapBoundingBox(selectedLocality.viewpoint.bounds);
+                this.overlay.setMap(this.map);
+
+                this.map.fitBounds(selectedLocality.viewpoint.bounds, { top: 70, bottom: 70, left: 70, right: 70 });
             } else {
+                this.map.setCenter(selectedLocality.location);
                 this.map.setZoom(10);
             }
         }
@@ -170,28 +189,21 @@ export default class LocalitiesDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMap = () => {
-        const { selectedLocality } = this.state;
-        const location = selectedLocality ? selectedLocality.location : {};
-        const marker = selectedLocality ? (
-            <Marker lat={selectedLocality.location.lat} lng={selectedLocality.location.lng} />
-        ) : null;
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                center={[location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.displayOnMap();
-                }}
-            >
-                {marker}
-            </GoogleMapReact>
-        );
+    displayMap = () => {
+        if (this.timeoutMap) {
+            clearTimeout(this.timeoutMap);
+        }
+
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestLocalities();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     renderHeaderFilters = () => {
         const { input } = this.state;
         const { usecaseFilter } = this.props;
@@ -259,22 +271,25 @@ export default class LocalitiesDemo extends Component {
         const { localities, error } = this.state;
         const { noheader, headerLabels, subHeader } = this.props;
         return (
-            <Demo
-                id="localities-demo"
-                header={headerLabels}
-                subHeader={subHeader}
-                docLink="https://developers.woosmap.com/products/localities/get-started/"
-                className="demo--localities"
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
-                noheader={noheader}
-                params={this.getRequestparams()}
-                referer="http://localhost/"
-                response={error || localities}
-                result={this.renderAutocompleteList()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    id="localities-demo"
+                    header={headerLabels}
+                    subHeader={subHeader}
+                    docLink="https://developers.woosmap.com/products/localities/get-started/"
+                    className="demo--localities"
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={this.requestUrl}
+                    noheader={noheader}
+                    params={this.getRequestparams()}
+                    referer="http://localhost/"
+                    response={error || localities}
+                    result={this.renderAutocompleteList()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Demo/SearchDemo.js

@@ -2,14 +2,15 @@ import axios from 'axios';
 import cl from 'classnames';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import GoogleMapReact, { fitBounds } from 'google-map-react';
 import Demo from './SkeletonDemo';
-import Marker from '../Map/Marker';
 import Input from '../Input/Input';
 import Constants from '../../Constants';
 import FilterSelect from '../Select/FilterSelect';
 import LocalitiesAutocomplete from '../Woosmap/LocalitiesAutocomplete';
 import { tr } from '../utils/locale';
+import markerIcon from '../../images/marker.png';
+import markerIconAlt from '../../images/marker-alt.png';
+import Script from '../utils/Script';
 
 export default class SearchDemo extends Component {
     constructor(props) {
@@ -31,8 +32,13 @@ export default class SearchDemo extends Component {
         };
         this.mounted = true;
         this.map = null;
-        this.marker = null;
+        this.markers = [];
         this.requestUrl = 'https://api.woosmap.com/stores/search/';
+        this.mapDivRef = React.createRef();
+    }
+
+    componentDidMount() {
+        this.displayMap();
     }
 
     componentWillUnmount() {
@@ -70,38 +76,6 @@ export default class SearchDemo extends Component {
         };
     };
 
-    getZoomAndCenter = (stores) => {
-        if (!this.map) {
-            return { center: null, zoom: null };
-        }
-        const bounds = new google.maps.LatLngBounds();
-
-        const { selectedLocality } = this.state;
-        const locality = selectedLocality && selectedLocality.localion ? selectedLocality : this.defaultLocality;
-        if (locality && locality.location) {
-            bounds.extend(new google.maps.LatLng(locality.location.lat, locality.location.lng));
-        }
-        if (stores && stores.length > 0) {
-            stores.forEach((store) => {
-                bounds.extend(new google.maps.LatLng(store.geometry.coordinates[1], store.geometry.coordinates[0]));
-            });
-        }
-
-        return fitBounds(
-            {
-                ne: {
-                    lat: bounds.getNorthEast().lat(),
-                    lng: bounds.getNorthEast().lng(),
-                },
-                sw: {
-                    lat: bounds.getSouthWest().lat(),
-                    lng: bounds.getSouthWest().lng(),
-                },
-            },
-            { height: 360, width: 400 }
-        );
-    };
-
     requestSearch = () => {
         axios
             .get(this.requestUrl, {
@@ -110,10 +84,13 @@ export default class SearchDemo extends Component {
             .then((response) => {
                 if (this.mounted) {
                     const { data } = response;
-                    this.setState({
-                        data: data || [],
-                        error: null,
-                    });
+                    this.setState(
+                        {
+                            data: data || [],
+                            error: null,
+                        },
+                        this.displayOnMap
+                    );
                 }
             })
             .catch((error) => {
@@ -164,50 +141,62 @@ export default class SearchDemo extends Component {
         return <ul>{result}</ul>;
     };
 
-    renderMarkers = () => {
-        const { data, selectedLocality } = this.state;
-        const stores = data.features || [];
-        const markers = stores.map((store) => (
-            <Marker
-                key={store.properties.store_id}
-                lat={store.geometry.coordinates[1]}
-                lng={store.geometry.coordinates[0]}
-            />
-        ));
-        if (selectedLocality && selectedLocality.location) {
-            markers.push(
-                <Marker
-                    isSecondaryColor
-                    key="current_location"
-                    lat={selectedLocality.location.lat}
-                    lng={selectedLocality.location.lng}
-                />
-            );
+    displayOnMap = () => {
+        if (this.map) {
+            const { data, selectedLocality } = this.state;
+            const { features } = data;
+
+            const bounds = new window.woosmap.map.LatLngBounds();
+
+            if (this.markers.length > 0) {
+                this.markers.forEach((marker) => marker.setMap(null));
+                this.markers = [];
+            }
+
+            if (features && features.length > 0) {
+                features.forEach((store) => {
+                    const [lng, lat] = store.geometry.coordinates;
+                    bounds.extend(new window.woosmap.map.LatLng(lat, lng));
+                    this.markers.push(
+                        new window.woosmap.map.Marker({
+                            icon: { url: markerIcon, scaledSize: { height: 46, width: 30 } },
+                            position: { lat, lng },
+                            map: this.map,
+                        })
+                    );
+                });
+
+                const location = selectedLocality?.location || this.defaultLocality.location;
+                if (location) bounds.extend(new window.woosmap.map.LatLng(location.lat, location.lng));
+            }
+
+            if (selectedLocality && selectedLocality.location) {
+                this.markers.push(
+                    new window.woosmap.map.Marker({
+                        icon: { url: markerIconAlt, scaledSize: { height: 46, width: 30 } },
+                        position: selectedLocality.location,
+                        map: this.map,
+                    })
+                );
+            }
+
+            this.map.fitBounds(bounds, { top: 70, bottom: 70, left: 70, right: 70 });
         }
-        return markers;
     };
 
-    renderMap = () => {
-        const { selectedLocality, data } = this.state;
-        const { center, zoom } = this.getZoomAndCenter(data.features);
-        const location = selectedLocality ? selectedLocality.location : {};
-        return (
-            <GoogleMapReact
-                defaultZoom={10}
-                zoom={zoom}
-                center={center || [location.lat, location.lng]}
-                bootstrapURLKeys={{ key: Constants.gmapKey, libraries: ['geometry', 'places'] }}
-                yesIWantToUseGoogleMapApiInternals
-                onGoogleApiLoaded={({ map }) => {
-                    this.map = map;
-                    this.requestSearch();
-                }}
-            >
-                {this.renderMarkers()}
-            </GoogleMapReact>
-        );
+    displayMap = () => {
+        if (this.timeoutMap) clearTimeout(this.timeoutMap);
+
+        if (window.woosmap && window.woosmap.map && this.mapDivRef.current) {
+            this.map = new window.woosmap.map.Map(this.mapDivRef.current);
+            this.requestSearch();
+        } else {
+            this.timeoutMap = setTimeout(this.displayMap, 300);
+        }
     };
 
+    renderMap = () => <div className="map" ref={this.mapDivRef} />;
+
     renderHeaderFilters = () => {
         const { selectedLocality } = this.state;
         const originInputs = {
@@ -320,21 +309,24 @@ export default class SearchDemo extends Component {
             ),
         };
         return (
-            <Demo
-                id="search-demo"
-                className="demo--search"
-                docLink="https://developers.woosmap.com/products/search-api/get-started/"
-                header={headerLabels}
-                footerFilters={this.renderFooterFilters()}
-                headerFilters={this.renderHeaderFilters()}
-                request={this.requestUrl}
-                params={this.getRequestparams(true)}
-                referer="http://localhost/"
-                response={error || data}
-                noheader={noheader}
-                result={this.renderStoreList()}
-                map={this.renderMap()}
-            />
+            <>
+                <Script url={`https://sdk.woosmap.com/map/map.js?key=${Constants.woosmapKey}`} />
+                <Demo
+                    id="search-demo"
+                    className="demo--search"
+                    docLink="https://developers.woosmap.com/products/search-api/get-started/"
+                    header={headerLabels}
+                    footerFilters={this.renderFooterFilters()}
+                    headerFilters={this.renderHeaderFilters()}
+                    request={this.requestUrl}
+                    params={this.getRequestparams(true)}
+                    referer="http://localhost/"
+                    response={error || data}
+                    noheader={noheader}
+                    result={this.renderStoreList()}
+                    map={this.renderMap()}
+                />
+            </>
         );
     }
 }

package/src/components/Label/Label.styl

@@ -55,21 +55,29 @@
 			sq($buttonHeightNano)
 			padding 0
 			min-height unset
+	&--LOCALITIES
 	&--localities
 		background-color $localities
+	&--GEOLOCATION
 	&--geolocation
 		background-color $geolocation
+	&--DISTANCE
 	&--distance
 		background-color $distance
+	&--STORES
 	&--stores
 		background-color $stores
+	&--ADDRESS
 	&--address
 		background-color $address
+	&--MAP
 	&--map
 		background-color $map
+	&--MERCHANTS
 	&--merchants
 		background-color $merchant
-	&--traffic
+	&--TRAFFIC
+	&--merchant
 		background-color $traffic
 	&--free
 		background-color $free

package/src/components/Map/Marker.js

@@ -8,8 +8,8 @@ export default class Marker extends Component {
         return (
             <div
                 className={cl({
-                    marker: true,
-                    'marker--alt': isSecondaryColor,
+                    'ui-marker': true,
+                    'ui-marker--alt': isSecondaryColor,
                 })}
             />
         );

package/src/components/Map/Marker.test.js

@@ -6,9 +6,9 @@ import Marker from './Marker';
 
 it('renders a marker', () => {
     const { container } = render(<Marker />);
-    expect(container.firstChild).toHaveClass('marker');
+    expect(container.firstChild).toHaveClass('ui-marker');
 });
 it('renders a marker with seondary color', () => {
     const { container } = render(<Marker isSecondaryColor />);
-    expect(container.firstChild).toHaveClass('marker--alt');
+    expect(container.firstChild).toHaveClass('ui-marker--alt');
 });