@traky-app/ui 1.6.4 → 1.6.5

package/registry/traky/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 "@/components/ui/alert-dialog"
 import { Button } from "@/components/ui/button"
 import { Spinner } from "@/components/ui/spinner"
-import { googleMapsSelectionToFormPatch } from "@/lib/google-maps-address"
+import { StateSelect } from "@/components/ui/state-select"
 import {
   Card,
   CardContent,
@@ -24,6 +26,8 @@ import {
   CardTitle,
 } from "@/components/ui/card"
 import { EntityIcon } from "@/components/ui/entity-icon"
+import { CitySelect } from "@/components/ui/city-select"
+import { CountrySelect } from "@/components/ui/country-select"
 import { GoogleMapsAddressPicker } from "@/components/ui/google-maps-address-picker"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/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) {
@@ -232,6 +225,7 @@ export type OfficeAddressFormCardProps = {
   countryField?: React.ReactNode
   phoneField?: React.ReactNode
   faxField?: React.ReactNode
+  manualFields?: React.ReactNode
 }
 
 export function OfficeAddressFormCard({
@@ -254,6 +248,7 @@ export function OfficeAddressFormCard({
   countryField,
   phoneField,
   faxField,
+  manualFields,
 }: OfficeAddressFormCardProps) {
   const busy = disabled
   const isCustomer = variant === "customer"
@@ -274,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 (
@@ -385,51 +402,75 @@ export function OfficeAddressFormCard({
           {countryControl}
         </div>
 
-        {addressEntryMode === "manual" ? (
-          <>
-            <div className="col-span-1 space-y-1 sm:col-span-2">
-              <Label htmlFor="office-address">Dirección</Label>
-              <Input
-                id="office-address"
-                name="address"
-                value={form.address}
-                onChange={handleChange}
-                placeholder="Calle y número"
-                disabled={busy}
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="office-city">Ciudad</Label>
-              <Input
-                id="office-city"
-                name="city"
-                value={form.city}
-                onChange={handleChange}
-                disabled={busy}
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="office-state">Estado / Provincia</Label>
-              <Input
-                id="office-state"
-                name="stateOrProvince"
-                value={form.stateOrProvince}
-                onChange={handleChange}
-                disabled={busy}
-              />
-            </div>
-            <div className="space-y-1">
-              <Label htmlFor="office-postal">Código postal</Label>
-              <Input
-                id="office-postal"
-                name="postalCode"
-                value={form.postalCode}
-                onChange={handleChange}
-                disabled={busy}
-              />
-            </div>
-          </>
-        ) : null}
+        {addressEntryMode === "manual"
+          ? (manualFields ?? (
+              <>
+                <div className="col-span-1 space-y-1 sm:col-span-2">
+                  <Label htmlFor="office-address">Dirección</Label>
+                  <Input
+                    id="office-address"
+                    name="address"
+                    value={form.address}
+                    onChange={handleChange}
+                    placeholder="Calle y número"
+                    disabled={busy}
+                  />
+                </div>
+                <div className="space-y-1">
+                  <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-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">
+                  <Label htmlFor="office-postal">Código postal</Label>
+                  <Input
+                    id="office-postal"
+                    name="postalCode"
+                    value={form.postalCode}
+                    onChange={handleChange}
+                    disabled={busy}
+                  />
+                </div>
+              </>
+            ))
+          : null}
 
         {addressEntryMode === "gps" && form.address.trim() ? (
           <div className="col-span-1 rounded-lg border border-border bg-muted/30 px-3 py-2.5 text-sm sm:col-span-2">
@@ -607,6 +648,7 @@ type OfficeAddressFormSharedProps = {
   countryField?: React.ReactNode
   phoneField?: React.ReactNode
   faxField?: React.ReactNode
+  manualFields?: React.ReactNode
 }
 
 type OfficeAddressFormInlineProps = OfficeAddressFormSharedProps & {
@@ -673,6 +715,7 @@ function OfficeAddressFormInline({
   countryField,
   phoneField,
   faxField,
+  manualFields,
 }: OfficeAddressFormInlineProps) {
   const internal = useOfficeAddressForm({ initialValues, initialEntryMode })
   const form = controlledForm ?? internal.form
@@ -702,6 +745,7 @@ function OfficeAddressFormInline({
       countryField={countryField}
       phoneField={phoneField}
       faxField={faxField}
+      manualFields={manualFields}
     />
   )
 }
@@ -728,6 +772,7 @@ function OfficeAddressFormModal({
   countryField,
   phoneField,
   faxField,
+  manualFields,
   icon,
   form: controlledForm,
   onFormChange: controlledOnFormChange,
@@ -816,6 +861,7 @@ function OfficeAddressFormModal({
           countryField={countryField}
           phoneField={phoneField}
           faxField={faxField}
+          manualFields={manualFields}
           form={form}
           onFormChange={setForm}
           addressEntryMode={addressEntryMode}