@ecomiq/storefront 1.1.9 → 2.0.0

package/src/components/checkout/checkout-shipping-address-section.tsx

@@ -0,0 +1,266 @@
+import { useState } from 'react'
+import type { Country, Department, District, Province } from '@ecomiq/core'
+import type { CheckoutContactForm } from './types'
+import type { CheckoutFieldId } from './form-schema'
+import {
+  CheckoutPhoneField,
+  CheckoutSelectField,
+  CheckoutTextField,
+  FieldError,
+  fieldClass,
+} from './checkout-form-controls'
+
+const DIAL_BY_COUNTRY: Record<string, string> = {
+  PE: '+51',
+  US: '+1',
+  MX: '+52',
+  CL: '+56',
+  CO: '+57',
+  AR: '+54',
+  ES: '+34',
+}
+
+function dialCodeFor(countryCode: string) {
+  return DIAL_BY_COUNTRY[countryCode.toUpperCase()] ?? '+51'
+}
+
+/** Dirección de envío: contacto + geo en el layout del mockup. */
+export function CheckoutShippingAddressSection({
+  contact,
+  fieldErrors,
+  countries,
+  departments,
+  provinces,
+  districts,
+  sessionLabel,
+  onPatch,
+  onClearError,
+}: {
+  contact: CheckoutContactForm
+  fieldErrors: Partial<Record<CheckoutFieldId, string>>
+  countries: Country[]
+  departments: Department[]
+  provinces: Province[]
+  districts: District[]
+  sessionLabel?: string | null
+  onPatch: (patch: Partial<CheckoutContactForm>) => void
+  onClearError: (id: CheckoutFieldId) => void
+}) {
+  const isPe = contact.countryCode.toUpperCase() === 'PE'
+  const [saveNextTime, setSaveNextTime] = useState(false)
+
+  return (
+    <section className="space-y-5">
+      <h2 className="text-xl font-semibold tracking-tight">Dirección de envío</h2>
+      {sessionLabel ? (
+        <p className="text-sm text-muted-foreground">
+          Sesión como <span className="font-medium text-foreground">{sessionLabel}</span>
+        </p>
+      ) : null}
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <CheckoutTextField
+          id="firstName"
+          label="Nombre"
+          error={fieldErrors.firstName}
+          value={contact.firstName}
+          onChange={(v) => {
+            onClearError('firstName')
+            onPatch({ firstName: v })
+          }}
+          autoComplete="given-name"
+        />
+        <CheckoutTextField
+          id="lastName"
+          label="Apellido"
+          error={fieldErrors.lastName}
+          value={contact.lastName}
+          onChange={(v) => {
+            onClearError('lastName')
+            onPatch({ lastName: v })
+          }}
+          autoComplete="family-name"
+        />
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <CheckoutTextField
+          id="email"
+          label="E-mail"
+          error={fieldErrors.email}
+          value={contact.email}
+          onChange={(v) => {
+            onClearError('email')
+            onPatch({ email: v })
+          }}
+          type="email"
+          autoComplete="email"
+        />
+        <CheckoutPhoneField
+          id="phone"
+          label="Teléfono"
+          error={fieldErrors.phone}
+          value={contact.phone}
+          dialCode={dialCodeFor(contact.countryCode)}
+          onChange={(v) => {
+            onClearError('phone')
+            onPatch({ phone: v })
+          }}
+        />
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div className="min-w-0">
+          <label htmlFor="countryCode" className="text-sm font-medium">
+            País
+          </label>
+          <select
+            id="countryCode"
+            className={fieldClass(fieldErrors.countryCode)}
+            value={contact.countryCode}
+            onChange={(e) => {
+              onClearError('countryCode')
+              onPatch({
+                countryCode: e.target.value,
+                departmentCode: '',
+                provinceCode: '',
+                districtCode: '',
+                departmentName: '',
+                provinceName: '',
+                districtName: '',
+                city: '',
+                province: '',
+              })
+            }}
+          >
+            {(countries.length ? countries : [{ code: 'PE', name: 'Perú' }]).map((c) => (
+              <option key={c.code} value={c.code}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          <FieldError message={fieldErrors.countryCode} />
+        </div>
+        <CheckoutTextField
+          id="address"
+          label="Dirección"
+          error={fieldErrors.address}
+          value={contact.address}
+          onChange={(v) => {
+            onClearError('address')
+            onPatch({ address: v })
+          }}
+          autoComplete="street-address"
+        />
+      </div>
+
+      {isPe ? (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <CheckoutSelectField
+            id="department"
+            label="Departamento"
+            error={fieldErrors.department}
+            value={contact.departmentCode}
+            options={departments.map((d) => ({ value: d.code, label: d.name }))}
+            onChange={(code) => {
+              onClearError('department')
+              const dep = departments.find((d) => d.code === code)
+              onPatch({
+                departmentCode: code,
+                departmentName: dep?.name ?? '',
+                provinceCode: '',
+                provinceName: '',
+                districtCode: '',
+                districtName: '',
+              })
+            }}
+          />
+          <CheckoutSelectField
+            id="province-geo"
+            label="Provincia"
+            error={fieldErrors['province-geo']}
+            value={contact.provinceCode}
+            options={provinces.map((d) => ({ value: d.code, label: d.name }))}
+            onChange={(code) => {
+              onClearError('province-geo')
+              const prov = provinces.find((d) => d.code === code)
+              onPatch({
+                provinceCode: code,
+                provinceName: prov?.name ?? '',
+                province: prov?.name ?? '',
+                districtCode: '',
+                districtName: '',
+              })
+            }}
+          />
+          <CheckoutSelectField
+            id="district"
+            label="Distrito"
+            error={fieldErrors.district}
+            value={contact.districtCode}
+            options={districts.map((d) => ({ value: d.code, label: d.name }))}
+            onChange={(code) => {
+              onClearError('district')
+              const dist = districts.find((d) => d.code === code)
+              onPatch({
+                districtCode: code,
+                districtName: dist?.name ?? '',
+                city: dist?.name ?? '',
+              })
+            }}
+          />
+        </div>
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-3">
+          <CheckoutTextField
+            id="city"
+            label="Ciudad"
+            error={fieldErrors.city}
+            value={contact.city}
+            onChange={(v) => {
+              onClearError('city')
+              onPatch({ city: v })
+            }}
+          />
+          <CheckoutTextField
+            id="province-region"
+            label="Región / Estado"
+            error={fieldErrors['province-region']}
+            value={contact.province}
+            onChange={(v) => {
+              onClearError('province-region')
+              onPatch({ province: v })
+            }}
+          />
+          <CheckoutTextField
+            id="postalCode"
+            label="Código postal"
+            value={contact.postalCode}
+            onChange={(v) => onPatch({ postalCode: v })}
+            autoComplete="postal-code"
+          />
+        </div>
+      )}
+
+      {isPe ? (
+        <CheckoutTextField
+          id="postalCode"
+          label="Código postal"
+          value={contact.postalCode}
+          onChange={(v) => onPatch({ postalCode: v })}
+          autoComplete="postal-code"
+        />
+      ) : null}
+
+      <label className="flex cursor-pointer items-center gap-2.5 text-sm text-muted-foreground">
+        <input
+          type="checkbox"
+          className="size-4 rounded border-border accent-foreground"
+          checked={saveNextTime}
+          onChange={(e) => setSaveNextTime(e.target.checked)}
+        />
+        Guardar esta información para la próxima vez
+      </label>
+    </section>
+  )
+}

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

@@ -0,0 +1,90 @@
+import { Check } from 'lucide-react'
+import type { ShippingOptionGroup, ShippingRate } from '@ecomiq/core'
+import { cn } from '../../ui'
+import type { CheckoutFieldId } from './form-schema'
+import { FieldError } from './checkout-form-controls'
+
+export type CheckoutShippingOption = {
+  key: string
+  group: ShippingOptionGroup
+  rate: ShippingRate
+}
+
+function shippingSubtitle(rate: ShippingRate) {
+  if (rate.description?.trim()) return rate.description
+  if (rate.estimatedDeliveryDays != null) {
+    return `${rate.estimatedDeliveryDays} días hábiles`
+  }
+  return 'Entrega estándar'
+}
+
+export function CheckoutShippingSection({
+  options,
+  selectedKey,
+  loading,
+  error,
+  needsPostalCode,
+  fieldError,
+  money,
+  onSelect,
+  onClearError,
+}: {
+  options: CheckoutShippingOption[]
+  selectedKey: string | null
+  loading: boolean
+  error: string | null
+  needsPostalCode: boolean
+  fieldError?: string
+  money: (value: number) => string
+  onSelect: (key: string) => void
+  onClearError: (id: CheckoutFieldId) => void
+}) {
+  return (
+    <section className="space-y-4">
+      <h2 className="text-xl font-semibold tracking-tight">Método de envío</h2>
+      {loading ? <p className="text-sm text-muted-foreground">Cargando opciones…</p> : null}
+      {error ? <p className="text-sm text-destructive">{error}</p> : null}
+      {needsPostalCode ? (
+        <p className="text-sm text-muted-foreground">
+          Ingresa un código postal para ver métodos de envío.
+        </p>
+      ) : null}
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        {options.map((opt) => {
+          const selected = selectedKey === opt.key
+          return (
+            <button
+              key={opt.key}
+              type="button"
+              className={cn(
+                'relative flex min-h-[5.5rem] flex-col items-start rounded-lg border bg-background px-4 py-3.5 text-left transition-colors',
+                selected
+                  ? 'border-emerald-500 ring-1 ring-emerald-500'
+                  : 'border-border [@media(hover:hover)]:hover:border-foreground/30',
+              )}
+              onClick={() => {
+                onClearError('checkout-shipping-method')
+                onSelect(opt.key)
+              }}
+            >
+              {selected ? (
+                <span className="absolute right-3 top-3 flex size-5 items-center justify-center rounded-full bg-emerald-500 text-white">
+                  <Check className="size-3" strokeWidth={3} aria-hidden="true" />
+                </span>
+              ) : null}
+              <span className="pr-8 text-sm font-semibold">{opt.rate.name}</span>
+              <span className="mt-1 text-xs text-muted-foreground">
+                {shippingSubtitle(opt.rate)}
+              </span>
+              <span className="mt-auto pt-3 text-sm font-semibold tabular-nums">
+                {opt.rate.price === 0 ? 'Gratis' : money(opt.rate.price)}
+              </span>
+            </button>
+          )
+        })}
+      </div>
+      <FieldError message={fieldError} />
+    </section>
+  )
+}

package/src/components/checkout/checkout-states.tsx

@@ -0,0 +1,73 @@
+import { ShoppingBag } from 'lucide-react'
+import { Link } from '../../link'
+import { Skeleton, StorefrontError, buttonVariants, cn } from '../../ui'
+
+export function CheckoutLoadingState() {
+  return (
+    <div className="mx-auto w-full max-w-6xl space-y-8 px-4 py-8 sm:py-10" role="status">
+      <Skeleton className="h-10 w-56" />
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_22rem]">
+        <Skeleton className="h-72 w-full rounded-xl" />
+        <Skeleton className="h-80 w-full rounded-xl" />
+      </div>
+      <span className="sr-only">Cargando checkout</span>
+    </div>
+  )
+}
+
+export function CheckoutAlreadyPurchasedState() {
+  return (
+    <section className="mx-auto flex min-h-[50vh] w-full max-w-lg flex-col items-center justify-center px-4 py-16 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Pedido ya realizado</h1>
+      <p className="mt-2 text-sm text-muted-foreground">
+        Este checkout ya fue completado. Tu bolsa se ha reiniciado para que puedas seguir
+        comprando.
+      </p>
+      <Link to="/" className={cn(buttonVariants(), 'mt-6')}>
+        Volver a la tienda
+      </Link>
+    </section>
+  )
+}
+
+export function CheckoutErrorState({
+  description,
+  onRetry,
+}: {
+  description?: string
+  onRetry: () => void
+}) {
+  return (
+    <StorefrontError
+      title="No pudimos cargar el checkout"
+      description={description ?? 'El carrito puede haber expirado.'}
+      onRetry={onRetry}
+      returnTo="/cart"
+      returnLabel="Volver al carrito"
+    />
+  )
+}
+
+export function CheckoutEmptyState() {
+  return (
+    <section className="mx-auto flex min-h-[55vh] w-full max-w-6xl items-center px-4 py-16">
+      <div className="max-w-lg">
+        <div className="mb-5 flex size-12 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+          <ShoppingBag className="size-5" aria-hidden="true" />
+        </div>
+        <h1 className="text-3xl font-semibold tracking-tight">No hay productos para pagar</h1>
+        <p className="mt-3 text-sm text-muted-foreground">
+          Agrega productos al carrito antes de continuar con el checkout.
+        </p>
+        <div className="mt-6 flex flex-wrap gap-3">
+          <Link to="/cart" className={buttonVariants({ size: 'lg', variant: 'outline' })}>
+            Ver carrito
+          </Link>
+          <Link to="/products" className={buttonVariants({ size: 'lg' })}>
+            Ir al catálogo
+          </Link>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/checkout/form-schema.ts

@@ -0,0 +1,229 @@
+import { z } from 'zod'
+import type { CheckoutContactForm } from './types'
+
+export const CHECKOUT_FIELD_IDS = [
+  'email',
+  'firstName',
+  'lastName',
+  'countryCode',
+  'address',
+  'department',
+  'province-geo',
+  'district',
+  'city',
+  'province-region',
+  'phone',
+  'checkout-shipping-method',
+  'checkout-payment-method',
+] as const
+
+export type CheckoutFieldId = (typeof CHECKOUT_FIELD_IDS)[number]
+
+export const CHECKOUT_FIELD_FOCUS_ORDER: CheckoutFieldId[] = [
+  'email',
+  'firstName',
+  'lastName',
+  'countryCode',
+  'address',
+  'department',
+  'province-geo',
+  'district',
+  'city',
+  'province-region',
+  'phone',
+  'checkout-shipping-method',
+  'checkout-payment-method',
+]
+
+const zodPathToFieldId: Record<string, CheckoutFieldId> = {
+  email: 'email',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  countryCode: 'countryCode',
+  address: 'address',
+  phone: 'phone',
+  departmentCode: 'department',
+  provinceCode: 'province-geo',
+  districtCode: 'district',
+  city: 'city',
+  province: 'province-region',
+  selectedShippingKey: 'checkout-shipping-method',
+  selectedPaymentCode: 'checkout-payment-method',
+}
+
+export type CheckoutFormValidationContext = {
+  contact: CheckoutContactForm
+  selectedShippingKey: string | null
+  shippingOptionsCount: number
+  selectedPaymentCode: string | null
+  paymentMethodsCount: number
+}
+
+export function buildCheckoutFormValidationSchema(currency: string) {
+  const phoneDigits = currency.toUpperCase() === 'PEN' ? 9 : 10
+
+  return z
+    .object({
+      email: z
+        .string()
+        .trim()
+        .min(1, 'El email es requerido')
+        .email('Ingresa un email válido'),
+      firstName: z
+        .string()
+        .trim()
+        .min(1, 'El nombre es requerido')
+        .min(2, 'El nombre debe tener al menos 2 caracteres'),
+      lastName: z
+        .string()
+        .trim()
+        .min(1, 'El apellido es requerido')
+        .min(2, 'El apellido debe tener al menos 2 caracteres'),
+      countryCode: z.string().trim().min(2, 'Selecciona un país').max(2),
+      address: z
+        .string()
+        .trim()
+        .min(1, 'La dirección es requerida')
+        .min(5, 'La dirección debe tener al menos 5 caracteres'),
+      phone: z
+        .string()
+        .trim()
+        .min(1, 'El teléfono es requerido')
+        .regex(/^\d+$/, 'El teléfono solo debe contener números')
+        .length(phoneDigits, `El teléfono debe tener ${phoneDigits} dígitos`),
+      departmentCode: z.string(),
+      provinceCode: z.string(),
+      districtCode: z.string(),
+      city: z.string(),
+      province: z.string(),
+      selectedShippingKey: z.string().nullable(),
+      shippingOptionsCount: z.number().int().nonnegative(),
+      selectedPaymentCode: z.string().nullable(),
+      paymentMethodsCount: z.number().int().nonnegative(),
+    })
+    .superRefine((data, ctx) => {
+      const country = data.countryCode.toUpperCase()
+
+      if (country === 'PE') {
+        if (!data.departmentCode.trim()) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['departmentCode'],
+            message: 'Selecciona un departamento',
+          })
+        }
+        if (!data.provinceCode.trim()) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['provinceCode'],
+            message: 'Selecciona una provincia',
+          })
+        }
+        if (!data.districtCode.trim()) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['districtCode'],
+            message: 'Selecciona un distrito',
+          })
+        }
+      } else {
+        if (!data.city.trim()) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['city'],
+            message: 'La ciudad es requerida',
+          })
+        }
+        if (!data.province.trim()) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            path: ['province'],
+            message: 'La región es requerida',
+          })
+        }
+      }
+
+      if (data.shippingOptionsCount > 0 && !data.selectedShippingKey?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['selectedShippingKey'],
+          message: 'Selecciona un método de envío',
+        })
+      }
+
+      if (data.paymentMethodsCount > 0 && !data.selectedPaymentCode?.trim()) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ['selectedPaymentCode'],
+          message: 'Selecciona un método de pago',
+        })
+      }
+    })
+}
+
+export function checkoutValidationInputFromContext(
+  ctx: CheckoutFormValidationContext,
+) {
+  const { contact } = ctx
+  return {
+    email: contact.email,
+    firstName: contact.firstName,
+    lastName: contact.lastName,
+    countryCode: contact.countryCode,
+    address: contact.address,
+    phone: contact.phone,
+    departmentCode: contact.departmentCode,
+    provinceCode: contact.provinceCode,
+    districtCode: contact.districtCode,
+    city: contact.city,
+    province: contact.province,
+    selectedShippingKey: ctx.selectedShippingKey,
+    shippingOptionsCount: ctx.shippingOptionsCount,
+    selectedPaymentCode: ctx.selectedPaymentCode,
+    paymentMethodsCount: ctx.paymentMethodsCount,
+  }
+}
+
+export function mapZodIssuesToFieldErrors(
+  error: z.ZodError,
+): Partial<Record<CheckoutFieldId, string>> {
+  const out: Partial<Record<CheckoutFieldId, string>> = {}
+  for (const issue of error.issues) {
+    const key = issue.path[0]
+    if (typeof key !== 'string') continue
+    const fieldId = zodPathToFieldId[key]
+    if (!fieldId || out[fieldId]) continue
+    out[fieldId] = issue.message
+  }
+  return out
+}
+
+export function firstInvalidFieldId(
+  errors: Partial<Record<CheckoutFieldId, string>>,
+): CheckoutFieldId | null {
+  for (const id of CHECKOUT_FIELD_FOCUS_ORDER) {
+    if (errors[id]) return id
+  }
+  return null
+}
+
+export function focusCheckoutField(fieldId: CheckoutFieldId): void {
+  if (typeof document === 'undefined') return
+  const el = document.getElementById(fieldId)
+  if (el) {
+    el.focus({ preventScroll: false })
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  if (fieldId === 'checkout-shipping-method') {
+    const radio = document.querySelector<HTMLInputElement>('input[name="shipping"]')
+    radio?.focus()
+    radio?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    return
+  }
+  if (fieldId === 'checkout-payment-method') {
+    const radio = document.querySelector<HTMLInputElement>('input[name="payment"]')
+    radio?.focus()
+    radio?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+}

package/src/components/checkout/format.ts

@@ -0,0 +1,27 @@
+import type { CartCheckoutResponse } from '@ecomiq/core'
+
+export function formatMoney(value: number, language: string, currency: string) {
+  return new Intl.NumberFormat(language, {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value)
+}
+
+export function thankYouUrl(cartId: string, transactionId?: string) {
+  const q = new URLSearchParams({ cartId })
+  if (transactionId) q.set('transactionId', transactionId)
+  return `/thank-you?${q.toString()}`
+}
+
+/** @deprecated Usa `thankYouUrl`. */
+export function processingUrl(cartId: string, transactionId?: string) {
+  return thankYouUrl(cartId, transactionId)
+}
+
+export function paymentRedirectUrl(result: CartCheckoutResponse): string | null {
+  const actionUrl = result.payment?.action?.url
+  if (typeof actionUrl === 'string' && actionUrl.trim()) return actionUrl
+  return null
+}