@instockng/storefront-ui 1.0.57 → 1.0.58

package/src/components/ProductAddOns.stories.tsx

@@ -18,7 +18,7 @@ const mockProducts: AddOnProduct[] = [
         id: '1',
         slug: 'travel-case',
         name: 'Travel Case',
-        imageUrl: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1544816155-12df9643f363?w=400',
         variants: [{ id: 'v1', price: 15.00, sku: 'CASE-01', name: 'Standard' }],
         addonDescription: 'Keep your products safe while traveling.',
         compareAtPrice: 25.00,
@@ -28,7 +28,7 @@ const mockProducts: AddOnProduct[] = [
         id: '2',
         slug: 'expansion-kit',
         name: 'Expansion Kit',
-        imageUrl: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400',
         variants: [{ id: 'v2', price: 49.99, sku: 'KIT-01', name: 'Full' }],
         addonDescription: 'Adds 5 more slots to your base unit.',
         compareAtPrice: 65.00,
@@ -38,7 +38,7 @@ const mockProducts: AddOnProduct[] = [
         id: '3',
         slug: 'cleaning-solution',
         name: 'Cleaning Solution',
-        imageUrl: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=400',
         variants: [{ id: 'v3', price: 9.99, sku: 'CLEAN-01', name: '100ml' }],
         addonDescription: 'Eco-friendly formula for deep cleaning.',
         brand: { name: 'Pure' }
@@ -47,7 +47,7 @@ const mockProducts: AddOnProduct[] = [
         id: '4',
         slug: 'extra-batteries',
         name: 'Extra Batteries',
-        imageUrl: 'https://images.unsplash.com/photo-1619648366548-05f476906233?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1619648366548-05f476906233?w=400',
         variants: [{ id: 'v4', price: 12.00, sku: 'BATT-01', name: '2-Pack' }],
         brand: { name: 'PowerUp' }
     },
@@ -55,7 +55,7 @@ const mockProducts: AddOnProduct[] = [
         id: '5',
         slug: 'replacement-straps',
         name: 'Replacement Straps',
-        imageUrl: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400',
         variants: [{ id: 'v5', price: 19.99, sku: 'STRAP-01', name: 'Leather' }],
         addonDescription: 'Genuine leather replacement straps.',
         compareAtPrice: 29.99,
@@ -65,7 +65,7 @@ const mockProducts: AddOnProduct[] = [
         id: '6',
         slug: 'protective-film',
         name: 'Protective Film',
-        imageUrl: 'https://images.unsplash.com/photo-1586210579191-33b45e38fa2c?w=400',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1586210579191-33b45e38fa2c?w=400',
         variants: [{ id: 'v6', price: 5.50, sku: 'FILM-01', name: 'Clear' }],
         brand: { name: 'Shield' }
     }

package/src/components/ProductAddOns.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useRef } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { Button } from './ui/button';
 import { Switch } from './ui/switch';
 import { Badge } from './ui/badge';
 import { cn, formatCurrency } from '../lib/utils';
@@ -146,9 +145,9 @@ export function ProductAddOns({
                             >
                                 {/* Image Container */}
                                 <div className="h-20 w-20 flex-shrink-0 overflow-hidden rounded-xl bg-white/40 flex items-center justify-center">
-                                    {product.imageUrl ? (
+                                    {product.thumbnailUrl ? (
                                         <img
-                                            src={product.imageUrl}
+                                            src={product.thumbnailUrl}
                                             alt={product.name}
                                             className="h-full w-full object-cover"
                                         />

package/src/components/ProductCard.stories.tsx

@@ -18,7 +18,7 @@ const mockProduct: ProductCardProduct = {
   id: '1',
   name: 'Premium Cotton T-Shirt',
   description: 'Comfortable and stylish cotton t-shirt perfect for everyday wear',
-  imageUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+  thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
   brand: {
     name: 'Fashion Brand',
     logoUrl: 'https://via.placeholder.com/100x50',
@@ -99,7 +99,7 @@ export const NoImage: Story = {
   args: {
     product: {
       ...mockProduct,
-      imageUrl: undefined,
+      thumbnailUrl: undefined,
     },
   },
 };

package/src/components/ProductCard.tsx

@@ -19,7 +19,7 @@ export interface ProductCardProduct {
   id: string;
   name: string;
   description?: string;
-  imageUrl?: string;
+  thumbnailUrl?: string;
   brand?: {
     name: string;
     logoUrl?: string;
@@ -92,9 +92,9 @@ export function ProductCard({
     >
       {/* Product Image */}
       <div className="relative aspect-square overflow-hidden bg-gray-100">
-        {product.imageUrl ? (
+        {product.thumbnailUrl ? (
           <img
-            src={product.imageUrl}
+            src={product.thumbnailUrl}
             alt={product.name}
             className={cn(
               'h-full w-full object-cover transition-transform group-hover:scale-105',

package/src/components/ProductGrid.tsx

@@ -110,7 +110,7 @@ export function ProductGrid({
           id: product.id,
           name: product.name,
           description: product.description || undefined,
-          imageUrl: product.thumbnailUrl || undefined,
+          thumbnailUrl: product.thumbnailUrl || undefined,
           brand: undefined, // Brand info not included in product response
           variants: product.variants.map((v: any) => ({
             id: v.id,