@instockng/storefront-ui 1.0.75 → 1.0.77

package/src/components/RecommendedProducts.tsx

@@ -14,6 +14,7 @@ import { formatCurrency, cn } from '../lib/utils';
 import { Button } from './ui/button';
 import { ShoppingCart, Loader2, Package } from 'lucide-react';
 import { useState, useEffect } from 'react';
+import { VariantPickerModal, type VariantPickerProduct, type Variant } from './VariantPickerModal';
 
 export interface RecommendedProductsProps {
   /** Number of recommendations to fetch */
@@ -32,6 +33,8 @@ export function RecommendedProducts({
   const [fadingProductIds, setFadingProductIds] = useState<string[]>([]);
   const [collapsingProductIds, setCollapsingProductIds] = useState<string[]>([]);
   const [hiddenProductIds, setHiddenProductIds] = useState<string[]>([]);
+  const [variantPickerProduct, setVariantPickerProduct] = useState<NonNullable<typeof recommendations>[number] | null>(null);
+  const [isAddingFromModal, setIsAddingFromModal] = useState(false);
 
   // Reset hidden products when recommendations change (e.g., when cart items are removed)
   useEffect(() => {
@@ -87,100 +90,139 @@ export function RecommendedProducts({
     }
   };
 
+  const handleAddClick = (product: typeof visibleRecommendations[0]) => {
+    // For multi-variant products, open modal
+    if (product.variants.length > 1) {
+      setVariantPickerProduct(product);
+      return;
+    }
+    // For single-variant, add directly
+    const firstVariant = product.variants[0];
+    if (firstVariant) {
+      handleAddToCart(product, firstVariant);
+    }
+  };
+
+  const handleVariantConfirm = async (product: VariantPickerProduct, variant: Variant) => {
+    setIsAddingFromModal(true);
+    try {
+      const fullProduct = visibleRecommendations.find(p => p.id === product.id);
+      const fullVariant = fullProduct?.variants.find(v => v.id === variant.id);
+      if (fullProduct && fullVariant) {
+        await handleAddToCart(fullProduct, fullVariant);
+      }
+      setVariantPickerProduct(null);
+    } finally {
+      setIsAddingFromModal(false);
+    }
+  };
+
   return (
-    <div className={cn('pt-2', className)}>
-      {/* Heading */}
-      <div className="mb-2 px-4">
-        <h3 className="text-lg font-semibold text-gray-900">Frequently bought together</h3>
-      </div>
+    <>
+      <div className={cn('pt-2', className)}>
+        {/* Heading */}
+        <div className="mb-2 px-4">
+          <h3 className="text-lg font-semibold text-gray-900">Frequently bought together</h3>
+        </div>
 
-      {/* Horizontal Scrollable Product List */}
-      <div className="overflow-x-auto">
-        <div className="flex gap-4 pb-2 transition-all duration-500">
-          {/* Left spacer */}
-          <div className="flex-shrink-0 w-1" />
-
-          {visibleRecommendations?.map((product) => {
-            const firstVariant = product.variants[0];
-            if (!firstVariant) return null;
-
-            const isAdding = addingProductIds.includes(product.id);
-            const isFading = fadingProductIds.includes(product.id);
-            const isCollapsing = collapsingProductIds.includes(product.id);
-
-            return (
-              <div
-                key={product.id}
-                className={cn(
-                  "flex flex-row flex-shrink-0 w-64 h-24 bg-white border border-gray-300 rounded-lg overflow-hidden transition-all duration-500",
-                  isFading && "opacity-0 blur-sm scale-95 pointer-events-none",
-                  isCollapsing && "w-0 h-0 mr-[-1rem] overflow-hidden"
-                )}
-              >
-                {/* Clickable Product Link */}
-                <a
-                  href={`/product/${product.slug}`}
-                  className="flex flex-row flex-1 hover:bg-gray-50 transition-colors"
+        {/* Horizontal Scrollable Product List */}
+        <div className="overflow-x-auto">
+          <div className="flex gap-4 pb-2 transition-all duration-500">
+            {/* Left spacer */}
+            <div className="flex-shrink-0 w-1" />
+
+            {visibleRecommendations?.map((product) => {
+              const firstVariant = product.variants[0];
+              if (!firstVariant) return null;
+
+              const isAdding = addingProductIds.includes(product.id);
+              const isFading = fadingProductIds.includes(product.id);
+              const isCollapsing = collapsingProductIds.includes(product.id);
+
+              return (
+                <div
+                  key={product.id}
+                  className={cn(
+                    "flex flex-row flex-shrink-0 w-64 h-24 bg-white border border-gray-300 rounded-lg overflow-hidden transition-all duration-500",
+                    isFading && "opacity-0 blur-sm scale-95 pointer-events-none",
+                    isCollapsing && "w-0 h-0 mr-[-1rem] overflow-hidden"
+                  )}
                 >
-                  {/* Product Image */}
-                  <div className="relative w-20 h-full flex-shrink-0 bg-gray-100">
-                    {product.thumbnailUrl ? (
-                      <img
-                        src={product.thumbnailUrl}
-                        alt={product.name}
-                        className="w-full h-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-full h-full flex items-center justify-center">
-                        <Package className="h-8 w-8 text-gray-300" />
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Product Info */}
-                  <div className="p-2 flex flex-col flex-1 justify-between">
-                    <div>
-                      <h4 className="text-xs font-medium text-gray-900 line-clamp-2 leading-tight">
-                        {product.name}
-                      </h4>
-                      <p className="text-xs font-semibold text-accent-600 mt-0.5">
-                        {formatCurrency(firstVariant.price)}
-                      </p>
-                    </div>
-
-                    {/* Add to Cart Button */}
-                    <Button
-                      size="sm"
-                      onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleAddToCart(product, firstVariant);
-                      }}
-                      disabled={isAdding}
-                      className="w-full bg-accent-500 hover:bg-accent-600 text-white text-xs h-6 mt-1"
-                    >
-                      {isAdding ? (
-                        <>
-                          <Loader2 className="h-3 w-3 animate-spin" />
-                          Adding...
-                        </>
+                  {/* Clickable Product Link */}
+                  <a
+                    href={`/product/${product.slug}`}
+                    className="flex flex-row flex-1 hover:bg-gray-50 transition-colors"
+                  >
+                    {/* Product Image */}
+                    <div className="relative w-20 h-full flex-shrink-0 bg-gray-100">
+                      {product.thumbnailUrl ? (
+                        <img
+                          src={product.thumbnailUrl}
+                          alt={product.name}
+                          className="w-full h-full object-cover"
+                        />
                       ) : (
-                        <>
-                          <ShoppingCart className="h-3 w-3" />
-                          Add
-                        </>
+                        <div className="w-full h-full flex items-center justify-center">
+                          <Package className="h-8 w-8 text-gray-300" />
+                        </div>
                       )}
-                    </Button>
-                  </div>
-                </a>
-              </div>
-            );
-          })}
-
-          {/* Right spacer */}
-          <div className="flex-shrink-0 w-1" />
+                    </div>
+
+                    {/* Product Info */}
+                    <div className="p-2 flex flex-col flex-1 justify-between">
+                      <div>
+                        <h4 className="text-xs font-medium text-gray-900 line-clamp-2 leading-tight">
+                          {product.name}
+                        </h4>
+                        <p className="text-xs font-semibold text-accent-600 mt-0.5">
+                          {formatCurrency(firstVariant.price)}
+                        </p>
+                      </div>
+
+                      {/* Add to Cart Button */}
+                      <Button
+                        size="sm"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          handleAddClick(product);
+                        }}
+                        disabled={isAdding}
+                        className="w-full bg-accent-500 hover:bg-accent-600 text-white text-xs h-6 mt-1"
+                      >
+                        {isAdding ? (
+                          <>
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                            Adding...
+                          </>
+                        ) : (
+                          <>
+                            <ShoppingCart className="h-3 w-3" />
+                            Add
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  </a>
+                </div>
+              );
+            })}
+
+            {/* Right spacer */}
+            <div className="flex-shrink-0 w-1" />
+          </div>
         </div>
       </div>
-    </div>
+
+      {/* Variant Picker Modal */}
+      <VariantPickerModal
+        isOpen={!!variantPickerProduct}
+        onClose={() => setVariantPickerProduct(null)}
+        product={variantPickerProduct}
+        onConfirm={handleVariantConfirm}
+        isLoading={isAddingFromModal}
+      />
+    </>
   );
 }
+

package/src/components/VariantPickerModal.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+/**
+ * VariantPickerModal Component
+ *
+ * Modal for selecting a product variant before adding to cart.
+ * Used by ProductAddOns and RecommendedProducts for multi-variant products.
+ */
+
+import { useState } from 'react';
+import { Modal } from './ui/modal';
+import { Button } from './ui/button';
+import { formatCurrency, cn } from '../lib/utils';
+import { ShoppingCart, Loader2, Package } from 'lucide-react';
+
+export interface Variant {
+    id: string;
+    name?: string | null;
+    price: number;
+    sku: string;
+    thumbnailUrl?: string | null;
+}
+
+export interface VariantPickerProduct {
+    id: string;
+    name: string;
+    slug: string;
+    thumbnailUrl?: string | null;
+    variants: Variant[];
+}
+
+export interface VariantPickerModalProps {
+    /** Controls modal visibility */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Product to select variant for */
+    product: VariantPickerProduct | null;
+    /** Callback when variant is selected and confirmed */
+    onConfirm: (product: VariantPickerProduct, variant: Variant) => void;
+    /** Whether add operation is in progress */
+    isLoading?: boolean;
+}
+
+export function VariantPickerModal({
+    isOpen,
+    onClose,
+    product,
+    onConfirm,
+    isLoading = false,
+}: VariantPickerModalProps) {
+    const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
+
+    // Reset selection when product changes
+    const effectiveVariantId = selectedVariantId || product?.variants[0]?.id || null;
+    const selectedVariant = product?.variants.find(v => v.id === effectiveVariantId);
+
+    const handleConfirm = () => {
+        if (product && selectedVariant) {
+            onConfirm(product, selectedVariant);
+        }
+    };
+
+    if (!product) return null;
+
+    return (
+        <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            title="Select Option"
+            size="sm"
+            footer={
+                <Button
+                    onClick={handleConfirm}
+                    disabled={!selectedVariant || isLoading}
+                    className="w-full bg-accent-500 hover:bg-accent-600 text-white"
+                    size="lg"
+                >
+                    {isLoading ? (
+                        <>
+                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                            Adding...
+                        </>
+                    ) : (
+                        <>
+                            <ShoppingCart className="h-4 w-4 mr-2" />
+                            Add to Cart - {selectedVariant && formatCurrency(selectedVariant.price)}
+                        </>
+                    )}
+                </Button>
+            }
+        >
+            <div className="space-y-4">
+                {/* Product Info */}
+                <div className="flex gap-4">
+                    {/* Thumbnail - shows variant image if available, otherwise product image */}
+                    <div className="w-20 h-20 flex-shrink-0 rounded-lg overflow-hidden bg-gray-100">
+                        {(selectedVariant?.thumbnailUrl || product.thumbnailUrl) ? (
+                            <img
+                                src={selectedVariant?.thumbnailUrl || product.thumbnailUrl || ''}
+                                alt={selectedVariant?.name || product.name}
+                                className="w-full h-full object-cover"
+                            />
+                        ) : (
+                            <div className="w-full h-full flex items-center justify-center">
+                                <Package className="h-8 w-8 text-gray-300" />
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Name */}
+                    <div className="flex-1">
+                        <h3 className="font-semibold text-gray-900">{product.name}</h3>
+                        <p className="text-sm text-gray-500 mt-1">
+                            {product.variants.length} options available
+                        </p>
+                    </div>
+                </div>
+
+                {/* Variant Buttons */}
+                <div className="space-y-2">
+                    <p className="text-sm font-medium text-gray-700">Choose an option:</p>
+                    <div className="flex flex-wrap gap-2">
+                        {product.variants.map((variant) => {
+                            const isSelected = variant.id === effectiveVariantId;
+                            const variantImage = variant.thumbnailUrl || product.thumbnailUrl;
+                            return (
+                                <button
+                                    key={variant.id}
+                                    onClick={() => setSelectedVariantId(variant.id)}
+                                    className={cn(
+                                        "flex items-center gap-2 px-3 py-2 rounded-full text-sm font-medium border-2 transition-all",
+                                        isSelected
+                                            ? "border-accent-500 bg-accent-50 text-accent-700"
+                                            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300"
+                                    )}
+                                >
+                                    {variantImage && (
+                                        <img
+                                            src={variantImage}
+                                            alt={variant.name || 'Variant'}
+                                            className="w-6 h-6 rounded-full object-cover flex-shrink-0"
+                                        />
+                                    )}
+                                    {variant.name || 'Default'} - {formatCurrency(variant.price)}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    );
+}

package/src/contexts/CartContext.tsx

@@ -264,6 +264,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
 
       // Add item to cart via API
       // Refresh recommendations only if cart is not visible
+      const shouldRefreshRecommendations = !isOpen;
       const updatedCart = await addItemMutation.mutateAsync({
         sku,
         quantity,
@@ -271,9 +272,15 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         fbp,
         ttp,
         ttclid,
-        refreshRecommendations: !isOpen
+        refreshRecommendations: shouldRefreshRecommendations
       });
 
+      // Invalidate recommendations cache only if cart was closed when adding
+      // (to avoid refreshing while user is viewing the cart)
+      if (shouldRefreshRecommendations && cartId) {
+        queryClient.invalidateQueries({ queryKey: queryKeys.public.carts.recommendations(cartId) });
+      }
+
       // Skip tracking if error response
       if ('error' in updatedCart) return;
 

package/src/index.ts

@@ -37,6 +37,9 @@ export type { ProductAddOnsProps, AddOnProduct } from './components/ProductAddOn
 export { RecommendedProducts } from './components/RecommendedProducts';
 export type { RecommendedProductsProps } from './components/RecommendedProducts';
 
+export { VariantPickerModal } from './components/VariantPickerModal';
+export type { VariantPickerModalProps, VariantPickerProduct, Variant } from './components/VariantPickerModal';
+
 export { CartItem } from './components/CartItem';
 export type { CartItemProps } from './components/CartItem';