@instockng/storefront-ui 1.0.55 → 1.0.56

package/src/components/ProductAddOns.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+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';
+import { ProductCardProduct } from './ProductCard';
+// @ts-ignore
+import { useGetProductAddOns } from '@instockng/api-client';
+import { useCart } from '../contexts/CartContext';
+
+export interface AddOnProduct extends ProductCardProduct {
+    slug: string;
+    compareAtPrice?: number | null;
+    addonDescription?: string | null;
+}
+
+interface ProductAddOnsProps {
+    /** Product slug to fetch add-ons for */
+    slug?: string;
+    /** Manual product list (overrides slug fetching) */
+    products?: AddOnProduct[];
+    /** Manual toggle handler */
+    onToggle?: (product: AddOnProduct, isSelected: boolean) => void;
+    /** Manual selection list (list of product IDs) */
+    selectedProductIds?: string[];
+    className?: string;
+    title?: string;
+    limit?: number;
+}
+
+export function ProductAddOns({
+    slug,
+    products: manualProducts,
+    onToggle: manualOnToggle,
+    selectedProductIds: manualSelectedIds,
+    className,
+    title = 'Popular add-ons',
+    limit = 6,
+}: ProductAddOnsProps) {
+    const { cart, addItem, removeItem } = useCart();
+
+    // Fetch products if slug is provided
+    const { data: fetchedProducts, isLoading } = useGetProductAddOns(slug || '', limit, {
+        enabled: !!slug && !manualProducts
+    });
+
+    const products = manualProducts || fetchedProducts || [];
+
+    // Calculate selected IDs if not provided manually
+    const selectedProductIds = manualSelectedIds || products
+        .filter((addon: AddOnProduct) => cart?.items.some(item => item.variant.id === addon.variants[0]?.id))
+        .map((addon: AddOnProduct) => addon.id);
+
+    // Internal toggle logic
+    const handleToggle = async (product: AddOnProduct, isSelected: boolean) => {
+        if (manualOnToggle) {
+            manualOnToggle(product, isSelected);
+            return;
+        }
+
+        const variant = product.variants[0];
+        if (!variant) return;
+
+        if (isSelected) {
+            await addItem(
+                product.slug,
+                product.name,
+                variant.price,
+                variant.sku,
+                1
+            );
+        } else {
+            const cartItem = cart?.items.find(item => item.variant.id === variant.id);
+            if (cartItem) {
+                await removeItem(cartItem.id);
+            }
+        }
+    };
+
+    const scrollContainerRef = useRef<HTMLDivElement>(null);
+    const [scrollProgress, setScrollProgress] = useState(0);
+
+    const handleScroll = () => {
+        if (scrollContainerRef.current) {
+            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+            const progress = scrollLeft / (scrollWidth - clientWidth);
+            setScrollProgress(progress || 0);
+        }
+    };
+
+    const scroll = (direction: 'left' | 'right') => {
+        if (scrollContainerRef.current) {
+            const { clientWidth } = scrollContainerRef.current;
+            const scrollAmount = clientWidth * 0.9;
+            scrollContainerRef.current.scrollBy({
+                left: direction === 'left' ? -scrollAmount : scrollAmount,
+                behavior: 'smooth',
+            });
+        }
+    };
+
+    if ((!products || products.length === 0) && !isLoading) return null;
+
+    if (isLoading) {
+        return (
+            <div className={cn('w-full py-8 space-y-4 animate-pulse', className)}>
+                <div className="h-4 w-32 bg-gray-200 rounded px-1 mb-6" />
+                <div className="flex gap-4 overflow-x-hidden">
+                    <div className="min-w-[340px] h-[148px] bg-gray-100 rounded-[2rem]" />
+                    <div className="min-w-[340px] h-[148px] bg-gray-100 rounded-[2rem]" />
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={cn('w-full py-8', className)}>
+            <div className="px-1 mb-3">
+                <h3 className="text-lg font-bold tracking-tight text-gray-900">{title}</h3>
+            </div>
+
+            <div className="relative">
+                <div
+                    ref={scrollContainerRef}
+                    onScroll={handleScroll}
+                    className="flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-1"
+                    style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+                >
+                    {products.map((product: AddOnProduct) => {
+                        const isSelected = selectedProductIds.includes(product.id);
+                        const variant = product.variants[0];
+                        const price = variant?.price || 0;
+                        const compareAtPrice = product.compareAtPrice || (variant as any).compareAtPrice;
+                        const hasDiscount = compareAtPrice && compareAtPrice > price;
+                        const discountPercent = hasDiscount
+                            ? Math.round(((compareAtPrice - price) / compareAtPrice) * 100)
+                            : 0;
+
+                        return (
+                            <div
+                                key={product.id}
+                                className="relative flex min-w-[280px] md:min-w-[420px] snap-start items-center gap-4 rounded-xl bg-[#EBEBEB] p-3 transition-all"
+                            >
+                                {/* 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 ? (
+                                        <img
+                                            src={product.imageUrl}
+                                            alt={product.name}
+                                            className="h-full w-full object-cover"
+                                        />
+                                    ) : (
+                                        <div className="flex h-full w-full items-center justify-center text-[10px] text-gray-400">No Img</div>
+                                    )}
+                                </div>
+
+                                {/* Content Info */}
+                                <div className="flex flex-1 flex-col justify-center min-w-0">
+                                    <h4 className="text-md font-bold text-[#333] truncate pr-2" title={product.name}>
+                                        {product.name}
+                                    </h4>
+
+                                    {product.addonDescription && (
+                                        <p className="text-[11px] text-gray-500 line-clamp-2 italic mb-1">
+                                            {product.addonDescription}
+                                        </p>
+                                    )}
+
+                                    <div className="flex items-center gap-2 mt-1">
+                                        <span className="text-md font-bold text-[#333]">
+                                            {formatCurrency(price)}
+                                        </span>
+                                        {hasDiscount && (
+                                            <>
+                                                <span className="text-sm text-[#DC143C] line-through">
+                                                    {formatCurrency(compareAtPrice)}
+                                                </span>
+                                                <Badge className="bg-[#DC143C]/10 hover:bg-[#DC143C]/20 text-[#DC143C] border-none text-[10px] font-bold px-2 py-0.5 rounded-lg uppercase tracking-tight">
+                                                    {discountPercent}% OFF
+                                                </Badge>
+                                            </>
+                                        )}
+                                    </div>
+                                </div>
+
+                                {/* Toggle Switch */}
+                                <div className="pl-2">
+                                    <Switch
+                                        checked={isSelected}
+                                        // @ts-ignore
+                                        onCheckedChange={(checked) => handleToggle(product, checked)}
+                                        className="scale-125"
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* Bottom Controls */}
+            <div className="flex items-center justify-between px-2 mt-2">
+                {/* Pagination Dots */}
+                <div className="flex gap-1.5 focus:outline-none">
+                    {Array.from({ length: Math.min(products.length, 6) }).map((_, i) => {
+                        const isActive = Math.round(scrollProgress * (Math.min(products.length, 6) - 1)) === i;
+                        return (
+                            <div
+                                key={i}
+                                className={cn(
+                                    "h-2 w-2 rounded-full transition-all duration-300",
+                                    isActive ? "bg-gray-600 scale-110" : "bg-gray-300"
+                                )}
+                            />
+                        );
+                    })}
+                </div>
+
+                {/* Navigation Arrows */}
+                <div className="flex gap-4">
+                    <button
+                        onClick={() => scroll('left')}
+                        className="text-gray-400 hover:text-gray-900 transition-colors"
+                        aria-label="Previous"
+                    >
+                        <ChevronLeft className="h-6 w-6 stroke-[2.5px]" />
+                    </button>
+                    <button
+                        onClick={() => scroll('right')}
+                        className="text-gray-400 hover:text-gray-900 transition-colors"
+                        aria-label="Next"
+                    >
+                        <ChevronRight className="h-6 w-6 stroke-[2.5px]" />
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/components/ShoppingCart.stories.tsx

@@ -50,9 +50,12 @@ const mockCart: Cart = {
     logoUrl: 'https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=80&fit=crop',
     siteUrl: 'https://demo-store.com',
     domain: 'f',
+    metaPixelId: null as any,
+    tiktokPixelId: null as any,
+    paystackPublicKey: null as any,
+    paystackSecretKey: null as any,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
-    metaPixelId: null as any,
     deletedAt: null as any,
   },
   customerPhone: null as any,

package/src/components/ui/switch.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+
+const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
+    ({ className, checked, onCheckedChange, disabled, ...props }, ref) => {
+        return (
+            <label
+                className={cn(
+                    'inline-flex cursor-pointer items-center',
+                    disabled && 'cursor-not-allowed opacity-50',
+                    className
+                )}
+            >
+                <input
+                    type="checkbox"
+                    className="peer sr-only"
+                    ref={ref}
+                    checked={checked}
+                    onChange={(e) => onCheckedChange?.(e.target.checked)}
+                    disabled={disabled}
+                    {...props}
+                />
+                <div className="peer h-6 w-11 rounded-full bg-[#ccc] after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full  after:bg-white after:transition-all after:content-[''] peer-checked:bg-accent-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:border-accent-600 dark:bg-[#ccc] dark:peer-focus:ring-blue-800 rtl:peer-checked:after:-translate-x-full"></div>
+            </label>
+        );
+    }
+);
+Switch.displayName = 'Switch';
+
+export { Switch };

package/src/lib/utils.ts

@@ -6,9 +6,11 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function formatCurrency(amount: number): string {
-  return new Intl.NumberFormat('en-US', {
+  return new Intl.NumberFormat('en-NG', {
     style: 'currency',
     currency: 'NGN',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
   }).format(amount)
 }
 

package/src/test-utils/MockCartProvider.tsx

@@ -24,6 +24,9 @@ const mockCart: Cart = {
     siteUrl: 'https://demo-store.com',
     domain: 'f',
     metaPixelId: null as any,
+    tiktokPixelId: null as any,
+    paystackPublicKey: null as any,
+    paystackSecretKey: null as any,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     deletedAt: null as any,
@@ -53,6 +56,7 @@ const mockCart: Cart = {
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
         deletedAt: null as any,
+        compareAtPrice: "0",
         product: {
           id: 'product-1',
           name: 'Premium Cotton T-Shirt',
@@ -64,9 +68,9 @@ const mockCart: Cart = {
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
           deletedAt: null as any,
-          quantityDiscounts: null as any,
+          quantityDiscounts: [] as any,
         },
-      },
+      } as any,
       quantity: 2,
       basePrice: 29.99,
       discountPercent: 0,
@@ -87,7 +91,8 @@ const mockCart: Cart = {
         isActive: true,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        deletedAt: null,
+        deletedAt: null as any,
+        compareAtPrice: "0",
         product: {
           id: 'product-2',
           name: 'Slim Fit Jeans',
@@ -98,10 +103,10 @@ const mockCart: Cart = {
           thumbnailUrl: 'https://images.unsplash.com/photo-1542272604-787c3835535d?w=400',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
-          deletedAt: null,
-          quantityDiscounts: null,
+          deletedAt: null as any,
+          quantityDiscounts: [] as any,
         },
-      },
+      } as any,
       quantity: 1,
       basePrice: 34.99,
       discountPercent: 0,
@@ -191,7 +196,7 @@ export function MockCartProvider({
     isSuccess: false,
     data: undefined,
     error: null,
-    reset: () => {},
+    reset: () => { },
     status: 'idle' as const,
     failureCount: 0,
     failureReason: null,
@@ -244,6 +249,8 @@ export function MockCartProvider({
         brandId: cart.brand.id,
         deliveryCost: 1500,
         freeShippingThreshold: null as any,
+        noteTitle: null as any,
+        noteContent: null as any,
         allowCOD: true,
         allowOnline: true,
         waybillOnly: false,