feat(customer): map-based location picker (TomTom tiles) replaces text address

Typing an address for a GPS pickup service was unreliable and produced two
conflicting buttons ("Use my location" vs "Find this address" set different
points). Replaced with one map picker:

- MapPicker (react-native-webview + Leaflet + TomTom raster tiles, EXPO_PUBLIC_
  TOMTOM_MAP_KEY): Grab-style centre pin, opens on device GPS (falls back to
  Zamboanga), pan to place the pin, debounced reverse-geocode (/geocode/reverse)
  labels it, "Use this location" returns { lat, lng, address }. Reuses the TomTom
  key — no Google Maps key, cross-platform, matches the admin map's tile approach.
- book.tsx: dropped the address TextInput + the two location buttons for a single
  "Set pickup on map"; shows the pinned address in a card.
- addresses.tsx: the add form now pins the location on the map (and finally SAVES
  lat/lng — the old text-only form saved addresses with no coordinates, useless for
  a pickup service).

NOTE: react-native-webview is a native module → run `npx expo run:ios --device`
once to pick it up (JS reload won't include it).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: Banyel3

apps/customer-mobile/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "scripts": {
     "start": "expo start",
-    "ios": "expo start --ios",
-    "android": "expo start --android",
+    "ios": "expo run:ios",
+    "android": "expo run:android",
     "web": "expo start --web --port 3000",
     "type-check": "tsc --noEmit",
     "test": "jest --config jest.logic.config.js"
@@ -37,6 +37,7 @@
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
     "react-native-web": "~0.21.0",
+    "react-native-webview": "13.16.1",
     "react-native-worklets": "0.10.0"
   },
   "devDependencies": {

apps/customer-mobile/src/app/addresses.tsx

@@ -15,13 +15,16 @@ import {
   useToast,
 } from '@wash-and-go/ui';
 import { api } from '../lib/api';
+import { MapPicker } from '../components/MapPicker';
 
 export default function AddressesScreen() {
   const toast = useToast();
   const [list, setList] = useState<AddressView[] | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [label, setLabel] = useState('');
   const [line, setLine] = useState('');
+  const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
+  const [mapOpen, setMapOpen] = useState(false);
   const [busy, setBusy] = useState(false);
 
   const load = useCallback(async () => {
@@ -38,25 +41,27 @@ export default function AddressesScreen() {
   }, [load]);
 
   const add = useCallback(async () => {
-    const l = line.trim();
-    if (l.length < 3 || busy) return;
+    if (!coords || busy) return;
     setBusy(true);
     try {
       await api.createAddress({
-        line: l,
+        line: line.trim() || 'Pinned location',
         label: label.trim() || undefined,
+        lat: coords.lat,
+        lng: coords.lng,
         isDefault: (list?.length ?? 0) === 0, // first one is the default
       });
       setLabel('');
       setLine('');
+      setCoords(null);
       await load();
       toast.success('Address saved');
     } catch (e) {
       toast.error(e instanceof Error ? e.message : 'Could not add that address.');
     } finally {
       setBusy(false);
     }
-  }, [line, label, busy, list, load, toast]);
+  }, [coords, line, label, busy, list, load, toast]);
 
   const setDefault = useCallback(
     async (id: string) => {
@@ -162,22 +167,38 @@ export default function AddressesScreen() {
         style={styles.input}
         testID="addr-label-input"
       />
-      <TextInput
-        value={line}
-        onChangeText={setLine}
-        placeholder="Address (street, barangay)"
-        placeholderTextColor={colors.textMuted}
-        style={styles.input}
-        multiline
-        testID="addr-line-input"
+      {coords ? (
+        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+          <Text style={{ fontSize: 18 }}>📍</Text>
+          <Text style={[type.body, { flex: 1, color: colors.text }]} numberOfLines={2}>
+            {line || 'Pinned location'}
+          </Text>
+        </Card>
+      ) : null}
+      <PrimaryButton
+        label={coords ? 'Change location on map' : '📍 Set location on map'}
+        onPress={() => setMapOpen(true)}
+        tone="terra"
+        testID="addr-open-map"
       />
       <PrimaryButton
         label="Add address"
         onPress={add}
-        disabled={line.trim().length < 3}
+        disabled={!coords}
         loading={busy}
         testID="add-address"
       />
+
+      <MapPicker
+        visible={mapOpen}
+        initial={coords}
+        onClose={() => setMapOpen(false)}
+        onPick={(p) => {
+          setCoords({ lat: p.lat, lng: p.lng });
+          setLine(p.address);
+          setMapOpen(false);
+        }}
+      />
     </Screen>
   );
 }

apps/customer-mobile/src/app/book.tsx

@@ -1,8 +1,8 @@
 import { router } from 'expo-router';
-import * as Location from 'expo-location';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Alert, Linking, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { AddressView } from '@wash-and-go/domain';
+import { MapPicker } from '../components/MapPicker';
 import {
   Card,
   Muted,
@@ -47,11 +47,9 @@ export default function BookScreen() {
   const slots = useMemo(buildSlots, []);
   const [coords, setCoords] = useState<{ lat: number; lng: number } | null>(null);
   const [address, setAddress] = useState('');
-  const [gpsLoading, setGpsLoading] = useState(false);
-  const [geoLoading, setGeoLoading] = useState(false);
+  const [mapOpen, setMapOpen] = useState(false);
   const [saved, setSaved] = useState<AddressView[]>([]);
   const [saveNew, setSaveNew] = useState(false);
-  const toast = useToast();
 
   // Load the address book to prefill pickup (best-effort — booking works without).
   useEffect(() => {
@@ -69,69 +67,15 @@ export default function BookScreen() {
     }
   }, []);
 
-  // Geocode the typed address → pin its coordinates (no GPS needed).
-  const findAddress = useCallback(async () => {
-    const q = address.trim();
-    if (q.length < 2) return;
-    setGeoLoading(true);
-    try {
-      const hit = await api.geocode(q);
-      if (hit) {
-        setCoords(hit.point);
-        setAddress(hit.label);
-        toast.success('Address pinned.');
-      } else {
-        toast.error('No match for that address. Try GPS or add more detail.');
-      }
-    } catch {
-      toast.error('Could not search that address. Try again or use GPS.');
-    } finally {
-      setGeoLoading(false);
-    }
-  }, [address]);
-
-  const useMyLocation = useCallback(async () => {
-    setGpsLoading(true);
-    try {
-      const { status, canAskAgain } = await Location.requestForegroundPermissionsAsync();
-      if (status !== 'granted') {
-        // Not an error — prompt them to turn it on. If iOS won't re-ask
-        // (previously denied), the only way back is Settings, so offer it.
-        Alert.alert(
-          'Location is off',
-          'Turn on location access to drop your pickup pin automatically.',
-          canAskAgain
-            ? [{ text: 'OK' }]
-            : [
-                { text: 'Not now', style: 'cancel' },
-                { text: 'Open Settings', onPress: () => void Linking.openSettings() },
-              ],
-        );
-        return;
-      }
-      const pos = await Location.getCurrentPositionAsync({
-        accuracy: Location.Accuracy.Balanced,
-      });
-      const { latitude, longitude } = pos.coords;
-      setCoords({ lat: latitude, lng: longitude });
-      try {
-        const [place] = await Location.reverseGeocodeAsync({ latitude, longitude });
-        if (place) {
-          setAddress(
-            [place.name, place.street, place.district, place.city]
-              .filter(Boolean)
-              .join(', '),
-          );
-        }
-      } catch {
-        // best-effort
-      }
-    } catch {
-      toast.error('Could not read your location. Try again or type your address.');
-    } finally {
-      setGpsLoading(false);
-    }
-  }, []);
+  // Pickup point is chosen on the map (single source of truth) — see MapPicker.
+  const onPickLocation = useCallback(
+    (p: { lat: number; lng: number; address: string }) => {
+      setCoords({ lat: p.lat, lng: p.lng });
+      setAddress(p.address);
+      setMapOpen(false);
+    },
+    [],
+  );
 
   // Loads over the Express ceiling route to Scheduled (Tier 1) — the customer
   // picks a pickup window; Express stays on-demand.
@@ -290,35 +234,28 @@ export default function BookScreen() {
         </View>
       ) : null}
 
+      {coords ? (
+        <Card style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+          <Text style={{ fontSize: 18 }}>📍</Text>
+          <Text style={[type.body, { flex: 1, color: colors.text }]} numberOfLines={2}>
+            {address || 'Pinned location'}
+          </Text>
+        </Card>
+      ) : null}
+
       <PrimaryButton
-        label={coords ? '📍 Location set — update' : '📍 Use my location'}
-        onPress={useMyLocation}
-        loading={gpsLoading}
+        label={coords ? 'Change pickup on map' : '📍 Set pickup on map'}
+        onPress={() => setMapOpen(true)}
         tone="terra"
-      />
-      <TextInput
-        value={address}
-        onChangeText={setAddress}
-        placeholder="Pickup address (street, barangay)"
-        placeholderTextColor={colors.textMuted}
-        style={styles.input}
-        multiline
+        testID="open-map"
       />
 
-      <Pressable
-        onPress={findAddress}
-        disabled={address.trim().length < 2 || geoLoading}
-        style={({ pressed }) => [
-          styles.findBtn,
-          (address.trim().length < 2 || geoLoading) && { opacity: 0.5 },
-          pressed && { opacity: 0.8 },
-        ]}
-        accessibilityRole="button"
-      >
-        <Text style={styles.findBtnT}>
-          {geoLoading ? 'Searching…' : '🔎 Find this address'}
-        </Text>
-      </Pressable>
+      <MapPicker
+        visible={mapOpen}
+        initial={coords}
+        onClose={() => setMapOpen(false)}
+        onPick={onPickLocation}
+      />
 
       <Pressable
         onPress={() => setSaveNew((v) => !v)}