@ecomiq/storefront 2.1.4 → 3.0.0

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

@@ -1,400 +0,0 @@
-import { useState } from 'react'
-import type { Country, Department, District, Province } from '@ecomiq/core'
-import type { CustomerSavedAddress } from '@ecomiq/core'
-import { Button } from '../../ui'
-import type { CheckoutContactForm } from './types'
-import type { CheckoutFieldId } from './form-schema'
-import {
-  CheckoutPhoneField,
-  CheckoutSelectField,
-  CheckoutTextField,
-  FieldError,
-  fieldClass,
-} from './checkout-form-controls'
-import {
-  CheckoutShippingSection,
-  type CheckoutShippingOption,
-} from './checkout-shipping-section'
-
-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'
-}
-
-/** Paso 2: dirección de entrega + método de envío + facturación. */
-export function CheckoutShippingAddressSection({
-  contact,
-  fieldErrors,
-  countries,
-  departments,
-  provinces,
-  districts,
-  shippingOptions,
-  selectedShippingKey,
-  shippingLoading,
-  shippingError,
-  isSaving,
-  money,
-  onPatch,
-  onSelectShipping,
-  onClearError,
-  onContinue,
-  savedAddresses,
-  selectedSavedAddressId,
-  onSelectSavedAddress,
-  canSaveToAccount = false,
-  addressSaveError,
-  saveToAccount = false,
-  saveAddressKey = 'Casa',
-  onSaveToAccountChange,
-  onSaveAddressKeyChange,
-}: {
-  contact: CheckoutContactForm
-  fieldErrors: Partial<Record<CheckoutFieldId, string>>
-  countries: Country[]
-  departments: Department[]
-  provinces: Province[]
-  districts: District[]
-  shippingOptions: CheckoutShippingOption[]
-  selectedShippingKey: string | null
-  shippingLoading: boolean
-  shippingError: string | null
-  isSaving?: boolean
-  money: (value: number) => string
-  onPatch: (patch: Partial<CheckoutContactForm>) => void
-  onSelectShipping: (key: string) => void
-  onClearError: (id: CheckoutFieldId) => void
-  onContinue: (options?: {
-    saveToAccount?: boolean
-    addressKey?: string
-  }) => void | Promise<void>
-  savedAddresses?: CustomerSavedAddress[]
-  selectedSavedAddressId?: string | null
-  onSelectSavedAddress?: (addressId: string) => void
-  /** Muestra checkbox para guardar en “Mis direcciones” (usuario logueado). */
-  canSaveToAccount?: boolean
-  addressSaveError?: string | null
-  saveToAccount?: boolean
-  saveAddressKey?: string
-  onSaveToAccountChange?: (checked: boolean) => void
-  onSaveAddressKeyChange?: (value: string) => void
-}) {
-  const isPe = contact.countryCode.toUpperCase() === 'PE'
-  const hasSavedAddresses = Boolean(savedAddresses?.length && onSelectSavedAddress)
-  const [localSaveError, setLocalSaveError] = useState<string | null>(null)
-  const saveError = addressSaveError ?? localSaveError
-
-  return (
-    <div className="space-y-6">
-      {hasSavedAddresses ? (
-        <div className="min-w-0">
-          <label
-            htmlFor="saved-address"
-            className="text-sm font-medium text-foreground"
-          >
-            Dirección guardada
-          </label>
-          <select
-            id="saved-address"
-            className={fieldClass()}
-            value={selectedSavedAddressId ?? ''}
-            onChange={(e) => {
-              const id = e.target.value
-              if (id) onSelectSavedAddress?.(id)
-            }}
-          >
-            <option value="" disabled>
-              Seleccionar dirección…
-            </option>
-            {savedAddresses!.map((addr) => (
-              <option key={addr.id} value={addr.id}>
-                {addr.addressKey}
-                {addr.isDefault ? ' (predeterminada)' : ''}
-                {' — '}
-                {[addr.addressLine, addr.addressNumber, addr.district]
-                  .filter(Boolean)
-                  .join(' ')}
-              </option>
-            ))}
-          </select>
-          <p className="mt-1.5 text-xs text-muted-foreground">
-            Usa una dirección de tu cuenta o edita los campos abajo.
-          </p>
-        </div>
-      ) : 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>
-
-      <CheckoutPhoneField
-        id="phone"
-        label="Teléfono"
-        error={fieldErrors.phone}
-        value={contact.phone}
-        dialCode={dialCodeFor(contact.countryCode)}
-        onChange={(v) => {
-          onClearError('phone')
-          onPatch({ phone: v })
-        }}
-      />
-
-      <CheckoutTextField
-        id="address"
-        label="Dirección"
-        error={fieldErrors.address}
-        value={contact.address}
-        onChange={(v) => {
-          onClearError('address')
-          onPatch({ address: v })
-        }}
-        autoComplete="street-address"
-      />
-
-      <CheckoutTextField
-        id="address2"
-        label="Información adicional de referencia"
-        value={contact.address2}
-        onChange={(v) => onPatch({ address2: v })}
-        autoComplete="address-line2"
-      />
-
-      <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>
-
-      {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}
-
-      <CheckoutShippingSection
-        options={shippingOptions}
-        selectedKey={selectedShippingKey}
-        loading={shippingLoading}
-        error={shippingError}
-        needsPostalCode={!contact.postalCode.trim()}
-        fieldError={fieldErrors['checkout-shipping-method']}
-        money={money}
-        onSelect={onSelectShipping}
-        onClearError={onClearError}
-      />
-
-      <div className="space-y-3">
-        <h3 className="text-base font-semibold tracking-tight">Dirección de facturación</h3>
-        <label className="flex items-center gap-2.5 text-sm text-foreground">
-          <input
-            type="checkbox"
-            className="size-4 rounded border-border accent-foreground"
-            checked
-            disabled
-            readOnly
-          />
-          Misma dirección que la de entrega
-        </label>
-      </div>
-
-      {canSaveToAccount ? (
-        <div className="space-y-3 rounded-lg border border-border bg-muted/20 p-4">
-          <label className="flex items-start gap-2.5 text-sm text-foreground">
-            <input
-              type="checkbox"
-              className="mt-0.5 size-4 rounded border-border accent-foreground"
-              checked={saveToAccount}
-              onChange={(e) => {
-                onSaveToAccountChange?.(e.target.checked)
-                setLocalSaveError(null)
-              }}
-            />
-            <span>
-              Guardar esta dirección en{' '}
-              <span className="font-medium">Mis direcciones</span>
-            </span>
-          </label>
-          {saveToAccount ? (
-            <CheckoutTextField
-              id="addressKey"
-              label="Nombre de la dirección"
-              value={saveAddressKey}
-              placeholder="Casa, Oficina…"
-              onChange={(v) => onSaveAddressKeyChange?.(v)}
-            />
-          ) : null}
-          {saveError ? <FieldError message={saveError} /> : null}
-        </div>
-      ) : null}
-
-      <Button
-        type="button"
-        className="w-full uppercase tracking-wide"
-        size="lg"
-        disabled={isSaving}
-        onClick={() => {
-          setLocalSaveError(null)
-          if (saveToAccount && !saveAddressKey.trim()) {
-            setLocalSaveError('Indica un nombre para la dirección')
-            return
-          }
-          void onContinue(
-            canSaveToAccount && saveToAccount
-              ? { saveToAccount: true, addressKey: saveAddressKey.trim() }
-              : undefined,
-          )
-        }}
-      >
-        {isSaving ? 'Guardando…' : 'Enviar y continuar'}
-      </Button>
-    </div>
-  )
-}

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

@@ -1,98 +0,0 @@
-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 (
-    <div className="space-y-4">
-      <h3 className="text-base font-semibold tracking-tight">Envío</h3>
-      {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 id="checkout-shipping-method" className="grid gap-3">
-        {options.map((opt) => {
-          const selected = selectedKey === opt.key
-          return (
-            <button
-              key={opt.key}
-              type="button"
-              data-checkout-shipping={opt.key}
-              aria-pressed={selected}
-              className={cn(
-                'relative flex min-h-[4.5rem] items-center justify-between gap-4 rounded-lg border bg-background px-4 py-3.5 text-left transition-colors',
-                selected
-                  ? 'border-foreground ring-1 ring-foreground'
-                  : 'border-border [@media(hover:hover)]:hover:border-foreground/30',
-              )}
-              onClick={() => {
-                onClearError('checkout-shipping-method')
-                onSelect(opt.key)
-              }}
-            >
-              <span className="min-w-0 pr-8">
-                <span className="block text-sm font-semibold">{opt.rate.name}</span>
-                <span className="mt-1 block text-xs text-muted-foreground">
-                  {shippingSubtitle(opt.rate)}
-                </span>
-              </span>
-              <span className="shrink-0 text-right text-sm font-semibold tabular-nums">
-                {opt.rate.price === 0 ? (
-                  'GRATIS'
-                ) : (
-                  money(opt.rate.price)
-                )}
-              </span>
-              {selected ? (
-                <span className="absolute right-3 top-3 flex size-5 items-center justify-center rounded-full bg-foreground text-background">
-                  <Check className="size-3" strokeWidth={3} aria-hidden="true" />
-                </span>
-              ) : null}
-            </button>
-          )
-        })}
-      </div>
-      <FieldError message={fieldError} />
-    </div>
-  )
-}

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

@@ -1,73 +0,0 @@
-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/checkout-step-card.tsx

@@ -1,101 +0,0 @@
-import type { ComponentType, ReactNode, SVGProps } from 'react'
-import { cn } from '../../ui'
-import type { CheckoutStepId } from './checkout-steps'
-import { checkoutStepStatus, type CheckoutStepFlow } from './checkout-steps'
-
-type StepIcon = ComponentType<SVGProps<SVGSVGElement>>
-
-export function CheckoutStepCard({
-  step,
-  flow,
-  title,
-  icon: Icon,
-  summary,
-  onEdit,
-  children,
-}: {
-  step: CheckoutStepId
-  flow: CheckoutStepFlow
-  title: string
-  icon: StepIcon
-  summary?: ReactNode
-  onEdit?: () => void
-  children?: ReactNode
-}) {
-  const status = checkoutStepStatus(flow, step)
-  const locked = status === 'locked'
-  const complete = status === 'complete'
-  const active = status === 'active'
-
-  return (
-    <section
-      aria-labelledby={`checkout-step-${step}-title`}
-      aria-disabled={locked || undefined}
-      className={cn(
-        'overflow-hidden rounded-xl border bg-card shadow-sm transition-opacity',
-        locked && 'opacity-55',
-      )}
-    >
-      <header
-        className={cn(
-          'flex items-center gap-3 border-b px-4 py-3.5 sm:px-5',
-          locked && 'border-transparent',
-          complete && 'border-border',
-          active && 'border-border',
-        )}
-      >
-        <Icon
-          className={cn(
-            'size-5 shrink-0',
-            locked ? 'text-muted-foreground/70' : 'text-foreground',
-          )}
-          aria-hidden="true"
-        />
-        <h2
-          id={`checkout-step-${step}-title`}
-          className={cn(
-            'min-w-0 flex-1 text-base font-semibold tracking-tight',
-            locked && 'text-muted-foreground',
-          )}
-        >
-          {title}
-        </h2>
-        {complete && onEdit ? (
-          <button
-            type="button"
-            className="text-xs font-semibold uppercase tracking-[0.08em] text-foreground underline-offset-4 hover:underline"
-            onClick={onEdit}
-          >
-            Editar
-          </button>
-        ) : null}
-      </header>
-
-      {complete && summary ? (
-        <div className="space-y-3 px-4 py-4 sm:px-5">{summary}</div>
-      ) : null}
-
-      {active ? <div className="space-y-5 px-4 py-5 sm:px-5">{children}</div> : null}
-    </section>
-  )
-}
-
-export function CheckoutStepSummaryBlock({
-  children,
-  className,
-}: {
-  children: ReactNode
-  className?: string
-}) {
-  return (
-    <div
-      className={cn(
-        'relative rounded-lg border border-border bg-background py-3 pl-4 pr-3',
-        'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground',
-        className,
-      )}
-    >
-      {children}
-    </div>
-  )
-}