thm-p3-configurator 0.0.201 → 0.0.203

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/dist/src/shared/__containers__/internal/InternalAppointmentForm.js

@@ -619,7 +619,136 @@ const InternalAppointmentForm = _ref => {
     options: Object.values(_constants__.VEHICLE_OWNERSHIP_TYPE),
     isRequired: true,
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['ownershipType']
-  })), /*#__PURE__*/_react.default.createElement("h5", {
+  }), (vehicle === null || vehicle === void 0 ? void 0 : vehicle.ownershipType) === _constants__.VEHICLE_OWNERSHIP_TYPE.Leasemaatschappij && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('company-search-container position-relative mt-2 mb-2')
+  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+    placeholder: "Zoek leasemaatschappijen...",
+    value: customer.companyName,
+    name: "companyName",
+    onChange: value => {
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+        payload: {
+          companyName: value
+        }
+      });
+
+      // Also update search term if value is different
+      if (value !== companySearchTerm) {
+        setCompanySearchTerm(value);
+        setIsCompanyInputFocused(true);
+      }
+    },
+    onFocus: () => {
+      setIsCompanyInputFocused(true);
+    },
+    onBlur: () => {
+      setTimeout(() => {
+        setIsCompanyInputFocused(false);
+      }, 300); // Increased delay for better chance of click completion
+    },
+    isRequired: false,
+    form: "quotation",
+    label: "Leasemaatschappij:",
+    errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
+  }), isCompanyInputFocused && companySearchTerm && companySearchTerm.length >= 3 && branchesByType && branchesByType.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('dropdown-results position-absolute w-100 border rounded bg-white shadow'),
+    style: {
+      maxHeight: '200px',
+      overflowY: 'auto',
+      zIndex: 1050,
+      top: '100%',
+      left: 0,
+      right: 0
+    },
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, isLoadingBranchesByType && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers__.withStyle)('p-2 text-center')
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Zoeken...")), branchesByType.map(branch => /*#__PURE__*/_react.default.createElement("div", {
+    key: branch.entityId,
+    className: (0, _helpers__.withStyle)('dropdown-item p-2 border-bottom'),
+    style: {
+      cursor: 'pointer'
+    },
+    onMouseDown: e => {
+      e.preventDefault();
+      dispatch({
+        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
+        payload: {
+          companyName: branch.name
+        }
+      });
+      if (branch.postalCode) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
+          payload: {
+            zipCode: branch.postalCode
+          }
+        });
+      }
+      if (branch.street) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
+          payload: {
+            streetName: branch.street
+          }
+        });
+      }
+      if (branch.city) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
+          payload: {
+            city: branch.city
+          }
+        });
+      }
+      if (branch.street2) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
+          payload: {
+            houseNumber: branch.street2
+          }
+        });
+      }
+      if (branch.vatNumber) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
+          payload: {
+            vatNumber: branch.vatNumber
+          }
+        });
+      }
+      if (branch.kvkNumber) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
+          payload: {
+            kvkNumber: branch.kvkNumber
+          }
+        });
+      }
+      if (branch.huisnummerToevoeging) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
+          payload: {
+            houseNumberAddition: branch.huisnummerToevoeging
+          }
+        });
+      }
+      if (branch.country && branch.country.entityId) {
+        dispatch({
+          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
+          payload: {
+            countryId: branch.country.entityId
+          }
+        });
+        setRefreshKey(Date.now());
+      }
+      setCompanySearchTerm('');
+      setIsCompanyInputFocused(false);
+    }
+  }, branch.name))))), /*#__PURE__*/_react.default.createElement("h5", {
     className: (0, _helpers__.withStyle)('my-2')
   }, "Persoonlijke gegevens"), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _helpers__.withStyle)('col-12 col-md-6 mb-2')
@@ -756,140 +885,7 @@ const InternalAppointmentForm = _ref => {
     form: "appointment",
     label: "E-mailadres:",
     errorMessage: errors === null || errors === void 0 ? void 0 : errors['email']
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('company-search-container position-relative mt-2 mb-2')
-  }, /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-    placeholder: "Zoek leasemaatschappijen...",
-    value: customer.companyName,
-    name: "companyName",
-    onChange: value => {
-      // Update company name in state
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: value
-        }
-      });
-
-      // Also update search term if value is different
-      if (value !== companySearchTerm) {
-        console.log('value', value);
-        setCompanySearchTerm(value);
-        // Force focused state when typing
-        setIsCompanyInputFocused(true);
-      }
-    },
-    onFocus: () => {
-      setIsCompanyInputFocused(true);
-    },
-    onBlur: () => {
-      // Delay hiding the dropdown to allow click events to complete
-      setTimeout(() => {
-        setIsCompanyInputFocused(false);
-      }, 300); // Increased delay for better chance of click completion
-    },
-    isRequired: false,
-    form: "quotation",
-    label: "Leasemaatschappij:",
-    errorMessage: errors === null || errors === void 0 ? void 0 : errors['companyName']
-  }), isCompanyInputFocused && companySearchTerm && companySearchTerm.length >= 3 && branchesByType && branchesByType.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('dropdown-results position-absolute w-100 border rounded bg-white shadow'),
-    style: {
-      maxHeight: '200px',
-      overflowY: 'auto',
-      zIndex: 1050,
-      top: '100%',
-      left: 0,
-      right: 0
-    },
-    onMouseDown: e => {
-      e.preventDefault();
-    }
-  }, isLoadingBranchesByType && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _helpers__.withStyle)('p-2 text-center')
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Zoeken...")), branchesByType.map(branch => /*#__PURE__*/_react.default.createElement("div", {
-    key: branch.entityId,
-    className: (0, _helpers__.withStyle)('dropdown-item p-2 border-bottom'),
-    style: {
-      cursor: 'pointer'
-    },
-    onMouseDown: e => {
-      e.preventDefault();
-      dispatch({
-        type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COMPANY_NAME,
-        payload: {
-          companyName: branch.name
-        }
-      });
-      if (branch.postalCode) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_ZIP_CODE,
-          payload: {
-            zipCode: branch.postalCode
-          }
-        });
-      }
-      if (branch.street) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_STREET_NAME,
-          payload: {
-            streetName: branch.street
-          }
-        });
-      }
-      if (branch.city) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_CITY,
-          payload: {
-            city: branch.city
-          }
-        });
-      }
-      if (branch.street2) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER,
-          payload: {
-            houseNumber: branch.street2
-          }
-        });
-      }
-      if (branch.vatNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_VAT_NUMBER,
-          payload: {
-            vatNumber: branch.vatNumber
-          }
-        });
-      }
-      if (branch.kvkNumber) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_KVK_NUMBER,
-          payload: {
-            kvkNumber: branch.kvkNumber
-          }
-        });
-      }
-      if (branch.huisnummerToevoeging) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_HOUSE_NUMBER_ADDITION,
-          payload: {
-            houseNumberAddition: branch.huisnummerToevoeging
-          }
-        });
-      }
-      if (branch.country && branch.country.entityId) {
-        dispatch({
-          type: _OrderSessionContext.orderSessionActions.SET_CUSTOMER_COUNTRY_ID,
-          payload: {
-            countryId: branch.country.entityId
-          }
-        });
-        setRefreshKey(Date.now());
-      }
-      setCompanySearchTerm('');
-      setIsCompanyInputFocused(false);
-    }
-  }, branch.name)))), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
+  }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
     placeholder: "",
     value: customer.phoneNumber,
     name: "phoneNumber",

package/package.json

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