@thorprovider/blocks 0.1.2 → 0.1.3

package/src/blocks/e-commerce/product-list/product-card-1.test.tsx

@@ -0,0 +1,88 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ProductCard1, type ProductCard1Product } from './product-card-1'
+
+const legacy: ProductCard1Product = {
+  id: 'legacy-1',
+  title: 'Taladro percutor',
+  price: 49.99,
+  originalPrice: 69.99,
+  image: '/demo/drill.svg',
+}
+
+const canonical: ProductCard1Product = {
+  id: 'sku-1',
+  title: 'Llave de impacto',
+  price: { amount: '129.50', currencyCode: 'EUR' },
+  compareAtPrice: { amount: '159.00', currencyCode: 'EUR' },
+  image: '/demo/impact.svg',
+  imageAlt: 'Llave de impacto inalámbrica',
+  rating: 4.5,
+  badge: 'Nuevo',
+}
+
+const render = (products: ProductCard1Product[], extra: Record<string, unknown> = {}) =>
+  renderToStaticMarkup(<ProductCard1 products={products} {...extra} />)
+
+describe('ProductCard1 — legacy numeric path unchanged', () => {
+  it('keeps the legacy dollar output and originalPrice', () => {
+    const html = render([legacy])
+    expect(html).toContain('$49.99')
+    expect(html).toContain('$69.99')
+  })
+})
+
+describe('ProductCard1 — canonical Money path', () => {
+  it('formats the canonical price in its own currency (no dollars)', () => {
+    const html = render([canonical])
+    expect(html).not.toContain('$')
+    expect(html).toContain('129')
+  })
+
+  it('renders a comparison price only when it is strictly higher', () => {
+    expect(render([canonical])).toContain('159')
+    const equal = render([
+      { ...canonical, compareAtPrice: { amount: '129.50', currencyCode: 'EUR' } },
+    ])
+    const lower = render([
+      { ...canonical, compareAtPrice: { amount: '99.00', currencyCode: 'EUR' } },
+    ])
+    expect(equal).not.toContain('159')
+    expect(lower).not.toContain('99')
+  })
+
+  it('treats a valid zero as a real price', () => {
+    const html = render([
+      { ...canonical, price: { amount: '0.00', currencyCode: 'USD' }, compareAtPrice: undefined },
+    ])
+    expect(html).toContain('$0.00')
+    expect(html).not.toContain('Precio no disponible')
+  })
+
+  it('shows the unavailable label for an unresolved price (never $0)', () => {
+    const html = render([
+      { ...canonical, price: { amount: '', currencyCode: '' }, compareAtPrice: undefined },
+    ])
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('$0')
+  })
+
+  it('renders the rating and badge only from real data', () => {
+    expect(render([canonical])).toContain('4.5')
+    expect(render([canonical])).toContain('Nuevo')
+    const withoutRating = render([{ ...canonical, rating: undefined, badge: undefined }])
+    expect(withoutRating).not.toContain('4.5')
+    expect(withoutRating).not.toContain('Nuevo')
+  })
+
+  it('omits the image source entirely when there is no image (no empty src)', () => {
+    const html = render([{ ...canonical, image: undefined }])
+    expect(html).not.toContain('src=""')
+    expect(html).toContain('Llave de impacto inalámbrica')
+  })
+
+  it('falls back to the title when no image alt is provided', () => {
+    const html = render([{ ...canonical, imageAlt: undefined }])
+    expect(html).toContain('alt="Llave de impacto"')
+  })
+})

package/src/blocks/e-commerce/product-list/product-card-1.tsx

@@ -1,9 +1,12 @@
 'use client'
 
+import { Star } from 'lucide-react'
 import { motion, useReducedMotion } from 'motion/react'
 
 import { Button } from '../../../ui/button'
 import { Card, CardContent, CardFooter } from '../../../ui/card'
+import { formatMoney } from '../../../lib/money'
+import type { ProductPresentation } from '../../../lib/contracts'
 
 export interface Product {
   id: string | number
@@ -14,13 +17,60 @@ export interface Product {
   badge?: string
 }
 
+/**
+ * A card entry is either the legacy numeric-price product or the canonical
+ * `Money`-price presentation. The block renders both without breaking legacy
+ * consumers: a numeric `price` keeps the legacy `$` output unchanged, while a
+ * canonical `Money` price is formatted in its own currency and locale.
+ */
+export type ProductCard1Product = Product | ProductPresentation
+
 export interface ProductCard1Props {
-  products: Product[]
+  products: ProductCard1Product[]
   heading?: string
   maxItems?: number
-  onAddToCart?: (product: Product) => void
-  onProductClick?: (product: Product) => void
+  onAddToCart?: (product: ProductCard1Product) => void
+  onProductClick?: (product: ProductCard1Product) => void
   addToCartLabel?: string
+  /** Shown when a canonical price is present but unavailable (never `$0`). */
+  unavailablePriceLabel?: string
+}
+
+function isPresentation(product: ProductCard1Product): product is ProductPresentation {
+  return typeof product.price === 'object'
+}
+
+function priceText(product: ProductCard1Product, unavailablePriceLabel: string): string {
+  if (isPresentation(product)) {
+    return formatMoney(product.price) ?? unavailablePriceLabel
+  }
+  return `$${product.price.toFixed(2)}`
+}
+
+function compareAtText(product: ProductCard1Product): string | undefined {
+  if (isPresentation(product)) {
+    const compareAt = product.compareAtPrice
+    if (!compareAt) return undefined
+    const formatted = formatMoney(compareAt)
+    const price = formatMoney(product.price)
+    // Render the comparison price only when both are valid and it is higher.
+    if (!formatted || !price) return undefined
+    if (Number(compareAt.amount) <= Number(product.price.amount)) return undefined
+    return formatted
+  }
+  // Legacy behavior is unchanged: truthiness only.
+  return product.originalPrice ? `$${product.originalPrice.toFixed(2)}` : undefined
+}
+
+function imageAlt(product: ProductCard1Product): string {
+  return isPresentation(product) ? (product.imageAlt ?? product.title) : product.title
+}
+
+function rating(product: ProductCard1Product): number | undefined {
+  if (!isPresentation(product)) return undefined
+  return typeof product.rating === 'number' && Number.isFinite(product.rating)
+    ? product.rating
+    : undefined
 }
 
 export function ProductCard1({
@@ -30,6 +80,7 @@ export function ProductCard1({
   onAddToCart,
   onProductClick,
   addToCartLabel = 'Agregar al carrito',
+  unavailablePriceLabel = 'Precio no disponible',
 }: ProductCard1Props) {
   const reduceMotion = useReducedMotion()
   const displayedProducts = products.slice(0, maxItems)
@@ -42,90 +93,100 @@ export function ProductCard1({
         )}
 
         <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:gap-6'>
-          {displayedProducts.map((product, index) => (
-            <motion.div
-              key={product.id}
-              initial={reduceMotion ? false : { opacity: 0, y: 16 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, margin: '-40px' }}
-              whileHover={reduceMotion ? undefined : { y: -4 }}
-              transition={{
-                duration: 0.35,
-                delay: reduceMotion ? 0 : index * 0.05,
-                ease: 'easeOut',
-              }}
-            >
-              <Card
-                className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${
-                  onProductClick ? 'cursor-pointer' : ''
-                }`}
-                onClick={onProductClick ? () => onProductClick(product) : undefined}
+          {displayedProducts.map((product, index) => {
+            const compareAt = compareAtText(product)
+            const ratingValue = rating(product)
+            return (
+              <motion.div
+                key={product.id}
+                initial={reduceMotion ? false : { opacity: 0, y: 16 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-40px' }}
+                whileHover={reduceMotion ? undefined : { y: -4 }}
+                transition={{
+                  duration: 0.35,
+                  delay: reduceMotion ? 0 : index * 0.05,
+                  ease: 'easeOut',
+                }}
               >
-                <CardContent className='flex flex-1 flex-col gap-4 px-4 '>
-                  <div className='relative aspect-square overflow-hidden rounded-md'>
-                    {product.badge && (
-                      <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>
-                        {product.badge}
-                      </span>
-                    )}
-                    <img
-                      src={product.image || undefined}
-                      alt={product.title}
-                      className='size-full rounded-md object-contain'
-                      loading='lazy'
-                      width={400}
-                      height={400}
-                    />
-                  </div>
-
-                  <div className='flex flex-1 flex-col'>
-                    <h2 className='mb-1 font-medium text-balance'>
-                      {onProductClick ? (
-                        <button
-                          type='button'
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            onProductClick(product)
-                          }}
-                          className='hover:text-primary cursor-pointer text-left transition-colors'
-                        >
-                          {product.title}
-                        </button>
-                      ) : (
-                        product.title
+                <Card
+                  className={`flex h-full flex-col gap-4 overflow-hidden rounded-lg py-4 shadow-none transition-shadow duration-300 hover:shadow-md ${
+                    onProductClick ? 'cursor-pointer' : ''
+                  }`}
+                  onClick={onProductClick ? () => onProductClick(product) : undefined}
+                >
+                  <CardContent className='flex flex-1 flex-col gap-4 px-4 '>
+                    <div className='relative aspect-square overflow-hidden rounded-md'>
+                      {product.badge && (
+                        <span className='bg-destructive text-destructive-foreground absolute top-2 left-2 z-10 rounded-full px-2 py-0.5 text-xs font-semibold'>
+                          {product.badge}
+                        </span>
                       )}
-                    </h2>
-                    <div className='mt-auto flex items-baseline gap-2'>
-                      <p className='font-semibold'>${product.price.toFixed(2)}</p>
-                      {product.originalPrice && (
-                        <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
-                          ${product.originalPrice.toFixed(2)}
-                        </p>
+                      <img
+                        src={product.image || undefined}
+                        alt={imageAlt(product)}
+                        className='size-full rounded-md object-contain'
+                        loading='lazy'
+                        width={400}
+                        height={400}
+                      />
+                    </div>
+
+                    <div className='flex flex-1 flex-col'>
+                      <h2 className='mb-1 font-medium text-balance'>
+                        {onProductClick ? (
+                          <button
+                            type='button'
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              onProductClick(product)
+                            }}
+                            className='hover:text-primary cursor-pointer text-left transition-colors'
+                          >
+                            {product.title}
+                          </button>
+                        ) : (
+                          product.title
+                        )}
+                      </h2>
+                      {ratingValue !== undefined && (
+                        <div className='text-muted-foreground mb-1 flex items-center gap-1 text-xs'>
+                          <Star className='size-3.5 fill-current' aria-hidden='true' />
+                          <span>{ratingValue.toFixed(1)}</span>
+                        </div>
                       )}
+                      <div className='mt-auto flex items-baseline gap-2'>
+                        <p className='font-semibold'>{priceText(product, unavailablePriceLabel)}</p>
+                        {compareAt && (
+                          <p className='text-muted-foreground text-sm line-through md:text-base xl:text-sm 2xl:text-base'>
+                            {compareAt}
+                          </p>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </CardContent>
-
-                <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
-                  <Button
-                    variant='outline'
-                    size='sm'
-                    className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onAddToCart?.(product)
-                    }}
-                  >
-                    {addToCartLabel}
-                  </Button>
-                </CardFooter>
-              </Card>
-            </motion.div>
-          ))}
+                  </CardContent>
+
+                  <CardFooter className='bg-transparent px-3 pt-0 border-t-0 md:px-4'>
+                    <Button
+                      variant='outline'
+                      size='sm'
+                      className='h-8 w-full cursor-pointer px-3 text-sm text-xs'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onAddToCart?.(product)
+                      }}
+                    >
+                      {addToCartLabel}
+                    </Button>
+                  </CardFooter>
+                </Card>
+              </motion.div>
+            )
+          })}
         </div>
       </div>
     </section>
   )
 }
 
-export default ProductCard1
+export default ProductCard1

package/src/blocks/e-commerce/product-list/product-showcase-1.test.tsx

@@ -0,0 +1,78 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { ProductShowcase1, type ProductShowcase1Props } from './product-showcase-1'
+import type { ProductPresentation } from '../../../lib/contracts'
+
+const product = (index: number): ProductPresentation => ({
+  id: `sku-${index}`,
+  title: `Producto ${index}`,
+  price: { amount: `${index}.00`, currencyCode: 'EUR' },
+  image: `/demo/${index}.svg`,
+})
+
+const seven = Array.from({ length: 7 }, (_, i) => product(i + 1))
+
+const render = (props: Partial<ProductShowcase1Props> = {}) =>
+  renderToStaticMarkup(<ProductShowcase1 products={seven} pageSize={3} {...props} />)
+
+describe('ProductShowcase1 — manual paging', () => {
+  it('renders only the first page of products', () => {
+    const html = render()
+    expect(html).toContain('Producto 1')
+    expect(html).toContain('Producto 3')
+    expect(html).not.toContain('Producto 4')
+  })
+
+  it('renders visible prev/next controls with accessible labels', () => {
+    const html = render()
+    expect(html).toContain('aria-label="Anterior"')
+    expect(html).toContain('aria-label="Siguiente"')
+    expect(html).toContain('disabled')
+  })
+
+  it('renders one page indicator per page with the current page marked', () => {
+    const html = render()
+    const dots = html.match(/aria-label="Página \d+"/g) ?? []
+    expect(dots).toHaveLength(3)
+    expect(html).toContain('aria-current="true"')
+  })
+
+  it('exposes a polite live region with the current page position', () => {
+    const html = render()
+    expect(html).toContain('aria-live="polite"')
+    expect(html).toContain('Página 1 / 3')
+  })
+
+  it('never autoplays: no timer is scheduled on render', () => {
+    const originalSetInterval = globalThis.setInterval
+    let calls = 0
+    globalThis.setInterval = ((...args: Parameters<typeof setInterval>) => {
+      calls += 1
+      return originalSetInterval(...args)
+    }) as typeof setInterval
+    try {
+      render()
+    } finally {
+      globalThis.setInterval = originalSetInterval
+    }
+    expect(calls).toBe(0)
+  })
+})
+
+describe('ProductShowcase1 — truthful states', () => {
+  it('renders an empty state instead of fabricated products', () => {
+    const html = renderToStaticMarkup(<ProductShowcase1 products={[]} emptyLabel='Sin productos' />)
+    expect(html).toContain('Sin productos')
+    expect(html).not.toContain('Producto 1')
+  })
+
+  it('renders the unavailable price label for an unresolved price', () => {
+    const html = renderToStaticMarkup(
+      <ProductShowcase1
+        products={[{ id: 'x', title: 'X', price: { amount: '', currencyCode: '' } }]}
+      />,
+    )
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('$0')
+  })
+})