@ecomiq/storefront 2.0.12 → 2.0.14

package/src/components/account/customer-addresses-panel.tsx

@@ -0,0 +1,678 @@
+import { useEffect, useId, useRef, useState, type FormEvent } from 'react'
+import { z } from 'zod'
+import type {
+  CustomerAddressUpsertInput,
+  CustomerSavedAddress,
+} from '@ecomiq/core/models/customer-address'
+import { Loader2, MapPin, Pencil, Plus, Star, Trash2 } from 'lucide-react'
+import { Button, cn } from '../../ui'
+import {
+  CheckoutSelectField,
+  CheckoutTextField,
+  FieldError,
+  fieldClass,
+} from '../checkout/checkout-form-controls'
+import { useCheckoutGeo } from '../checkout/use-checkout-geo'
+
+const DEFAULT_COUNTRY_CODE = 'PE'
+
+const addressFormSchema = z.object({
+  addressKey: z.string().trim().min(1, 'Nombre de la dirección requerido').max(48),
+  addressLine: z.string().trim().min(1, 'Calle o avenida requerida'),
+  addressNumber: z.string().trim().min(1, 'Número requerido'),
+  postalCode: z.string().trim().min(1, 'Código postal requerido'),
+  reference: z.string().trim(),
+  phone: z.string().trim(),
+  cellPhone: z.string().trim(),
+  departmentCode: z.string().min(1, 'Selecciona departamento'),
+  departmentName: z.string().min(1, 'Selecciona departamento'),
+  provinceCode: z.string().min(1, 'Selecciona provincia'),
+  provinceName: z.string().min(1, 'Selecciona provincia'),
+  districtCode: z.string().min(1, 'Selecciona distrito'),
+  districtName: z.string().min(1, 'Selecciona distrito'),
+  isDefault: z.boolean(),
+})
+
+type AddressFormValues = z.infer<typeof addressFormSchema>
+type AddressFormErrors = Partial<Record<keyof AddressFormValues, string>>
+
+const emptyDefaults: AddressFormValues = {
+  addressKey: 'Casa',
+  addressLine: '',
+  addressNumber: '',
+  postalCode: '',
+  reference: '',
+  phone: '',
+  cellPhone: '',
+  departmentCode: '',
+  departmentName: '',
+  provinceCode: '',
+  provinceName: '',
+  districtCode: '',
+  districtName: '',
+  isDefault: false,
+}
+
+function toUpsertPayload(values: AddressFormValues): CustomerAddressUpsertInput {
+  return {
+    addressKey: values.addressKey.trim(),
+    countryIsoCode: DEFAULT_COUNTRY_CODE,
+    addressLine: values.addressLine.trim(),
+    addressNumber: values.addressNumber.trim(),
+    department: values.departmentName.trim(),
+    province: values.provinceName.trim(),
+    district: values.districtName.trim(),
+    phone: values.phone.trim(),
+    cellPhone: values.cellPhone.trim() || values.phone.trim(),
+    postalCode: values.postalCode.trim(),
+    reference: values.reference.trim(),
+    latitude: null,
+    longitude: null,
+    isDefault: values.isDefault,
+  }
+}
+
+function findCodeByName(
+  items: { code: string; name: string }[],
+  name: string,
+): string {
+  const target = name.trim().toLowerCase()
+  if (!target) return ''
+  return (
+    items.find((item) => item.name.trim().toLowerCase() === target)?.code ?? ''
+  )
+}
+
+export type CustomerAddressesPanelProps = {
+  addresses?: CustomerSavedAddress[]
+  isLoading: boolean
+  errorMessage?: string | null
+  onCreateAddress: (payload: CustomerAddressUpsertInput) => Promise<void>
+  onUpdateAddress: (
+    addressId: string,
+    payload: CustomerAddressUpsertInput,
+  ) => Promise<void>
+  onDeleteAddress: (addressId: string) => Promise<void>
+}
+
+export function CustomerAddressesPanel({
+  addresses,
+  isLoading,
+  errorMessage,
+  onCreateAddress,
+  onUpdateAddress,
+  onDeleteAddress,
+}: CustomerAddressesPanelProps) {
+  const formId = useId()
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const deleteDialogRef = useRef<HTMLDialogElement>(null)
+
+  const [editing, setEditing] = useState<CustomerSavedAddress | null>(null)
+  const [form, setForm] = useState<AddressFormValues>(emptyDefaults)
+  const [fieldErrors, setFieldErrors] = useState<AddressFormErrors>({})
+  const [formError, setFormError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState<CustomerSavedAddress | null>(
+    null,
+  )
+  const [deleting, setDeleting] = useState(false)
+  const [actionError, setActionError] = useState<string | null>(null)
+
+  const geo = useCheckoutGeo(
+    DEFAULT_COUNTRY_CODE,
+    form.departmentCode,
+    form.provinceCode,
+  )
+
+  const patchForm = (patch: Partial<AddressFormValues>) => {
+    setForm((prev) => ({ ...prev, ...patch }))
+  }
+
+  const clearFieldError = (key: keyof AddressFormValues) => {
+    setFieldErrors((prev) => {
+      if (!prev[key]) return prev
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+  }
+
+  const openCreate = () => {
+    setEditing(null)
+    setForm(emptyDefaults)
+    setFieldErrors({})
+    setFormError(null)
+    dialogRef.current?.showModal()
+  }
+
+  const openEdit = (addr: CustomerSavedAddress) => {
+    setEditing(addr)
+    setForm({
+      addressKey: addr.addressKey,
+      addressLine: addr.addressLine,
+      addressNumber: addr.addressNumber,
+      postalCode: addr.postalCode,
+      reference: addr.reference ?? '',
+      phone: addr.phone ?? '',
+      cellPhone: addr.cellPhone ?? '',
+      departmentCode: '',
+      departmentName: addr.department,
+      provinceCode: '',
+      provinceName: addr.province,
+      districtCode: '',
+      districtName: addr.district,
+      isDefault: addr.isDefault,
+    })
+    setFieldErrors({})
+    setFormError(null)
+    dialogRef.current?.showModal()
+  }
+
+  const closeDialog = () => {
+    dialogRef.current?.close()
+    setEditing(null)
+    setForm(emptyDefaults)
+    setFieldErrors({})
+    setFormError(null)
+  }
+
+  useEffect(() => {
+    if (!editing || !form.departmentName || form.departmentCode) return
+    const code = findCodeByName(geo.departments, form.departmentName)
+    if (code) patchForm({ departmentCode: code })
+  }, [editing, form.departmentName, form.departmentCode, geo.departments])
+
+  useEffect(() => {
+    if (!editing || !form.provinceName || !form.departmentCode || form.provinceCode)
+      return
+    const code = findCodeByName(geo.provinces, form.provinceName)
+    if (code) patchForm({ provinceCode: code })
+  }, [
+    editing,
+    form.provinceName,
+    form.departmentCode,
+    form.provinceCode,
+    geo.provinces,
+  ])
+
+  useEffect(() => {
+    if (!editing || !form.districtName || !form.provinceCode || form.districtCode)
+      return
+    const code = findCodeByName(geo.districts, form.districtName)
+    if (code) patchForm({ districtCode: code })
+  }, [
+    editing,
+    form.districtName,
+    form.provinceCode,
+    form.districtCode,
+    geo.districts,
+  ])
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault()
+    const parsed = addressFormSchema.safeParse(form)
+    if (!parsed.success) {
+      const next: AddressFormErrors = {}
+      for (const issue of parsed.error.issues) {
+        const key = issue.path[0]
+        if (typeof key === 'string' && !(key in next)) {
+          next[key as keyof AddressFormValues] = issue.message
+        }
+      }
+      setFieldErrors(next)
+      return
+    }
+
+    try {
+      setSaving(true)
+      setFormError(null)
+      const payload = toUpsertPayload(parsed.data)
+      if (editing?.id) {
+        await onUpdateAddress(editing.id, payload)
+      } else {
+        await onCreateAddress(payload)
+      }
+      closeDialog()
+    } catch (error) {
+      setFormError(
+        error instanceof Error ? error.message : 'No se pudo guardar la dirección',
+      )
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSetDefault = async (addr: CustomerSavedAddress) => {
+    if (!addr.id || addr.isDefault) return
+    const payload: CustomerAddressUpsertInput = {
+      addressKey: addr.addressKey,
+      countryIsoCode: addr.countryIsoCode,
+      addressLine: addr.addressLine,
+      addressNumber: addr.addressNumber,
+      department: addr.department,
+      province: addr.province,
+      district: addr.district,
+      phone: addr.phone,
+      cellPhone: addr.cellPhone || addr.phone,
+      postalCode: addr.postalCode,
+      reference: addr.reference,
+      latitude: addr.latitude,
+      longitude: addr.longitude,
+      isDefault: true,
+    }
+    try {
+      setActionError(null)
+      await onUpdateAddress(addr.id, payload)
+    } catch (error) {
+      setActionError(
+        error instanceof Error ? error.message : 'No se pudo actualizar',
+      )
+    }
+  }
+
+  const openDelete = (addr: CustomerSavedAddress) => {
+    setDeleteTarget(addr)
+    setActionError(null)
+    deleteDialogRef.current?.showModal()
+  }
+
+  const closeDelete = () => {
+    deleteDialogRef.current?.close()
+    setDeleteTarget(null)
+  }
+
+  const confirmDelete = async () => {
+    if (!deleteTarget?.id) return
+    try {
+      setDeleting(true)
+      setActionError(null)
+      await onDeleteAddress(deleteTarget.id)
+      closeDelete()
+    } catch (error) {
+      setActionError(
+        error instanceof Error ? error.message : 'No se pudo eliminar',
+      )
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  const list = addresses ?? []
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-lg font-medium text-foreground">Tus direcciones</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Envío a domicilio y datos de contacto para tus pedidos.
+          </p>
+        </div>
+        <Button type="button" onClick={openCreate} className="shrink-0 gap-2">
+          <Plus className="size-4" />
+          Añadir dirección
+        </Button>
+      </div>
+
+      {actionError ? (
+        <p className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {actionError}
+        </p>
+      ) : null}
+
+      {isLoading ? (
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-background px-4 py-8 text-sm text-muted-foreground">
+          <Loader2 className="size-4 animate-spin" />
+          Cargando direcciones…
+        </div>
+      ) : null}
+
+      {errorMessage && !isLoading ? (
+        <p className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {errorMessage}
+        </p>
+      ) : null}
+
+      {!isLoading && !errorMessage && list.length === 0 ? (
+        <div className="rounded-lg border border-dashed border-border bg-muted/30 px-6 py-10 text-center text-sm text-muted-foreground">
+          <MapPin className="mx-auto mb-3 size-10 text-muted-foreground/70" />
+          Todavía no tienes direcciones guardadas.
+        </div>
+      ) : null}
+
+      {!isLoading && list.length > 0 ? (
+        <ul className="grid gap-4 lg:grid-cols-2">
+          {list.map((addr) => (
+            <li
+              key={addr.id || `${addr.addressKey}-${addr.postalCode}`}
+              className={cn(
+                'relative overflow-hidden rounded-lg border border-border bg-background p-5',
+                addr.isDefault && 'ring-1 ring-primary/40',
+              )}
+            >
+              {addr.isDefault ? (
+                <span className="absolute right-0 top-0 rounded-bl-md bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
+                  Predeterminada
+                </span>
+              ) : null}
+              <div className="flex items-start gap-3 pr-24">
+                <span className="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
+                  <MapPin className="size-5" />
+                </span>
+                <div className="min-w-0 flex-1">
+                  <p className="font-medium text-foreground">{addr.addressKey}</p>
+                  <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
+                    {[addr.addressLine, addr.addressNumber].filter(Boolean).join(' ')}
+                    <br />
+                    {addr.district}, {addr.province}, {addr.department}
+                  </p>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    {addr.countryIsoCode} · CP {addr.postalCode}
+                  </p>
+                  {addr.reference ? (
+                    <p className="mt-1 text-xs text-muted-foreground">
+                      Ref: {addr.reference}
+                    </p>
+                  ) : null}
+                  {(addr.phone || addr.cellPhone) && (
+                    <p className="mt-2 text-xs text-muted-foreground">
+                      {addr.phone}
+                      {addr.cellPhone && addr.cellPhone !== addr.phone
+                        ? ` · ${addr.cellPhone}`
+                        : ''}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="mt-4 flex flex-wrap gap-2 border-t border-border pt-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="gap-1"
+                  onClick={() => openEdit(addr)}
+                  disabled={!addr.id}
+                >
+                  <Pencil className="size-3.5" />
+                  Editar
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="gap-1"
+                  disabled={!addr.id || addr.isDefault}
+                  onClick={() => void handleSetDefault(addr)}
+                >
+                  <Star className="size-3.5" />
+                  Predeterminada
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="ml-auto gap-1 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                  disabled={!addr.id}
+                  onClick={() => openDelete(addr)}
+                >
+                  <Trash2 className="size-3.5" />
+                  Eliminar
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      <dialog
+        ref={dialogRef}
+        className="fixed left-1/2 top-1/2 z-50 m-0 max-h-[90vh] w-[min(100%-2rem,36rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-lg border border-border bg-background p-0 shadow-lg open:flex open:flex-col backdrop:bg-black/40"
+        onClose={() => {
+          setEditing(null)
+          setForm(emptyDefaults)
+          setFieldErrors({})
+          setFormError(null)
+        }}
+      >
+        <form className="space-y-4 p-6" onSubmit={(e) => void handleSubmit(e)}>
+          <h3 className="text-base font-medium text-foreground">
+            {editing ? 'Editar dirección' : 'Nueva dirección'}
+          </h3>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <CheckoutTextField
+              id={`${formId}-addressKey`}
+              label="Identificador"
+              value={form.addressKey}
+              error={fieldErrors.addressKey}
+              placeholder="Casa, Oficina…"
+              onChange={(v) => {
+                clearFieldError('addressKey')
+                patchForm({ addressKey: v })
+              }}
+            />
+            <CheckoutTextField
+              id={`${formId}-postalCode`}
+              label="Código postal"
+              value={form.postalCode}
+              error={fieldErrors.postalCode}
+              placeholder="15074"
+              onChange={(v) => {
+                clearFieldError('postalCode')
+                patchForm({ postalCode: v })
+              }}
+            />
+          </div>
+
+          <CheckoutTextField
+            id={`${formId}-addressLine`}
+            label="Dirección (calle / av.)"
+            value={form.addressLine}
+            error={fieldErrors.addressLine}
+            placeholder="Av. Principal"
+            onChange={(v) => {
+              clearFieldError('addressLine')
+              patchForm({ addressLine: v })
+            }}
+          />
+
+          <CheckoutTextField
+            id={`${formId}-addressNumber`}
+            label="Número / interior"
+            value={form.addressNumber}
+            error={fieldErrors.addressNumber}
+            placeholder="123, Dpto. 4"
+            onChange={(v) => {
+              clearFieldError('addressNumber')
+              patchForm({ addressNumber: v })
+            }}
+          />
+
+          <div>
+            <label
+              htmlFor={`${formId}-country`}
+              className="text-sm font-medium text-foreground"
+            >
+              País
+            </label>
+            <select
+              id={`${formId}-country`}
+              className={fieldClass()}
+              value={DEFAULT_COUNTRY_CODE}
+              disabled
+            >
+              <option value={DEFAULT_COUNTRY_CODE}>Perú</option>
+            </select>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-3">
+            <CheckoutSelectField
+              id={`${formId}-department`}
+              label="Departamento"
+              value={form.departmentCode}
+              error={fieldErrors.departmentCode || fieldErrors.departmentName}
+              options={geo.departments.map((d) => ({
+                value: d.code,
+                label: d.name,
+              }))}
+              onChange={(code) => {
+                clearFieldError('departmentCode')
+                clearFieldError('departmentName')
+                const name =
+                  geo.departments.find((d) => d.code === code)?.name ?? ''
+                patchForm({
+                  departmentCode: code,
+                  departmentName: name,
+                  provinceCode: '',
+                  provinceName: '',
+                  districtCode: '',
+                  districtName: '',
+                })
+              }}
+            />
+            <CheckoutSelectField
+              id={`${formId}-province`}
+              label="Provincia"
+              value={form.provinceCode}
+              error={fieldErrors.provinceCode || fieldErrors.provinceName}
+              options={geo.provinces.map((p) => ({
+                value: p.code,
+                label: p.name,
+              }))}
+              onChange={(code) => {
+                clearFieldError('provinceCode')
+                clearFieldError('provinceName')
+                const name =
+                  geo.provinces.find((p) => p.code === code)?.name ?? ''
+                patchForm({
+                  provinceCode: code,
+                  provinceName: name,
+                  districtCode: '',
+                  districtName: '',
+                })
+              }}
+            />
+            <CheckoutSelectField
+              id={`${formId}-district`}
+              label="Distrito"
+              value={form.districtCode}
+              error={fieldErrors.districtCode || fieldErrors.districtName}
+              options={geo.districts.map((d) => ({
+                value: d.code,
+                label: d.name,
+              }))}
+              onChange={(code) => {
+                clearFieldError('districtCode')
+                clearFieldError('districtName')
+                const name =
+                  geo.districts.find((d) => d.code === code)?.name ?? ''
+                patchForm({
+                  districtCode: code,
+                  districtName: name,
+                })
+              }}
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor={`${formId}-reference`}
+              className="text-sm font-medium text-foreground"
+            >
+              Referencia (opcional)
+            </label>
+            <textarea
+              id={`${formId}-reference`}
+              rows={2}
+              className={cn(fieldClass(), 'h-auto py-2')}
+              value={form.reference}
+              placeholder="Puerta azul, portón negro…"
+              onChange={(e) => patchForm({ reference: e.target.value })}
+            />
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <CheckoutTextField
+              id={`${formId}-phone`}
+              label="Teléfono"
+              value={form.phone}
+              error={fieldErrors.phone}
+              placeholder="+51999999999"
+              onChange={(v) => {
+                clearFieldError('phone')
+                patchForm({ phone: v })
+              }}
+            />
+            <CheckoutTextField
+              id={`${formId}-cellPhone`}
+              label="Celular (opcional)"
+              value={form.cellPhone}
+              error={fieldErrors.cellPhone}
+              placeholder="+51999999999"
+              onChange={(v) => {
+                clearFieldError('cellPhone')
+                patchForm({ cellPhone: v })
+              }}
+            />
+          </div>
+
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              className="size-4 rounded border-border"
+              checked={form.isDefault}
+              onChange={(e) => patchForm({ isDefault: e.target.checked })}
+            />
+            Usar como dirección predeterminada
+          </label>
+
+          {formError ? <FieldError message={formError} /> : null}
+
+          <div className="flex flex-wrap justify-end gap-2 pt-2">
+            <Button type="button" variant="outline" onClick={closeDialog}>
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? <Loader2 className="size-4 animate-spin" /> : 'Guardar'}
+            </Button>
+          </div>
+        </form>
+      </dialog>
+
+      <dialog
+        ref={deleteDialogRef}
+        className="fixed left-1/2 top-1/2 z-50 m-0 w-[min(100%-2rem,24rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg backdrop:bg-black/40"
+        onClose={() => setDeleteTarget(null)}
+      >
+        <h3 className="text-base font-medium text-foreground">
+          ¿Eliminar esta dirección?
+        </h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          Esta acción no se puede deshacer. La dirección dejará de aparecer en tu
+          cuenta.
+        </p>
+        {actionError ? (
+          <p className="mt-3 text-sm text-destructive">{actionError}</p>
+        ) : null}
+        <div className="mt-6 flex flex-wrap justify-end gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={deleting}
+            onClick={closeDelete}
+          >
+            Cancelar
+          </Button>
+          <Button
+            type="button"
+            variant="destructive"
+            disabled={deleting}
+            onClick={() => void confirmDelete()}
+          >
+            {deleting ? <Loader2 className="size-4 animate-spin" /> : 'Eliminar'}
+          </Button>
+        </div>
+      </dialog>
+    </div>
+  )
+}