@ecomiq/storefront 2.1.4 → 3.0.0

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

@@ -1,678 +0,0 @@
-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>
-  )
-}