thm-p3-configurator 0.0.201 → 0.0.202

package/dist/src/shared/__components__/LocationsSelector/LocationAutoComplete.js

@@ -54,7 +54,7 @@ const LocationsLoading = () => {
 };
 const LocationAutoComplete = _ref => {
   let {
-    setUserLocation,
+    onLocationUpdate,
     label = 'Postcode'
   } = _ref;
   const [sessionToken, setSessionToken] = (0, _react.useState)();
@@ -65,21 +65,15 @@ const LocationAutoComplete = _ref => {
   const [dropdownActive, setDropdownActive] = (0, _react.useState)(false);
   const [loading, setLoading] = (0, _react.useState)(false);
   const [error, setError] = (0, _react.useState)('');
-  const [place, setPlace] = (0, _react.useState)(null);
   const map = (0, _reactGoogleMaps.useMap)();
   const places = (0, _reactGoogleMaps.useMapsLibrary)('places');
   (0, _react.useEffect)(() => {
-    var _place$geometry;
     if (!places || !map) return;
     setAutocompleteService(new places.AutocompleteService());
     setPlacesService(new places.PlacesService(map));
     setSessionToken(new places.AutocompleteSessionToken());
-    if (place && (_place$geometry = place.geometry) !== null && _place$geometry !== void 0 && _place$geometry.viewport) {
-      var _place$geometry2;
-      map.fitBounds((_place$geometry2 = place.geometry) === null || _place$geometry2 === void 0 ? void 0 : _place$geometry2.viewport);
-    }
     return () => setAutocompleteService(null);
-  }, [map, places, place]);
+  }, [map, places]);
   const fetchPredictions = (0, _react.useCallback)(async inputValue => {
     if (!autocompleteService || !inputValue) {
       setPredictionResults([]);
@@ -122,21 +116,21 @@ const LocationAutoComplete = _ref => {
       setInputValue((_placeDetails$formatt = placeDetails === null || placeDetails === void 0 ? void 0 : placeDetails.formatted_address) !== null && _placeDetails$formatt !== void 0 ? _placeDetails$formatt : '');
       setSessionToken(new places.AutocompleteSessionToken());
       setDropdownActive(false);
-      setPlace(placeDetails);
       if (placeDetails !== null && placeDetails !== void 0 && (_placeDetails$geometr = placeDetails.geometry) !== null && _placeDetails$geometr !== void 0 && _placeDetails$geometr.location) {
         const {
           lat,
           lng
         } = placeDetails.geometry.location;
-        setUserLocation({
+        const coordinates = {
           lat: lat(),
           lng: lng()
-        });
+        };
+        onLocationUpdate(coordinates, true);
       }
     };
     placesService === null || placesService === void 0 || placesService.getDetails(detailRequestOptions, detailsRequestCallback);
     (_document$querySelect = document.querySelector((0, _helpers__.withStyle)("dealer-autocomplete__list"))) === null || _document$querySelect === void 0 || _document$querySelect.scrollTo(0, 0);
-  }, [places, placesService, sessionToken, setUserLocation]);
+  }, [places, placesService, sessionToken, onLocationUpdate, predictionResults]);
   const handleSubmit = event => {
     event.preventDefault();
   };

package/dist/src/shared/__components__/LocationsSelector/LocationClusteredMap.js

@@ -66,26 +66,23 @@ const LocationClusteredMap = /*#__PURE__*/_react.default.memo(_ref => {
   }, [core]);
   const fitBoundsToMarkers = (0, _react.useCallback)(() => {
     if (!map || !bounds || locationIds.length === 0) return;
+
+    // Get all valid coordinates from locations
+    const validCoordinates = locationIds.map(id => locationsById[id]).map(location => (0, _geolocation.getCoordinatesByString)(location.googleMapsLocation)).filter(Boolean);
     if (userLocation) {
-      bounds.extend(new core.LatLng(userLocation.lat, userLocation.lng));
+      map.setCenter(userLocation);
+      map.setZoom(11);
+    } else {
+      validCoordinates.forEach(_ref2 => {
+        let {
+          lat,
+          lng
+        } = _ref2;
+        bounds.extend(new core.LatLng(lat, lng));
+      });
       map.fitBounds(bounds);
-      map.setZoom(10);
-      return;
     }
-
-    // Batch coordinate calculations
-    const validCoordinates = locationIds.map(id => locationsById[id]).map(location => (0, _geolocation.getCoordinatesByString)(location.googleMapsLocation)).filter(Boolean);
-    validCoordinates.forEach(_ref2 => {
-      let {
-        lat,
-        lng
-      } = _ref2;
-      bounds.extend(new core.LatLng(lat, lng));
-    });
-    map.fitBounds(bounds);
   }, [map, bounds, locationIds, locationsById, userLocation, core]);
-
-  // Debounce bounds fitting
   (0, _react.useEffect)(() => {
     if (!core) return;
     const debounceFitBounds = (0, _lodash.default)(fitBoundsToMarkers, 150);

package/dist/src/shared/__components__/LocationsSelector/LocationList.js

@@ -119,6 +119,7 @@ const LocationList = _ref => {
     locationsById,
     locationIds,
     userLocation,
+    isLocationSetViaSearch = false,
     isLoading = false
   } = _ref;
   const {
@@ -127,7 +128,7 @@ const LocationList = _ref => {
   const [{
     selectedBranch
   }] = (0, _OrderSessionContext.useOrderSession)();
-  const selectedRef = (0, _react.useRef)(null);
+  const listRef = (0, _react.useRef)(null);
   const locationsWithDistance = locationIds.map((locationId, index) => {
     const location = locationsById[locationId];
     const coordinates = location.googleMapsLocation;
@@ -146,22 +147,26 @@ const LocationList = _ref => {
     });
   }).filter(location => location !== null);
   const sortedLocations = locationsWithDistance.sort((a, b) => {
+    const aIsSelected = a.entityId === activeMarkerId || a.entityId === selectedBranch;
+    const bIsSelected = b.entityId === activeMarkerId || b.entityId === selectedBranch;
+    if (aIsSelected && !bIsSelected) return -1; // a goes to top
+    if (!aIsSelected && bIsSelected) return 1; // b goes to top
+
     if (a.distance === null) return 1;
     if (b.distance === null) return -1;
     return a.distance - b.distance;
   });
+
+  // Handle scrolling when location is set via search
   (0, _react.useEffect)(() => {
-    if (sortedLocations !== null && sortedLocations !== void 0 && sortedLocations.length && selectedRef.current) {
-      selectedRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center'
-      });
+    if (isLocationSetViaSearch && listRef.current) {
+      listRef.current.scrollTop = 0;
     }
-  }, [activeMarkerId, selectedBranch, sortedLocations]);
+  }, [isLocationSetViaSearch, userLocation]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: listRef,
     className: (0, _helpers__.withStyle)('dealer-list')
   }, /*#__PURE__*/_react.default.createElement("h5", null, userLocation ? 'Dichtsbijzijnde montagelocaties' : 'Montagelocaties'), isLoading && /*#__PURE__*/_react.default.createElement(LocationsLoading, null), !isLoading && !locationIds.length && /*#__PURE__*/_react.default.createElement(NoLocationFound, null), sortedLocations.map(location => /*#__PURE__*/_react.default.createElement(_LocationListItem.default, {
-    ref: location.entityId === activeMarkerId || location.entityId === selectedBranch ? selectedRef : null,
     openingHours: location.openingstijden,
     title: location.naamVestiging,
     city: location.city,

package/dist/src/shared/__components__/LocationsSelector/index.js

@@ -12,6 +12,7 @@ var _reactGoogleMaps = require("@vis.gl/react-google-maps");
 var _react = _interopRequireWildcard(require("react"));
 var _queries = require("../../__api__/queries");
 var _constants__ = require("../../__constants__");
+var _ActiveMarkerContext = require("../../__context__/ActiveMarkerContext");
 var _FormulaContext = require("../../__context__/FormulaContext");
 var _OrderSessionContext = require("../../__context__/OrderSessionContext");
 var _helpers__ = require("../../__helpers__");
@@ -61,9 +62,13 @@ const Loaded = /*#__PURE__*/_react.default.memo(_ref => {
 });
 const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
   const [userLocation, setUserLocation] = (0, _useUserLocation.default)();
+  const [isLocationSetViaSearch, setIsLocationSetViaSearch] = (0, _react.useState)(false);
+  const {
+    setActiveMarkerId
+  } = (0, _ActiveMarkerContext.useActiveMarker)();
+  const [, dispatch] = (0, _OrderSessionContext.useOrderSession)();
   const screen = (0, _useBreakpoint.default)();
   const isDesktop = screen.size >= 1200;
-  const [visibleIds, setVisibleIds] = (0, _react.useState)([]);
   const formula = (0, _FormulaContext.useFormula)();
   const [{
     franchiseName
@@ -100,21 +105,26 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
     array: locations || [],
     key: 'entityId'
   }), [locations]);
-  (0, _react.useEffect)(() => {
-    if (!allIds.length) {
-      return;
+
+  // Handle location updates from search
+  const handleLocationUpdate = function handleLocationUpdate(newLocation) {
+    let fromSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setUserLocation(newLocation);
+    setIsLocationSetViaSearch(fromSearch);
+
+    // Close any open marker popups when searching for a new location
+    if (fromSearch) {
+      setActiveMarkerId(null);
+
+      // Also clear any selected branch to avoid confusion
+      dispatch({
+        payload: {
+          branchId: null
+        },
+        type: _OrderSessionContext.orderSessionActions.SET_SELECTED_BRANCH
+      });
     }
-    setVisibleIds([]);
-    const addIdsInBatches = index => {
-      const offset = 10;
-      const nextBatch = allIds.slice(index, index + offset);
-      setVisibleIds(prev => [...prev, ...nextBatch]);
-      if (index + offset < allIds.length) {
-        requestAnimationFrame(() => addIdsInBatches(index + offset));
-      }
-    };
-    addIdsInBatches(0);
-  }, [allIds]);
+  };
   return /*#__PURE__*/_react.default.createElement(_reactGoogleMaps.APIProvider, {
     apiKey: APP_CONFIG.googleMapsApiKey,
     libraries: ['marker']
@@ -125,31 +135,33 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)(isDesktop ? 'dealer-map__container' : 'dealer-map')
   }, /*#__PURE__*/_react.default.createElement(_LocationClusteredMap.default, {
-    locationIds: visibleIds,
+    locationIds: allIds,
     locationsById: byId,
     userLocation: userLocation
   }))), /*#__PURE__*/_react.default.createElement("aside", {
     className: (0, _helpers__.withStyle)('dealer-sidebar col-xl-4 mt-3 mt-xl-0')
   }, isDesktop && /*#__PURE__*/_react.default.createElement(_LocationAutoComplete.default, {
-    setUserLocation: setUserLocation
+    onLocationUpdate: handleLocationUpdate
   }), franchiseName && /*#__PURE__*/_react.default.createElement("h6", {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Keten: ", franchiseName), /*#__PURE__*/_react.default.createElement(_LocationList.default, {
     locationIds: allIds,
     locationsById: byId,
-    userLocation: userLocation
+    userLocation: userLocation,
+    isLocationSetViaSearch: isLocationSetViaSearch
   }))) : /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('row gx-5 mt-3 mt-xl-5 justify-content-center')
   }, /*#__PURE__*/_react.default.createElement("aside", {
     className: (0, _helpers__.withStyle)('dealer-sidebar col-xl-4 mt-3 mt-xl-0')
   }, isDesktop && /*#__PURE__*/_react.default.createElement(_LocationAutoComplete.default, {
-    setUserLocation: setUserLocation
+    onLocationUpdate: handleLocationUpdate
   }), franchiseName && /*#__PURE__*/_react.default.createElement("h6", {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Keten: ", franchiseName), /*#__PURE__*/_react.default.createElement(_LocationList.default, {
     locationIds: allIds,
     locationsById: byId,
-    userLocation: userLocation
+    userLocation: userLocation,
+    isLocationSetViaSearch: isLocationSetViaSearch
   })))));
 });
 var _default = exports.default = LocationsSelector;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thm-p3-configurator",
-  "version": "0.0.201",
+  "version": "0.0.202",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "EnoRm.",