@traky-app/ui 1.6.3 → 1.6.4

package/src/ui/google-maps-address-picker.tsx

@@ -0,0 +1,422 @@
+"use client"
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useJsApiLoader, GoogleMap, Marker } from "@react-google-maps/api"
+import { IconLoader } from "@tabler/icons-react"
+
+import { cn } from "../lib/utils"
+import {
+  parseGoogleAddressComponents,
+  type GoogleMapsAddressSelection,
+} from "../lib/google-maps-address"
+import { Label } from "./label"
+
+const MAP_LIBRARIES: ("places")[] = ["places"]
+const DEFAULT_CENTER = { lat: -1.8312, lng: -78.1834 }
+const DEFAULT_ZOOM = 6
+const SELECTED_ZOOM = 16
+const MAP_CONTAINER_STYLE = { width: "100%", height: "min(52dvh, 360px)" }
+
+function applyGooglePlacesLightTheme(
+  element: google.maps.places.PlaceAutocompleteElement,
+) {
+  element.style.setProperty("color-scheme", "light")
+  element.style.setProperty("background-color", "#ffffff")
+  element.style.setProperty("color", "#141414")
+  element.style.setProperty("border", "1px solid #e2e8f0")
+  element.style.setProperty("border-radius", "0.375rem")
+  element.style.setProperty("width", "100%")
+  element.style.setProperty("min-height", "2.75rem")
+  element.style.setProperty("font-size", "0.875rem")
+}
+
+function parsePlaceInstance(
+  place: google.maps.places.Place,
+): GoogleMapsAddressSelection | null {
+  const lat = place.location?.lat()
+  const lng = place.location?.lng()
+  if (lat == null || lng == null) return null
+
+  const parsed = parseGoogleAddressComponents(
+    place.addressComponents as Parameters<
+      typeof parseGoogleAddressComponents
+    >[0],
+    place.displayName || place.formattedAddress || "",
+    lat,
+    lng,
+  )
+  if (!parsed) return null
+  return {
+    ...parsed,
+    formattedAddress: place.formattedAddress?.trim() || undefined,
+  }
+}
+
+export type GoogleMapsAddressPickerProps = {
+  onLocationSelect: (address: GoogleMapsAddressSelection) => void
+  onLocationClear?: () => void
+  regionCode?: string
+  className?: string
+  initialLatitude?: number
+  initialLongitude?: number
+  initialFormattedAddress?: string
+  /** Prioridad sobre `NEXT_PUBLIC_GOOGLE_MAPS_API_KEY`. */
+  apiKey?: string
+}
+
+function GoogleMapsAddressPickerInner({
+  onLocationSelect,
+  onLocationClear,
+  regionCode,
+  className,
+  initialLatitude,
+  initialLongitude,
+  initialFormattedAddress,
+}: Omit<GoogleMapsAddressPickerProps, "apiKey">) {
+  const autocompleteHostRef = useRef<HTMLDivElement>(null)
+  const autocompleteElementRef =
+    useRef<google.maps.places.PlaceAutocompleteElement | null>(null)
+  const geocoderRef = useRef<google.maps.Geocoder | null>(null)
+
+  const [searchLabel, setSearchLabel] = useState("")
+  const [isGeocoding, setIsGeocoding] = useState(false)
+  const [geocodeError, setGeocodeError] = useState<string | null>(null)
+  const [marker, setMarker] = useState<google.maps.LatLngLiteral | null>(() => {
+    if (
+      typeof initialLatitude === "number" &&
+      typeof initialLongitude === "number"
+    ) {
+      return { lat: initialLatitude, lng: initialLongitude }
+    }
+    return null
+  })
+  const [mapCenter, setMapCenter] = useState<google.maps.LatLngLiteral>(
+    marker ?? DEFAULT_CENTER,
+  )
+  const [mapZoom, setMapZoom] = useState(marker ? SELECTED_ZOOM : DEFAULT_ZOOM)
+
+  useEffect(() => {
+    const lat =
+      typeof initialLatitude === "number" && Number.isFinite(initialLatitude)
+        ? initialLatitude
+        : null
+    const lng =
+      typeof initialLongitude === "number" && Number.isFinite(initialLongitude)
+        ? initialLongitude
+        : null
+    if (lat == null || lng == null) return
+    const position = { lat, lng }
+    setMarker(position)
+    setMapCenter(position)
+    setMapZoom(SELECTED_ZOOM)
+  }, [initialLatitude, initialLongitude])
+
+  useEffect(() => {
+    const label = initialFormattedAddress?.trim()
+    if (!label) return
+    setSearchLabel(label)
+    if (autocompleteElementRef.current) {
+      autocompleteElementRef.current.value = label
+    }
+  }, [initialFormattedAddress])
+
+  const mapOptions = useMemo<google.maps.MapOptions>(
+    () => ({
+      streetViewControl: false,
+      mapTypeControl: false,
+      fullscreenControl: false,
+      zoomControl: true,
+    }),
+    [],
+  )
+
+  const applySelection = useCallback(
+    (address: GoogleMapsAddressSelection, label: string) => {
+      const position = { lat: address.latitude, lng: address.longitude }
+      setMarker(position)
+      setMapCenter(position)
+      setMapZoom(SELECTED_ZOOM)
+      setSearchLabel(label)
+      setGeocodeError(null)
+      if (autocompleteElementRef.current) {
+        autocompleteElementRef.current.value = label
+      }
+      onLocationSelect({
+        ...address,
+        formattedAddress: label.trim() || address.formattedAddress,
+      })
+    },
+    [onLocationSelect],
+  )
+
+  const reverseGeocode = useCallback(
+    (position: google.maps.LatLngLiteral) =>
+      new Promise<{ address: GoogleMapsAddressSelection; label: string } | null>(
+        (resolve) => {
+          if (!geocoderRef.current) {
+            geocoderRef.current = new google.maps.Geocoder()
+          }
+          geocoderRef.current.geocode({ location: position }, (results, status) => {
+            if (status !== "OK" || !results?.[0]) {
+              resolve(null)
+              return
+            }
+            const result = results[0]
+            const parsed = parseGoogleAddressComponents(
+              result.address_components,
+              result.formatted_address || "",
+              position.lat,
+              position.lng,
+            )
+            if (!parsed) {
+              resolve(null)
+              return
+            }
+            const label = result.formatted_address?.trim() || ""
+            resolve({
+              address: {
+                ...parsed,
+                formattedAddress: label || undefined,
+              },
+              label,
+            })
+          })
+        },
+      ),
+    [],
+  )
+
+  const handlePositionChange = useCallback(
+    async (position: google.maps.LatLngLiteral) => {
+      setMarker(position)
+      setMapCenter(position)
+      setMapZoom(SELECTED_ZOOM)
+      setIsGeocoding(true)
+      setGeocodeError(null)
+
+      const resolved = await reverseGeocode(position)
+      setIsGeocoding(false)
+
+      if (resolved) {
+        applySelection(resolved.address, resolved.label)
+        return
+      }
+
+      setGeocodeError(
+        "No pudimos resolver esa ubicación. Elige una dirección en el buscador o activa Geocoding API en Google Cloud.",
+      )
+    },
+    [applySelection, reverseGeocode],
+  )
+
+  useEffect(() => {
+    const host = autocompleteHostRef.current
+    if (!host) return
+
+    let cancelled = false
+    let placeAutocomplete: google.maps.places.PlaceAutocompleteElement | null =
+      null
+
+    const onSelect: EventListener = (event) => {
+      void (async () => {
+        const selectEvent =
+          event as google.maps.places.PlacePredictionSelectEvent
+        const place = selectEvent.placePrediction.toPlace()
+        await place.fetchFields({
+          fields: [
+            "displayName",
+            "formattedAddress",
+            "location",
+            "addressComponents",
+          ],
+        })
+
+        const parsed = parsePlaceInstance(place)
+        if (!parsed) return
+
+        const label =
+          place.formattedAddress?.trim() ||
+          [
+            parsed.streetNumber,
+            parsed.street,
+            parsed.city,
+            parsed.state,
+            parsed.postalCode,
+          ]
+            .filter(Boolean)
+            .join(", ")
+
+        applySelection(parsed, label)
+      })()
+    }
+
+    void (async () => {
+      await google.maps.importLibrary("places")
+
+      if (cancelled || !autocompleteHostRef.current) return
+
+      const region = regionCode?.trim().toLowerCase()
+      placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
+        ...(region ? { includedRegionCodes: [region] } : {}),
+        placeholder: "Busca tu dirección en Google Maps…",
+      })
+
+      placeAutocomplete.className = "gmp-place-autocomplete-host block w-full"
+      applyGooglePlacesLightTheme(placeAutocomplete)
+
+      const savedLabel = initialFormattedAddress?.trim()
+      if (savedLabel) {
+        placeAutocomplete.value = savedLabel
+        setSearchLabel(savedLabel)
+      }
+
+      host.replaceChildren(placeAutocomplete)
+      autocompleteElementRef.current = placeAutocomplete
+      placeAutocomplete.addEventListener("gmp-select", onSelect)
+    })()
+
+    return () => {
+      cancelled = true
+      if (placeAutocomplete) {
+        placeAutocomplete.removeEventListener("gmp-select", onSelect)
+      }
+      host.replaceChildren()
+      autocompleteElementRef.current = null
+    }
+  }, [applySelection, initialFormattedAddress, regionCode])
+
+  const handleClear = () => {
+    setMarker(null)
+    setSearchLabel("")
+    setGeocodeError(null)
+    setIsGeocoding(false)
+    setMapCenter(DEFAULT_CENTER)
+    setMapZoom(DEFAULT_ZOOM)
+    if (autocompleteElementRef.current) {
+      autocompleteElementRef.current.value = ""
+    }
+    onLocationClear?.()
+  }
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      <div className="space-y-1.5">
+        <Label>Buscar dirección</Label>
+        <div
+          ref={autocompleteHostRef}
+          className="gmp-autocomplete-wrapper w-full rounded-md bg-background"
+        />
+      </div>
+
+      <div className="overflow-hidden rounded-lg border border-border">
+        <GoogleMap
+          mapContainerStyle={MAP_CONTAINER_STYLE}
+          center={mapCenter}
+          zoom={mapZoom}
+          onClick={(event) => {
+            const latLng = event.latLng
+            if (!latLng) return
+            void handlePositionChange({ lat: latLng.lat(), lng: latLng.lng() })
+          }}
+          options={mapOptions}
+        >
+          {marker ? (
+            <Marker
+              position={marker}
+              draggable
+              onDragEnd={(event) => {
+                const latLng = event.latLng
+                if (!latLng) return
+                void handlePositionChange({
+                  lat: latLng.lat(),
+                  lng: latLng.lng(),
+                })
+              }}
+            />
+          ) : null}
+        </GoogleMap>
+      </div>
+
+      {geocodeError ? (
+        <p className="text-xs text-destructive">{geocodeError}</p>
+      ) : null}
+
+      {marker ? (
+        <div className="flex flex-wrap items-center justify-between gap-2 text-xs text-muted-foreground">
+          <span className="min-w-0 break-words">
+            {isGeocoding ? (
+              <>
+                <IconLoader className="mr-1 inline size-3 animate-spin" />
+                Actualizando dirección…
+              </>
+            ) : (
+              searchLabel ||
+              `${marker.lat.toFixed(5)}, ${marker.lng.toFixed(5)}`
+            )}
+          </span>
+          <button
+            type="button"
+            className="shrink-0 text-primary underline underline-offset-2"
+            onClick={handleClear}
+          >
+            Limpiar
+          </button>
+        </div>
+      ) : (
+        <p className="text-xs text-muted-foreground">
+          Busca una dirección o haz clic en el mapa para fijar el punto.
+        </p>
+      )}
+    </div>
+  )
+}
+
+function resolveGoogleMapsApiKey(apiKey?: string): string {
+  if (apiKey?.trim()) return apiKey.trim()
+  if (typeof process !== "undefined" && process.env) {
+    return process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY?.trim() ?? ""
+  }
+  return ""
+}
+
+export function GoogleMapsAddressPicker({
+  apiKey,
+  ...props
+}: GoogleMapsAddressPickerProps) {
+  const resolvedKey = resolveGoogleMapsApiKey(apiKey)
+
+  const { isLoaded, loadError } = useJsApiLoader({
+    googleMapsApiKey: resolvedKey,
+    libraries: MAP_LIBRARIES,
+  })
+
+  if (!resolvedKey) {
+    return (
+      <div className="rounded-lg border border-dashed border-border bg-muted/30 p-4 text-sm text-muted-foreground">
+        Configura{" "}
+        <code className="text-xs">NEXT_PUBLIC_GOOGLE_MAPS_API_KEY</code> (solo
+        desarrollo) para usar búsqueda y mapa de Google.
+      </div>
+    )
+  }
+
+  if (loadError) {
+    return (
+      <div className="rounded-lg border border-destructive/40 bg-destructive/10 p-4 text-sm text-destructive">
+        No se pudo cargar Google Maps. Habilita Maps JavaScript API, Places API
+        (New) y Geocoding API para esta clave.
+      </div>
+    )
+  }
+
+  if (!isLoaded) {
+    return (
+      <div className="flex h-[min(52dvh,360px)] items-center justify-center rounded-lg border bg-muted/30 text-sm text-muted-foreground">
+        <IconLoader className="mr-2 size-4 animate-spin" />
+        Cargando mapa…
+      </div>
+    )
+  }
+
+  return <GoogleMapsAddressPickerInner {...props} />
+}

package/src/ui/office-address-form-dialog.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+/** Compat: importa desde `@traky-app/ui/office-address-form` (`surface="modal"`). */
+export {
+  OfficeAddressForm,
+  OfficeAddressForm as OfficeAddressFormDialog,
+  OfficeAddressFormCard,
+  useOfficeAddressForm,
+  EMPTY_OFFICE_ADDRESS_FORM_VALUES,
+  mergeOfficeAddressFormValues,
+  type OfficeAddressFormProps,
+  type OfficeAddressFormDialogProps,
+  type OfficeAddressFormValues,
+  type OfficeAddressEntryMode,
+  type OfficeAddressFormCardProps,
+} from "./office-address-form"