@vtex/pickup-points-modal - npm Package Compare versions

Comparing version 0.1.32 to 0.1.33

lib/components/Map.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var _person_pin = require('../assets/icons/person_pin.svg');
+
+var _person_pin2 = _interopRequireDefault(_person_pin);
+
 var _GetString = require('../utils/GetString');
@@ -75,3 +79,3 @@
         recenter: true
-      }, _this.props.address.geoCoordinates.length > 0 ? { address: _this.props.address } : {}));
+      }, _this.props.address.geoCoordinates.value.length > 0 ? { address: _this.props.address } : {}));
     };
@@ -87,3 +91,3 @@
 
-      var mapOptions = _extends({
+      var mapOptions = {
         zoom: 14,
@@ -99,6 +103,14 @@ mapTypeControl: false,
           style: googleMaps.ZoomControlStyle.SMALL
-        }
-      }, geoCoordinates && geoCoordinates.length > 0 ? {
-        center: _this.getLocation(geoCoordinates)
-      } : {});
+        },
+        styles: [{
+          featureType: 'administrative',
+          stylers: [{ visibility: 'off' }]
+        }, {
+          featureType: 'poi',
+          stylers: [{ visibility: 'off' }]
+        }, {
+          featureType: 'transit',
+          stylers: [{ visibility: 'off' }]
+        }]
+      };
 
@@ -129,12 +141,28 @@ _this.map = new googleMaps.Map(_this._mapElement, mapOptions);
 
+      var hasAddressCoords = address && address.geoCoordinates.value.length !== 0;
+
       if (!_this.map) return;
-      var bounds = null;
+      _this.bounds = null;
 
-      if (address && address.geoCoordinates.value.length === 0) {
-        bounds = new googleMaps.LatLngBounds();
+      _this.markers = [];
+
+      if (hasAddressCoords) {
+        _this.bounds = new googleMaps.LatLngBounds();
       }
 
-      _this.markerListeners = [];
-      _this.markers = [];
+      if (!_this.addressMarker && hasAddressCoords) {
+        var addressLocation = _this.getLocation(address.geoCoordinates.value);
 
+        var markerOptions = {
+          position: addressLocation,
+          draggable: false,
+          map: _this.map,
+          icon: _person_pin2.default
+        };
+
+        _this.bounds.extend(addressLocation);
+
+        _this.addressMarker = new googleMaps.Marker(markerOptions);
+      }
+
       locations && locations.forEach(function (location, index) {
@@ -145,7 +173,7 @@ var markerOptions = {
           map: _this.map,
-          icon: pickupPoint && pickupPoint.id === pickupOptions[index].id || activePickupPoint && activePickupPoint.id === pickupOptions[index].id ? _this.state.selectedIcon : _this.state.icon
+          icon: pickupPoint && pickupPoint.id === pickupOptions[index].id || activePickupPoint && activePickupPoint.id === pickupOptions[index].id ? _marker_selected2.default : _marker_blue2.default
         };
 
-        if (address && address.geoCoordinates.value.length === 0) {
-          bounds.extend(location);
+        if (index < 2 && _this.addressMarker && hasAddressCoords) {
+          _this.bounds.extend(location);
         }
@@ -155,10 +183,5 @@
 
-        var positionListener = googleMaps.event.addListener(marker, 'position_changed', (0, _debounce2.default)(function () {
-          var newPosition = _this.marker.getPosition();
-          _this.handleMarkerPositionChange(newPosition);
-        }, 1500));
-
         var markerListener = googleMaps.event.addListener(marker, 'click', function () {
           _this.resetMarkers();
-          marker.setIcon(_this.state.selectedIcon);
+          marker.setIcon(_marker_selected2.default);
           changeActivePickupDetails({ pickupPoint: pickupOptions[index] });
@@ -168,7 +191,2 @@ activatePickupDetails(true);
 
-        _this.markerListeners.push({
-          markerListener: markerListener,
-          pickupPoint: pickupOptions[index].id
-        });
-
         _this.markers.push({
@@ -179,6 +197,5 @@ marker: marker,
 
-        _this.markerListeners.push(positionListener);
-
-        if (address && address.geoCoordinates.value.length === 0) {
-          _this.map.fitBounds(bounds);
+        if (index < 2 && _this.addressMarker && hasAddressCoords) {
+          _this.map.fitBounds(_this.bounds);
+          _this.map.panBy(-200, 0);
         }
@@ -192,6 +209,7 @@
 
-    _this.resetMarkers = function () {
-      return _this.markers && _this.markers.forEach(function (markerObj) {
-        return markerObj.marker.setIcon(_this.state.icon);
+    _this.resetMarkers = function (location) {
+      _this.markers && _this.markers.forEach(function (markerObj, index) {
+        return markerObj.pickupPoint ? markerObj.marker.setIcon(_marker_blue2.default) : markerObj;
       });
+      location && _this.addressMarker && _this.addressMarker.setPosition(location);
     };
@@ -251,4 +269,2 @@
     _this.state = {
-      icon: _marker_blue2.default,
-      selectedIcon: _marker_selected2.default,
       isMounted: false,
@@ -278,8 +294,3 @@ mapStyles: {
   Map.prototype.componentWillUnmount = function componentWillUnmount() {
-    var _this2 = this;
-
     this.setState({ isMounted: false });
-    this.markerListeners && this.markerListeners.forEach(function (item) {
-      return _this2.props.googleMaps.event.removeListener(item.markerListener);
-    });
   };
@@ -298,6 +309,2 @@
 
-    if (address.geoCoordinates && address.geoCoordinates.value[0] !== nextProps.address.geoCoordinates.value[0]) {
-      this.map.setZoom(15);
-    }
-
     this.address = nextProps.address;
@@ -308,5 +315,27 @@
 
+    var nextAddressCoords = nextProps.address.geoCoordinates.value;
+
+    var thisAddressCoords = this.props.address.geoCoordinates.value;
+
+    var markerObj = this.markers && this.markers.find(function (item) {
+      return nextProps.pickupPoint && item.pickupPoint === nextProps.pickupPoint.id;
+    });
+
+    var activeMarkerObj = this.markers && this.markers.find(function (item) {
+      return nextProps.activePickupPoint && item.pickupPoint === nextProps.activePickupPoint.id;
+    });
+
+    if ((nextAddressCoords.length > 0 && nextProps.pickupOptions.length > 1 || nextAddressCoords !== thisAddressCoords) && googleMaps) {
+      this.recenterMap(this.getLocation(nextAddressCoords));
+      this.resetMarkers(this.getLocation(nextAddressCoords));
+      activeMarkerObj && activeMarkerObj.marker.setIcon(_marker_selected2.default);
+    }
+
     if (thisPickupOptions !== nextPickupOptions) {
+      this.markers.map(function (markerObj) {
+        return markerObj.marker.setMap(null);
+      });
       this.createNewMarkers({
         pickups: nextProps.pickupOptionGeolocations,
+        address: nextProps.address,
         pickupOptions: nextProps.pickupOptions,
@@ -319,22 +348,8 @@ pickupPoint: nextProps.pickupPoint,
 
-    var markerObj = this.markers && this.markers.find(function (item) {
-      return nextProps.pickupPoint && item.pickupPoint === nextProps.pickupPoint.id;
-    });
-
-    var activeMarkerObj = this.markers && this.markers.find(function (item) {
-      return nextProps.activePickupPoint && item.pickupPoint === nextProps.activePickupPoint.id;
-    });
-
     if (nextProps.isPickupDetailsActive && selectedGeolocation && selectedGeolocation.pickupStoreInfo.address.geoCoordinates.length > 0 && googleMaps && markerObj) {
       this.recenterMap(this.getLocation(selectedGeolocation.pickupStoreInfo.address.geoCoordinates));
       this.resetMarkers();
-      markerObj.marker.setIcon(this.state.selectedIcon);
+      markerObj.marker.setIcon(_marker_selected2.default);
       return;
     }
-
-    if ((nextProps.address.geoCoordinates.value.length > 0 && nextProps.pickupOptions.length > 1 || nextProps.address.geoCoordinates.value !== this.props.address.geoCoordinates.value) && googleMaps) {
-      this.recenterMap(this.getLocation(nextProps.address.geoCoordinates.value));
-      this.resetMarkers();
-      activeMarkerObj && activeMarkerObj.marker.setIcon(this.state.selectedIcon);
-    }
   };
@@ -341,0 +356,0 @@

package.json

 {
   "name": "@vtex/pickup-points-modal",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "description": "Pickup Points Modal React component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

248152

increased by0.29%

Number of package files

66

increased by1.54%

Lines of code

5422

increased by0.2%

No dependency changes