@thorprovider/storefront 0.3.1 → 0.4.0-mvp.2

package/assets/templates/views/account/registry.tsx

@@ -0,0 +1,439 @@
+'use client'
+
+// Thor Commerce view registry fragment: account
+// Client boundary for the account view. Imports value bindings from
+// @json-render/react and components from @thorprovider/blocks — both must stay
+// on the client side of the RSC graph. Kept separate from index.tsx so the view
+// spec (elements/catalog/route/loader) stays a pure Server Component module.
+//
+// Security invariant: the block-owned credential payload (email/password) is
+// passed straight from the block callback to the Server Action and is NEVER
+// written to the json-render state store, so no password reaches client state,
+// HTML, or logs. Only the non-secret result (customer/error) is stored.
+
+import { useEffect, useRef } from 'react'
+import {
+  Button,
+  LoginPage1 as LoginBlock,
+  OrderHistory2,
+  SignUpPage1 as SignUpBlock,
+} from '@thorprovider/blocks'
+import { useStateStore } from '@json-render/react'
+import type { Customer } from '@thorprovider/types'
+import {
+  loadAccountAction,
+  loadOrdersPageAction,
+  loginAction,
+  logoutAction,
+  registerAction,
+} from '../../actions'
+import type { AccountOrderView } from '../../state.core'
+import type { ViewRegistry } from '../types'
+import {
+  accountLoginPropsSchema,
+  accountOrdersPropsSchema,
+  accountRegisterPropsSchema,
+} from './schema'
+
+// The structured result the auth Server Actions return (see ../../actions).
+type AuthResult = { ok: true; customer: Customer | null } | { ok: false; error: string }
+type SetState = (path: string, value: unknown) => void
+
+/** Bounded page size for the account order-history window. */
+const ORDERS_PAGE_SIZE = 10
+
+// Apply a settled auth result truthfully: a failure sets an error and NEVER a
+// logged-in state; a success stores the customer (or null) and nothing else.
+function applyAuthResult(set: SetState, result: AuthResult): void {
+  set('/accountPending', false)
+  if (result.ok) {
+    set('/accountCustomer', result.customer)
+    set('/accountAuthenticated', result.customer !== null)
+    set('/accountError', null)
+    set('/accountMode', 'login')
+    return
+  }
+  set('/accountError', result.error)
+}
+
+// A rejected Server Action (network/RPC) must clear pending and surface a
+// message; never swallow it. Only a non-secret context line is logged.
+function authFailure(set: SetState, scope: string) {
+  return (error: unknown) => {
+    console.error(
+      `[storefront/account] ${scope} failed`,
+      error instanceof Error ? error.message : error,
+    )
+    set('/accountPending', false)
+    set('/accountError', 'No se pudo completar la operación. Inténtalo de nuevo.')
+  }
+}
+
+// Non-secret status surface for the block pages, which expose no error/pending
+// prop of their own. Renders nothing when there is no pending work or error.
+function AuthNotice({ pending, error }: { pending: boolean; error: string | null }) {
+  if (!pending && !error) return null
+  return (
+    <div
+      role="alert"
+      aria-live="polite"
+      className="bg-background text-foreground fixed inset-x-0 top-4 z-50 mx-auto w-fit max-w-md rounded-md border px-4 py-2 text-center text-sm shadow-lg"
+    >
+      {pending ? 'Procesando…' : error}
+    </div>
+  )
+}
+
+// The OrderHistory2 block's order shape (see @thorprovider/blocks). Kept local
+// so the registry maps the account order rows to the block contract without a
+// shared dependency on block internals.
+interface BlockOrderItem {
+  id: string
+  name: string
+  image: string
+  details: string
+  price: string
+  quantity: number
+}
+interface BlockOrder {
+  id: string
+  date: string
+  status: string
+  total: string
+  items: BlockOrderItem[]
+}
+
+// Map a backend-sourced account order row to the block's order shape. The block
+// has a single `id` slot which it also renders ("Pedido {id}"), so it carries the
+// display number; the registry keeps a number→backend-id map so selection is
+// keyed by the REAL backend order id. An absent variant/image becomes '' because
+// the block contract is a string — never an invented value.
+function toBlockOrder(order: AccountOrderView): BlockOrder {
+  return {
+    id: order.number,
+    date: order.date,
+    status: order.status,
+    total: order.total,
+    items: order.items.map((item) => ({
+      id: item.id,
+      name: item.name,
+      image: item.image ?? '',
+      details: item.variant ?? '',
+      price: item.lineTotal,
+      quantity: item.quantity,
+    })),
+  }
+}
+
+// Inline order detail assembled from the already-fetched list row (no second
+// backend request). Only fields the backend supplied are shown.
+function OrderDetail({ order }: { order: AccountOrderView }) {
+  const totals = (
+    [
+      { label: 'Subtotal', value: order.subtotal },
+      { label: 'Impuestos', value: order.tax },
+      { label: 'Envío', value: order.shipping },
+      { label: 'Total', value: order.total },
+    ] as { label: string; value?: string }[]
+  ).filter((row): row is { label: string; value: string } => row.value !== undefined)
+  return (
+    <div className="mx-auto w-full max-w-7xl px-4 pb-12 sm:px-6 lg:px-8">
+      <div className="rounded-lg border p-6">
+        <h3 className="text-lg font-semibold">Pedido {order.number}</h3>
+        <p className="text-muted-foreground mt-1 text-sm">
+          {order.date} · {order.status}
+        </p>
+        {order.address ? (
+          <p className="text-muted-foreground mt-2 text-sm">{order.address}</p>
+        ) : null}
+        <ul className="mt-4 divide-y">
+          {order.items.map((item) => (
+            <li key={item.id} className="flex items-center justify-between py-2 text-sm">
+              <span>
+                {item.name}
+                {item.variant ? (
+                  <span className="text-muted-foreground"> · {item.variant}</span>
+                ) : null}
+                <span className="text-muted-foreground"> × {item.quantity}</span>
+              </span>
+              <span>{item.lineTotal}</span>
+            </li>
+          ))}
+        </ul>
+        <dl className="mt-4 space-y-1 border-t pt-4 text-sm">
+          {totals.map((row) => (
+            <div key={row.label} className="flex justify-between">
+              <dt className="text-muted-foreground">{row.label}</dt>
+              <dd>{row.value}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </div>
+  )
+}
+
+export const registry: ViewRegistry = {
+  /**
+   * Headless bootstrap rendered on the account route. It resolves the current
+   * customer from the cookie-authorized Server Action once, so a reload keeps
+   * the signed-in state without re-entering credentials. It never reads a token.
+   */
+  AccountBoot: () => {
+    const { set } = useStateStore()
+    const booted = useRef(false)
+    useEffect(() => {
+      if (booted.current) return
+      booted.current = true
+      void loadAccountAction()
+        .then((result) => {
+          if (!result.ok) {
+            set('/accountCustomer', null)
+            set('/accountAuthenticated', false)
+            set('/accountError', result.error)
+            return
+          }
+          set('/accountCustomer', result.customer)
+          set('/accountAuthenticated', result.customer !== null)
+          set('/accountError', null)
+        })
+        .catch((error) => {
+          console.error(
+            '[storefront/account] loadAccount failed',
+            error instanceof Error ? error.message : error,
+          )
+          set('/accountCustomer', null)
+          set('/accountAuthenticated', false)
+          set('/accountError', 'No se pudo cargar la cuenta. Inténtalo de nuevo.')
+        })
+    }, [])
+    return null
+  },
+  AccountLogin: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountLoginPropsSchema.parse(props)
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    return (
+      <>
+        <AuthNotice pending={pending} error={error} />
+        <LoginBlock
+          logoText={parsed.logoText}
+          welcomeTitleLabel={parsed.welcomeTitleLabel}
+          welcomeDescriptionLabel={parsed.welcomeDescriptionLabel}
+          emailLabel={parsed.emailLabel}
+          passwordLabel={parsed.passwordLabel}
+          signInLabel={parsed.signInLabel}
+          createAccountLabel={parsed.createAccountLabel}
+          // The credentials stay in the block's local state and go straight to
+          // the Server Action; they are never written to the store.
+          onSubmit={(data) => {
+            set('/accountPending', true)
+            set('/accountError', null)
+            void loginAction({ email: data.email, password: data.password })
+              .then((result) => applyAuthResult(set, result))
+              .catch(authFailure(set, 'login'))
+          }}
+          onCreateAccount={() => emit('showRegister')}
+        />
+      </>
+    )
+  },
+  AccountRegister: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountRegisterPropsSchema.parse(props)
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    return (
+      <>
+        <AuthNotice pending={pending} error={error} />
+        <SignUpBlock
+          logoText={parsed.logoText}
+          createAccountTitleLabel={parsed.createAccountTitleLabel}
+          createAccountDescriptionLabel={parsed.createAccountDescriptionLabel}
+          fullNameLabel={parsed.fullNameLabel}
+          emailLabel={parsed.emailLabel}
+          passwordLabel={parsed.passwordLabel}
+          createAccountLabel={parsed.createAccountLabel}
+          signInLabel={parsed.signInLabel}
+          onSubmit={(data) => {
+            const parts = data.fullName.trim().split(/\s+/).filter(Boolean)
+            set('/accountPending', true)
+            set('/accountError', null)
+            void registerAction({
+              email: data.email,
+              password: data.password,
+              first_name: parts[0] ?? '',
+              last_name: parts.slice(1).join(' '),
+            })
+              .then((result) => applyAuthResult(set, result))
+              .catch(authFailure(set, 'register'))
+          }}
+          onSignIn={() => emit('showLogin')}
+        />
+      </>
+    )
+  },
+  AccountPanel: ({ emit }) => {
+    const { state } = useStateStore()
+    const customer = (state.accountCustomer ?? null) as Customer | null
+    const error = typeof state.accountError === 'string' ? state.accountError : null
+    const pending = Boolean(state.accountPending)
+    const name = customer
+      ? [customer.firstName, customer.lastName].filter(Boolean).join(' ') || customer.email
+      : ''
+    return (
+      <div className="mx-auto max-w-md px-4 py-16 text-center">
+        <h1 className="text-2xl font-bold">Mi cuenta</h1>
+        <p className="text-muted-foreground mt-2 text-sm">Has iniciado sesión como</p>
+        <p className="mt-1 text-lg font-medium">{name}</p>
+        {customer?.email ? <p className="text-muted-foreground text-sm">{customer.email}</p> : null}
+        {error ? (
+          <p role="alert" className="text-destructive mt-4 text-sm">
+            {error}
+          </p>
+        ) : null}
+        <Button className="mt-6" disabled={pending} onClick={() => emit('logout')}>
+          {pending ? 'Cerrando sesión…' : 'Cerrar sesión'}
+        </Button>
+      </div>
+    )
+  },
+  /**
+   * Signed-in order history. The first page loads once from the cookie-authorized
+   * Server Action; later pages load on demand, each scoped to the authenticated
+   * customer's channel. The backend's real `count` drives pagination, so a page
+   * length is never presented as the total. Selection is keyed by the REAL
+   * backend order id (via a number→id map), so an opened detail stays stable
+   * across paging and reload. No token is read, stored, or rendered here.
+   */
+  AccountOrders: ({ props }) => {
+    const { state, set } = useStateStore()
+    const parsed = accountOrdersPropsSchema.parse(props)
+    const authenticated = Boolean(state.accountAuthenticated)
+    const loadedForAuth = useRef(false)
+
+    const loadPage = (page: number) => {
+      set('/accountOrdersPending', true)
+      set('/accountOrdersError', null)
+      void loadOrdersPageAction({ page, pageSize: ORDERS_PAGE_SIZE })
+        .then((result) => {
+          set('/accountOrdersPending', false)
+          if (result.ok) {
+            set('/accountOrders', result.orders)
+            set('/accountOrdersCount', result.count)
+            set('/accountOrdersPage', page)
+            set('/accountOrdersPageSize', result.limit)
+            set('/accountOrdersError', null)
+            return
+          }
+          set('/accountOrdersError', result.error)
+        })
+        .catch((error) => {
+          console.error(
+            '[storefront/account] loadOrders failed',
+            error instanceof Error ? error.message : error,
+          )
+          set('/accountOrdersPending', false)
+          set('/accountOrdersError', parsed.errorLabel ?? 'No se pudieron cargar tus pedidos.')
+        })
+    }
+
+    useEffect(() => {
+      // Load the first page when the customer becomes authenticated, and reload
+      // after a re-login, so the history appears without a manual reload. A
+      // guest load is never attempted; the flag resets when the session ends.
+      if (!authenticated) {
+        loadedForAuth.current = false
+        return
+      }
+      if (loadedForAuth.current) return
+      loadedForAuth.current = true
+      loadPage(1)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [authenticated])
+
+    const pending = Boolean(state.accountOrdersPending)
+    const error = typeof state.accountOrdersError === 'string' ? state.accountOrdersError : null
+    const orders = Array.isArray(state.accountOrders)
+      ? (state.accountOrders as AccountOrderView[])
+      : []
+    const count =
+      typeof state.accountOrdersCount === 'number' ? state.accountOrdersCount : orders.length
+    const page = typeof state.accountOrdersPage === 'number' ? state.accountOrdersPage : 1
+    const pageSize =
+      typeof state.accountOrdersPageSize === 'number' && state.accountOrdersPageSize > 0
+        ? state.accountOrdersPageSize
+        : ORDERS_PAGE_SIZE
+    const selectedId =
+      typeof state.accountSelectedOrderId === 'string' ? state.accountSelectedOrderId : null
+    // Selection is keyed by the REAL backend order id, never the display number.
+    const selected = selectedId ? orders.find((order) => order.id === selectedId) ?? null : null
+    // The block row carries the display number; resolve it back to the backend id.
+    const backendIdByBlockId = new Map(orders.map((order) => [order.number, order.id]))
+
+    if (pending) {
+      return (
+        <p className="text-muted-foreground mx-auto max-w-7xl px-4 py-8 text-sm">
+          {parsed.loadingLabel ?? 'Cargando pedidos…'}
+        </p>
+      )
+    }
+    if (error) {
+      return (
+        <p role="alert" className="text-destructive mx-auto max-w-7xl px-4 py-8 text-sm">
+          {error}
+        </p>
+      )
+    }
+    if (orders.length === 0) {
+      return (
+        <p className="text-muted-foreground mx-auto max-w-7xl px-4 py-8 text-sm">
+          {parsed.emptyLabel ?? 'Aún no tienes pedidos.'}
+        </p>
+      )
+    }
+    const totalPages = Math.max(1, Math.ceil(count / pageSize))
+    return (
+      <>
+        <OrderHistory2
+          orders={orders.map(toBlockOrder)}
+          titleLabel={parsed.titleLabel}
+          descriptionLabel={parsed.descriptionLabel}
+          // The block renders "Total de pedidos: {n}" from the PAGE length; pass a
+          // label without `{n}` so a page length is never shown as the total.
+          totalOrdersLabel={parsed.totalOrdersLabel ?? 'Pedidos'}
+          onViewDetails={(order) =>
+            set('/accountSelectedOrderId', backendIdByBlockId.get(order.id) ?? null)
+          }
+        />
+        {count > pageSize ? (
+          <div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 pb-6 sm:px-6 lg:px-8">
+            <p className="text-muted-foreground text-sm" role="status" aria-live="polite">
+              {`${count} pedidos · página ${page} de ${totalPages}`}
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={pending || page <= 1}
+                onClick={() => loadPage(page - 1)}
+              >
+                Anterior
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={pending || page >= totalPages}
+                onClick={() => loadPage(page + 1)}
+              >
+                Siguiente
+              </Button>
+            </div>
+          </div>
+        ) : null}
+        {selected ? <OrderDetail order={selected} /> : null}
+      </>
+    )
+  },
+}

package/assets/templates/views/account/schema.ts

@@ -0,0 +1,53 @@
+// Thor Commerce view schema fragment: account
+// Zod mirrors of the block contracts for this view — the single source for the
+// catalog entries and the client-side registry parsing (json-render does not
+// validate props against the catalog itself, so the registry parses here).
+// Kept free of React and server imports so the Server Component module and the
+// 'use client' registry can share one contract. Block zod contracts are
+// mirrored, not imported: @thorprovider/blocks ships zod v3 while the scaffold
+// runs zod v4 and cross-major schema assignment breaks the catalog contract.
+
+import { z } from 'zod'
+
+// Mirrors the LoginPage1 optional props. Every prop is optional with a neutral
+// default in the block, so the curated view forwards only the labels it owns.
+export const accountLoginPropsSchema = z.object({
+  logoText: z.string().optional(),
+  welcomeTitleLabel: z.string().optional(),
+  welcomeDescriptionLabel: z.string().optional(),
+  emailLabel: z.string().optional(),
+  passwordLabel: z.string().optional(),
+  signInLabel: z.string().optional(),
+  createAccountLabel: z.string().optional(),
+})
+
+// Mirrors the SignUpPage1 optional props.
+export const accountRegisterPropsSchema = z.object({
+  logoText: z.string().optional(),
+  createAccountTitleLabel: z.string().optional(),
+  createAccountDescriptionLabel: z.string().optional(),
+  fullNameLabel: z.string().optional(),
+  emailLabel: z.string().optional(),
+  passwordLabel: z.string().optional(),
+  createAccountLabel: z.string().optional(),
+  signInLabel: z.string().optional(),
+})
+
+// Mirrors the OrderHistory2 label props the curated view forwards, plus the
+// explicit loading/empty/error copy the registry renders for the orders states.
+export const accountOrdersPropsSchema = z.object({
+  titleLabel: z.string().optional(),
+  descriptionLabel: z.string().optional(),
+  totalOrdersLabel: z.string().optional(),
+  emptyLabel: z.string().optional(),
+  errorLabel: z.string().optional(),
+  loadingLabel: z.string().optional(),
+})
+
+// The headless bootstrap and the signed-in panel read their data from the
+// feature state, not from element props; declared so the catalog is complete.
+export const accountEmptyPropsSchema = z.object({})
+
+export type AccountLoginProps = z.infer<typeof accountLoginPropsSchema>
+export type AccountRegisterProps = z.infer<typeof accountRegisterPropsSchema>
+export type AccountOrdersProps = z.infer<typeof accountOrdersPropsSchema>

package/assets/templates/views/cart/content.ts

@@ -0,0 +1,11 @@
+// Thor Commerce view content: cart (user-owned)
+// Merchant-editable copy for the standalone cart review page. Seeded once by the
+// scaffolder and never overwritten on sync.
+
+export const cartContent = {
+  titleLabel: 'Tu carrito',
+  checkoutLabel: 'Finalizar compra',
+  continueShoppingLabel: 'Seguir comprando',
+  emptyLabel: 'Tu carrito está vacío',
+  readErrorLabel: 'No se pudo cargar tu carrito.',
+}

package/assets/templates/views/cart/data.ts

@@ -0,0 +1,23 @@
+// Thor Commerce view data: cart (user-owned)
+// Pure mapping from the shared host cart state to the ShoppingCart4 block props.
+// No React and no server imports so it can be imported from either boundary.
+
+import type { ShoppingCart4Item } from '@thorprovider/blocks'
+import type { CartLineState } from '../../state'
+
+/**
+ * Maps backend cart lines to the cart block's item shape. `price` stays 0 (the
+ * legacy numeric field) because the block renders the canonical `lineTotal`
+ * Money; an absent image is left undefined rather than serialized as "".
+ */
+export const toCartViewItems = (cart: CartLineState[]): ShoppingCart4Item[] =>
+  cart.map(line => ({
+    id: line.id,
+    name: line.name,
+    price: 0,
+    quantity: line.quantity,
+    image: line.image,
+    variant: line.variant,
+    lineTotal: line.lineTotal,
+    unitPrice: line.unitPrice,
+  }))

package/assets/templates/views/cart/index.tsx

@@ -0,0 +1,53 @@
+// Thor Commerce view: cart
+// The standalone cart review route. Its data comes from the shared host cart
+// state injected on every route (readCartStateForRender), so the loader only
+// reports the data source — no dedicated cart fetch happens here.
+
+import { getDataSource } from '../../store-context'
+import { pageRoot } from '../../spec/page-root'
+import type { StorefrontElement } from '../../spec/types'
+import type { ViewModule } from '../types'
+import { cartViewProps } from './props'
+import { registry } from './registry'
+import { cartViewPropsSchema } from './schema'
+
+const elements: Record<string, StorefrontElement> = {
+  'cart.view': {
+    type: 'CartView',
+    props: cartViewProps,
+    on: {
+      refreshCart: { action: 'refreshCart' },
+      updateQuantity: { action: 'updateQuantity' },
+      removeFromCart: { action: 'removeFromCart' },
+      goToCheckout: { action: 'goToCheckout' },
+      goHome: { action: 'goHome' },
+    },
+  },
+}
+
+const catalog = {
+  CartView: {
+    props: cartViewPropsSchema,
+    description: 'Standalone cart review page with backend-authoritative totals.',
+  },
+}
+
+export const cart: ViewModule = {
+  name: 'cart',
+  elements,
+  catalog,
+  registry,
+  route: {
+    path: '/cart',
+    loaderName: 'cart',
+    layout: 'default',
+    metadata: {
+      title: 'Carrito',
+      description: 'Revisa los artículos de tu carrito antes de finalizar la compra.',
+    },
+    entry: pageRoot('cart', ['cart.view'], elements),
+  },
+  loader: {
+    cart: async () => ({ dataSource: getDataSource(), dataError: null }),
+  },
+}

package/assets/templates/views/cart/props.ts

@@ -0,0 +1,12 @@
+// Thor Commerce view props: cart (user-owned)
+// Element props for the cart review view. The cart lines and backend-authoritative
+// totals are read from the shared host state (injected for every route), so this
+// view needs no dedicated data fetch.
+
+import { cartContent } from './content'
+
+export const cartViewProps = {
+  ...cartContent,
+  items: { $state: '/cart' },
+  totals: { $state: '/cartTotals' },
+}

package/assets/templates/views/cart/registry.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+// Thor Commerce view registry: cart
+// Renders the standalone cart review page (page-mode ShoppingCart4) from the
+// shared host cart state. Quantity updates use the ABSOLUTE line quantity keyed
+// by backend line id; removal uses the same line id. Checkout is only offered
+// when the checkout capability is installed and the cart is ready.
+
+import { Button, ShoppingCart4 } from '@thorprovider/blocks'
+import { isAvailableMoney } from '@thorprovider/blocks/contracts'
+import { useStateStore } from '@json-render/react'
+import { checkoutAvailable } from '../../composition'
+import type { ViewRegistry } from '../types'
+import { toCartViewItems } from './data'
+import { cartViewPropsSchema } from './schema'
+
+export const registry: ViewRegistry = {
+  CartView: ({ props, emit }) => {
+    const { state, set } = useStateStore()
+    const parsed = cartViewPropsSchema.parse(props)
+    const cart = parsed.items
+    const cartError = typeof state.cartError === 'string' ? state.cartError : undefined
+    const readError = typeof state.cartReadError === 'string' ? state.cartReadError : undefined
+    const isPending = state.cartPending === true
+    const errorLabel = cartError ?? readError
+    const totalsState = isPending ? 'pending' : errorLabel ? 'error' : 'idle'
+    // Checkout is offered only when the required backend amounts are present and
+    // valid: a missing/malformed subtotal, total, or line amount blocks it, while
+    // an undetermined shipping amount does not (AC-CART-4.4 / UC-CART-7).
+    const amountsValid =
+      cart.every((line) => isAvailableMoney(line.lineTotal)) &&
+      parsed.totals != null &&
+      isAvailableMoney(parsed.totals.subtotal) &&
+      isAvailableMoney(parsed.totals.total)
+
+    // A read failure with no confirmed lines is not an empty cart: surface it as
+    // a recoverable error rather than the empty state.
+    if (readError && cart.length === 0) {
+      return (
+        <section className='mx-auto max-w-3xl px-4 py-8'>
+          <div role='alert' className='flex flex-col items-start gap-3'>
+            <p className='text-destructive text-sm'>{parsed.readErrorLabel ?? readError}</p>
+            <Button variant='outline' size='sm' onClick={() => emit('refreshCart')}>
+              Reintentar
+            </Button>
+          </div>
+        </section>
+      )
+    }
+
+    return (
+      <ShoppingCart4
+        presentation='page'
+        items={toCartViewItems(cart)}
+        promotions={[]}
+        totals={parsed.totals ?? undefined}
+        totalsState={totalsState}
+        totalsErrorLabel={errorLabel}
+        titleLabel={parsed.titleLabel}
+        checkoutLabel={parsed.checkoutLabel}
+        continueShoppingLabel={parsed.continueShoppingLabel}
+        emptyLabel={parsed.emptyLabel}
+        onRetryTotals={() => emit('refreshCart')}
+        onQuantityChange={(id, quantity) => {
+          const line = cart.find(item => item.id === id)
+          if (!line) return
+          set('/qtyUpdate', { id, merchandiseId: line.merchandiseId, quantity })
+          emit('updateQuantity')
+        }}
+        onRemove={id => {
+          set('/lastRemoved', id)
+          emit('removeFromCart')
+        }}
+        onCheckout={() => emit('goToCheckout')}
+        onContinueShopping={() => emit('goHome')}
+        checkoutUnavailable={!checkoutAvailable}
+        checkoutDisabled={isPending || Boolean(errorLabel) || cart.length === 0 || !amountsValid}
+      />
+    )
+  },
+}