@thorprovider/blocks 0.1.1 → 0.1.3

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

@@ -15,24 +15,73 @@ import {
 } from '../../../ui/empty'
 import { Separator } from '../../../ui/separator'
 import { SheetClose } from '../../../ui/sheet'
+import type { Money } from '@thorprovider/types'
+import { formatMoney } from '../../../lib/money'
 
 export interface CartItem {
+  /** Backend cart line-item id — the stable identity for update/removal. */
   id: string
   name: string
-  variant: string
+  variant?: string
   price: number
   qty: number
-  image: string
+  /** 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[]
+  /**
+   * Quantity DELTA for a backend cart line-item id. The boundary converts the
+   * delta into an absolute quantity against the authoritative current line
+   * quantity before mutating the cart.
+   */
   onQtyChange: (id: string, delta: number) => void
+  /** Remove the backend cart line-item id. */
   onRemove: (id: string) => void
-  /** Override price formatting (locale, currency). Defaults to USD. */
+  /** Authoritative backend subtotal. Preferred over any local line math. */
+  subtotal?: Money
+  /** Shown when an authoritative subtotal is supplied but absent/malformed. */
+  subtotalUnavailableLabel?: string
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
+  /** @deprecated legacy numeric formatter; ignored when `subtotal` is supplied. */
   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' })
@@ -59,14 +108,30 @@ export function Navbar4CartSheet({
   items,
   onQtyChange,
   onRemove,
+  subtotal: subtotalProp,
+  subtotalUnavailableLabel = '—',
+  formatMoney: formatMoneyProp,
   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 subtotal = items.reduce((total, item) => total + item.price * item.qty, 0)
+  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)
 
@@ -76,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}
@@ -100,20 +202,26 @@ export function Navbar4CartSheet({
                 className='border-border flex gap-4 border-b py-4 last:border-b-0'
                 style={{ willChange: 'transform, opacity, filter' }}
               >
-                <img
-                  src={item.image || undefined}
-                  alt=''
-                  width={80}
-                  height={96}
-                  className='bg-muted size-20 shrink-0 rounded-md object-cover'
-                />
+                {item.image ? (
+                  <img
+                    src={item.image || undefined}
+                    alt=''
+                    width={80}
+                    height={96}
+                    className='bg-muted size-20 shrink-0 rounded-md object-cover'
+                  />
+                ) : (
+                  <div aria-hidden='true' className='bg-muted size-20 shrink-0 rounded-md' />
+                )}
                 <div className='flex min-w-0 flex-1 flex-col'>
                   <div className='flex items-start justify-between gap-2'>
                     <div className='min-w-0'>
                       <p className='truncate text-sm font-medium'>{item.name}</p>
-                      <p className='text-muted-foreground text-sm'>{item.variant}</p>
+                      {item.variant ? (
+                        <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'>
@@ -123,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 />
@@ -133,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 />
@@ -143,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
@@ -155,7 +266,7 @@ export function Navbar4CartSheet({
         </ul>
 
         <AnimatePresence>
-          {showEmpty ? (
+          {showConfirmedEmpty ? (
             <motion.div
               key='empty'
               initial={false}
@@ -230,16 +341,28 @@ export function Navbar4CartSheet({
           <Separator />
           <div className='flex items-center justify-between text-sm'>
             <span className='text-muted-foreground'>Subtotal</span>
-            <span className='font-medium tabular-nums'>{format(subtotal)}</span>
+            <span className='font-medium tabular-nums'>
+              {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

@@ -0,0 +1,233 @@
+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: [],
+  shippingNote: 'Entrega segura',
+  utilityLinks: [],
+  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} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('text-brand-promo')
+  })
+
+  it('accents a matched trailing segment without duplicating the wordmark', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+    expect(html.match(/Electro/g)).toHaveLength(1)
+    expect(html.match(/Cuba/g)).toHaveLength(1)
+  })
+
+  it('accents the full wordmark when the accent covers all of it', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoAccent={{ text: 'ElectroCuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('<span class="text-brand-promo">ElectroCuba</span>')
+  })
+
+  it('does not accent when the segment is not a trailing match', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} logoAccent={{ text: 'Electro' }} />)
+    expect(html).toContain('>ElectroCuba</span>')
+    expect(html).not.toContain('<span class="">')
+  })
+
+  it('keeps the wordmark as the accessible text of the logo link', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} logoHref='/' logoAccent={{ text: 'Cuba', className: 'text-brand-promo' }} />,
+    )
+    expect(html).toContain('href="/"')
+    expect(html).toContain('Electro<span class="text-brand-promo">Cuba</span>')
+  })
+})
+
+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
+// href, but only the desktop nav link carries `hover:bg-muted`).
+const navLinkClass = (html: string) =>
+  html.match(/<a href="\/herramientas" class="([^"]*hover:bg-muted[^"]*)"/)?.[1] ?? ''
+
+describe('Navbar4 — optional outer surface className', () => {
+  it('keeps the default surface (incl. backdrop-filter variant) and nav link color when className is omitted', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} storeCategories={[category]} />)
+    expect(html).toContain('bg-background/95')
+    expect(html).toContain('supports-backdrop-filter:bg-background/80')
+    expect(navLinkClass(html)).toContain('text-foreground')
+    expect(navLinkClass(html)).not.toContain('hover:text-foreground')
+  })
+
+  it('gives the consumer full surface ownership when className is supplied (no default background or variant)', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(html).toContain('bg-brand-nav')
+    expect(html).toContain('text-brand-nav-foreground')
+    expect(html).not.toContain('bg-background/95')
+    expect(html).not.toContain('supports-backdrop-filter:bg-background/80')
+    // Layout/border/sticky/backdrop classes stay internal and present.
+    expect(html).toContain('border-border')
+    expect(html).toContain('sticky')
+    expect(html).toContain('backdrop-blur-md')
+  })
+
+  it('lets nav links inherit the branded surface text color with a correct hover foreground', () => {
+    const html = renderToStaticMarkup(
+      <Navbar4 {...base} storeCategories={[category]} className='bg-brand-nav text-brand-nav-foreground' />,
+    )
+    expect(navLinkClass(html)).toContain('text-inherit')
+    expect(navLinkClass(html)).toContain('hover:text-foreground')
+  })
+})
+
+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} />)
+    expect(html).toContain('role="search"')
+    expect(html).toContain('type="search"')
+    expect(html).toContain('aria-label="Search products"')
+  })
+
+  it('renders no search control when showSearch is false, keeping the rest of the chrome', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={false} />)
+    expect(html).not.toContain('role="search"')
+    expect(html).not.toContain('type="search"')
+    expect(html).not.toContain('aria-label="Search products"')
+    // Non-search chrome is unaffected: the wordmark and cart trigger remain.
+    expect(html).toContain('ElectroCuba')
+    expect(html).toContain('aria-label="Cart, 0 items"')
+  })
+
+  it('renders the search control when showSearch is explicitly true', () => {
+    const html = renderToStaticMarkup(<Navbar4 {...base} showSearch={true} />)
+    expect(html).toContain('role="search"')
+    expect(html).toContain('type="search"')
+  })
+})