@ecomiq/storefront 2.0.8 → 2.0.11

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

@@ -1,5 +1,5 @@
-import { useState } from 'react'
 import type { Country, Department, District, Province } from '@ecomiq/core'
+import { Button } from '../../ui'
 import type { CheckoutContactForm } from './types'
 import type { CheckoutFieldId } from './form-schema'
 import {
@@ -9,6 +9,10 @@ import {
   FieldError,
   fieldClass,
 } from './checkout-form-controls'
+import {
+  CheckoutShippingSection,
+  type CheckoutShippingOption,
+} from './checkout-shipping-section'
 
 const DIAL_BY_COUNTRY: Record<string, string> = {
   PE: '+51',
@@ -24,7 +28,7 @@ function dialCodeFor(countryCode: string) {
   return DIAL_BY_COUNTRY[countryCode.toUpperCase()] ?? '+51'
 }
 
-/** Dirección de envío: contacto + geo en el layout del mockup. */
+/** Paso 2: dirección de entrega + método de envío + facturación. */
 export function CheckoutShippingAddressSection({
   contact,
   fieldErrors,
@@ -32,9 +36,16 @@ export function CheckoutShippingAddressSection({
   departments,
   provinces,
   districts,
-  sessionLabel,
+  shippingOptions,
+  selectedShippingKey,
+  shippingLoading,
+  shippingError,
+  isSaving,
+  money,
   onPatch,
+  onSelectShipping,
   onClearError,
+  onContinue,
 }: {
   contact: CheckoutContactForm
   fieldErrors: Partial<Record<CheckoutFieldId, string>>
@@ -42,22 +53,21 @@ export function CheckoutShippingAddressSection({
   departments: Department[]
   provinces: Province[]
   districts: District[]
-  sessionLabel?: string | null
+  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: () => void | Promise<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="space-y-6">
       <div className="grid gap-4 sm:grid-cols-2">
         <CheckoutTextField
           id="firstName"
@@ -83,75 +93,68 @@ export function CheckoutShippingAddressSection({
         />
       </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>
+      <CheckoutPhoneField
+        id="phone"
+        label="Teléfono"
+        error={fieldErrors.phone}
+        value={contact.phone}
+        dialCode={dialCodeFor(contact.countryCode)}
+        onChange={(v) => {
+          onClearError('phone')
+          onPatch({ phone: v })
+        }}
+      />
 
-      <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 })
+      <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: '',
+            })
           }}
-          autoComplete="street-address"
-        />
+        >
+          {(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 ? (
@@ -252,15 +255,41 @@ export function CheckoutShippingAddressSection({
         />
       ) : 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>
+      <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>
+
+      <Button
+        type="button"
+        className="w-full uppercase tracking-wide"
+        size="lg"
+        disabled={isSaving}
+        onClick={() => void onContinue()}
+      >
+        {isSaving ? 'Guardando…' : 'Enviar y continuar'}
+      </Button>
+    </div>
   )
 }

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

@@ -40,8 +40,8 @@ export function CheckoutShippingSection({
   onClearError: (id: CheckoutFieldId) => void
 }) {
   return (
-    <section className="space-y-4">
-      <h2 className="text-xl font-semibold tracking-tight">Método de envío</h2>
+    <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 ? (
@@ -50,17 +50,19 @@ export function CheckoutShippingSection({
         </p>
       ) : null}
 
-      <div className="grid gap-3 sm:grid-cols-2">
+      <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-[5.5rem] flex-col items-start rounded-lg border bg-background px-4 py-3.5 text-left transition-colors',
+                '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-emerald-500 ring-1 ring-emerald-500'
+                  ? 'border-foreground ring-1 ring-foreground'
                   : 'border-border [@media(hover:hover)]:hover:border-foreground/30',
               )}
               onClick={() => {
@@ -68,23 +70,29 @@ export function CheckoutShippingSection({
                 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-emerald-500 text-white">
+                <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}
-              <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>
+    </div>
   )
 }

package/src/components/checkout/checkout-step-card.tsx

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

package/src/components/checkout/checkout-steps.ts

@@ -0,0 +1,96 @@
+export const CHECKOUT_STEPS = ['contact', 'delivery', 'payment'] as const
+
+export type CheckoutStepId = (typeof CHECKOUT_STEPS)[number]
+
+export type CheckoutStepFlow = {
+  active: CheckoutStepId
+  completed: Record<CheckoutStepId, boolean>
+}
+
+export function createCheckoutStepFlow(
+  active: CheckoutStepId = 'contact',
+): CheckoutStepFlow {
+  return {
+    active,
+    completed: {
+      contact: false,
+      delivery: false,
+      payment: false,
+    },
+  }
+}
+
+export function checkoutStepIndex(step: CheckoutStepId): number {
+  return CHECKOUT_STEPS.indexOf(step)
+}
+
+export function isCheckoutStepLocked(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): boolean {
+  return checkoutStepIndex(step) > checkoutStepIndex(flow.active)
+}
+
+export function isCheckoutStepActive(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): boolean {
+  return flow.active === step
+}
+
+export function isCheckoutStepComplete(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): boolean {
+  return flow.completed[step] && flow.active !== step
+}
+
+/** Completa el paso activo y avanza al siguiente (si existe). */
+export function completeCheckoutStep(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): CheckoutStepFlow {
+  if (flow.active !== step) return flow
+  const idx = checkoutStepIndex(step)
+  const next = CHECKOUT_STEPS[idx + 1]
+  return {
+    active: next ?? step,
+    completed: {
+      ...flow.completed,
+      [step]: true,
+    },
+  }
+}
+
+/**
+ * Reabre un paso ya completado para editarlo e invalida todos los posteriores.
+ */
+export function editCheckoutStep(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): CheckoutStepFlow {
+  const idx = checkoutStepIndex(step)
+  if (idx < 0) return flow
+  if (checkoutStepIndex(flow.active) < idx && !flow.completed[step]) {
+    return flow
+  }
+
+  const completed = { ...flow.completed }
+  for (const id of CHECKOUT_STEPS) {
+    if (checkoutStepIndex(id) >= idx) completed[id] = false
+  }
+
+  return {
+    active: step,
+    completed,
+  }
+}
+
+export function checkoutStepStatus(
+  flow: CheckoutStepFlow,
+  step: CheckoutStepId,
+): 'active' | 'complete' | 'locked' {
+  if (isCheckoutStepActive(flow, step)) return 'active'
+  if (isCheckoutStepComplete(flow, step)) return 'complete'
+  return 'locked'
+}