@ecomiq/storefront 2.1.3 → 3.0.0

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

@@ -1,379 +0,0 @@
-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/cart-sync.ts

@@ -1,143 +0,0 @@
-import type { StorefrontCart, StorefrontCartItem } from '@ecomiq/core'
-
-export type CartLineSignatureItem = {
-  id: string
-  variantId: string
-  quantity: number
-}
-
-export type CartReconcileAction =
-  | { action: 'add'; variantId: string; quantity: number }
-  | { action: 'update'; itemId: string; quantity: number }
-  | { action: 'remove'; itemId: string }
-
-export function cartItemsSignature(items: CartLineSignatureItem[]): string {
-  return items
-    .map((i) => `${i.variantId}:${i.quantity}`)
-    .sort()
-    .join('|')
-}
-
-export function toSignatureItems(
-  items: StorefrontCartItem[] | undefined,
-): CartLineSignatureItem[] {
-  return (items ?? []).map((item) => ({
-    id: item.id,
-    variantId: String(item.variantId),
-    quantity: item.quantity,
-  }))
-}
-
-export function areCartSignaturesEqual(
-  a: CartLineSignatureItem[],
-  b: CartLineSignatureItem[],
-): boolean {
-  return cartItemsSignature(a) === cartItemsSignature(b)
-}
-
-export function cartSessionSignature(
-  cartTokenId: string | null | undefined,
-  items: CartLineSignatureItem[],
-): string {
-  return `${cartTokenId ?? ''}|${cartItemsSignature(items)}`
-}
-
-function groupQuantitiesByVariant(items: CartLineSignatureItem[]): Map<string, number> {
-  const map = new Map<string, number>()
-  for (const item of items) {
-    map.set(item.variantId, (map.get(item.variantId) ?? 0) + Math.max(0, item.quantity))
-  }
-  return map
-}
-
-function groupLinesByVariant(
-  items: CartLineSignatureItem[],
-): Map<string, CartLineSignatureItem[]> {
-  const map = new Map<string, CartLineSignatureItem[]>()
-  for (const item of items) {
-    const lines = map.get(item.variantId) ?? []
-    lines.push(item)
-    map.set(item.variantId, lines)
-  }
-  return map
-}
-
-/** Acciones para alinear el API con el carrito local (fuente de verdad). */
-export function findCartReconciliationActions(
-  local: CartLineSignatureItem[],
-  api: CartLineSignatureItem[],
-): CartReconcileAction[] {
-  const actions: CartReconcileAction[] = []
-  const localQty = groupQuantitiesByVariant(local)
-  const apiLinesByVariant = groupLinesByVariant(api)
-  const variantIds = new Set([...localQty.keys(), ...apiLinesByVariant.keys()])
-
-  for (const variantId of variantIds) {
-    const targetQty = localQty.get(variantId) ?? 0
-    const apiLines = apiLinesByVariant.get(variantId) ?? []
-    const apiQty = apiLines.reduce((sum, line) => sum + line.quantity, 0)
-
-    if (targetQty > apiQty) {
-      actions.push({
-        action: 'add',
-        variantId,
-        quantity: targetQty - apiQty,
-      })
-      continue
-    }
-
-    if (targetQty >= apiQty) continue
-
-    let excess = apiQty - targetQty
-    for (const line of [...apiLines].reverse()) {
-      if (excess <= 0) break
-      if (line.quantity <= excess) {
-        actions.push({ action: 'remove', itemId: line.id })
-        excess -= line.quantity
-      } else {
-        actions.push({
-          action: 'update',
-          itemId: line.id,
-          quantity: line.quantity - excess,
-        })
-        excess = 0
-      }
-    }
-  }
-
-  return actions
-}
-
-export function isCheckoutCartAlreadyPurchased(
-  cart: StorefrontCart | undefined,
-): boolean {
-  if (!cart) return false
-  if (cart.completedAt) return true
-  return cart.status === 'completed'
-}
-
-const PROVIDER_CHECKOUT_UI = new Set(['stripe', 'mercadopago', 'mercado_pago'])
-
-function normalizeProviderKey(raw: string): string {
-  return raw.trim().toLowerCase().replace(/[\s-]+/g, '_')
-}
-
-export function methodUsesProviderCheckoutUi(method: {
-  isManual: boolean
-  kind: string
-  code: string
-  providerMethodCode?: string | null
-}): boolean {
-  if (method.isManual) return false
-  const keys = [method.providerMethodCode, method.kind, method.code].filter(
-    Boolean,
-  ) as string[]
-  return keys.some((key) => {
-    const normalized = normalizeProviderKey(key)
-    return (
-      PROVIDER_CHECKOUT_UI.has(normalized) ||
-      normalized.includes('stripe') ||
-      normalized.includes('mercado')
-    )
-  })
-}

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

@@ -1,76 +0,0 @@
-import { Link } from '../../link'
-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,
-  fieldError,
-  sessionLabel,
-  isSaving,
-  onEmailChange,
-  onClearError,
-  onContinueAsGuest,
-}: {
-  email: string
-  fieldError?: string
-  sessionLabel?: string | null
-  isSaving?: boolean
-  onEmailChange: (value: string) => void
-  onClearError: (id: CheckoutFieldId) => void
-  onContinueAsGuest: () => void | Promise<void>
-}) {
-  const authRedirect = checkoutAuthRedirect()
-
-  return (
-    <div className="space-y-5">
-      {sessionLabel ? (
-        <p className="text-sm text-muted-foreground">
-          Sesión como <span className="font-medium text-foreground">{sessionLabel}</span>
-        </p>
-      ) : null}
-
-      <CheckoutTextField
-        id="email"
-        label="Correo electrónico"
-        error={fieldError}
-        value={email}
-        onChange={(v) => {
-          onClearError('email')
-          onEmailChange(v)
-        }}
-        type="email"
-        autoComplete="email"
-      />
-
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
-        {!sessionLabel ? (
-          <>
-            <Link
-              to="/login"
-              search={{ redirect: authRedirect }}
-              className={cn(buttonVariants({ variant: 'default' }), 'uppercase tracking-wide')}
-            >
-              ¿Ya tienes una cuenta?
-            </Link>
-          </>
-        ) : null}
-        <Button
-          type="button"
-          variant={sessionLabel ? 'default' : 'outline'}
-          className="uppercase tracking-wide"
-          disabled={isSaving}
-          onClick={() => void onContinueAsGuest()}
-        >
-          {sessionLabel ? 'Continuar' : 'Continuar como invitado'}
-        </Button>
-      </div>
-    </div>
-  )
-}

package/src/components/checkout/checkout-external-update-banner.tsx

@@ -1,15 +0,0 @@
-import { Button } from '../../ui'
-
-export function CheckoutExternalUpdateBanner({ onReload }: { onReload: () => void }) {
-  return (
-    <div
-      className="mb-6 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-amber-300/80 bg-amber-50 px-4 py-3 text-sm text-amber-950"
-      role="alert"
-    >
-      <p>Tu carrito se acaba de actualizar</p>
-      <Button type="button" size="sm" onClick={onReload}>
-        Recargar checkout
-      </Button>
-    </div>
-  )
-}