@thorprovider/blocks 0.1.1 → 0.1.3

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

@@ -1,80 +1,168 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
+import { Heart, Minus, Plus, Star } from 'lucide-react'
+import type { Image, Money, ProductOption, SelectedOption } from '@thorprovider/types'
 import { Button } from '../../../ui/button'
 import { cn } from '../../../lib/utils'
-import { Heart, Star } from 'lucide-react'
-import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../../../ui/carousel'
+import { PRODUCT_IMAGE_FALLBACK } from '../../../lib/contracts'
+import { formatMoney, isAvailableMoney } from '../../../lib/money'
 import { ReactionToggle } from '../../shared/reaction-toggle'
 
-export interface ProductOverview1ProductImage {
-  id: number
-  src: string
-  alt: string
+/**
+ * Canonical product-detail projection.
+ *
+ * The block consumes the canonical `@thorprovider/types` shapes (`Money`,
+ * `ProductOption`, `SelectedOption`, `Image`) so adapter output maps without a
+ * second, drifting product type. The only deviation is `price`: the canon marks
+ * it required, but a missing/unresolved backend price is a real, distinct state
+ * that must disable purchase — so the projection allows `price` to be absent
+ * and the block treats absence as "unavailable", never as zero.
+ */
+export interface ProductDetailVariant {
+  id: string
+  title: string
+  sku?: string
+  availableForSale: boolean
+  selectedOptions: SelectedOption[]
+  /** Canonical Money; omit/null when the backend has no resolved price. */
+  price?: Money | null
+  compareAtPrice?: Money
+  image?: Image
 }
 
-export interface ProductOverview1ProductColor {
-  name: string
-  value: string
+export interface ProductDetailProduct {
+  id: string
+  handle?: string
+  title: string
+  description?: string
+  vendor?: string
+  options: ProductOption[]
+  variants: ProductDetailVariant[]
+  images: Image[]
+  featuredImage?: Image
 }
 
-export interface ProductOverview1Product {
-  id: string
-  brand: string
-  name: string
-  description: string
-  price: number
-  currency: string
-  rating: number
-  images: ProductOverview1ProductImage[]
-  sizes: number[]
-  colors: ProductOverview1ProductColor[]
+export interface ProductOverview1Rating {
+  value: number
+  count: number
 }
 
 export interface ProductOverview1Props {
-  product: ProductOverview1Product
+  product: ProductDetailProduct
+  /** Controlled selection: the backend variant id, or null/undefined when nothing is explicitly selected. */
+  selectedVariantId?: string | null
+  onSelectVariant?: (variantId: string) => void
+  /** Controlled quantity for the add-to-cart action; defaults to 1 when omitted. */
+  quantity?: number
+  onQuantityChange?: (quantity: number) => void
+  /** Add-to-cart identity is the selected backend variant id, with the requested quantity. */
+  onAddToCart?: (variantId: string, quantity: number) => void
+  isWishlisted?: boolean
+  onToggleWishlist?: (variantId: string, isWishlisted: boolean) => void
+  /** Rendered only when the backend supplies it. */
+  rating?: ProductOverview1Rating
+  /** Rendered only when the backend supplies it. */
+  deliveryEstimate?: string
+  /** Rendered only when the backend supplies it. */
+  shipping?: Money
+  formatPrice?: (money: Money) => string
   sizesLabel?: string
-  colorLabel?: string
+  variantLabel?: string
   reviewsLabel?: string
   addToCartLabel?: string
+  outOfStockLabel?: string
+  unavailablePriceLabel?: string
+  selectVariantLabel?: string
+  quantityLabel?: string
+  deliveryEstimateLabel?: string
+  shippingLabel?: string
   removeFromWishlistLabel?: string
   addToWishlistLabel?: string
-  onAddToCart?: (product: ProductOverview1Product) => void
-  onToggleWishlist?: (product: ProductOverview1Product, isWishlisted: boolean) => void
+  imageFallback?: string
+}
+
+function variantLabelOf(variant: ProductDetailVariant): string {
+  if (variant.title.trim() !== '') return variant.title
+  return variant.selectedOptions.map(option => option.value).join(' / ')
+}
+
+/**
+ * The add-to-cart payload contract: the explicitly selected backend variant id
+ * and a positive quantity (defaults to 1). Returns `null` when no variant has
+ * been selected — the block never substitutes the first variant.
+ */
+export function resolveAddToCartPayload(
+  variant: ProductDetailVariant | null,
+  quantity: number | undefined,
+): { variantId: string; quantity: number } | null {
+  if (!variant) return null
+  return {
+    variantId: variant.id,
+    quantity: typeof quantity === 'number' && quantity > 0 ? quantity : 1,
+  }
+}
+
+function galleryImages(product: ProductDetailProduct, fallback: string): string[] {
+  const images = product.images
+    .map(image => image.url)
+    .filter((url): url is string => typeof url === 'string' && url.trim() !== '')
+  if (images.length > 0) return images
+  const featured = product.featuredImage?.url
+  if (typeof featured === 'string' && featured.trim() !== '') return [featured]
+  return [fallback]
 }
 
 export default function ProductOverview1({
   product,
-  sizesLabel = 'Tallas',
-  colorLabel = 'Color',
+  selectedVariantId,
+  onSelectVariant,
+  quantity,
+  onQuantityChange,
+  onAddToCart,
+  isWishlisted = false,
+  onToggleWishlist,
+  rating,
+  deliveryEstimate,
+  shipping,
+  formatPrice,
+  sizesLabel = 'Variantes',
+  variantLabel = 'Variante',
   reviewsLabel = 'Reseñas',
   addToCartLabel = 'Agregar al carrito',
+  outOfStockLabel = 'Agotado',
+  unavailablePriceLabel = 'Precio no disponible',
+  selectVariantLabel = 'Selecciona una variante',
+  quantityLabel = 'Cantidad',
+  deliveryEstimateLabel = 'Entrega estimada',
+  shippingLabel = 'Envío',
   removeFromWishlistLabel = 'Quitar de favoritos',
   addToWishlistLabel = 'Agregar a favoritos',
-  onAddToCart,
-  onToggleWishlist,
+  imageFallback = PRODUCT_IMAGE_FALLBACK,
 }: ProductOverview1Props) {
   const [selectedImage, setSelectedImage] = useState(0)
-  const [selectedSize, setSelectedSize] = useState<number | null>(product.sizes[0])
-  const [selectedColor, setSelectedColor] = useState(product.colors[0])
-  const [isWishlisted, setIsWishlisted] = useState(false)
-  const [carouselApi, setCarouselApi] = useState<CarouselApi>()
 
-  useEffect(() => {
-    if (!carouselApi) return
+  const selectedVariant =
+    selectedVariantId != null
+      ? product.variants.find(variant => variant.id === selectedVariantId) ?? null
+      : null
 
-    carouselApi.scrollTo(selectedImage)
+  const selectedPrice = selectedVariant?.price
+  const selectedCompareAt = selectedVariant?.compareAtPrice
+  const priceAvailable = isAvailableMoney(selectedPrice)
+  const compareAtAvailable = isAvailableMoney(selectedCompareAt)
+  const canPurchase = Boolean(selectedVariant?.availableForSale) && priceAvailable
+  const quantityValue = quantity ?? 1
+  const addPayload = resolveAddToCartPayload(selectedVariant, quantityValue)
 
-    const handleSelect = () => {
-      const currentIndex = carouselApi.selectedScrollSnap()
-      setSelectedImage(currentIndex)
-    }
+  const images = galleryImages(product, imageFallback)
+  const hasRealImages = images[0] !== imageFallback || product.featuredImage != null
+  const activeImage = images[Math.min(selectedImage, images.length - 1)]
 
-    carouselApi.on('select', handleSelect)
-    return () => {
-      carouselApi.off('select', handleSelect)
-    }
-  }, [carouselApi, selectedImage])
+  const toggleWishlist = () => {
+    if (!selectedVariant || !onToggleWishlist) return
+    onToggleWishlist(selectedVariant.id, !isWishlisted)
+  }
 
   return (
     <div>
@@ -82,115 +170,194 @@ export default function ProductOverview1({
         <div className='grid grid-cols-1 gap-6 py-4 lg:grid-cols-2 lg:gap-8 lg:py-6 xl:grid-cols-3 xl:gap-12 xl:py-12'>
           <div className='flex flex-col justify-between gap-6 lg:gap-8'>
             <div className='flex flex-col gap-2 lg:gap-4'>
-              <span className='text-sm font-semibold tracking-wide uppercase'>{product.brand} —</span>
-              <h2 className='text-xl font-bold tracking-tight text-balance lg:text-3xl'>{product.name}</h2>
-              <p className='text-muted-foreground text-balance'>{product.description}</p>
-              <p className='text-2xl font-bold tracking-tight'>
-                {product.currency}
-                {product.price}
-              </p>
-            </div>
+              {product.vendor ? (
+                <span className='text-sm font-semibold tracking-wide uppercase'>{product.vendor}</span>
+              ) : null}
+              <h2 className='text-xl font-bold tracking-tight text-balance lg:text-3xl'>{product.title}</h2>
+              {product.description ? (
+                <p className='text-muted-foreground text-balance'>{product.description}</p>
+              ) : null}
 
-            <div className='flex flex-wrap gap-4'>
-              {product.images.map((image, index) => (
-                <div
-                  key={image.id}
-                  onMouseEnter={() => setSelectedImage(index)}
-                  className={cn(
-                    'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18',
-                    selectedImage === index && 'ring-foreground ring-2',
-                  )}
-                >
-                  <img src={image.src || undefined} alt={image.alt} className='size-full object-cover' />
-                </div>
-              ))}
+              {selectedVariant ? (
+                priceAvailable ? (
+                  <p className='text-2xl font-bold tracking-tight'>
+                    {formatMoney(selectedPrice, formatPrice)}
+                    {compareAtAvailable ? (
+                      <span className='text-muted-foreground ms-2 text-base font-normal line-through'>
+                        {formatMoney(selectedCompareAt, formatPrice)}
+                      </span>
+                    ) : null}
+                  </p>
+                ) : (
+                  <p className='text-muted-foreground text-sm'>{unavailablePriceLabel}</p>
+                )
+              ) : (
+                <p className='text-muted-foreground text-sm'>{selectVariantLabel}</p>
+              )}
             </div>
+
+            {hasRealImages ? (
+              <div className='flex flex-wrap gap-4'>
+                {images.map((url, index) => (
+                  <button
+                    key={`${product.id}:image:${index}`}
+                    type='button'
+                    onClick={() => setSelectedImage(index)}
+                    aria-label={`${product.title} ${index + 1}`}
+                    aria-pressed={selectedImage === index}
+                    className={cn(
+                      'ring-offset-background size-16 cursor-pointer overflow-hidden rounded-sm ring-offset-2 transition-all lg:size-18',
+                      selectedImage === index && 'ring-foreground ring-2',
+                    )}
+                  >
+                    <img src={url || undefined} alt='' className='size-full object-cover' />
+                  </button>
+                ))}
+              </div>
+            ) : null}
           </div>
 
           <div className='row-span-2 row-start-1 lg:col-start-2'>
-            <Carousel setApi={setCarouselApi} className='w-full'>
-              <CarouselContent>
-                {product.images.map(image => (
-                  <CarouselItem key={image.id}>
-                    <img src={image.src || undefined} alt={image.alt} className='w-full h-90 rounded-lg object-cover' />
-                  </CarouselItem>
-                ))}
-              </CarouselContent>
-            </Carousel>
+            <div className='bg-muted aspect-square w-full overflow-hidden rounded-lg'>
+              <img
+                src={activeImage || undefined}
+                alt={product.title}
+                className='h-90 w-full object-cover'
+              />
+            </div>
           </div>
 
           <div className='flex flex-col gap-6 lg:gap-10'>
-            <div className='flex flex-col gap-2'>
-              <h3 className='font-bold'>{sizesLabel}</h3>
-              <div className='flex flex-wrap gap-3'>
-                {product.sizes.map(size => (
+            {product.variants.length > 0 ? (
+              <div className='flex flex-col gap-2'>
+                <h3 className='font-bold'>{sizesLabel}</h3>
+                <div className='flex flex-wrap gap-3'>
+                  {product.variants.map(variant => {
+                    const isSelected = variant.id === selectedVariantId
+                    return (
+                      <Button
+                        key={variant.id}
+                        variant={isSelected ? 'default' : 'outline'}
+                        onClick={onSelectVariant ? () => onSelectVariant(variant.id) : undefined}
+                        disabled={!variant.availableForSale}
+                        aria-pressed={isSelected}
+                        className='h-9 cursor-pointer rounded-full px-4'
+                      >
+                        {variantLabelOf(variant)}
+                        {!variant.availableForSale ? (
+                          <span className='text-muted-foreground ms-2 text-xs font-normal'>
+                            {outOfStockLabel}
+                          </span>
+                        ) : null}
+                      </Button>
+                    )
+                  })}
+                </div>
+                {selectedVariant && selectedVariant.selectedOptions.length > 0 ? (
+                  <p className='text-muted-foreground text-sm'>
+                    {selectedVariant.selectedOptions
+                      .map((option: SelectedOption) => `${option.name}: ${option.value}`)
+                      .join(' · ')}
+                  </p>
+                ) : null}
+              </div>
+            ) : null}
+
+            {rating ? (
+              <div className='flex flex-col gap-2'>
+                <h3 className='font-bold'>{reviewsLabel}</h3>
+                <div className='flex items-center gap-2'>
+                  <div className='flex gap-1' aria-hidden='true'>
+                    {[0, 1, 2, 3, 4].map(index => (
+                      <Star
+                        key={index}
+                        className='text-foreground size-5'
+                        fill={index < rating.value ? 'currentColor' : 'none'}
+                      />
+                    ))}
+                  </div>
+                  <span className='text-muted-foreground text-sm tabular-nums'>
+                    {`${rating.value} (${rating.count})`}
+                  </span>
+                </div>
+              </div>
+            ) : null}
+
+            {onQuantityChange ? (
+              <div className='flex flex-col gap-2'>
+                <h3 className='font-bold'>{quantityLabel}</h3>
+                <div className='border-border flex w-fit items-center rounded-md border'>
                   <Button
-                    key={size}
-                    variant={selectedSize === size ? 'default' : 'outline'}
-                    onClick={() => setSelectedSize(size)}
-                    className='h-9 px-4 py-2 size-12 cursor-pointer rounded-full p-0'
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='size-9 rounded-r-none'
+                    aria-label={`${quantityLabel} -1`}
+                    onClick={() => onQuantityChange(Math.max(1, quantityValue - 1))}
+                    disabled={quantityValue <= 1}
                   >
-                    {size}
+                    <Minus />
                   </Button>
-                ))}
-              </div>
-            </div>
-
-            <div className='flex flex-col gap-2'>
-              <h3 className='font-bold'>{colorLabel}</h3>
-              <div className='flex gap-3'>
-                {product.colors.map(color => (
+                  <span className='w-10 text-center text-sm tabular-nums'>{quantityValue}</span>
                   <Button
-                    key={color.name}
-                    onClick={() => setSelectedColor(color)}
-                    className={cn(
-                      'h-9 px-4 py-2',
-                      'ring-offset-background size-8 cursor-pointer rounded-full ring-offset-2 transition-all',
-                      selectedColor.name === color.name && 'ring-foreground ring-2',
-                      selectedColor.name !== color.name &&
-                        ['Black', 'White'].includes(color.name) &&
-                        'outline-muted outline-solid',
-                    )}
-                    style={{ backgroundColor: color.value }}
-                    aria-label={`Seleccionar color ${color.name}`}
-                  />
-                ))}
+                    type='button'
+                    variant='ghost'
+                    size='icon'
+                    className='size-9 rounded-l-none'
+                    aria-label={`${quantityLabel} +1`}
+                    onClick={() => onQuantityChange(quantityValue + 1)}
+                  >
+                    <Plus />
+                  </Button>
+                </div>
               </div>
-            </div>
+            ) : null}
 
-            <div className='flex flex-col gap-2'>
-              <h3 className='font-bold'>{reviewsLabel}</h3>
-              <div className='flex gap-1'>
-                {[...Array(5)].map((_, i) => (
-                  <Star
-                    key={i}
-                    className='text-foreground size-5'
-                    fill={i < product.rating ? 'currentColor' : 'none'}
-                  />
-                ))}
-              </div>
-            </div>
+            {deliveryEstimate || shipping ? (
+              <dl className='text-muted-foreground flex flex-col gap-1 text-sm'>
+                {deliveryEstimate ? (
+                  <div className='flex gap-2'>
+                    <dt>{deliveryEstimateLabel}</dt>
+                    <dd className='text-foreground'>{deliveryEstimate}</dd>
+                  </div>
+                ) : null}
+                {isAvailableMoney(shipping) ? (
+                  <div className='flex gap-2'>
+                    <dt>{shippingLabel}</dt>
+                    <dd className='text-foreground'>{formatMoney(shipping, formatPrice)}</dd>
+                  </div>
+                ) : null}
+              </dl>
+            ) : null}
 
             <div className='flex gap-4'>
               <Button
-                className='h-10 px-8 flex-1 cursor-pointer rounded-full'
+                className='h-10 flex-1 cursor-pointer rounded-full px-8'
                 size='lg'
-                onClick={onAddToCart ? () => onAddToCart(product) : undefined}
+                disabled={!canPurchase}
+                onClick={
+                  onAddToCart && addPayload
+                    ? () => onAddToCart(addPayload.variantId, addPayload.quantity)
+                    : undefined
+                }
               >
                 {addToCartLabel}
               </Button>
               <Button
                 variant='outline'
                 size='icon'
-                className='size-9 rounded-full cursor-pointer'
-                onClick={() => {
-                  const next = !isWishlisted
-                  setIsWishlisted(next)
-                  onToggleWishlist?.(product, next)
-                }}
+                className='size-9 cursor-pointer rounded-full'
+                disabled={!selectedVariant}
+                onClick={onToggleWishlist ? toggleWishlist : undefined}
+                aria-pressed={isWishlisted}
                 aria-label={isWishlisted ? removeFromWishlistLabel : addToWishlistLabel}
               >
-                <ReactionToggle active={isWishlisted} icon={Heart} iconClassName='size-5' activeColorClassName='text-primary' />
+                <ReactionToggle
+                  active={isWishlisted}
+                  icon={Heart}
+                  iconClassName='size-5'
+                  activeColorClassName='text-primary'
+                />
               </Button>
             </div>
           </div>
@@ -198,4 +365,6 @@ export default function ProductOverview1({
       </section>
     </div>
   )
-}
+}
+
+export { variantLabelOf, galleryImages }