@thorprovider/blocks 0.1.0 → 0.1.2

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

@@ -3,22 +3,39 @@
 import { useState } from 'react'
 import { ShoppingCart, Zap, Clock, CreditCard, Wallet, Minus, Plus, X } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import type { Money } from '@thorprovider/types'
 import { Card, CardContent, CardHeader, CardTitle } from '../../../ui/card'
 import { Button } from '../../../ui/button'
 import { Separator } from '../../../ui/separator'
 import { Progress } from '../../../ui/progress'
-import { ShoppingCart4SpinningCounter } from './shopping-cart-4-spinning-counter'
 import { cn } from '../../../lib/utils'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
 
 export interface ShoppingCart4Item {
-  id: string // serialization-friendly (seed used number)
+  /** Backend cart line-item id — the stable identity for update/removal. */
+  id: string
   name: string
   price: number
   quantity: number
-  image: string
+  /** Optional; an absent image is omitted rather than serialized as `""`. */
+  image?: string
   variant?: string
+  /** Canonical backend per-unit price; preferred for display when present. */
+  unitPrice?: Money
+  /** Canonical backend line total; preferred over `price * quantity`. */
+  lineTotal?: Money
+}
+
+export interface ShoppingCart4Totals {
+  subtotal: Money
+  discount?: Money
+  tax?: Money
+  shipping?: Money
+  total: Money
 }
 
+export type ShoppingCart4TotalsState = 'idle' | 'pending' | 'error'
+
 export interface ShoppingCart4Promotion {
   threshold: number
   reward: string
@@ -29,29 +46,49 @@ export interface ShoppingCart4RecentlyViewed {
   id: string
   name: string
   price: number
-  image: string
+  image?: string
 }
 
 export interface ShoppingCart4Props {
   items: ShoppingCart4Item[]
   promotions: ShoppingCart4Promotion[]
   recentlyViewed?: ShoppingCart4RecentlyViewed[]
-  // business rules externalized:
-  taxRate?: number // default 0.08
+  /**
+   * Backend-authoritative totals. The curated cart renders these verbatim; it
+   * never computes subtotal/tax/shipping/total locally.
+   */
+  totals?: ShoppingCart4Totals
+  /** Controlled state of the totals fetch/mutation. */
+  totalsState?: ShoppingCart4TotalsState
+  totalsErrorLabel?: string
+  /** Shown when a required total amount is absent or malformed (never as zero). */
+  totalsUnavailableLabel?: string
+  /** Shown for a line whose supplied line total is absent or malformed. */
+  amountUnavailableLabel?: string
+  retryLabel?: string
+  onRetryTotals?: () => void
+  /** Override money formatting (locale, currency). Defaults to `Money.currencyCode`. */
+  formatMoney?: (money: Money) => string
+  /** @deprecated legacy numeric formatter, used only when `totals` is absent. */
+  formatPrice?: (value: number) => string
+  /** @deprecated legacy local tax rate, used only when `totals` is absent. */
+  taxRate?: number
   // labels (Spanish defaults):
   titleLabel?: string // 'Carrito de compras'
   subtotalLabel?: string // 'Subtotal'
+  discountLabel?: string
   taxLabel?: string // 'Impuestos'
   shippingLabel?: string // 'Envío'
   shippingFreeLabel?: string // 'Gratis'
   totalLabel?: string // 'Total'
+  totalsPendingLabel?: string
   awayFromLabel?: string // 'Te faltan ${amount} para'
   activatedLabel?: string // '¡{reward} activada!'
   itemsLabel?: string // 'artículos'
   expressCheckoutLabel?: string // 'Compra rápida'
   expressLabel?: string // 'Rápido'
   standardLabel?: string // 'Estándar'
-  estimatedDeliveryLabel?: string // 'Entrega estimada: 2-3 días hábiles'
+  estimatedDeliveryLabel?: string
   secureCheckoutLabel?: string // 'Pago seguro • SSL cifrado'
   recentlyViewedLabel?: string // 'Vistos recientemente'
   collapseLabel?: string // 'Contraer carrito'
@@ -59,16 +96,27 @@ export interface ShoppingCart4Props {
   checkoutLabel?: string // 'Ver carrito y finalizar'
   quickCheckoutLabel?: string // 'Compra rápida'
   checkoutNowLabel?: string // 'Finalizar ahora'
+  emptyLabel?: string
+  removeLabel?: string
+  decreaseLabel?: string
+  increaseLabel?: string
   // callbacks:
+  /**
+   * ABSOLUTE quantity for a backend cart line-item id (distinct from the
+   * Navbar's DELTA). The boundary mutates the cart by line-item id.
+   */
   onQuantityChange?: (id: string, quantity: number) => void
+  /** Remove the backend cart line-item id. */
   onRemove?: (id: string) => void
   onCheckout?: () => void
-  onQuickCheckout?: () => void // Express mode checkout button
+  onQuickCheckout?: () => void
   onPayWithApple?: () => void
   onPayWithGoogle?: () => void
   onRecentlyViewedClick?: (id: string) => void
 }
 
+const usdFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+
 const interpolate = (template: string, values: Record<string, string>) =>
   template.replace(/\$\{(\w+)\}|\{(\w+)\}/g, (match, dollarKey, braceKey) => {
     const key = dollarKey ?? braceKey
@@ -79,20 +127,30 @@ export function ShoppingCart4({
   items,
   promotions,
   recentlyViewed,
-  taxRate = 0.08,
+  totals,
+  totalsState = 'idle',
+  totalsErrorLabel = 'No se pudieron actualizar los totales.',
+  totalsUnavailableLabel = 'Totales no disponibles.',
+  amountUnavailableLabel = '—',
+  retryLabel = 'Reintentar',
+  onRetryTotals,
+  formatMoney: formatMoneyProp,
+  formatPrice,
   titleLabel = 'Carrito de compras',
   subtotalLabel = 'Subtotal',
+  discountLabel = 'Descuento',
   taxLabel = 'Impuestos',
   shippingLabel = 'Envío',
   shippingFreeLabel = 'Gratis',
   totalLabel = 'Total',
+  totalsPendingLabel = 'Actualizando totales…',
   awayFromLabel = 'Te faltan ${amount} para',
   activatedLabel = '¡{reward} activada!',
   itemsLabel = 'artículos',
   expressCheckoutLabel = 'Compra rápida',
   expressLabel = 'Rápido',
   standardLabel = 'Estándar',
-  estimatedDeliveryLabel = 'Entrega estimada: 2-3 días hábiles',
+  estimatedDeliveryLabel,
   secureCheckoutLabel = 'Pago seguro • SSL cifrado',
   recentlyViewedLabel = 'Vistos recientemente',
   collapseLabel = 'Contraer carrito',
@@ -100,6 +158,10 @@ export function ShoppingCart4({
   checkoutLabel = 'Ver carrito y finalizar',
   quickCheckoutLabel = 'Compra rápida',
   checkoutNowLabel = 'Finalizar ahora',
+  emptyLabel = 'Tu carrito está vacío',
+  removeLabel = 'Quitar',
+  decreaseLabel = 'Disminuir cantidad',
+  increaseLabel = 'Aumentar cantidad',
   onQuantityChange,
   onRemove,
   onCheckout,
@@ -111,26 +173,110 @@ export function ShoppingCart4({
   const [isExpanded, setIsExpanded] = useState(true)
   const [quickCheckout, setQuickCheckout] = useState(false)
 
+  const format = formatPrice ?? (value => usdFormatter.format(value))
+  const money = (value: Money | null | undefined) => formatMoney(value, formatMoneyProp)
+  const subtotalAmount = isAvailableMoney(totals?.subtotal) ? Number(totals.subtotal.amount) : 0
   const itemCount = items.reduce((sum, item) => sum + item.quantity, 0)
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0)
-  const tax = subtotal * taxRate
-  const total = subtotal + tax
+  const hasExpress = Boolean(onQuickCheckout || onPayWithApple || onPayWithGoogle)
 
   const sortedPromotions = [...promotions].sort((a, b) => a.threshold - b.threshold)
   const currentPromo = (() => {
+    if (!isAvailableMoney(totals?.subtotal)) return null
     for (let i = sortedPromotions.length - 1; i >= 0; i--) {
-      if (subtotal >= sortedPromotions[i].threshold) {
+      if (subtotalAmount >= sortedPromotions[i].threshold) {
         return { ...sortedPromotions[i], achieved: true }
       }
     }
-    const next = sortedPromotions.find(p => subtotal < p.threshold)
+    const next = sortedPromotions.find(p => subtotalAmount < p.threshold)
     return next ? { ...next, achieved: false } : null
   })()
   const progressPercentage =
     currentPromo && !currentPromo.achieved
-      ? Math.min(100, (subtotal / currentPromo.threshold) * 100)
+      ? Math.min(100, (subtotalAmount / currentPromo.threshold) * 100)
       : 100
 
+  const lineAmount = (item: ShoppingCart4Item): string | null => {
+    // A supplied line total that is absent/malformed must not fall back to a
+    // numeric guess; only an entirely absent line total uses the legacy field.
+    if (item.lineTotal !== undefined) return money(item.lineTotal)
+    return format(item.price * item.quantity)
+  }
+
+  const renderTotals = () => {
+    if (totalsState === 'pending') {
+      return (
+        <div className='flex flex-col gap-2' aria-live='polite'>
+          <p className='text-muted-foreground text-sm'>{totalsPendingLabel}</p>
+        </div>
+      )
+    }
+    if (totalsState === 'error') {
+      return (
+        <div className='flex flex-col gap-2' role='alert'>
+          <p className='text-destructive text-sm'>{totalsErrorLabel}</p>
+          {onRetryTotals ? (
+            <Button variant='outline' size='sm' className='w-fit' onClick={onRetryTotals}>
+              {retryLabel}
+            </Button>
+          ) : null}
+        </div>
+      )
+    }
+    if (!totals) return null
+
+    const subtotalText = money(totals.subtotal)
+    const totalText = money(totals.total)
+    // Required totals: if either is absent/malformed, show an explicit
+    // unavailable state (with recovery) rather than a fabricated zero.
+    if (subtotalText === null || totalText === null) {
+      return (
+        <div className='flex flex-col gap-2' role='status'>
+          <p className='text-muted-foreground text-sm'>{totalsUnavailableLabel}</p>
+          {onRetryTotals ? (
+            <Button variant='outline' size='sm' className='w-fit' onClick={onRetryTotals}>
+              {retryLabel}
+            </Button>
+          ) : null}
+        </div>
+      )
+    }
+
+    const shippingText = money(totals.shipping)
+    return (
+      <>
+        <div className='flex justify-between text-sm'>
+          <span>{subtotalLabel}</span>
+          <span className='tabular-nums'>{subtotalText}</span>
+        </div>
+        {isAvailableMoney(totals.discount) ? (
+          <div className='flex justify-between text-sm'>
+            <span>{discountLabel}</span>
+            <span className='tabular-nums'>{money(totals.discount)}</span>
+          </div>
+        ) : null}
+        {isAvailableMoney(totals.tax) ? (
+          <div className='flex justify-between text-sm'>
+            <span>{taxLabel}</span>
+            <span className='tabular-nums'>{money(totals.tax)}</span>
+          </div>
+        ) : null}
+        {shippingText !== null ? (
+          <div className='flex justify-between text-sm text-success'>
+            <span>{shippingLabel}</span>
+            <span className='tabular-nums'>
+              {Number(totals.shipping?.amount) === 0 ? shippingFreeLabel : shippingText}
+            </span>
+          </div>
+        ) : null}
+        <Separator />
+        <div className='flex justify-between font-semibold'>
+          <span>{totalLabel}</span>
+          <span className='tabular-nums'>{totalText}</span>
+        </div>
+      </>
+    )
+  }
+
   return (
     <section className='py-8'>
       <div className='mx-auto max-w-md px-4'>
@@ -157,7 +303,7 @@ export function ShoppingCart4({
             {items.length === 0 ? (
               <div className='flex flex-col items-center justify-center gap-2 py-6 text-center'>
                 <ShoppingCart className='text-muted-foreground/50 size-10' />
-                <p className='text-muted-foreground text-sm'>Tu carrito está vacío</p>
+                <p className='text-muted-foreground text-sm'>{emptyLabel}</p>
               </div>
             ) : (
               <>
@@ -167,7 +313,7 @@ export function ShoppingCart4({
                     <div className='flex items-center justify-between text-sm'>
                       <span className='text-muted-foreground'>
                         {interpolate(awayFromLabel, {
-                          amount: `$${(currentPromo.threshold - subtotal).toFixed(2)}`,
+                          amount: format(currentPromo.threshold - subtotalAmount),
                         })}
                       </span>
                       <div className='flex items-center gap-1'>
@@ -197,14 +343,18 @@ export function ShoppingCart4({
                     <div className='scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent flex max-h-64 flex-col gap-4 overflow-y-auto'>
                       {items.map(item => (
                         <div key={item.id} className='flex items-start gap-3'>
-                          <img src={item.image || undefined} alt={item.name} className='h-12 w-12 rounded-md object-cover' />
+                          {item.image ? (
+                            <img src={item.image || undefined} alt='' className='h-12 w-12 rounded-md object-cover' />
+                          ) : (
+                            <div aria-hidden='true' className='bg-muted h-12 w-12 shrink-0 rounded-md' />
+                          )}
 
                           <div className='flex flex-1 flex-col gap-1'>
                             <h3 className='line-clamp-2 text-sm font-medium'>{item.name}</h3>
                             {item.variant ? <p className='text-muted-foreground text-xs'>{item.variant}</p> : null}
 
                             <div className='flex items-center justify-between'>
-                              <span className='text-sm font-semibold'>${item.price.toFixed(2)}</span>
+                              <span className='text-sm font-semibold'>{lineAmount(item) ?? amountUnavailableLabel}</span>
 
                               <div className='flex items-center'>
                                 <Button
@@ -217,7 +367,7 @@ export function ShoppingCart4({
                                       : undefined
                                   }
                                   disabled={item.quantity <= 1}
-                                  aria-label={`Disminuir cantidad de ${item.name}`}
+                                  aria-label={`${decreaseLabel}, ${item.name}`}
                                 >
                                   <Minus />
                                 </Button>
@@ -231,16 +381,16 @@ export function ShoppingCart4({
                                       ? () => onQuantityChange(item.id, item.quantity + 1)
                                       : undefined
                                   }
-                                  aria-label={`Aumentar cantidad de ${item.name}`}
+                                  aria-label={`${increaseLabel}, ${item.name}`}
                                 >
                                   <Plus />
                                 </Button>
                                 <Button
                                   variant='ghost'
                                   size='sm'
-                                  className='ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs text-destructive hover:text-destructive'
+                                  className='text-destructive hover:text-destructive ms-2 size-6 h-8 cursor-pointer p-0 px-3 text-xs'
                                   onClick={onRemove ? () => onRemove(item.id) : undefined}
-                                  aria-label={`Quitar ${item.name}`}
+                                  aria-label={`${removeLabel} ${item.name}`}
                                 >
                                   <X />
                                 </Button>
@@ -253,73 +403,63 @@ export function ShoppingCart4({
 
                     <Separator />
 
-                    {/* Order Summary */}
-                    <div className='flex flex-col gap-2'>
-                      <div className='flex justify-between text-sm'>
-                        <span>{subtotalLabel}</span>
-                        <span>${subtotal.toFixed(2)}</span>
-                      </div>
-                      <div className='flex justify-between text-sm'>
-                        <span>{taxLabel}</span>
-                        <span>${tax.toFixed(2)}</span>
-                      </div>
-                      <div className='flex justify-between text-sm text-success'>
-                        <span>{shippingLabel}</span>
-                        <span>{shippingFreeLabel}</span>
-                      </div>
-                      <Separator />
-                      <div className='flex justify-between font-semibold'>
-                        <span>{totalLabel}</span>
-                        <span>
-                          <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
-                        </span>
-                      </div>
-                    </div>
+                    {/* Order Summary — backend-authoritative only */}
+                    <div className='flex flex-col gap-2'>{renderTotals()}</div>
 
                     {/* Quick Actions */}
                     <div className='flex flex-col gap-3'>
-                      {/* Express Checkout Toggle */}
-                      <div className='flex items-center justify-between text-sm'>
-                        <span>{expressCheckoutLabel}</span>
-                        <Button
-                          variant='outline'
-                          size='sm'
-                          onClick={() => setQuickCheckout(!quickCheckout)}
-                          className='h-8 cursor-pointer'
-                          aria-pressed={quickCheckout}
-                        >
-                          <Zap />
-                          {quickCheckout ? standardLabel : expressLabel}
-                        </Button>
-                      </div>
+                      {/* Express Checkout Toggle — only when the host supplies a handler */}
+                      {hasExpress ? (
+                        <>
+                          <div className='flex items-center justify-between text-sm'>
+                            <span>{expressCheckoutLabel}</span>
+                            <Button
+                              variant='outline'
+                              size='sm'
+                              onClick={() => setQuickCheckout(!quickCheckout)}
+                              className='h-8 cursor-pointer'
+                              aria-pressed={quickCheckout}
+                            >
+                              <Zap />
+                              {quickCheckout ? standardLabel : expressLabel}
+                            </Button>
+                          </div>
 
-                      {quickCheckout && (
-                        <div className='grid grid-cols-2 gap-2'>
-                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithApple}>
-                            <Wallet />
-                            Apple Pay
-                          </Button>
-                          <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithGoogle}>
-                            <CreditCard />
-                            Google Pay
-                          </Button>
-                        </div>
-                      )}
+                          {quickCheckout ? (
+                            <div className='grid grid-cols-2 gap-2'>
+                              {onPayWithApple ? (
+                                <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithApple}>
+                                  <Wallet />
+                                  Apple Pay
+                                </Button>
+                              ) : null}
+                              {onPayWithGoogle ? (
+                                <Button size='sm' variant='outline' className='h-8 cursor-pointer px-3 text-xs' onClick={onPayWithGoogle}>
+                                  <CreditCard />
+                                  Google Pay
+                                </Button>
+                              ) : null}
+                            </div>
+                          ) : null}
+                        </>
+                      ) : null}
 
                       {/* Checkout Button */}
                       <Button
                         size='lg'
                         className='h-10 w-full cursor-pointer px-8'
-                        onClick={quickCheckout ? onQuickCheckout : onCheckout}
+                        onClick={hasExpress && quickCheckout ? onQuickCheckout : onCheckout}
                       >
-                        {quickCheckout ? quickCheckoutLabel : checkoutLabel}
+                        {hasExpress && quickCheckout ? quickCheckoutLabel : checkoutLabel}
                       </Button>
 
-                      {/* Estimated Delivery */}
-                      <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
-                        <Clock className='size-3' />
-                        <span>{estimatedDeliveryLabel}</span>
-                      </div>
+                      {/* Estimated Delivery — only when supplied, never fabricated */}
+                      {estimatedDeliveryLabel ? (
+                        <div className='text-muted-foreground flex items-center justify-center gap-2 text-xs'>
+                          <Clock className='size-3' />
+                          <span>{estimatedDeliveryLabel}</span>
+                        </div>
+                      ) : null}
                     </div>
 
                     {/* Security Badge */}
@@ -339,9 +479,9 @@ export function ShoppingCart4({
                       <span className='text-muted-foreground text-sm'>
                         {itemCount} {itemsLabel}
                       </span>
-                      <span className='font-semibold'>
-                        <ShoppingCart4SpinningCounter value={total} decimals={2} prefix='$' />
-                      </span>
+                      {isAvailableMoney(totals?.total) ? (
+                        <span className='font-semibold tabular-nums'>{money(totals.total)}</span>
+                      ) : null}
                     </div>
 
                     <Button size='sm' className='h-8 w-full cursor-pointer px-3 text-xs' onClick={onCheckout}>
@@ -365,12 +505,14 @@ export function ShoppingCart4({
                           )}
                           onClick={onRecentlyViewedClick ? () => onRecentlyViewedClick(item.id) : undefined}
                         >
-                          <div className='mb-1 aspect-square overflow-hidden'>
-                            <img
-                              src={item.image || undefined}
-                              alt={item.name}
-                              className='size-full rounded-md object-cover'
-                            />
+                          <div className='bg-muted mb-1 aspect-square overflow-hidden'>
+                            {item.image ? (
+                              <img
+                                src={item.image || undefined}
+                                alt={item.name}
+                                className='size-full rounded-md object-cover'
+                              />
+                            ) : null}
                           </div>
                           <p className='text-muted-foreground truncate text-xs'>{item.name}</p>
                           <p className='text-xs font-medium'>${item.price.toFixed(2)}</p>
@@ -388,4 +530,4 @@ export function ShoppingCart4({
   )
 }
 
-export default ShoppingCart4
+export default ShoppingCart4

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.test.tsx

@@ -0,0 +1,65 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import StorefrontHero1, { type FeaturedProduct } from './storefront-hero-1'
+
+const product: FeaturedProduct = {
+  id: 'p1',
+  name: 'Taladro percutor',
+  brand: 'INGCO',
+  price: 69.99,
+  originalPrice: 99.99,
+  rating: 4.8,
+  reviewCount: 236,
+  inStock: true,
+  isNew: false,
+  isOnSale: true,
+  image: '/products/drill.png',
+  colors: ['#111111'],
+}
+
+const base = {
+  title: 'Potencia para cada proyecto',
+  description: 'Herramientas profesionales',
+  products: [],
+}
+
+describe('StorefrontHero1 — optional editorial image', () => {
+  it('renders no editorial image when none is supplied', () => {
+    const html = renderToStaticMarkup(<StorefrontHero1 {...base} />)
+    expect(html).not.toContain('<img')
+  })
+
+  it('renders a native editorial image with its src and alt text', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero1 {...base} heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico y accesorios' }} />,
+    )
+    expect(html).toContain('src="/hero-tools.png"')
+    expect(html).toContain('alt="Taladro inalámbrico y accesorios"')
+  })
+
+  it('never renders an empty image src', () => {
+    const blank = renderToStaticMarkup(
+      <StorefrontHero1 {...base} heroImage={{ src: '   ', alt: 'Vacío' }} />,
+    )
+    expect(blank).not.toContain('<img')
+  })
+
+  it('preserves the product grid when the editorial image is omitted', () => {
+    const html = renderToStaticMarkup(<StorefrontHero1 {...base} products={[product]} />)
+    expect(html).toContain('Taladro percutor')
+    expect(html).toContain('src="/products/drill.png"')
+    expect(html).not.toContain('/hero-tools.png')
+  })
+
+  it('keeps the product grid when the editorial image is supplied', () => {
+    const html = renderToStaticMarkup(
+      <StorefrontHero1
+        {...base}
+        products={[product]}
+        heroImage={{ src: '/hero-tools.png', alt: 'Taladro inalámbrico' }}
+      />,
+    )
+    expect(html).toContain('src="/hero-tools.png"')
+    expect(html).toContain('Taladro percutor')
+  })
+})

package/src/blocks/e-commerce/storefront-hero/storefront-hero-1.tsx

@@ -23,6 +23,11 @@ export interface FeaturedProduct {
   colors: string[]
 }
 
+export interface HeroImage {
+  src: string
+  alt: string
+}
+
 export interface StorefrontHero1Props {
   title: string
   description: string
@@ -31,6 +36,12 @@ export interface StorefrontHero1Props {
   badge?: string
   primaryCta?: CTA
   secondaryCta?: CTA
+  /**
+   * Optional editorial image. Rendered as a native `<img>` when `src` is a
+   * non-empty string; omitted entirely when absent or blank (never an empty
+   * `src`). The product grid is unaffected.
+   */
+  heroImage?: HeroImage
   onAddToCart?: (product: FeaturedProduct) => void
   onBuyNow?: (product: FeaturedProduct) => void
   onSelectColor?: (product: FeaturedProduct, index: number, color: string) => void
@@ -82,6 +93,7 @@ function StorefrontHero1({
   badge,
   primaryCta,
   secondaryCta,
+  heroImage,
   onAddToCart,
   onBuyNow,
   onSelectColor,
@@ -137,6 +149,13 @@ function StorefrontHero1({
               )}
             </div>
           )}
+          {heroImage && heroImage.src.trim().length > 0 ? (
+            <img
+              src={heroImage.src}
+              alt={heroImage.alt}
+              className='mt-10 aspect-video w-full rounded-lg object-cover'
+            />
+          ) : null}
         </motion.div>
 
         <div className='w-full max-w-2xl lg:mt-0'>