@ecomiq/storefront 2.0.12 → 2.0.14

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

@@ -0,0 +1,379 @@
+import { useId, useRef, useState, type FormEvent } from 'react'
+import { z } from 'zod'
+import {
+  customerProfileToPatch,
+  type CustomerProfile,
+  type CustomerProfilePatch,
+} from '@ecomiq/core'
+import { Loader2, Pencil } from 'lucide-react'
+import { Button, cn } from '../../ui'
+import {
+  CheckoutSelectField,
+  CheckoutTextField,
+  FieldError,
+} from '../checkout/checkout-form-controls'
+
+const IDENTIFICATION_TYPES = ['DNI', 'CE', 'Pasaporte', 'RUC'] as const
+
+const nameSchema = z.object({
+  firstName: z.string().trim().min(1, 'Nombre requerido').max(50),
+  lastName: z.string().trim().min(1, 'Apellido requerido').max(50),
+})
+
+const phoneSchema = z.object({
+  phone: z.string().trim().min(6, 'Ingresa un número válido'),
+})
+
+const documentSchema = z.object({
+  identificationType: z.string().min(1, 'Selecciona el tipo'),
+  identificationNumber: z.string().trim().min(1, 'Número de documento requerido'),
+})
+
+type EditSection = 'name' | 'phone' | 'document' | null
+
+function formatDocument(profile: CustomerProfile): string {
+  if (profile.identificationType && profile.identificationNumber) {
+    return `${profile.identificationType} · ${profile.identificationNumber}`
+  }
+  if (profile.identificationNumber) return profile.identificationNumber
+  return 'Sin registrar'
+}
+
+export type CustomerProfilePanelProps = {
+  profile?: CustomerProfile | null
+  isLoading: boolean
+  errorMessage?: string | null
+  onUpdateProfile: (payload: CustomerProfilePatch) => Promise<void>
+}
+
+export function CustomerProfilePanel({
+  profile,
+  isLoading,
+  errorMessage,
+  onUpdateProfile,
+}: CustomerProfilePanelProps) {
+  const formId = useId()
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const [editSection, setEditSection] = useState<EditSection>(null)
+  const [saving, setSaving] = useState(false)
+  const [formError, setFormError] = useState<string | null>(null)
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [identificationType, setIdentificationType] = useState('DNI')
+  const [identificationNumber, setIdentificationNumber] = useState('')
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({})
+
+  const openEdit = (section: Exclude<EditSection, null>) => {
+    if (!profile) return
+    setEditSection(section)
+    setFormError(null)
+    setFieldErrors({})
+    if (section === 'name') {
+      setFirstName(profile.firstName)
+      setLastName(profile.lastName)
+    } else if (section === 'phone') {
+      setPhone(profile.phone || '')
+    } else {
+      setIdentificationType(profile.identificationType || 'DNI')
+      setIdentificationNumber(profile.identificationNumber || '')
+    }
+    dialogRef.current?.showModal()
+  }
+
+  const closeEdit = () => {
+    dialogRef.current?.close()
+    setEditSection(null)
+    setFormError(null)
+    setFieldErrors({})
+  }
+
+  const savePatch = async (partial: Partial<CustomerProfilePatch>) => {
+    if (!profile) return
+    try {
+      setSaving(true)
+      setFormError(null)
+      await onUpdateProfile({
+        ...customerProfileToPatch(profile),
+        ...partial,
+      })
+      closeEdit()
+    } catch (error) {
+      setFormError(
+        error instanceof Error
+          ? error.message
+          : 'No se pudieron guardar los cambios',
+      )
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+    if (editSection === 'name') {
+      const parsed = nameSchema.safeParse({ firstName, lastName })
+      if (!parsed.success) {
+        const next: Record<string, string> = {}
+        for (const issue of parsed.error.issues) {
+          const key = issue.path[0]
+          if (typeof key === 'string' && !(key in next)) next[key] = issue.message
+        }
+        setFieldErrors(next)
+        return
+      }
+      void savePatch(parsed.data)
+      return
+    }
+    if (editSection === 'phone') {
+      const parsed = phoneSchema.safeParse({ phone })
+      if (!parsed.success) {
+        setFieldErrors({ phone: parsed.error.issues[0]?.message ?? 'Inválido' })
+        return
+      }
+      void savePatch(parsed.data)
+      return
+    }
+    if (editSection === 'document') {
+      const parsed = documentSchema.safeParse({
+        identificationType,
+        identificationNumber,
+      })
+      if (!parsed.success) {
+        const next: Record<string, string> = {}
+        for (const issue of parsed.error.issues) {
+          const key = issue.path[0]
+          if (typeof key === 'string' && !(key in next)) next[key] = issue.message
+        }
+        setFieldErrors(next)
+        return
+      }
+      void savePatch(parsed.data)
+    }
+  }
+
+  const fullName = profile
+    ? `${profile.firstName} ${profile.lastName}`.trim() || 'Cliente'
+    : '—'
+
+  const dialogTitle =
+    editSection === 'name'
+      ? 'Editar nombre'
+      : editSection === 'phone'
+        ? 'Editar celular'
+        : 'Documento de identidad'
+
+  if (isLoading) {
+    return (
+      <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 shrink-0 animate-spin" />
+        Cargando datos personales…
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-medium text-foreground">Datos personales</h2>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Administra tu nombre, documento y contacto para pedidos y facturación.
+        </p>
+      </div>
+
+      {errorMessage ? (
+        <p className="rounded-md border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+          {errorMessage}
+        </p>
+      ) : null}
+
+      <div className="overflow-hidden rounded-lg border border-border bg-background">
+        <ProfileRow
+          label="Nombre y apellidos"
+          value={fullName}
+          onEdit={() => openEdit('name')}
+          disabled={!profile}
+        />
+        <ProfileRow
+          label="Tipo de documento"
+          value={profile ? formatDocument(profile) : 'Sin registrar'}
+          onEdit={() => openEdit('document')}
+          disabled={!profile}
+        />
+        <ProfileRow
+          label="Celular"
+          value={profile?.phone?.trim() ? profile.phone : 'Sin registrar'}
+          onEdit={() => openEdit('phone')}
+          disabled={!profile}
+        />
+        <ProfileRow
+          label="Correo"
+          value={profile?.email ?? '—'}
+          editable={false}
+          isLast
+        />
+      </div>
+
+      <dialog
+        ref={dialogRef}
+        className="fixed left-1/2 top-1/2 z-50 m-0 w-[min(100%-2rem,28rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-0 shadow-lg backdrop:bg-black/40"
+        onClose={() => {
+          setEditSection(null)
+          setFormError(null)
+          setFieldErrors({})
+        }}
+      >
+        <form className="space-y-4 p-6" onSubmit={handleSubmit}>
+          <h3 className="text-base font-medium text-foreground">{dialogTitle}</h3>
+
+          {editSection === 'name' ? (
+            <div className="grid gap-4 sm:grid-cols-2">
+              <CheckoutTextField
+                id={`${formId}-firstName`}
+                label="Nombre"
+                value={firstName}
+                error={fieldErrors.firstName}
+                autoComplete="given-name"
+                onChange={(v) => {
+                  setFieldErrors((prev) => {
+                    const next = { ...prev }
+                    delete next.firstName
+                    return next
+                  })
+                  setFirstName(v)
+                }}
+              />
+              <CheckoutTextField
+                id={`${formId}-lastName`}
+                label="Apellidos"
+                value={lastName}
+                error={fieldErrors.lastName}
+                autoComplete="family-name"
+                onChange={(v) => {
+                  setFieldErrors((prev) => {
+                    const next = { ...prev }
+                    delete next.lastName
+                    return next
+                  })
+                  setLastName(v)
+                }}
+              />
+            </div>
+          ) : null}
+
+          {editSection === 'phone' ? (
+            <CheckoutTextField
+              id={`${formId}-phone`}
+              label="Celular"
+              value={phone}
+              error={fieldErrors.phone}
+              placeholder="+51999999999"
+              autoComplete="tel"
+              onChange={(v) => {
+                setFieldErrors((prev) => {
+                  const next = { ...prev }
+                  delete next.phone
+                  return next
+                })
+                setPhone(v)
+              }}
+            />
+          ) : null}
+
+          {editSection === 'document' ? (
+            <div className="grid gap-4">
+              <CheckoutSelectField
+                id={`${formId}-identificationType`}
+                label="Tipo"
+                value={identificationType}
+                error={fieldErrors.identificationType}
+                options={IDENTIFICATION_TYPES.map((t) => ({
+                  value: t,
+                  label: t,
+                }))}
+                onChange={(v) => {
+                  setFieldErrors((prev) => {
+                    const next = { ...prev }
+                    delete next.identificationType
+                    return next
+                  })
+                  setIdentificationType(v)
+                }}
+              />
+              <CheckoutTextField
+                id={`${formId}-identificationNumber`}
+                label="Número"
+                value={identificationNumber}
+                error={fieldErrors.identificationNumber}
+                placeholder="12345678"
+                onChange={(v) => {
+                  setFieldErrors((prev) => {
+                    const next = { ...prev }
+                    delete next.identificationNumber
+                    return next
+                  })
+                  setIdentificationNumber(v)
+                }}
+              />
+            </div>
+          ) : null}
+
+          {formError ? <FieldError message={formError} /> : null}
+
+          <div className="flex flex-wrap justify-end gap-2 pt-2">
+            <Button type="button" variant="outline" onClick={closeEdit}>
+              Cancelar
+            </Button>
+            <Button type="submit" disabled={saving}>
+              {saving ? <Loader2 className="size-4 animate-spin" /> : 'Guardar'}
+            </Button>
+          </div>
+        </form>
+      </dialog>
+    </div>
+  )
+}
+
+function ProfileRow({
+  label,
+  value,
+  onEdit,
+  editable = true,
+  disabled = false,
+  isLast = false,
+}: {
+  label: string
+  value: string
+  onEdit?: () => void
+  editable?: boolean
+  disabled?: boolean
+  isLast?: boolean
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-start justify-between gap-4 px-5 py-5',
+        !isLast && 'border-b border-border',
+      )}
+    >
+      <div className="min-w-0">
+        <p className="text-sm font-medium text-foreground">{label}</p>
+        <p className="mt-1 break-words text-sm text-muted-foreground">{value}</p>
+      </div>
+      {editable && onEdit ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0 gap-1"
+          onClick={onEdit}
+          disabled={disabled}
+        >
+          <Pencil className="size-3.5" />
+          Editar
+        </Button>
+      ) : null}
+    </div>
+  )
+}

package/src/components/checkout/checkout-contact-section.tsx

@@ -3,6 +3,11 @@ import { Button, buttonVariants, cn } from '../../ui'
 import type { CheckoutFieldId } from './form-schema'
 import { CheckoutTextField } from './checkout-form-controls'
 
+function checkoutAuthRedirect(): string {
+  if (typeof window === 'undefined') return '/checkout'
+  return `${window.location.pathname}${window.location.search}`
+}
+
 /** Paso 1: Mis datos (email). */
 export function CheckoutContactSection({
   email,
@@ -21,6 +26,8 @@ export function CheckoutContactSection({
   onClearError: (id: CheckoutFieldId) => void
   onContinueAsGuest: () => void | Promise<void>
 }) {
+  const authRedirect = checkoutAuthRedirect()
+
   return (
     <div className="space-y-5">
       {sessionLabel ? (
@@ -42,18 +49,17 @@ export function CheckoutContactSection({
         autoComplete="email"
       />
 
-      <div className="flex flex-col gap-3 sm:flex-row">
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
         {!sessionLabel ? (
-          <Link
-            to="/account/login"
-            search={{
-              redirect:
-                typeof window !== 'undefined' ? window.location.pathname : '/checkout',
-            }}
-            className={cn(buttonVariants({ variant: 'default' }), 'uppercase tracking-wide')}
-          >
-            ¿Ya tienes una cuenta?
-          </Link>
+          <>
+            <Link
+              to="/login"
+              search={{ redirect: authRedirect }}
+              className={cn(buttonVariants({ variant: 'default' }), 'uppercase tracking-wide')}
+            >
+              ¿Ya tienes una cuenta?
+            </Link>
+          </>
         ) : null}
         <Button
           type="button"

package/src/components/checkout/checkout-session-view.tsx

@@ -42,11 +42,13 @@ import {
 } from './form-schema'
 import type { CheckoutContactForm } from './types'
 import { useCheckoutGeo } from './use-checkout-geo'
+import { useCheckoutCustomerPrefill } from './use-checkout-customer-prefill'
 import { useCheckoutSession } from './use-checkout-session'
 
 export function CheckoutSessionView({ cartId }: { cartId: string }) {
   const { store } = useSettings()
   const { session } = useAuth()
+  const isAuthenticated = Boolean(session?.user)
   const checkout = useCheckoutSession(cartId)
   const [stepFlow, setStepFlow] = useState<CheckoutStepFlow>(() => createCheckoutStepFlow())
   const [fieldErrors, setFieldErrors] = useState<
@@ -58,6 +60,9 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
   const [acceptedAge, setAcceptedAge] = useState(false)
   const [acceptedPrivacy, setAcceptedPrivacy] = useState(false)
   const [consentError, setConsentError] = useState<string | null>(null)
+  const [addressSaveError, setAddressSaveError] = useState<string | null>(null)
+  const [saveToAccount, setSaveToAccount] = useState(false)
+  const [saveAddressKey, setSaveAddressKey] = useState('Casa')
 
   const geo = useCheckoutGeo(
     checkout.contact.countryCode,
@@ -65,6 +70,34 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
     checkout.contact.provinceCode,
   )
 
+  const customerPrefill = useCheckoutCustomerPrefill({
+    enabled: isAuthenticated && checkout.loadStatus === 'ready',
+    cartId,
+    currency: store.currency,
+    contact: checkout.contact,
+    setContact: checkout.setContact,
+    departments: geo.departments,
+    provinces: geo.provinces,
+    districts: geo.districts,
+    selectedShippingKey: checkout.selectedShippingKey,
+    shippingFlat: checkout.shippingFlat,
+    shippingLoading: checkout.shippingLoading,
+    stepFlow,
+    setStepFlow,
+    persistDeliveryStep: checkout.persistDeliveryStep,
+    invalidateDeliveryPersistence: checkout.invalidateDeliveryPersistence,
+    saveAddressIntent:
+      isAuthenticated && saveToAccount
+        ? { enabled: true, addressKey: saveAddressKey.trim() || 'Casa' }
+        : null,
+    onAddressSaveError: (message) => setAddressSaveError(message),
+    onAddressSaved: () => {
+      setSaveToAccount(false)
+      setAddressSaveError(null)
+    },
+    associateBuyer: () => checkout.saveBuyer().then(() => undefined),
+  })
+
   const { ensureDefaultPaymentMethod } = checkout
 
   useEffect(() => {
@@ -143,10 +176,28 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
       return
     }
     setFieldErrors({})
-    setStepFlow((flow) => completeCheckoutStep(flow, 'contact'))
+
+    const { email, firstName, lastName, phone } = checkout.contact
+    const canAssociateBuyer =
+      isAuthenticated &&
+      Boolean(email.trim() && firstName.trim() && lastName.trim() && phone.trim())
+
+    void (async () => {
+      if (canAssociateBuyer) {
+        try {
+          await checkout.saveBuyer()
+        } catch {
+          // El avance del paso no depende de asociar el buyer; se reintenta en delivery.
+        }
+      }
+      setStepFlow((flow) => completeCheckoutStep(flow, 'contact'))
+    })()
   }
 
-  const handleContinueDelivery = async () => {
+  const handleContinueDelivery = async (options?: {
+    saveToAccount?: boolean
+    addressKey?: string
+  }) => {
     const parsed = buildCheckoutDeliveryStepSchema(store.currency).safeParse(validationContext())
     if (!parsed.success) {
       const errors = mapZodIssuesToFieldErrors(parsed.error)
@@ -156,8 +207,26 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
       return
     }
     setFieldErrors({})
+    setAddressSaveError(null)
+    const shouldSave = Boolean(options?.saveToAccount ?? saveToAccount) && isAuthenticated
+    const key = (options?.addressKey ?? saveAddressKey).trim() || 'Casa'
     try {
       await checkout.persistDeliveryStep()
+      if (shouldSave) {
+        try {
+          await customerPrefill.saveContactAsCustomerAddress(checkout.contact, {
+            addressKey: key,
+          })
+          setSaveToAccount(false)
+        } catch (error) {
+          setAddressSaveError(
+            error instanceof Error
+              ? error.message
+              : 'No se pudo guardar la dirección en tu cuenta.',
+          )
+          return
+        }
+      }
       setStepFlow((flow) => completeCheckoutStep(flow, 'delivery'))
     } catch {
       /* formError en sesión */
@@ -328,6 +397,18 @@ export function CheckoutSessionView({ cartId }: { cartId: string }) {
               onSelectShipping={checkout.setSelectedShippingKey}
               onClearError={clearFieldError}
               onContinue={handleContinueDelivery}
+              savedAddresses={customerPrefill.savedAddresses}
+              selectedSavedAddressId={customerPrefill.selectedSavedAddressId}
+              onSelectSavedAddress={customerPrefill.selectSavedAddress}
+              canSaveToAccount={isAuthenticated}
+              addressSaveError={addressSaveError}
+              saveToAccount={saveToAccount}
+              saveAddressKey={saveAddressKey}
+              onSaveToAccountChange={(checked) => {
+                setSaveToAccount(checked)
+                setAddressSaveError(null)
+              }}
+              onSaveAddressKeyChange={setSaveAddressKey}
             />
           </CheckoutStepCard>