@thorprovider/blocks 0.1.3 → 2.0.0

package/src/blocks/e-commerce/reviews/review-rating-2.tsx

@@ -15,7 +15,6 @@ import {
   type CarouselApi,
 } from '../../../ui/carousel'
 import { Progress } from '../../../ui/progress'
-import { ProductCard3ReactionToggle } from '../product-list/product-card-3-reaction-toggle'
 
 export interface Review {
   id: string
@@ -194,11 +193,11 @@ export function ReviewRating2({
                             className="h-8 px-3 text-xs text-muted-foreground hover:bg-primary/10 hover:text-primary cursor-pointer"
                             aria-label={likesLabel}
                           >
-                            <ProductCard3ReactionToggle
-                              active={!!isLiked[review.id]}
-                              icon={ThumbsUp}
-                              iconClassName='size-4'
-                              activeColorClassName='text-primary'
+                            <ThumbsUp
+                              className={cn(
+                                'size-4',
+                                isLiked[review.id] && 'text-primary',
+                              )}
                             />
                             {formatNumber((review.likes ?? 0) + (isLiked[review.id] ? 1 : 0))}
                           </Button>

package/src/blocks/e-commerce/shopping-carts/shopping-cart.test.tsx

@@ -0,0 +1,399 @@
+// @vitest-environment jsdom
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import userEvent from '@testing-library/user-event'
+import { Zap } from 'lucide-react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { ShoppingCart, type ShoppingCartProps } from './shopping-cart'
+import type { CartTotals, ShoppingCartItem } from '../../../lib/contracts'
+
+;(globalThis as Record<string, unknown>).IS_REACT_ACT_ENVIRONMENT = true
+
+// jsdom lacks browser APIs some shadcn/ui primitives probe on mount.
+if (!window.matchMedia) {
+  window.matchMedia = ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    addListener: () => {},
+    removeListener: () => {},
+    dispatchEvent: () => false,
+  })) as unknown as typeof window.matchMedia
+}
+if (!('IntersectionObserver' in window)) {
+  ;(window as Record<string, unknown>).IntersectionObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+    takeRecords() {
+      return []
+    }
+  }
+}
+
+const usd = (amount: string) => ({ amount, currencyCode: 'USD' })
+
+const items: ShoppingCartItem[] = [
+  {
+    id: 'line_1',
+    name: 'Taladro',
+    quantity: 2,
+    image: 'https://cdn.example/taladro.jpg',
+    unitPrice: usd('45.00'),
+    lineTotal: usd('90.00'),
+  },
+  { id: 'line_2', name: 'Batería', quantity: 1, unitPrice: usd('20.00'), lineTotal: usd('20.00') },
+]
+
+const totals: CartTotals = {
+  subtotal: usd('110.00'),
+  discount: usd('10.00'),
+  tax: usd('8.00'),
+  shipping: usd('0'),
+  total: usd('108.00'),
+}
+
+const formatMoney = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+const renderMarkup = (props: ShoppingCartProps) => renderToStaticMarkup(<ShoppingCart {...props} />)
+
+describe('ShoppingCart — renders from authoritative cart data', () => {
+  it('renders supplied backend totals verbatim (no local arithmetic)', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).toContain('USD 110.00')
+    expect(html).toContain('USD 10.00')
+    expect(html).toContain('USD 8.00')
+    expect(html).toContain('Gratis')
+    expect(html).toContain('USD 108.00')
+  })
+
+  it('does not invent subtotal or total when none are supplied', () => {
+    const html = renderMarkup({ items, promotions: [], formatMoney })
+    expect(html).not.toContain('Subtotal')
+    expect(html).not.toContain('Total')
+  })
+
+  it('renders a controlled pending state', () => {
+    const html = renderMarkup({ items, promotions: [], totalsState: 'pending' })
+    expect(html).toContain('Actualizando totales')
+  })
+
+  it('renders a controlled error state with a recovery action', () => {
+    const html = renderMarkup({ items, promotions: [], totalsState: 'error', onRetryTotals: () => {} })
+    expect(html).toContain('No se pudieron actualizar los totales')
+    expect(html).toContain('Reintentar')
+  })
+
+  it('never renders a fake zero for absent or malformed required totals', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals: { subtotal: { amount: '', currencyCode: 'USD' }, total: { amount: 'abc', currencyCode: 'USD' } },
+      formatMoney,
+    })
+    expect(html).not.toContain('USD 0')
+    expect(html).toContain('Totales no disponibles')
+  })
+
+  it('preserves a legitimate zero total', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals: { subtotal: usd('0'), total: usd('0') },
+      formatMoney,
+    })
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Totales no disponibles')
+  })
+
+  it('renders the authoritative line total verbatim, never unit price × quantity', () => {
+    const html = renderMarkup({
+      items: [
+        { id: 'line_x', name: 'Pieza', quantity: 1, unitPrice: usd('10.00'), lineTotal: usd('10.00') },
+        { id: 'line_y', name: 'Set', quantity: 3, unitPrice: usd('10.00'), lineTotal: usd('25.00') },
+      ],
+      promotions: [],
+      totals,
+      formatMoney,
+    })
+    expect(html).toContain('>USD 10.00<')
+    expect(html).toContain('>USD 25.00<')
+    expect(html).not.toContain('>USD 30')
+    expect(html).not.toContain('—')
+  })
+
+  it('shows an unavailable marker (not zero) for a malformed line total', () => {
+    const html = renderMarkup({
+      items: [{ id: 'line_x', name: 'Pieza', quantity: 1, unitPrice: usd('10.00'), lineTotal: { amount: '', currencyCode: 'USD' } }],
+      promotions: [],
+      totals,
+      formatMoney,
+    })
+    expect(html).toContain('—')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('renders absolute quantities from props (cart contract, not a delta)', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).toContain('>2<')
+    expect(html).toContain('>1<')
+  })
+})
+
+describe('ShoppingCart — optional fields are omitted, not emptied', () => {
+  it('omits an absent line image without emitting an empty src', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).not.toMatch(/src=""/)
+  })
+
+  it('renders no delivery estimate, express controls, or suggestions when absent', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).not.toContain('Entrega estimada')
+    expect(html).not.toContain('Apple Pay')
+    expect(html).not.toContain('Google Pay')
+    expect(html).not.toContain('Compra rápida')
+    expect(html).not.toContain('Vistos recientemente')
+  })
+
+  it('omits the promo entry affordance when no callback is supplied', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).not.toContain('código de descuento')
+  })
+})
+
+describe('ShoppingCart — truthful evidence only', () => {
+  it('renders host-supplied suggestions with Money prices and omits absent fields', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      formatMoney,
+      recentlyViewed: [
+        { id: 'p1', name: 'Mouse', image: '/demo/mouse.svg', unitPrice: usd('5.00') },
+        { id: 'p2', name: 'Cable' },
+      ],
+    })
+    expect(html).toContain('Vistos recientemente')
+    expect(html).toContain('USD 5.00')
+    expect(html).not.toMatch(/src=""/)
+    expect(html).not.toContain('$')
+  })
+
+  it('derives the display currency from the authoritative Money subtotal', () => {
+    const eur = (amount: string) => ({ amount, currencyCode: 'EUR' })
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals: { subtotal: eur('110.00'), discount: eur('10.00'), tax: eur('8.00'), shipping: eur('0'), total: eur('108.00') },
+    })
+    expect(html).toMatch(/(?:EUR|€)\s?110\.00/)
+    expect(html).toMatch(/(?:EUR|€)\s?108\.00/)
+  })
+
+  it('renders host-supplied promotion progress and activated copy from data', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [{ threshold: 200, reward: 'Envío gratis', icon: Zap }],
+      totals,
+      formatMoney,
+    })
+    expect(html).toContain('Te faltan')
+    expect(html).toContain('Envío gratis')
+  })
+})
+
+describe('ShoppingCart — actions are reported, not owned', () => {
+  let container: HTMLElement
+  let root: Root
+  let user: ReturnType<typeof userEvent.setup>
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    user = userEvent.setup()
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
+
+  const mount = (props: ShoppingCartProps) => {
+    act(() => {
+      root.render(<ShoppingCart {...props} />)
+    })
+  }
+
+  it('reports absolute quantity changes keyed by the backend line id', async () => {
+    const onQuantityChange = vi.fn()
+    mount({ items, promotions: [], totals, onQuantityChange })
+    const increase = container.querySelector('button[aria-label="Aumentar cantidad, Taladro"]')!
+    await user.click(increase)
+    expect(onQuantityChange).toHaveBeenCalledWith('line_1', 3)
+    const decrease = container.querySelector('button[aria-label="Disminuir cantidad, Taladro"]')!
+    await user.click(decrease)
+    expect(onQuantityChange).toHaveBeenCalledWith('line_1', 1)
+  })
+
+  it('reports removals keyed by the backend line id', async () => {
+    const onRemove = vi.fn()
+    mount({ items, promotions: [], totals, onRemove })
+    await user.click(container.querySelector('button[aria-label="Quitar Taladro"]')!)
+    expect(onRemove).toHaveBeenCalledWith('line_1')
+  })
+
+  it('reports the promo code to the host and never resolves it locally', async () => {
+    const onApplyPromo = vi.fn()
+    mount({ items, promotions: [], totals, onApplyPromo })
+    const input = container.querySelector('input')!
+    await user.type(input, 'X10')
+    await user.click(container.querySelector('button[type="submit"]')!)
+    expect(onApplyPromo).toHaveBeenCalledWith('X10')
+    expect((input as HTMLInputElement).value).toBe('')
+  })
+
+  it('does not invent an applied-discount row from the entered code', async () => {
+    const onApplyPromo = vi.fn()
+    mount({ items, promotions: [], totals, onApplyPromo, formatMoney })
+    const input = container.querySelector('input')!
+    await user.type(input, 'X10')
+    await user.click(container.querySelector('button[type="submit"]')!)
+    expect(onApplyPromo).toHaveBeenCalledTimes(1)
+    expect(container.querySelector('input')!.value).toBe('')
+  })
+})
+
+describe('ShoppingCart — presentation and action availability', () => {
+  it('defaults to the compact collapsible card', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).toContain('max-w-md')
+    expect(html).toContain('Contraer carrito')
+    expect(html).toContain('max-h-64')
+  })
+
+  it('renders page presentation as a wide, always-expanded review with a heading', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney, presentation: 'page' })
+    expect(html).toContain('max-w-3xl')
+    expect(html).toContain('<h1')
+    expect(html).not.toContain('Contraer carrito')
+    expect(html).not.toContain('max-h-64')
+  })
+
+  it('keeps the same data and action contract across presentations', () => {
+    for (const presentation of ['compact', 'page'] as const) {
+      const html = renderMarkup({
+        items,
+        promotions: [],
+        totals,
+        formatMoney,
+        presentation,
+        onApplyPromo: () => {},
+      })
+      expect(html).toContain('USD 108.00')
+      expect(html).toContain('Taladro')
+      expect(html).toContain('código de descuento')
+    }
+  })
+
+  it('offers a continue-shopping action in page presentation', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      formatMoney,
+      presentation: 'page',
+      onContinueShopping: () => {},
+    })
+    expect(html).toContain('Seguir comprando')
+  })
+
+  it('suppresses checkout when the checkout feature is unavailable', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      formatMoney,
+      presentation: 'page',
+      checkoutUnavailable: true,
+    })
+    expect(html).not.toContain('Ver carrito y finalizar')
+  })
+
+  it('disables checkout while the cart is not ready', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      formatMoney,
+      presentation: 'page',
+      checkoutDisabled: true,
+    })
+    expect(html).toMatch(/<button[^>]*disabled[^>]*>[^<]*Ver carrito y finalizar/)
+  })
+})
+
+describe('ShoppingCart — no hardcoded currency or locale copy', () => {
+  it('formats every amount through the canonical Money path', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      formatMoney,
+      recentlyViewed: [{ id: 'p1', name: 'Mouse', unitPrice: usd('5.00') }],
+    })
+    expect(html).toContain('USD 110.00')
+    expect(html).toContain('USD 5.00')
+    expect(html).not.toMatch(/\$\d/)
+  })
+
+  it('uses overridable labels for actions, states, and summary copy', () => {
+    const html = renderMarkup({
+      items,
+      promotions: [],
+      totals,
+      titleLabel: 'Mi carrito',
+      emptyLabel: 'Nada por aquí',
+      checkoutLabel: 'Pagar',
+    })
+    expect(html).toContain('Mi carrito')
+    expect(html).toContain('Pagar')
+    const empty = renderMarkup({
+      items: [],
+      promotions: [],
+      emptyLabel: 'Nada por aquí',
+      titleLabel: 'Mi carrito',
+    })
+    expect(empty).toContain('Nada por aquí')
+    expect(empty).not.toContain('Taladro')
+  })
+})
+
+describe('ShoppingCart — accessibility', () => {
+  it('names every line mutation control', () => {
+    const html = renderMarkup({ items, promotions: [], totals, formatMoney })
+    expect(html).toContain('aria-label="Disminuir cantidad, Taladro"')
+    expect(html).toContain('aria-label="Aumentar cantidad, Taladro"')
+    expect(html).toContain('aria-label="Quitar Taladro"')
+  })
+
+  it('names the promo input and apply action', () => {
+    const html = renderMarkup({ items, promotions: [], totals, onApplyPromo: () => {} })
+    expect(html).toContain('código de descuento')
+    expect(html).toMatch(/<label[^>]*for=/)
+    expect(html).toMatch(/<input[^>]*id=/)
+  })
+
+  it('announces pending totals politely and errors as an alert', () => {
+    const pending = renderMarkup({ items, promotions: [], totalsState: 'pending' })
+    expect(pending).toContain('aria-live="polite"')
+    expect(pending).toContain('Actualizando totales')
+    const error = renderMarkup({ items, promotions: [], totalsState: 'error' })
+    expect(error).toMatch(/role="alert"/)
+  })
+})