updates on the createcustomer page and the createorder page and updates on the address field enhancements

src/pages/nearle/clients/createCustomer.js

@@ -79,9 +79,20 @@ const CreateCustomer = () => {
   }, []);
 
   // ============================================= || Address Autocomplete (pick) || =============================================
-  const handlePickPlaceSelected = (place) => {
+  // `overwriteFields: false` is used by the manual-typing fallback below — it only
+  // sets the map pin (lat/lng) and leaves the Address box / Door No / Area / City /
+  // State / Postcode exactly as the operator typed them, instead of replacing that
+  // text with the geocoder's own (often less specific) label for the resolved point.
+  // A real dropdown pick (onPlaceSelected) still gets the full overwrite as before.
+  const handlePickPlaceSelected = (place, { overwriteFields = true } = {}) => {
+    const lat = place.geometry.location.lat();
+    const lng = place.geometry.location.lng();
+    setStartPoint({ latitude: lat, longitude: lng });
+    if (!overwriteFields) {
+      setPickCust((prev) => ({ ...prev, latitude: lat, longitude: lng }));
+      return;
+    }
     setInputValue2(`${place.name}, ${place.formatted_address}`);
-    setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
     setAddress(`${place.name} ${place.formatted_address}`);
     setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` });
     const address = {
@@ -158,7 +169,7 @@ const CreateCustomer = () => {
     if (!manualAddress) return undefined;
     const timer = setTimeout(async () => {
       const place = await geocodeAddress(manualAddress, { bias: { lat: appLocaLat, lng: appLocaLng } });
-      if (place) handlePickPlaceSelected(place);
+      if (place) handlePickPlaceSelected(place, { overwriteFields: false });
     }, 800);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/pages/nearle/orders/createorder1.js

@@ -875,9 +875,20 @@ const Createorder1 = () => {
       });
   };
   // ============================================= || Address Autocomplete (pick) || =============================================
-  const handlePickPlaceSelected = (place) => {
+  // `overwriteFields: false` is used by the manual-typing fallback below — it only
+  // sets the map pin (lat/lng) and leaves the Address box / Door No / Area / City /
+  // Postcode exactly as the operator typed them, instead of replacing that text with
+  // the geocoder's own (often less specific) label for the resolved point. A real
+  // dropdown pick (onPlaceSelected) still gets the full overwrite as before.
+  const handlePickPlaceSelected = (place, { overwriteFields = true } = {}) => {
+    const lat = place.geometry.location.lat();
+    const lng = place.geometry.location.lng();
+    setStartPoint({ latitude: lat, longitude: lng });
+    if (!overwriteFields) {
+      setPickCust((prev) => ({ ...prev, latitude: lat, longitude: lng }));
+      return;
+    }
     setInputValue2(`${place.name}, ${place.formatted_address}`);
-    setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
     setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` });
     const address = {
       address: `${place.name} ${place.formatted_address}`,
@@ -935,9 +946,16 @@ const Createorder1 = () => {
     });
   };
   // ============================================= || Address Autocomplete (Drop) || =============================================
-  const handleDropPlaceSelected = (place) => {
+  // See handlePickPlaceSelected above for why overwriteFields exists.
+  const handleDropPlaceSelected = (place, { overwriteFields = true } = {}) => {
+    const lat = place.geometry.location.lat();
+    const lng = place.geometry.location.lng();
+    setEndPoint({ latitude: lat, longitude: lng });
+    if (!overwriteFields) {
+      setDropCust((prev) => ({ ...prev, latitude: lat, longitude: lng }));
+      return;
+    }
     setInputValue3(`${place.name}, ${place.formatted_address}`);
-    setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
     setDropCust({ ...dropCust, address: `${place.name} ${place.formatted_address}` });
     const address = {
       address: `${place.name} ${place.formatted_address}`,
@@ -1014,7 +1032,7 @@ const Createorder1 = () => {
     if (!manualAddress) return undefined;
     const timer = setTimeout(async () => {
       const place = await geocodeAddress(manualAddress, { bias: { lat: appLocaLat, lng: appLocaLng } });
-      if (place) handlePickPlaceSelected(place);
+      if (place) handlePickPlaceSelected(place, { overwriteFields: false });
     }, 800);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -1028,7 +1046,7 @@ const Createorder1 = () => {
     if (!manualAddress) return undefined;
     const timer = setTimeout(async () => {
       const place = await geocodeAddress(manualAddress, { bias: { lat: appLocaLat, lng: appLocaLng } });
-      if (place) handleDropPlaceSelected(place);
+      if (place) handleDropPlaceSelected(place, { overwriteFields: false });
     }, 800);
     return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps