@thorprovider/blocks 0.1.0 → 0.1.2

package/src/blocks/e-commerce/product-categories/product-category-2.tsx

@@ -9,7 +9,12 @@ export interface ProductCategory2Category {
   handle?: string
   name: string
   description: string
-  itemCount: number
+  /**
+   * Number of items in the category. Optional: when omitted, or when it is not
+   * a finite non-negative number, no count is rendered — an unknown projection
+   * must not be shown as a fabricated `0`. A real `0` is preserved.
+   */
+  itemCount?: number
   image: string
   trending: boolean
 }
@@ -22,6 +27,18 @@ export interface ProductCategory2Props {
   onBrowse?: (category: ProductCategory2Category) => void
 }
 
+/**
+ * Formats a category item count only when it is a supplied, finite,
+ * non-negative number. Returns `undefined` for unknown or invalid values so the
+ * caller omits the count entirely (a real `0` is preserved).
+ */
+function formatItemCount(itemCount: number | undefined): string | undefined {
+  if (itemCount === undefined || !Number.isFinite(itemCount) || itemCount < 0) {
+    return undefined
+  }
+  return `${itemCount.toLocaleString()} items`
+}
+
 export function ProductCategory2({
   title,
   description,
@@ -42,44 +59,47 @@ export function ProductCategory2({
         )}
 
         <div className='grid gap-6 sm:grid-cols-2 lg:grid-cols-3'>
-          {categories.map(category => (
-            <Card
-              key={category.id}
-              className='group cursor-pointer overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'
-            >
-              <div className='relative aspect-[5/4] overflow-hidden'>
-                <img
-                  src={category.image || undefined}
-                  alt={category.name}
-                  className='size-full object-cover transition-transform duration-500 group-hover:scale-105'
-                />
-                <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />
+          {categories.map(category => {
+            const itemCountLabel = formatItemCount(category.itemCount)
+            return (
+              <Card
+                key={category.id}
+                className='group cursor-pointer overflow-hidden py-0 transition-all duration-500 hover:shadow-lg'
+              >
+                <div className='relative aspect-[5/4] overflow-hidden'>
+                  <img
+                    src={category.image || undefined}
+                    alt={category.name}
+                    className='size-full object-cover transition-transform duration-500 group-hover:scale-105'
+                  />
+                  <div className='absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent' />
 
-                {category.trending ? (
-                  <Badge className='absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold'>
-                    Trending
-                  </Badge>
-                ) : null}
+                  {category.trending ? (
+                    <Badge className='absolute top-4 left-4 rounded-sm px-2.5 py-0.5 font-semibold'>
+                      Trending
+                    </Badge>
+                  ) : null}
 
-                <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>
-                  <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>
-                  <p className='mb-3 text-sm text-white/90'>{category.description}</p>
-                  <div className='flex items-center justify-between'>
-                    <span className='text-sm'>{category.itemCount.toLocaleString()} items</span>
-                    <Button
-                      size='sm'
-                      variant='secondary'
-                      className='h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30'
-                      onClick={onBrowse ? () => onBrowse(category) : undefined}
-                    >
-                      Browse
-                      <ArrowRight />
-                    </Button>
+                  <div className='absolute right-0 bottom-0 left-0 p-6 text-white'>
+                    <h3 className='mb-1 text-xl font-bold'>{category.name}</h3>
+                    <p className='mb-3 text-sm text-white/90'>{category.description}</p>
+                    <div className='flex items-center justify-between'>
+                      {itemCountLabel ? <span className='text-sm'>{itemCountLabel}</span> : null}
+                      <Button
+                        size='sm'
+                        variant='secondary'
+                        className='ms-auto h-8 cursor-pointer border-white/30 bg-white/20 px-3 text-xs text-white backdrop-blur-sm hover:bg-white/30'
+                        onClick={onBrowse ? () => onBrowse(category) : undefined}
+                      >
+                        Browse
+                        <ArrowRight />
+                      </Button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </Card>
-          ))}
+              </Card>
+            )
+          })}
         </div>
 
         {cta ? (
@@ -97,4 +117,4 @@ export function ProductCategory2({
   )
 }
 
-export default ProductCategory2
+export default ProductCategory2

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

@@ -0,0 +1,182 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ProductOverview1, {
+  galleryImages,
+  resolveAddToCartPayload,
+  variantLabelOf,
+  type ProductDetailProduct,
+} from './product-overview-1'
+
+const product: ProductDetailProduct = {
+  id: 'p1',
+  handle: 'taladro',
+  title: 'Taladro inalámbrico',
+  description: 'Un taladro',
+  vendor: 'Acme',
+  options: [{ id: 'o1', name: 'Color', values: ['Rojo', 'Azul'] }],
+  variants: [
+    {
+      id: 'v-red',
+      title: 'Rojo',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Rojo' }],
+      price: { amount: '10.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-blue',
+      title: 'Azul',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Azul' }],
+      price: { amount: '25.50', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-sold',
+      title: 'Verde',
+      availableForSale: false,
+      selectedOptions: [{ name: 'Color', value: 'Verde' }],
+      price: { amount: '9.00', currencyCode: 'USD' },
+    },
+    {
+      id: 'v-noprice',
+      title: 'Gris',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Gris' }],
+      price: null,
+    },
+    {
+      id: 'v-free',
+      title: 'Blanco',
+      availableForSale: true,
+      selectedOptions: [{ name: 'Color', value: 'Blanco' }],
+      price: { amount: '0', currencyCode: 'USD' },
+    },
+  ],
+  images: [],
+}
+
+const formatPrice = (money: { amount: string; currencyCode: string }) =>
+  `${money.currencyCode} ${money.amount}`
+
+describe('ProductOverview1 — explicit, controlled variant selection', () => {
+  it('does not default to the first variant and prompts for an explicit selection', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} formatPrice={formatPrice} onAddToCart={() => {}} />,
+    )
+    expect(html).toContain('Selecciona una variante')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('shows the selected non-default variant at its current price', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1
+        product={product}
+        selectedVariantId='v-blue'
+        formatPrice={formatPrice}
+        onAddToCart={() => {}}
+      />,
+    )
+    expect(html).toContain('USD 25.50')
+    expect(html).not.toContain('USD 10.00')
+  })
+
+  it('reports a missing price as unavailable instead of zero', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} selectedVariantId='v-noprice' formatPrice={formatPrice} />,
+    )
+    expect(html).toContain('Precio no disponible')
+    expect(html).not.toContain('USD 0')
+  })
+
+  it('preserves a backend-resolved valid zero', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1 product={product} selectedVariantId='v-free' formatPrice={formatPrice} />,
+    )
+    expect(html).toContain('USD 0')
+    expect(html).not.toContain('Precio no disponible')
+  })
+
+  it('enables purchase only for an available, priced, explicitly selected variant', () => {
+    const onlyAvailable: ProductDetailProduct = {
+      ...product,
+      variants: [product.variants[0]],
+    }
+    const enabled = renderToStaticMarkup(
+      <ProductOverview1
+        product={onlyAvailable}
+        selectedVariantId='v-red'
+        formatPrice={formatPrice}
+        onAddToCart={() => {}}
+      />,
+    )
+    expect(enabled).not.toContain('disabled=""')
+
+    const noSelection = renderToStaticMarkup(
+      <ProductOverview1 product={onlyAvailable} formatPrice={formatPrice} onAddToCart={() => {}} />,
+    )
+    expect(noSelection).toContain('disabled=""')
+  })
+})
+
+describe('ProductOverview1 — truthful optional data', () => {
+  it('renders no rating, delivery estimate, or shipping when the backend supplies none', () => {
+    const html = renderToStaticMarkup(<ProductOverview1 product={product} formatPrice={formatPrice} />)
+    expect(html).not.toContain('Reseñas')
+    expect(html).not.toContain('Entrega estimada')
+    expect(html).not.toContain('Envío')
+  })
+
+  it('renders rating, delivery estimate, and shipping only when supplied', () => {
+    const html = renderToStaticMarkup(
+      <ProductOverview1
+        product={product}
+        formatPrice={formatPrice}
+        rating={{ value: 4, count: 12 }}
+        deliveryEstimate='3-5 días'
+        shipping={{ amount: '4.99', currencyCode: 'USD' }}
+      />,
+    )
+    expect(html).toContain('Reseñas')
+    expect(html).toContain('3-5 días')
+    expect(html).toContain('USD 4.99')
+  })
+
+  it('never emits an empty image src when the product has no images', () => {
+    const html = renderToStaticMarkup(<ProductOverview1 product={product} formatPrice={formatPrice} />)
+    expect(html).not.toMatch(/src=""/)
+  })
+})
+
+describe('resolveAddToCartPayload', () => {
+  const variant = product.variants[1]
+
+  it('returns null when no variant is selected (no first-variant shortcut)', () => {
+    expect(resolveAddToCartPayload(null, 2)).toBeNull()
+  })
+
+  it('uses the selected backend variant id and defaults the quantity to 1', () => {
+    expect(resolveAddToCartPayload(variant, undefined)).toEqual({ variantId: 'v-blue', quantity: 1 })
+  })
+
+  it('carries the requested quantity', () => {
+    expect(resolveAddToCartPayload(variant, 3)).toEqual({ variantId: 'v-blue', quantity: 3 })
+  })
+})
+
+describe('variant helpers', () => {
+  it('prefers the variant title', () => {
+    expect(variantLabelOf(product.variants[0])).toBe('Rojo')
+  })
+
+  it('falls back to option values when a variant has no title', () => {
+    expect(variantLabelOf({ ...product.variants[0], title: '' })).toBe('Rojo')
+  })
+
+  it('uses the product images when present and never a fabricated URL', () => {
+    const withImages: ProductDetailProduct = {
+      ...product,
+      images: [{ url: 'https://cdn.example/p1.jpg', altText: 'p1' }],
+    }
+    expect(galleryImages(withImages, 'FALLBACK')).toEqual(['https://cdn.example/p1.jpg'])
+    expect(galleryImages(product, 'FALLBACK')).toEqual(['FALLBACK'])
+  })
+})