@thorprovider/blocks 0.1.2 → 0.1.3

package/src/blocks/marketing/navbars/navbar-4-account-menu.tsx

@@ -15,7 +15,7 @@ import {
 export interface StoreUser {
   name: string
   email: string
-  avatar: string
+  avatar?: string
   initials: string
 }
 
@@ -33,6 +33,7 @@ export interface Navbar4AccountMenuProps {
   items?: AccountMenuItem[]
   onHelp?: () => void
   onSignOut?: () => void
+  pending?: boolean
 }
 
 const accountIcons = {
@@ -47,6 +48,7 @@ export function Navbar4AccountMenu({
   items = [],
   onHelp,
   onSignOut,
+  pending = false,
 }: Navbar4AccountMenuProps) {
   if (!user) {
     return null
@@ -58,7 +60,8 @@ export function Navbar4AccountMenu({
         <Button
           variant='ghost'
           size='icon'
-          className='rounded-full'
+          className='size-11 rounded-full'
+          disabled={pending}
           aria-label={`Account menu for ${user.name}`}
         >
           <Avatar size='sm' className='pointer-events-none size-8'>
@@ -85,11 +88,11 @@ export function Navbar4AccountMenu({
               </div>
             </div>
           </DropdownMenuLabel>
-          <DropdownMenuSeparator />
+          {items.length > 0 ? <DropdownMenuSeparator /> : null}
           {items.map(item => {
             const Icon = item.icon ? accountIcons[item.icon] : Package
             return (
-              <DropdownMenuItem key={item.href} asChild className='gap-2.5 px-2 py-2'>
+              <DropdownMenuItem key={item.href} asChild disabled={pending} className='gap-2.5 px-2 py-2'>
                 <a href={item.href}>
                   <Icon className='text-muted-foreground size-4' />
                   <span className='flex min-w-0 flex-col'>
@@ -102,17 +105,30 @@ export function Navbar4AccountMenu({
               </DropdownMenuItem>
             )
           })}
-          <DropdownMenuSeparator />
-          <DropdownMenuItem className='gap-2.5 px-2 py-2' onSelect={onHelp}>
-            <HelpCircle className='text-muted-foreground size-4' />
-            Help & support
-          </DropdownMenuItem>
-          <DropdownMenuItem variant='destructive' className='gap-2.5 px-2 py-2' onSelect={onSignOut}>
-            <LogOut className='size-4' />
-            Sign out
-          </DropdownMenuItem>
+          {onHelp || onSignOut ? <DropdownMenuSeparator /> : null}
+          {onHelp ? (
+            <DropdownMenuItem
+              disabled={pending}
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onHelp() }}
+            >
+              <HelpCircle className='text-muted-foreground size-4' />
+              Help & support
+            </DropdownMenuItem>
+          ) : null}
+          {onSignOut ? (
+            <DropdownMenuItem
+              disabled={pending}
+              variant='destructive'
+              className='gap-2.5 px-2 py-2'
+              onSelect={() => { if (!pending) onSignOut() }}
+            >
+              <LogOut className='size-4' />
+              Sign out
+            </DropdownMenuItem>
+          ) : null}
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
   )
-}
+}

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.test.tsx

@@ -52,3 +52,153 @@ describe('Navbar4CartSheet — authoritative subtotal', () => {
     expect(html).toContain('$90.00')
   })
 })
+
+describe('Navbar4CartSheet — canonical line amounts', () => {
+  it('renders the canonical backend line amount in its currency, not price times qty', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], price: 0, lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).toContain('EUR 90.00')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('never falls back to a numeric amount when a canonical line amount is missing', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], price: 45, lineTotal: undefined }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).not.toContain('$90.00')
+    expect(html).toContain('—')
+  })
+
+  it('shows the unavailable label for a malformed canonical line amount', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], lineTotal: { amount: '', currencyCode: 'USD' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        canonical
+        formatMoney={formatMoney}
+      />,
+    )
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('—')
+  })
+
+  it('preserves legacy numeric rendering when canonical mode is omitted', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={[{ ...items[0], lineTotal: { amount: '90.00', currencyCode: 'EUR' } }]}
+        onQtyChange={noop}
+        onRemove={noop}
+        formatPrice={value => `$${value.toFixed(2)}`}
+      />,
+    )
+    expect(html).toContain('$90.00')
+    expect(html).not.toContain('EUR 90.00')
+  })
+})
+
+describe('Navbar4CartSheet — read/mutation lifecycle', () => {
+  it('shows a pending state instead of claiming an empty cart', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(html).toContain('Actualizando el carrito')
+    expect(html).not.toContain('Your cart is empty')
+  })
+
+  it('shows a recoverable error state with its retry action', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        state='error'
+        errorLabel='No se pudo leer el carrito.'
+        retryLabel='Reintentar'
+        onRetry={noop}
+      />,
+    )
+    expect(html).toContain('No se pudo leer el carrito.')
+    expect(html).toContain('Reintentar')
+    expect(html).toContain('role="alert"')
+  })
+
+  it('disables mutation controls while pending', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(html).toContain('aria-label="Increase quantity, Taladro"')
+    expect(html).toContain('disabled')
+  })
+})
+
+describe('Navbar4CartSheet — action availability', () => {
+  it('suppresses the checkout action when checkout is not installed', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        checkoutUnavailable
+        onCheckout={noop}
+      />,
+    )
+    expect(html).not.toContain('>Checkout</button>')
+    expect(html).toContain('View cart')
+  })
+
+  it('disables the checkout action while the cart is not ready', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} checkoutDisabled onCheckout={noop} />,
+    )
+    expect(html).toContain('>Checkout</button>')
+    expect(html).toMatch(/disabled[^>]*>Checkout<\/button>/)
+  })
+
+  it('suppresses the review action when the cart view is not installed', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet
+        items={items}
+        onQtyChange={noop}
+        onRemove={noop}
+        viewCartUnavailable
+        onViewCart={noop}
+      />,
+    )
+    expect(html).not.toContain('View cart')
+  })
+})
+
+describe('Navbar4CartSheet — accessibility', () => {
+  it('names the line mutation controls', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} />,
+    )
+    expect(html).toMatch(/aria-label="[^"]*(Increase|Decrease|Aumentar|Disminuir)[^"]*"/)
+    expect(html).toMatch(/aria-label="[^"]*(Remove|Quitar)[^"]*"/)
+  })
+
+  it('announces pending reads politely and errors as an alert', () => {
+    const pending = renderToStaticMarkup(
+      <Navbar4CartSheet items={[]} onQtyChange={noop} onRemove={noop} state='pending' />,
+    )
+    expect(pending).toMatch(/role="status"[^>]*aria-live="polite"/)
+    const error = renderToStaticMarkup(
+      <Navbar4CartSheet items={items} onQtyChange={noop} onRemove={noop} state='error' />,
+    )
+    expect(error).toMatch(/role="alert"/)
+  })
+})

package/src/blocks/marketing/navbars/navbar-4-cart-sheet.tsx

@@ -27,8 +27,16 @@ export interface CartItem {
   qty: number
   /** Optional; an absent image is omitted rather than serialized as `""`. */
   image?: string
+  /**
+   * Canonical backend line amount. Required for truthful rendering in
+   * `canonical` mode; when absent/invalid the line shows the unavailable
+   * label rather than a numeric fallback.
+   */
+  lineTotal?: Money
 }
 
+export type CartSheetState = 'idle' | 'pending' | 'error'
+
 export interface Navbar4CartSheetProps {
   items: CartItem[]
   /**
@@ -49,6 +57,31 @@ export interface Navbar4CartSheetProps {
   formatPrice?: (value: number) => string
   onCheckout?: () => void
   onViewCart?: () => void
+  /**
+   * Backend-authoritative rendering. When `true`, each line amount comes from
+   * the item's canonical `lineTotal` Money and the sheet never recomputes
+   * `price * qty`. When omitted/false, legacy numeric rendering is preserved
+   * for standalone consumers.
+   */
+  canonical?: boolean
+  /** Shown in `canonical` mode when a line amount is missing or malformed. */
+  lineUnavailableLabel?: string
+  /** Cart read/mutation lifecycle. Pending retains confirmed lines; error is recoverable. */
+  state?: CartSheetState
+  /** Message shown when `state` is `error`. */
+  errorLabel?: string
+  /** Label for the recovery action in the error state. */
+  retryLabel?: string
+  /** Recovery action invoked from the error state. */
+  onRetry?: () => void
+  /** Label shown while `state` is `pending`. */
+  pendingLabel?: string
+  /** When `true`, the checkout action is suppressed (checkout not installed). */
+  checkoutUnavailable?: boolean
+  /** When `true`, the checkout action is disabled (cart not ready / invalid amounts). */
+  checkoutDisabled?: boolean
+  /** When `true`, the review action is suppressed (cart view not installed). */
+  viewCartUnavailable?: boolean
 }
 
 const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
@@ -81,12 +114,24 @@ export function Navbar4CartSheet({
   formatPrice,
   onCheckout,
   onViewCart,
+  canonical = false,
+  lineUnavailableLabel = '—',
+  state = 'idle',
+  errorLabel = 'No se pudo actualizar el carrito.',
+  retryLabel = 'Reintentar',
+  onRetry,
+  pendingLabel = 'Actualizando el carrito…',
+  checkoutUnavailable = false,
+  checkoutDisabled = false,
+  viewCartUnavailable = false,
 }: Navbar4CartSheetProps) {
   const reduceMotion = useReducedMotion()
   const format = formatPrice ?? (value => usdFormatter.format(value))
   const localSubtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
   const authoritativeSubtotal = subtotalProp !== undefined ? formatMoney(subtotalProp, formatMoneyProp) : null
   const isEmpty = items.length === 0
+  const isPending = state === 'pending'
+  const isError = state === 'error'
   /** Wait for the last cart row's exit before revealing empty copy. */
   const [showEmpty, setShowEmpty] = useState(isEmpty)
 
@@ -96,9 +141,46 @@ export function Navbar4CartSheet({
     }
   }, [isEmpty])
 
+  const lineAmount = (item: CartItem): string => {
+    if (canonical) {
+      if (item.lineTotal === undefined) {
+        return lineUnavailableLabel
+      }
+      return formatMoney(item.lineTotal, formatMoneyProp) ?? lineUnavailableLabel
+    }
+    return format(item.price * item.qty)
+  }
+
+  // A confirmed empty cart is only claimed when no read/mutation is in flight
+  // and no read error is outstanding; otherwise the sheet shows loading/error.
+  const showConfirmedEmpty = showEmpty && !isPending && !isError
+  const mutationsDisabled = isPending
+
   return (
     <>
       <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
+        {isPending ? (
+          <p
+            role='status'
+            aria-live='polite'
+            className='border-border text-muted-foreground border-b px-4 py-2 text-sm'
+          >
+            {pendingLabel}
+          </p>
+        ) : null}
+        {isError ? (
+          <div
+            role='alert'
+            className='border-border flex items-center justify-between gap-2 border-b px-4 py-2 text-sm'
+          >
+            <span className='text-destructive'>{errorLabel}</span>
+            {onRetry ? (
+              <Button variant='ghost' size='sm' onClick={onRetry}>
+                {retryLabel}
+              </Button>
+            ) : null}
+          </div>
+        ) : null}
         <ul className='flex-1 overflow-y-auto px-4'>
           <AnimatePresence
             initial={false}
@@ -139,7 +221,7 @@ export function Navbar4CartSheet({
                         <p className='text-muted-foreground text-sm'>{item.variant}</p>
                       ) : null}
                     </div>
-                    <p className='text-sm font-medium'>{format(item.price * item.qty)}</p>
+                    <p className='text-sm font-medium'>{lineAmount(item)}</p>
                   </div>
 
                   <div className='mt-auto flex items-center justify-between pt-2'>
@@ -149,6 +231,7 @@ export function Navbar4CartSheet({
                         size='icon'
                         className='size-8 rounded-r-none'
                         aria-label={`Decrease quantity, ${item.name}`}
+                        disabled={mutationsDisabled}
                         onClick={() => onQtyChange(item.id, -1)}
                       >
                         <Minus />
@@ -159,6 +242,7 @@ export function Navbar4CartSheet({
                         size='icon'
                         className='size-8 rounded-l-none'
                         aria-label={`Increase quantity, ${item.name}`}
+                        disabled={mutationsDisabled}
                         onClick={() => onQtyChange(item.id, 1)}
                       >
                         <Plus />
@@ -169,6 +253,7 @@ export function Navbar4CartSheet({
                       size='sm'
                       className='text-muted-foreground hover:text-foreground'
                       aria-label={`Remove ${item.name} from cart`}
+                      disabled={mutationsDisabled}
                       onClick={() => onRemove(item.id)}
                     >
                       Remove
@@ -181,7 +266,7 @@ export function Navbar4CartSheet({
         </ul>
 
         <AnimatePresence>
-          {showEmpty ? (
+          {showConfirmedEmpty ? (
             <motion.div
               key='empty'
               initial={false}
@@ -257,19 +342,27 @@ export function Navbar4CartSheet({
           <div className='flex items-center justify-between text-sm'>
             <span className='text-muted-foreground'>Subtotal</span>
             <span className='font-medium tabular-nums'>
-              {subtotalProp !== undefined
+              {canonical || subtotalProp !== undefined
                 ? authoritativeSubtotal ?? subtotalUnavailableLabel
                 : format(localSubtotal)}
             </span>
           </div>
           <p className='text-muted-foreground text-xs'>Shipping and taxes are calculated at checkout.</p>
           <div className='flex flex-col gap-2'>
-            <Button className='w-full' onClick={onCheckout}>
-              Checkout
-            </Button>
-            <Button variant='ghost' className='w-full' onClick={onViewCart}>
-              View cart
-            </Button>
+            {checkoutUnavailable ? null : (
+              <Button
+                className='w-full'
+                disabled={checkoutDisabled || isPending}
+                onClick={onCheckout}
+              >
+                Checkout
+              </Button>
+            )}
+            {viewCartUnavailable ? null : (
+              <Button variant='ghost' className='w-full' onClick={onViewCart}>
+                View cart
+              </Button>
+            )}
           </div>
         </div>
       ) : null}

package/src/blocks/marketing/navbars/navbar-4.test.tsx

@@ -1,6 +1,8 @@
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, expect, it } from 'vitest'
 import { Navbar4 } from './navbar-4'
+import { Navbar4AccountMenu } from './navbar-4-account-menu'
+import { navbar4PropsSchema } from '../../../lib/contracts'
 
 const base = {
   storeCategories: [],
@@ -9,6 +11,52 @@ const base = {
   logoText: 'ElectroCuba',
 }
 
+describe('Navbar4 — account affordance', () => {
+  const user = { name: 'Ada Lovelace', email: 'ada@example.test', initials: 'AL' }
+
+  it('offers a visible account destination to anonymous shoppers', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} accountHref="/account" />)
+    expect(html).toMatch(/<a[^>]*href="\/account"[^>]*aria-label="Account"/)
+  })
+
+  it('renders the identity trigger without a desktop-only wrapper or empty image', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} user={user} />)
+    expect(html).toContain('Account menu for Ada Lovelace')
+    expect(html).not.toMatch(/<div class="hidden lg:block"><button[^>]*aria-label="Account/)
+    expect(html).not.toContain('src=""')
+  })
+
+  it('renders no account control without identity or destination', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    expect(html).not.toContain('aria-label="Account')
+    expect(renderToStaticMarkup(<Navbar4AccountMenu />)).toBe('')
+  })
+
+  it('disables the identity trigger while a session operation is pending', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} user={user} accountPending />)
+    expect(html).toMatch(/<button[^>]*disabled=""[^>]*aria-label="Account menu for Ada Lovelace"/)
+  })
+
+  it('distinguishes unavailable identity from anonymous and offers retry', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} accountHref="/account" accountUnavailable onAccountRetry={() => {}} />,
+    )
+    expect(html).toContain('aria-label="Retry account session"')
+    expect(html).not.toContain('aria-label="Account"')
+  })
+
+  it('keeps serializable identity and feedback while stripping callbacks', () => {
+    const parsed = navbar4PropsSchema.parse({
+      ...base, user, accountHref: '/account', accountMenuItems: [{ label: 'Account', href: '/account' }],
+      accountPending: true, accountUnavailable: true, onSignOut: () => {},
+    })
+    expect(parsed.user).toEqual(user)
+    expect(parsed.accountPending).toBe(true)
+    expect(parsed.accountUnavailable).toBe(true)
+    expect(parsed).not.toHaveProperty('onSignOut')
+  })
+})
+
 describe('Navbar4 — optional logo accent', () => {
   it('renders the wordmark unchanged when no accent is supplied', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)
@@ -47,6 +95,53 @@ describe('Navbar4 — optional logo accent', () => {
   })
 })
 
+describe('Navbar4 — optional utility strip', () => {
+  // The desktop utility strip is the only element with this inner track class.
+  const strip = (html: string) => html.includes('h-9 w-full max-w-7xl')
+
+  it('renders no utility strip when the note is empty and there are no utility links', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 storeCategories={[]} shippingNote='' utilityLinks={[]} logoText='ElectroCuba' />,
+    )
+    expect(strip(html)).toBe(false)
+  })
+
+  it('renders no utility strip when the note is omitted', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 storeCategories={[]} utilityLinks={[]} logoText='ElectroCuba' />,
+    )
+    expect(strip(html)).toBe(false)
+  })
+
+  it('treats a whitespace-only note as empty', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 storeCategories={[]} shippingNote='   ' utilityLinks={[]} logoText='ElectroCuba' />,
+    )
+    expect(strip(html)).toBe(false)
+  })
+
+  it('renders the utility strip with a non-empty note', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 storeCategories={[]} shippingNote='Entrega segura' utilityLinks={[]} logoText='ElectroCuba' />,
+    )
+    expect(strip(html)).toBe(true)
+    expect(html).toContain('Entrega segura')
+  })
+
+  it('renders the utility strip when there is a utility link even with an empty note', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4
+        storeCategories={[]}
+        shippingNote=''
+        utilityLinks={[{ label: 'Ayuda', href: '/help' }]}
+        logoText='ElectroCuba'
+      />,
+    )
+    expect(strip(html)).toBe(true)
+    expect(html).toContain('Ayuda')
+  })
+})
+
 const category = { href: '/herramientas', label: 'Herramientas' }
 
 // The desktop nav link (the mobile drawer also emits an anchor for the same
@@ -86,6 +181,32 @@ describe('Navbar4 — optional outer surface className', () => {
   })
 })
 
+const cartTrigger = (html: string) =>
+  html.match(/<button[^>]*aria-label="Cart,[^"]*"[^>]*>/)?.[0] ?? ''
+
+describe('Navbar4 — controlled cart sheet visibility', () => {
+  it('keeps the uncontrolled sheet closed by default (legacy consumers unaffected)', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} />)
+    expect(cartTrigger(html)).toContain('data-state="closed"')
+  })
+
+  it('reflects a controlled open state on the trigger', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} cartOpen={true} onCartOpenChange={() => {}} />,
+    )
+    expect(cartTrigger(html)).toContain('data-state="open"')
+    expect(cartTrigger(html)).toContain('aria-expanded="true"')
+  })
+
+  it('reflects a controlled closed state on the trigger', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} cartOpen={false} onCartOpenChange={() => {}} />,
+    )
+    expect(cartTrigger(html)).toContain('data-state="closed"')
+    expect(cartTrigger(html)).toContain('aria-expanded="false"')
+  })
+})
+
 describe('Navbar4 — optional showSearch (E2 task 5.4)', () => {
   it('renders the search control by default (legacy consumers unaffected)', () => {
     const html = renderToStaticMarkup(<Navbar4 {...base} />)