@traky-app/ui 1.6.4 → 1.6.6

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

@@ -5,6 +5,8 @@ import { IconEdit, IconMapPin, IconPlus } from "@tabler/icons-react"
 import type { Icon } from "@tabler/icons-react"
 
 import { cn } from "../lib/utils"
+import { fetchStates } from "../lib/geo-locations"
+import { googleMapsSelectionToFormPatch } from "../lib/google-maps-address"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,7 +16,7 @@ import {
 } from "./alert-dialog"
 import { Button } from "./button"
 import { Spinner } from "./spinner"
-import { googleMapsSelectionToFormPatch } from "../lib/google-maps-address"
+import { StateSelect } from "./state-select"
 import {
   Card,
   CardContent,
@@ -24,6 +26,8 @@ import {
   CardTitle,
 } from "./card"
 import { EntityIcon } from "./entity-icon"
+import { CitySelect } from "./city-select"
+import { CountrySelect } from "./country-select"
 import { GoogleMapsAddressPicker } from "./google-maps-address-picker"
 import { Input } from "./input"
 import { Label } from "./label"
@@ -81,17 +85,6 @@ function OfficeAddressEntryModeSwitch({
 /** `customer` = dirección de envío (contacto/portal). `enterprise` = sucursal o bodega. */
 export type OfficeAddressFormVariant = "customer" | "enterprise"
 
-const OFFICE_ADDRESS_COUNTRY_OPTIONS: { code: string; label: string }[] = [
-  { code: "EC", label: "Ecuador" },
-  { code: "US", label: "Estados Unidos" },
-  { code: "MX", label: "México" },
-  { code: "CO", label: "Colombia" },
-  { code: "PE", label: "Perú" },
-  { code: "CL", label: "Chile" },
-  { code: "PA", label: "Panamá" },
-  { code: "CR", label: "Costa Rica" },
-]
-
 const FAX_COUNTRY_CODES = new Set(["US", "CA", "PR"])
 
 export function isOfficeAddressFaxCountry(countryCode: string | undefined) {
@@ -276,29 +269,51 @@ export function OfficeAddressFormCard({
   }
 
   const embedded = layout === "dialog"
+  const countryCode = form.countryCode?.trim().toUpperCase() ?? ""
+  const [stateCode, setStateCode] = React.useState("")
+
+  React.useEffect(() => {
+    const stateName = form.stateOrProvince?.trim() ?? ""
+    if (!countryCode || !stateName) {
+      setStateCode("")
+      return
+    }
+
+    let cancelled = false
+    void fetchStates(countryCode).then((list) => {
+      if (cancelled) return
+      const wanted = stateName.toLowerCase()
+      const match = list.find(
+        (item) =>
+          item.name.toLowerCase() === wanted ||
+          item.code.toLowerCase() === wanted,
+      )
+      setStateCode(match?.code ?? "")
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [countryCode, form.stateOrProvince])
 
   const countryControl =
     countryField ?? (
-      <Select
-        value={form.countryCode || undefined}
+      <CountrySelect
+        className="w-full"
+        size="lg"
+        value={form.countryCode}
         disabled={busy}
-        onValueChange={(code) =>
-          onFormChange((prev) => ({ ...prev, countryCode: code }))
-        }
-      >
-        <SelectTrigger className="w-full" aria-label="País">
-          <SelectValue placeholder="Selecciona el país" />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            {OFFICE_ADDRESS_COUNTRY_OPTIONS.map((c) => (
-              <SelectItem key={c.code} value={c.code}>
-                {c.label}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+        searchPlaceholder="Escribe el país…"
+        onChange={(country) => {
+          setStateCode("")
+          onFormChange((prev) => ({
+            ...prev,
+            countryCode: country.code,
+            stateOrProvince: "",
+            city: "",
+          }))
+        }}
+      />
     )
 
   return (
@@ -402,23 +417,45 @@ export function OfficeAddressFormCard({
                   />
                 </div>
                 <div className="space-y-1">
-                  <Label htmlFor="office-city">Ciudad</Label>
-                  <Input
-                    id="office-city"
-                    name="city"
-                    value={form.city}
-                    onChange={handleChange}
+                  <Label htmlFor="office-state">
+                    Estado / Región / Municipio
+                  </Label>
+                  <StateSelect
+                    id="office-state"
+                    className="w-full"
+                    countryCode={countryCode}
+                    value={form.stateOrProvince}
                     disabled={busy}
+                    onChange={(option) => {
+                      setStateCode(option?.code ?? "")
+                      onFormChange((prev) => ({
+                        ...prev,
+                        stateOrProvince: option?.name ?? "",
+                        city: "",
+                      }))
+                    }}
                   />
                 </div>
                 <div className="space-y-1">
-                  <Label htmlFor="office-state">Estado / Provincia</Label>
-                  <Input
-                    id="office-state"
-                    name="stateOrProvince"
-                    value={form.stateOrProvince}
-                    onChange={handleChange}
+                  <Label htmlFor="office-city">
+                    Ciudad / Pueblo / Distrito
+                  </Label>
+                  <CitySelect
+                    id="office-city"
+                    className="w-full"
+                    countryCode={countryCode}
+                    stateCode={stateCode}
+                    value={form.city}
                     disabled={busy}
+                    onChange={(option) => {
+                      onFormChange((prev) => ({
+                        ...prev,
+                        city: option?.name ?? "",
+                        ...(option?.stateName
+                          ? { stateOrProvince: option.stateName }
+                          : {}),
+                      }))
+                    }}
                   />
                 </div>
                 <div className="space-y-1">