@velion-la/onboarding-sdk-react-native 1.0.0-beta.2

package/src/camera/MapAddressPicker.tsx

@@ -0,0 +1,397 @@
+/**
+ * @fileoverview Full-screen map picker for the assisted ADDRESS_INFO flow.
+ *
+ *   - Draggable marker on a `MapView`. Provider per platform:
+ *       * Android → Google Maps (requires the integrator's API key in the
+ *         AndroidManifest, restricted by package name + SHA-1).
+ *       * iOS → Apple Maps (system map, no API key, no AirGoogleMaps
+ *         Xcode sub-target). Picked deliberately so the iOS build stays
+ *         lean and signing-only — Google on iOS would add ~5 MB and a
+ *         custom Expo plugin.
+ *   - Reverse geocoding via the OS-native geocoder (`utils/osGeocoder`) on
+ *     every marker move. We DO NOT use Google's REST Geocoding API because
+ *     it cannot be locked to a bundle ID — see osGeocoder.ts for the
+ *     rationale.
+ *   - Location permission is best-effort: if denied, the map centres on
+ *     Argentina and the user moves the pin to their address by hand.
+ *
+ * `react-native-maps` is an **optional peer dep** declared in
+ * `sdk/package.json`; this file imports it dynamically so hosts that never
+ * reach `ADDRESS_INFO` (or omit `googleMapsApiKey`) don't have to install
+ * it. The Google Places autocomplete search box has been removed — that
+ * library uses Google's Web Service REST API which also cannot be locked
+ * to a bundle ID. Users navigate the map by drag instead.
+ */
+
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  ActivityIndicator,
+  Keyboard,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import * as Location from 'expo-location';
+import { Button } from '../ui/primitives/Button';
+import { Banner } from '../ui/primitives/Banner';
+import { useTheme } from '../ui/theme';
+import { reverseGeocode } from '../utils/osGeocoder';
+import {
+  isAddressSelectionComplete,
+  type ParsedAddressFields,
+} from '../utils/parseGoogleAddressComponents';
+import { log } from '../utils/log';
+import { AddressSearchBar, type AddressSuggestion } from './AddressSearchBar';
+
+// `react-native-safe-area-context` is a transitive peer of Expo SDK 54+, but
+// not a direct dep of this SDK. Load it dynamically with a safe fallback so
+// hosts that strip optional deps still get reasonable inset values.
+function useSafeAreaInsets(): { top: number; bottom: number; left: number; right: number } {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const mod = require('react-native-safe-area-context');
+    return mod.useSafeAreaInsets();
+  } catch {
+    return { top: 0, bottom: 0, left: 0, right: 0 };
+  }
+}
+
+const floatingShadow = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: 2 },
+  shadowOpacity: 0.18,
+  shadowRadius: 6,
+  elevation: 4,
+} as const;
+
+// `react-native-maps` is an optional peer dep — load with `require` inside a
+// try/catch so the module can be imported even when the lib isn't installed
+// (the flow only mounts when `googleMapsApiKey` is present, which already
+// implies the host opted into maps).
+type MapView = React.ComponentType<{
+  style?: unknown;
+  initialRegion?: { latitude: number; longitude: number; latitudeDelta: number; longitudeDelta: number };
+  region?: { latitude: number; longitude: number; latitudeDelta: number; longitudeDelta: number } | undefined;
+  provider?: string | undefined;
+  showsUserLocation?: boolean | undefined;
+  showsMyLocationButton?: boolean | undefined;
+  onPress?: ((e: { nativeEvent: { coordinate: { latitude: number; longitude: number } } }) => void) | undefined;
+  children?: React.ReactNode | undefined;
+}>;
+type MarkerType = React.ComponentType<{
+  coordinate: { latitude: number; longitude: number };
+  draggable?: boolean;
+  onDragEnd?: (e: { nativeEvent: { coordinate: { latitude: number; longitude: number } } }) => void;
+}>;
+interface NativeModules {
+  MapView: MapView | null;
+  Marker: MarkerType | null;
+  PROVIDER_GOOGLE: string | undefined;
+}
+
+function loadNativeModules(): NativeModules {
+  let MapView: MapView | null = null;
+  let Marker: MarkerType | null = null;
+  let PROVIDER_GOOGLE: string | undefined;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
+    const maps = require('react-native-maps');
+    MapView = maps.default ?? maps.MapView;
+    Marker = maps.Marker;
+    PROVIDER_GOOGLE = maps.PROVIDER_GOOGLE;
+  } catch {
+    log.warn('[MapAddressPicker] react-native-maps not installed');
+  }
+  return { MapView, Marker, PROVIDER_GOOGLE };
+}
+
+const ARGENTINA_CENTER = { latitude: -38.42, longitude: -63.62 };
+const ARGENTINA_DELTA = { latitudeDelta: 18, longitudeDelta: 18 };
+const PIN_DELTA = { latitudeDelta: 0.005, longitudeDelta: 0.005 };
+
+export interface MapAddressPickerProps {
+  locale: string;
+  /** Required for the "Next" button. */
+  nextLabel: string;
+  backLabel: string;
+  searchPlaceholder: string;
+  searchingLabel: string;
+  noResultsLabel: string;
+  geocodeError: string;
+  locationDenied: string;
+  /**
+   * Field-level required map — decides whether the "Next" button is enabled.
+   * Defaults to all fields required.
+   */
+  requiredFields?: {
+    state?: boolean | undefined;
+    city?: boolean | undefined;
+    street?: boolean | undefined;
+    number?: boolean | undefined;
+    postal?: boolean | undefined;
+  } | undefined;
+  /** Restrict autocomplete predictions to these alpha-2 country codes. */
+  countryAllow?: ReadonlyArray<string> | undefined;
+  onConfirm: (
+    parsed: ParsedAddressFields & { latitude: number; longitude: number },
+  ) => void;
+  onBack: () => void;
+}
+
+export function MapAddressPicker(
+  props: MapAddressPickerProps,
+) {
+  const theme = useTheme();
+  const modules = useRef<NativeModules>(loadNativeModules()).current;
+
+  const [coord, setCoord] = useState<{ latitude: number; longitude: number } | null>(
+    null,
+  );
+  const [parsed, setParsed] = useState<
+    (ParsedAddressFields & { latitude: number; longitude: number }) | null
+  >(null);
+  const [pendingLocation, setPendingLocation] = useState(true);
+  const [permissionDenied, setPermissionDenied] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  // Try to centre on the user's location once on mount. Falls back silently
+  // to Argentina when permission is denied or unavailable.
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const { status } = await Location.requestForegroundPermissionsAsync();
+        if (status !== 'granted') {
+          if (!cancelled) {
+            setPermissionDenied(true);
+            setPendingLocation(false);
+          }
+          return;
+        }
+        const pos = await Location.getCurrentPositionAsync({
+          accuracy: Location.Accuracy.Balanced,
+        });
+        if (cancelled) return;
+        setCoord({
+          latitude: pos.coords.latitude,
+          longitude: pos.coords.longitude,
+        });
+        setPendingLocation(false);
+        await runReverseGeocode(pos.coords.latitude, pos.coords.longitude);
+      } catch (err) {
+        log.warn('[MapAddressPicker] expo-location failed', err);
+        if (!cancelled) {
+          setPermissionDenied(true);
+          setPendingLocation(false);
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const runReverseGeocode = useCallback(
+    async (lat: number, lng: number) => {
+      setErrorMsg(null);
+      try {
+        const result = await reverseGeocode({
+          latitude: lat,
+          longitude: lng,
+          locale: props.locale,
+        });
+        if (!result) {
+          setParsed(null);
+          setErrorMsg(props.geocodeError);
+          return;
+        }
+        setParsed(result);
+      } catch (err) {
+        log.warn('[MapAddressPicker] reverse geocode failed', err);
+        setParsed(null);
+        setErrorMsg(props.geocodeError);
+      }
+    },
+    [props.geocodeError, props.locale],
+  );
+
+  const handleMarkerMoved = useCallback(
+    async (lat: number, lng: number) => {
+      // Dismiss any open keyboard from the search bar before manipulating the
+      // map. This way pressing the map collapses the dropdown and frees the
+      // viewport without an extra tap.
+      Keyboard.dismiss();
+      setCoord({ latitude: lat, longitude: lng });
+      await runReverseGeocode(lat, lng);
+    },
+    [runReverseGeocode],
+  );
+
+  const handleSearchPick = useCallback((s: AddressSuggestion) => {
+    // Suggestion already comes with parsed address — no need to re-geocode.
+    setCoord({ latitude: s.latitude, longitude: s.longitude });
+    setParsed(s.parsed);
+    setErrorMsg(null);
+  }, []);
+
+  const next = useCallback(() => {
+    if (!parsed || !isAddressSelectionComplete(parsed, props.requiredFields)) {
+      setErrorMsg(props.geocodeError);
+      return;
+    }
+    props.onConfirm(parsed);
+  }, [parsed, props]);
+
+  const center = coord ?? ARGENTINA_CENTER;
+  const region = {
+    latitude: center.latitude,
+    longitude: center.longitude,
+    latitudeDelta: coord ? PIN_DELTA.latitudeDelta : ARGENTINA_DELTA.latitudeDelta,
+    longitudeDelta: coord ? PIN_DELTA.longitudeDelta : ARGENTINA_DELTA.longitudeDelta,
+  };
+
+  if (!modules.MapView) {
+    return (
+      <View style={[styles.errorRoot, { backgroundColor: theme.backgroundColor }]}>
+        <Text style={[styles.errorText, { color: theme.errorColor }]}>
+          react-native-maps must be installed to use the assisted address flow.
+        </Text>
+        <Button
+          variant="ghost"
+          label={props.backLabel}
+          onPress={props.onBack}
+          fullWidth={false}
+        />
+      </View>
+    );
+  }
+
+  const { MapView, Marker, PROVIDER_GOOGLE } = modules;
+  const insets = useSafeAreaInsets();
+  const topInset = Math.max(insets.top, Platform.OS === 'ios' ? 44 : 16);
+  const bottomInset = Math.max(insets.bottom, 16);
+
+  return (
+    <View style={styles.root}>
+      {/* Map fills the entire screen. */}
+      {MapView ? (
+        <MapView
+          style={StyleSheet.absoluteFill}
+          // iOS uses the system map (Apple Maps), Android uses Google.
+          // Forcing PROVIDER_GOOGLE on iOS requires AirGoogleMaps to be
+          // added to the Xcode project, which is opt-in via a custom
+          // Expo plugin — not worth the operational cost for a KYC flow.
+          provider={Platform.OS === 'android' ? PROVIDER_GOOGLE : undefined}
+          initialRegion={region}
+          region={region}
+          showsUserLocation={!permissionDenied}
+          showsMyLocationButton={false}
+          onPress={(e) => {
+            const c = e.nativeEvent.coordinate;
+            void handleMarkerMoved(c.latitude, c.longitude);
+          }}
+        >
+          {Marker && coord ? (
+            <Marker
+              coordinate={coord}
+              draggable
+              onDragEnd={(e) => {
+                const c = e.nativeEvent.coordinate;
+                void handleMarkerMoved(c.latitude, c.longitude);
+              }}
+            />
+          ) : null}
+        </MapView>
+      ) : null}
+
+      {/* Centred location spinner while we wait for the user's GPS fix. */}
+      {pendingLocation ? (
+        <View pointerEvents="none" style={styles.mapLoading}>
+          <ActivityIndicator color={theme.primaryColor} />
+        </View>
+      ) : null}
+
+      {/* Floating search bar at the top — the AddressSearchBar's TextInput
+          carries its own shadow so the map shows through everywhere else. */}
+      <View pointerEvents="box-none" style={[styles.floatTop, { top: topInset }]}>
+        <AddressSearchBar
+          placeholder={props.searchPlaceholder}
+          searchingLabel={props.searchingLabel}
+          noResultsLabel={props.noResultsLabel}
+          onSelect={handleSearchPick}
+          countryAllow={props.countryAllow}
+        />
+      </View>
+
+      {/* Floating banners stack above the bottom button. */}
+      <View
+        pointerEvents="box-none"
+        style={[styles.floatNotes, { bottom: bottomInset + 76 }]}
+      >
+        {permissionDenied ? (
+          <Banner variant="warning" message={props.locationDenied} />
+        ) : null}
+        {errorMsg ? <Banner message={errorMsg} /> : null}
+      </View>
+
+      {/* Floating "Next" button at the bottom — no card wrapper, just the
+          button with its own shadow against the map. */}
+      <Button
+        label={props.nextLabel}
+        onPress={next}
+        disabled={
+          !parsed || !isAddressSelectionComplete(parsed, props.requiredFields)
+        }
+        style={[styles.floatBottom, { bottom: bottomInset }, floatingShadow]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    // backgroundColor intentionally omitted — the map fills the entire view
+    // so any backdrop colour would only show briefly while tiles are loading.
+  },
+  mapLoading: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  floatTop: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+  },
+  floatNotes: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    gap: 6,
+  },
+  floatBottom: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+  },
+  errorRoot: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 14,
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});