ordering-ui-admin-external 1.45.41 → 1.45.43

package/_modules/components/Orders/DriversLocation/index.js

@@ -57,23 +57,33 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
     _useState8 = _slicedToArray(_useState7, 2),
     mapFitted = _useState8[0],
     setMapFitted = _useState8[1];
-  var mapRef = (0, _react.useRef)(null);
-  var _useState9 = (0, _react.useState)([]),
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    showDrivers = _useState10[0],
-    setShowDrivers = _useState10[1];
+    hasManualView = _useState10[0],
+    setHasManualView = _useState10[1];
+  var mapRef = (0, _react.useRef)(null);
+  var isProgrammaticChangeRef = (0, _react.useRef)(false);
+  var _useState11 = (0, _react.useState)([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showDrivers = _useState12[0],
+    setShowDrivers = _useState12[1];
   var mapFit = function mapFit() {
-    var _assignedOrders$order2;
+    var _assignedOrders$order2, _bounds$getNorthEast, _bounds$getNorthEast$, _bounds$getNorthEast2, _bounds$getNorthEast3, _bounds$getSouthWest, _bounds$getSouthWest$, _bounds$getSouthWest2, _bounds$getSouthWest3;
     var bounds = new window.google.maps.LatLngBounds();
     if (!selectedOrder) {
       var _assignedOrders$order;
       if (showDrivers.length === 1 && !selectedOrder && !(assignedOrders !== null && assignedOrders !== void 0 && (_assignedOrders$order = assignedOrders.orders) !== null && _assignedOrders$order !== void 0 && _assignedOrders$order.length)) {
         var _showDrivers$0$locati, _showDrivers$0$locati2, _showDrivers$, _showDrivers$2;
+        isProgrammaticChangeRef.current = true;
         setMapCenter(showDrivers[0].location !== null && _typeof(showDrivers[0].location) === 'object' && (_showDrivers$0$locati = showDrivers[0].location) !== null && _showDrivers$0$locati !== void 0 && _showDrivers$0$locati.lat && (_showDrivers$0$locati2 = showDrivers[0].location) !== null && _showDrivers$0$locati2 !== void 0 && _showDrivers$0$locati2.lng ? showDrivers[0].location : typeof showDrivers[0].location === 'string' ? {
           lat: parseFloat((_showDrivers$ = showDrivers[0]) === null || _showDrivers$ === void 0 || (_showDrivers$ = _showDrivers$.location) === null || _showDrivers$ === void 0 ? void 0 : _showDrivers$.split(',')[0].replace(/[^-.0-9]/g, '')),
           lng: parseFloat((_showDrivers$2 = showDrivers[0]) === null || _showDrivers$2 === void 0 || (_showDrivers$2 = _showDrivers$2.location) === null || _showDrivers$2 === void 0 ? void 0 : _showDrivers$2.split(',')[1].replace(/[^-.0-9]/g, ''))
         } : defaultCenter);
         setMapZoom(mapZoom);
+        setMapFitted(true);
+        setTimeout(function () {
+          isProgrammaticChangeRef.current = false;
+        }, 0);
         return;
       }
       var _iterator = _createForOfIteratorHelper(showDrivers),
@@ -124,12 +134,12 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
     }
     var newBounds = {
       ne: {
-        lat: bounds.getNorthEast().lat(),
-        lng: bounds.getNorthEast().lng()
+        lat: (_bounds$getNorthEast = bounds.getNorthEast()) === null || _bounds$getNorthEast === void 0 || (_bounds$getNorthEast$ = _bounds$getNorthEast.lat) === null || _bounds$getNorthEast$ === void 0 ? void 0 : _bounds$getNorthEast$.call(_bounds$getNorthEast),
+        lng: (_bounds$getNorthEast2 = bounds.getNorthEast()) === null || _bounds$getNorthEast2 === void 0 || (_bounds$getNorthEast3 = _bounds$getNorthEast2.lng) === null || _bounds$getNorthEast3 === void 0 ? void 0 : _bounds$getNorthEast3.call(_bounds$getNorthEast2)
       },
       sw: {
-        lat: bounds.getSouthWest().lat(),
-        lng: bounds.getSouthWest().lng()
+        lat: (_bounds$getSouthWest = bounds.getSouthWest()) === null || _bounds$getSouthWest === void 0 || (_bounds$getSouthWest$ = _bounds$getSouthWest.lat) === null || _bounds$getSouthWest$ === void 0 ? void 0 : _bounds$getSouthWest$.call(_bounds$getSouthWest),
+        lng: (_bounds$getSouthWest2 = bounds.getSouthWest()) === null || _bounds$getSouthWest2 === void 0 || (_bounds$getSouthWest3 = _bounds$getSouthWest2.lng) === null || _bounds$getSouthWest3 === void 0 ? void 0 : _bounds$getSouthWest3.call(_bounds$getSouthWest2)
       }
     };
     var mapSize = {
@@ -139,9 +149,13 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
     var _fitBounds = (0, _googleMapReact.fitBounds)(newBounds, mapSize),
       center = _fitBounds.center,
       zoom = _fitBounds.zoom;
+    isProgrammaticChangeRef.current = true;
     setMapZoom(zoom);
     setMapCenter(center);
     setMapFitted(true);
+    setTimeout(function () {
+      isProgrammaticChangeRef.current = false;
+    }, 0);
   };
 
   // Fit bounds on mount, and when the markers change
@@ -152,8 +166,10 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
       setMapZoom(defaultZoom);
       setMapCenter(defaultCenter);
       setMapFitted(false);
+      setHasManualView(false);
       return;
     }
+    if (hasManualView) return;
     if (selectedOrder && selectedDriver || selectedDriver && assignedOrders !== null && assignedOrders !== void 0 && (_assignedOrders$order3 = assignedOrders.orders) !== null && _assignedOrders$order3 !== void 0 && _assignedOrders$order3.length || !selectedOrder && !selectedDriver) {
       mapFit();
       return;
@@ -161,7 +177,7 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
     if (!mapFitted) {
       mapFit();
     }
-  }, [JSON.stringify(showDrivers), mapLoaded, mapFitted, selectedOrder, assignedOrders === null || assignedOrders === void 0 ? void 0 : assignedOrders.orders]);
+  }, [JSON.stringify(showDrivers), mapLoaded, mapFitted, selectedOrder, assignedOrders === null || assignedOrders === void 0 ? void 0 : assignedOrders.orders, hasManualView]);
   (0, _react.useEffect)(function () {
     if (selectedDriver) {
       setShowDrivers([selectedDriver]);
@@ -174,11 +190,24 @@ var DriversLocation = exports.DriversLocation = function DriversLocation(props)
     }
   }, [onlineDrivers, offlineDrivers, driversIsOnline, selectedDriver]);
   var handleMapChange = function handleMapChange(data) {
+    var _data$center, _data$center2;
+    if (isProgrammaticChangeRef.current) return;
+    setHasManualView(true);
     setMapZoom(data === null || data === void 0 ? void 0 : data.zoom);
+    if (data !== null && data !== void 0 && (_data$center = data.center) !== null && _data$center !== void 0 && _data$center.lat && data !== null && data !== void 0 && (_data$center2 = data.center) !== null && _data$center2 !== void 0 && _data$center2.lng) {
+      setMapCenter({
+        lat: data.center.lat,
+        lng: data.center.lng
+      });
+    }
   };
   (0, _react.useEffect)(function () {
     setMapFitted(false);
   }, [selectedOrder]);
+  (0, _react.useEffect)(function () {
+    setHasManualView(false);
+    setMapFitted(false);
+  }, [selectedOrder, selectedDriver, driversIsOnline]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selectedDriver && (assignedOrders === null || assignedOrders === void 0 ? void 0 : assignedOrders.loading) && /*#__PURE__*/_react.default.createElement(_Shared.SpinnerLoader, {
     primary: true
   }), /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.45.41",
+  "version": "1.45.43",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "^1.43.82",
+    "ordering-components-admin-external": "^1.43.83",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Orders/DriversLocation/index.js

@@ -35,8 +35,10 @@ export const DriversLocation = (props) => {
   const [mapZoom, setMapZoom] = useState(defaultZoom)
   const [mapLoaded, setMapLoaded] = useState(true)
   const [mapFitted, setMapFitted] = useState(false)
+  const [hasManualView, setHasManualView] = useState(false)
 
   const mapRef = useRef(null)
+  const isProgrammaticChangeRef = useRef(false)
 
   const [showDrivers, setShowDrivers] = useState([])
 
@@ -45,6 +47,7 @@ export const DriversLocation = (props) => {
 
     if (!selectedOrder) {
       if (showDrivers.length === 1 && !selectedOrder && !assignedOrders?.orders?.length) {
+        isProgrammaticChangeRef.current = true
         setMapCenter(
           (showDrivers[0].location !== null && typeof showDrivers[0].location === 'object' && showDrivers[0].location?.lat && showDrivers[0].location?.lng)
             ? showDrivers[0].location
@@ -56,6 +59,10 @@ export const DriversLocation = (props) => {
               : defaultCenter
         )
         setMapZoom(mapZoom)
+        setMapFitted(true)
+        setTimeout(() => {
+          isProgrammaticChangeRef.current = false
+        }, 0)
         return
       }
 
@@ -104,22 +111,27 @@ export const DriversLocation = (props) => {
 
     const newBounds = {
       ne: {
-        lat: bounds.getNorthEast().lat(),
-        lng: bounds.getNorthEast().lng()
+        lat: bounds.getNorthEast()?.lat?.(),
+        lng: bounds.getNorthEast()?.lng?.()
       },
       sw: {
-        lat: bounds.getSouthWest().lat(),
-        lng: bounds.getSouthWest().lng()
+        lat: bounds.getSouthWest()?.lat?.(),
+        lng: bounds.getSouthWest()?.lng?.()
       }
     }
+
     const mapSize = {
       width: mapRef.current.clientWidth,
       height: mapRef.current.clientHeight
     }
     const { center, zoom } = fitBounds(newBounds, mapSize)
+    isProgrammaticChangeRef.current = true
     setMapZoom(zoom)
     setMapCenter(center)
     setMapFitted(true)
+    setTimeout(() => {
+      isProgrammaticChangeRef.current = false
+    }, 0)
   }
 
   // Fit bounds on mount, and when the markers change
@@ -129,8 +141,10 @@ export const DriversLocation = (props) => {
       setMapZoom(defaultZoom)
       setMapCenter(defaultCenter)
       setMapFitted(false)
+      setHasManualView(false)
       return
     }
+    if (hasManualView) return
     if ((selectedOrder && selectedDriver) || (selectedDriver && assignedOrders?.orders?.length) || (!selectedOrder && !selectedDriver)) {
       mapFit()
       return
@@ -138,7 +152,7 @@ export const DriversLocation = (props) => {
     if (!mapFitted) {
       mapFit()
     }
-  }, [JSON.stringify(showDrivers), mapLoaded, mapFitted, selectedOrder, assignedOrders?.orders])
+  }, [JSON.stringify(showDrivers), mapLoaded, mapFitted, selectedOrder, assignedOrders?.orders, hasManualView])
 
   useEffect(() => {
     if (selectedDriver) {
@@ -153,13 +167,23 @@ export const DriversLocation = (props) => {
   }, [onlineDrivers, offlineDrivers, driversIsOnline, selectedDriver])
 
   const handleMapChange = (data) => {
+    if (isProgrammaticChangeRef.current) return
+    setHasManualView(true)
     setMapZoom(data?.zoom)
+    if (data?.center?.lat && data?.center?.lng) {
+      setMapCenter({ lat: data.center.lat, lng: data.center.lng })
+    }
   }
 
   useEffect(() => {
     setMapFitted(false)
   }, [selectedOrder])
 
+  useEffect(() => {
+    setHasManualView(false)
+    setMapFitted(false)
+  }, [selectedOrder, selectedDriver, driversIsOnline])
+
   return (
     <>
       {selectedDriver && assignedOrders?.loading && (