@traky-app/ui 1.6.1 → 1.6.4

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

@@ -0,0 +1,877 @@
+"use client"
+
+import * as React from "react"
+import { IconEdit, IconMapPin, IconPlus } from "@tabler/icons-react"
+import type { Icon } from "@tabler/icons-react"
+
+import { cn } from "../lib/utils"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogTrigger,
+} from "./alert-dialog"
+import { Button } from "./button"
+import { Spinner } from "./spinner"
+import { googleMapsSelectionToFormPatch } from "../lib/google-maps-address"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card"
+import { EntityIcon } from "./entity-icon"
+import { GoogleMapsAddressPicker } from "./google-maps-address-picker"
+import { Input } from "./input"
+import { Label } from "./label"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./select"
+import { Switch } from "./switch"
+import { Textarea } from "./textarea"
+
+export type OfficeAddressEntryMode = "manual" | "gps"
+
+function OfficeAddressEntryModeSwitch({
+  mode,
+  onModeChange,
+  disabled = false,
+  className,
+}: {
+  mode: OfficeAddressEntryMode
+  onModeChange: (mode: OfficeAddressEntryMode) => void
+  disabled?: boolean
+  className?: string
+}) {
+  const isGps = mode === "gps"
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center gap-2 text-xs text-muted-foreground",
+        className,
+      )}
+      role="group"
+      aria-label="Modo de ingreso de dirección"
+    >
+      <span className={cn(!isGps && "font-semibold text-foreground")}>
+        Manual
+      </span>
+      <Switch
+        checked={isGps}
+        disabled={disabled}
+        aria-label={isGps ? "Modo GPS" : "Modo manual"}
+        onCheckedChange={(checked) =>
+          onModeChange(checked ? "gps" : "manual")
+        }
+      />
+      <span className={cn(isGps && "font-semibold text-foreground")}>GPS</span>
+    </div>
+  )
+}
+
+/** `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) {
+  return FAX_COUNTRY_CODES.has(countryCode?.trim().toUpperCase() ?? "")
+}
+
+export type OfficeAddressFormValues = {
+  countryCode: string
+  address: string
+  suiteOrApt: string
+  city: string
+  stateOrProvince: string
+  postalCode: string
+  phoneNumber: string
+  fax: string
+  note: string
+  isActive: boolean
+  isMain: boolean
+  isWarehouseOnly: boolean
+  latitude: number | null
+  longitude: number | null
+  addressGeocodeSource: string | null
+}
+
+export const EMPTY_OFFICE_ADDRESS_FORM_VALUES: OfficeAddressFormValues = {
+  countryCode: "",
+  address: "",
+  suiteOrApt: "",
+  city: "",
+  stateOrProvince: "",
+  postalCode: "",
+  phoneNumber: "",
+  fax: "",
+  note: "",
+  isActive: true,
+  isMain: false,
+  isWarehouseOnly: false,
+  latitude: null,
+  longitude: null,
+  addressGeocodeSource: null,
+}
+
+export function mergeOfficeAddressFormValues(
+  initial?: Partial<OfficeAddressFormValues>,
+): OfficeAddressFormValues {
+  return {
+    ...EMPTY_OFFICE_ADDRESS_FORM_VALUES,
+    ...initial,
+    isActive: initial?.isActive ?? true,
+    isMain: initial?.isMain ?? false,
+  }
+}
+
+export function resolveOfficeAddressEntryMode(
+  initial?: Partial<OfficeAddressFormValues>,
+  initialEntryMode?: OfficeAddressEntryMode,
+): OfficeAddressEntryMode {
+  if (initialEntryMode) return initialEntryMode
+  return initial?.addressGeocodeSource === "google_maps" ? "gps" : "manual"
+}
+
+export function useOfficeAddressForm(options?: {
+  initialValues?: Partial<OfficeAddressFormValues>
+  initialEntryMode?: OfficeAddressEntryMode
+}) {
+  const [form, setForm] = React.useState<OfficeAddressFormValues>(() =>
+    mergeOfficeAddressFormValues(options?.initialValues),
+  )
+  const [addressEntryMode, setAddressEntryMode] =
+    React.useState<OfficeAddressEntryMode>(() =>
+      resolveOfficeAddressEntryMode(
+        options?.initialValues,
+        options?.initialEntryMode,
+      ),
+    )
+
+  const reset = React.useCallback(
+    (
+      nextInitial?: Partial<OfficeAddressFormValues>,
+      nextMode?: OfficeAddressEntryMode,
+    ) => {
+      setForm(mergeOfficeAddressFormValues(nextInitial))
+      setAddressEntryMode(
+        resolveOfficeAddressEntryMode(nextInitial, nextMode),
+      )
+    },
+    [],
+  )
+
+  const setAddressEntryModeAndClearGps = React.useCallback(
+    (mode: OfficeAddressEntryMode) => {
+      setAddressEntryMode(mode)
+      if (mode === "manual") {
+        setForm((prev) => ({
+          ...prev,
+          latitude: null,
+          longitude: null,
+          addressGeocodeSource: null,
+        }))
+      }
+    },
+    [],
+  )
+
+  return {
+    form,
+    setForm,
+    addressEntryMode,
+    setAddressEntryMode: setAddressEntryModeAndClearGps,
+    reset,
+  }
+}
+
+export type OfficeAddressFormCardProps = {
+  title: string
+  description?: string
+  icon?: Icon
+  form: OfficeAddressFormValues
+  onFormChange: React.Dispatch<React.SetStateAction<OfficeAddressFormValues>>
+  addressEntryMode: OfficeAddressEntryMode
+  onAddressEntryModeChange: (mode: OfficeAddressEntryMode) => void
+  disabled?: boolean
+  regionCode?: string
+  googleMapsApiKey?: string
+  /** Estable para remontar GoogleMaps al editar. */
+  pickerKey?: string
+  footer?: React.ReactNode
+  className?: string
+  /**
+   * `dialog`: card plana dentro de AlertDialog (sin borde/sombra exterior).
+   * `page`: card completa para rutas de edición.
+   */
+  layout?: "dialog" | "page"
+  contentClassName?: string
+  /** customer = envío; enterprise = sucursal/bodega (campos extra). */
+  variant?: OfficeAddressFormVariant
+  /** Reemplaza el selector de país por defecto (p. ej. CountrySelect en la app). */
+  countryField?: React.ReactNode
+  phoneField?: React.ReactNode
+  faxField?: React.ReactNode
+  manualFields?: React.ReactNode
+}
+
+export function OfficeAddressFormCard({
+  title,
+  description,
+  icon: HeaderIcon = IconMapPin,
+  form,
+  onFormChange,
+  addressEntryMode,
+  onAddressEntryModeChange,
+  disabled = false,
+  regionCode,
+  googleMapsApiKey,
+  pickerKey = "office-address-gps",
+  footer,
+  className,
+  layout = "page",
+  contentClassName,
+  variant = "customer",
+  countryField,
+  phoneField,
+  faxField,
+  manualFields,
+}: OfficeAddressFormCardProps) {
+  const busy = disabled
+  const isCustomer = variant === "customer"
+  const mapRegion =
+    form.countryCode?.trim().toUpperCase() ||
+    regionCode?.trim().toUpperCase() ||
+    undefined
+  const showFax =
+    Boolean(faxField) ||
+    isOfficeAddressFaxCountry(form.countryCode) ||
+    form.fax.trim().length > 0
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const { name, value } = e.target
+    onFormChange((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const embedded = layout === "dialog"
+
+  const countryControl =
+    countryField ?? (
+      <Select
+        value={form.countryCode || undefined}
+        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>
+    )
+
+  return (
+    <Card
+      className={cn(
+        "gap-0 py-0",
+        embedded
+          ? "border-0 bg-transparent shadow-none"
+          : "border-border shadow-sm",
+        className,
+      )}
+    >
+      <CardHeader
+        className={cn(
+          "flex flex-row flex-wrap items-center justify-between gap-3 space-y-0 px-5 pt-5 pb-3.5 sm:px-6",
+          embedded && "border-b border-border/60",
+          !embedded && "border-b border-border/60",
+        )}
+      >
+        <div className="flex min-w-0 flex-1 items-start gap-3">
+          <EntityIcon icon={HeaderIcon} size="sm" className="mb-0" />
+          <div className="min-w-0 space-y-0.5">
+            <CardTitle className="text-sm font-semibold tracking-tight">
+              {title}
+            </CardTitle>
+            {description ? (
+              <CardDescription className="text-xs">{description}</CardDescription>
+            ) : null}
+          </div>
+        </div>
+        <OfficeAddressEntryModeSwitch
+          mode={addressEntryMode}
+          disabled={busy}
+          onModeChange={onAddressEntryModeChange}
+        />
+      </CardHeader>
+
+      <CardContent
+        className={cn(
+          "grid min-h-0 grid-cols-1 gap-4 px-5 py-4 sm:grid-cols-2 sm:px-6",
+          embedded && "max-h-[min(60dvh,28rem)] overflow-y-auto overscroll-contain",
+          contentClassName,
+        )}
+      >
+        {addressEntryMode === "gps" ? (
+          <div className="col-span-1 sm:col-span-2">
+            <GoogleMapsAddressPicker
+              key={pickerKey}
+              apiKey={googleMapsApiKey}
+              regionCode={mapRegion}
+              initialLatitude={form.latitude ?? undefined}
+              initialLongitude={form.longitude ?? undefined}
+              initialFormattedAddress={form.address}
+              onLocationSelect={(selection) => {
+                const patch = googleMapsSelectionToFormPatch(selection)
+                onFormChange((prev) => ({
+                  ...prev,
+                  address: patch.address,
+                  city: patch.city,
+                  stateOrProvince: patch.stateOrProvince,
+                  postalCode: patch.postalCode,
+                  countryCode: patch.countryCode || prev.countryCode,
+                  latitude: patch.latitude,
+                  longitude: patch.longitude,
+                  addressGeocodeSource: patch.addressGeocodeSource,
+                }))
+              }}
+              onLocationClear={() => {
+                onFormChange((prev) => ({
+                  ...prev,
+                  address: "",
+                  city: "",
+                  stateOrProvince: "",
+                  postalCode: "",
+                  latitude: null,
+                  longitude: null,
+                  addressGeocodeSource: null,
+                }))
+              }}
+            />
+          </div>
+        ) : null}
+
+        <div className="col-span-1 space-y-1 sm:col-span-2">
+          <Label htmlFor="office-country">País</Label>
+          {countryControl}
+        </div>
+
+        {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-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 === "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">
+            <p className="font-medium text-foreground">{form.address}</p>
+            <p className="text-muted-foreground">
+              {[form.city, form.stateOrProvince, form.postalCode, form.countryCode]
+                .filter(Boolean)
+                .join(" · ")}
+            </p>
+          </div>
+        ) : null}
+
+        <div className="col-span-1 space-y-1 sm:col-span-2">
+          <Label htmlFor="office-suite">Suite / apt</Label>
+          <Input
+            id="office-suite"
+            name="suiteOrApt"
+            value={form.suiteOrApt}
+            onChange={handleChange}
+            disabled={busy}
+          />
+        </div>
+
+        {phoneField ?? (
+          <div className="space-y-1">
+            <Label htmlFor="office-phone">Teléfono</Label>
+            <Input
+              id="office-phone"
+              name="phoneNumber"
+              type="tel"
+              value={form.phoneNumber}
+              onChange={handleChange}
+              placeholder="+593 …"
+              disabled={busy}
+            />
+          </div>
+        )}
+
+        {showFax
+          ? (faxField ?? (
+              <div className="space-y-1">
+                <Label htmlFor="office-fax">Fax</Label>
+                <Input
+                  id="office-fax"
+                  name="fax"
+                  type="tel"
+                  value={form.fax}
+                  onChange={handleChange}
+                  disabled={busy}
+                />
+              </div>
+            ))
+          : null}
+
+        <div className="col-span-1 space-y-1 sm:col-span-2">
+          <Label htmlFor="office-note">Nota</Label>
+          <Textarea
+            id="office-note"
+            name="note"
+            value={form.note}
+            onChange={handleChange}
+            placeholder="Información adicional sobre esta dirección"
+            className="min-h-20 resize-y"
+            disabled={busy}
+          />
+        </div>
+
+        <div className="space-y-1">
+          <Label htmlFor="office-active">Estado</Label>
+          <Select
+            value={form.isActive.toString()}
+            disabled={busy}
+            onValueChange={(value) =>
+              onFormChange((prev) => ({
+                ...prev,
+                isActive: value === "true",
+              }))
+            }
+          >
+            <SelectTrigger id="office-active" className="w-full">
+              <SelectValue placeholder="Seleccione el estado" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="true">Activo</SelectItem>
+                <SelectItem value="false">Inactivo</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {!isCustomer ? (
+          <>
+            <div className="col-span-1 space-y-1 sm:col-span-2">
+              <Label>Tipo de ubicación</Label>
+              <Select
+                value={form.isWarehouseOnly ? "warehouse" : "agency"}
+                disabled={busy}
+                onValueChange={(value) => {
+                  const isWarehouseOnly = value === "warehouse"
+                  onFormChange((prev) => ({
+                    ...prev,
+                    isWarehouseOnly,
+                    isMain: isWarehouseOnly ? false : prev.isMain,
+                  }))
+                }}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Selecciona el tipo" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="agency">Es sucursal</SelectItem>
+                    <SelectItem value="warehouse">Es solo bodega</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-1">
+              <Label>Dirección principal</Label>
+              <Select
+                value={form.isMain.toString()}
+                disabled={busy || form.isWarehouseOnly}
+                onValueChange={(value) =>
+                  onFormChange((prev) => ({
+                    ...prev,
+                    isMain: value === "true",
+                  }))
+                }
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="¿Es dirección principal?" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="true">Sí</SelectItem>
+                    <SelectItem value="false">No</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </>
+        ) : null}
+      </CardContent>
+
+      {footer ? (
+        <CardFooter
+          className={cn(
+            "border-t border-border/60 px-5 py-3 sm:px-6",
+            embedded && "bg-background",
+          )}
+        >
+          {footer}
+        </CardFooter>
+      ) : null}
+    </Card>
+  )
+}
+
+type OfficeAddressFormSharedProps = {
+  title?: string
+  titleCreate?: string
+  titleEdit?: string
+  description?: string
+  initialValues?: Partial<OfficeAddressFormValues>
+  initialEntryMode?: OfficeAddressEntryMode
+  regionCode?: string
+  googleMapsApiKey?: string
+  pickerKey?: string
+  className?: string
+  contentClassName?: string
+  icon?: Icon
+  disabled?: boolean
+  variant?: OfficeAddressFormVariant
+  countryField?: React.ReactNode
+  phoneField?: React.ReactNode
+  faxField?: React.ReactNode
+  manualFields?: React.ReactNode
+}
+
+type OfficeAddressFormInlineProps = OfficeAddressFormSharedProps & {
+  /** Card en página o sección (por defecto). */
+  surface?: "inline"
+  form?: OfficeAddressFormValues
+  onFormChange?: React.Dispatch<React.SetStateAction<OfficeAddressFormValues>>
+  addressEntryMode?: OfficeAddressEntryMode
+  onAddressEntryModeChange?: (mode: OfficeAddressEntryMode) => void
+  footer?: React.ReactNode
+}
+
+type OfficeAddressFormModalProps = OfficeAddressFormSharedProps & {
+  /** Misma card dentro de AlertDialog (contactos, selectores, etc.). */
+  surface: "modal"
+  type?: "create" | "edit"
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  onSubmit?: (values: OfficeAddressFormValues) => void | Promise<void>
+  trigger?: React.ReactNode
+  hideTrigger?: boolean
+  loading?: boolean
+  dialogClassName?: string
+  form?: OfficeAddressFormValues
+  onFormChange?: React.Dispatch<React.SetStateAction<OfficeAddressFormValues>>
+  addressEntryMode?: OfficeAddressEntryMode
+  onAddressEntryModeChange?: (mode: OfficeAddressEntryMode) => void
+}
+
+export type OfficeAddressFormProps =
+  | OfficeAddressFormInlineProps
+  | OfficeAddressFormModalProps
+
+/**
+ * Formulario de dirección unificado: card en página (`surface="inline"`) o en modal (`surface="modal"`).
+ * Usa `OfficeAddressFormCard` + `useOfficeAddressForm` por debajo.
+ */
+export function OfficeAddressForm(props: OfficeAddressFormProps) {
+  if (props.surface === "modal") {
+    return <OfficeAddressFormModal {...props} />
+  }
+  return <OfficeAddressFormInline {...props} />
+}
+
+function OfficeAddressFormInline({
+  title = "Dirección",
+  description,
+  initialValues,
+  initialEntryMode,
+  form: controlledForm,
+  onFormChange: controlledOnFormChange,
+  addressEntryMode: controlledMode,
+  onAddressEntryModeChange: controlledOnModeChange,
+  footer,
+  regionCode,
+  googleMapsApiKey,
+  pickerKey = "office-address-inline",
+  className,
+  contentClassName,
+  icon,
+  disabled,
+  variant,
+  countryField,
+  phoneField,
+  faxField,
+  manualFields,
+}: OfficeAddressFormInlineProps) {
+  const internal = useOfficeAddressForm({ initialValues, initialEntryMode })
+  const form = controlledForm ?? internal.form
+  const setForm = controlledOnFormChange ?? internal.setForm
+  const addressEntryMode = controlledMode ?? internal.addressEntryMode
+  const setAddressEntryMode =
+    controlledOnModeChange ?? internal.setAddressEntryMode
+
+  return (
+    <OfficeAddressFormCard
+      layout="page"
+      title={title}
+      description={description}
+      icon={icon}
+      form={form}
+      onFormChange={setForm}
+      addressEntryMode={addressEntryMode}
+      onAddressEntryModeChange={setAddressEntryMode}
+      disabled={disabled}
+      regionCode={regionCode}
+      googleMapsApiKey={googleMapsApiKey}
+      pickerKey={pickerKey}
+      footer={footer}
+      className={className}
+      contentClassName={contentClassName}
+      variant={variant}
+      countryField={countryField}
+      phoneField={phoneField}
+      faxField={faxField}
+      manualFields={manualFields}
+    />
+  )
+}
+
+function OfficeAddressFormModal({
+  type = "create",
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  initialValues,
+  initialEntryMode,
+  onSubmit,
+  trigger,
+  hideTrigger = false,
+  loading = false,
+  titleCreate = "Crear dirección",
+  titleEdit = "Editar dirección",
+  description,
+  regionCode,
+  googleMapsApiKey,
+  className,
+  dialogClassName,
+  variant,
+  countryField,
+  phoneField,
+  faxField,
+  manualFields,
+  icon,
+  form: controlledForm,
+  onFormChange: controlledOnFormChange,
+  addressEntryMode: controlledMode,
+  onAddressEntryModeChange: controlledOnModeChange,
+}: OfficeAddressFormModalProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+  const isControlled = controlledOpen !== undefined
+  const open = isControlled ? Boolean(controlledOpen) : uncontrolledOpen
+
+  const internal = useOfficeAddressForm({ initialValues, initialEntryMode })
+  const form = controlledForm ?? internal.form
+  const setForm = controlledOnFormChange ?? internal.setForm
+  const addressEntryMode = controlledMode ?? internal.addressEntryMode
+  const setAddressEntryMode =
+    controlledOnModeChange ?? internal.setAddressEntryMode
+  const reset = internal.reset
+
+  const [submitting, setSubmitting] = React.useState(false)
+
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setUncontrolledOpen(next)
+    onOpenChange?.(next)
+  }
+
+  React.useEffect(() => {
+    if (!open) return
+    reset(initialValues, initialEntryMode)
+  }, [open, initialValues, initialEntryMode, reset])
+
+  const modalTitle = type === "edit" ? titleEdit : titleCreate
+  const busy = loading || submitting
+
+  const handleSubmit = async () => {
+    setSubmitting(true)
+    try {
+      await onSubmit?.(form)
+      setOpen(false)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const pickerKey =
+    type === "edit" && initialValues
+      ? `gps-modal-${String((initialValues as { id?: string }).id ?? "edit")}`
+      : "gps-modal-create"
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      {!hideTrigger ? (
+        <AlertDialogTrigger asChild>
+          {trigger ??
+            (type === "edit" ? (
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                disabled={busy}
+                aria-label="Editar dirección"
+                className={className}
+              >
+                {busy ? <Spinner className="size-4" /> : <IconEdit size={16} />}
+              </Button>
+            ) : (
+              <Button type="button" disabled={busy} className={className}>
+                {busy ? <Spinner /> : <IconPlus />}
+                Nueva dirección
+              </Button>
+            ))}
+        </AlertDialogTrigger>
+      ) : null}
+
+      <AlertDialogContent
+        className={cn(
+          "flex max-h-[min(90dvh,48rem)] w-[calc(100%-1.5rem)] max-w-2xl flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl",
+          dialogClassName,
+        )}
+      >
+        <OfficeAddressFormCard
+          layout="dialog"
+          title={modalTitle}
+          description={description}
+          icon={icon}
+          variant={variant}
+          countryField={countryField}
+          phoneField={phoneField}
+          faxField={faxField}
+          manualFields={manualFields}
+          form={form}
+          onFormChange={setForm}
+          addressEntryMode={addressEntryMode}
+          onAddressEntryModeChange={setAddressEntryMode}
+          disabled={busy}
+          regionCode={regionCode}
+          googleMapsApiKey={googleMapsApiKey}
+          pickerKey={pickerKey}
+          footer={
+            <div className="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+              <AlertDialogCancel type="button" disabled={busy} className="mt-0">
+                Cancelar
+              </AlertDialogCancel>
+              <AlertDialogAction
+                type="button"
+                disabled={busy}
+                className="mt-0"
+                onClick={(e) => {
+                  e.preventDefault()
+                  void handleSubmit()
+                }}
+              >
+                {busy ? (
+                  <>
+                    <Spinner className="mr-2 size-4" />
+                    Guardando…
+                  </>
+                ) : type === "edit" ? (
+                  "Guardar cambios"
+                ) : (
+                  "Crear dirección"
+                )}
+              </AlertDialogAction>
+            </div>
+          }
+        />
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+
+/** @deprecated Usa `OfficeAddressForm` con `surface="modal"`. */
+export const OfficeAddressFormDialog = (
+  props: Omit<OfficeAddressFormModalProps, "surface">,
+) => <OfficeAddressForm {...props} surface="modal" />
+
+export type OfficeAddressFormDialogProps = Omit<
+  OfficeAddressFormModalProps,
+  "surface"
+>