@instockng/storefront-ui 1.0.92 → 1.0.94

package/src/components/ShoppingCart.tsx

@@ -9,13 +9,15 @@
 
 import { useEffect, useState } from 'react';
 import type { Order } from '@instockng/api-client';
-import { useGetCartRecommendations } from '@instockng/api-client';
+import { useGetCartRecommendations, useGetCartUpsellAddons } from '@instockng/api-client';
 import { useCart } from '../contexts/CartContext';
 import { CartItem } from './CartItem';
 import { DiscountCodeInput } from './DiscountCodeInput';
 import { Checkout } from './Checkout';
 import { RecommendedProducts } from './RecommendedProducts';
 import { CartUpsellScreen } from './CartUpsellScreen';
+import { AddOnsDiscountScreen } from './AddOnsDiscountScreen';
+import { FreeShippingProgress } from './FreeShippingProgress';
 import { Button } from './ui/button';
 import { X, Package, Loader2, ArrowLeft } from 'lucide-react';
 import { formatCurrency, cn } from '../lib/utils';
@@ -74,19 +76,26 @@ export function ShoppingCart({
   // Fetch recommendations to decide whether to show upsell
   const { data: recommendations } = useGetCartRecommendations(cart?.id, 100);
 
+  // Prefetch upsell addons alongside recommendations
+  const { data: upsellAddons } = useGetCartUpsellAddons(cart?.id);
+
   // State for checkout modal
   const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
 
-  // State for upsell interstitial
+  // State for upsell interstitial (stage 1)
   const [showUpsell, setShowUpsell] = useState(false);
 
+  // State for discounted add-ons interstitial (stage 2)
+  const [showDiscountedAddons, setShowDiscountedAddons] = useState(false);
+
   // Prevent body scroll when cart is open
   useHideBodyOverflow(isOpen);
 
-  // Reset upsell when cart closes
+  // Reset upsell screens when cart closes
   useEffect(() => {
     if (!isOpen) {
       setShowUpsell(false);
+      setShowDiscountedAddons(false);
     }
   }, [isOpen]);
 
@@ -105,12 +114,17 @@ export function ShoppingCart({
   const subtotal = cart?.pricing?.subtotal || 0;
   const discount = cart?.pricing.discount?.amount || 0;
 
+  const hasDiscountedAddons = upsellAddons && upsellAddons.length > 0 &&
+    upsellAddons.some((group: any) => group.addons && group.addons.length > 0);
+
   const handleCheckout = () => {
     // Track InitiateCheckout with Meta Pixel (includes event ID for CAPI deduplication)
     trackCheckoutInitiated();
 
     if (recommendations && recommendations.length > 0) {
       setShowUpsell(true);
+    } else if (hasDiscountedAddons) {
+      setShowDiscountedAddons(true);
     } else {
       setIsCheckoutOpen(true);
     }
@@ -119,6 +133,15 @@ export function ShoppingCart({
 
   const handleSkipUpsell = () => {
     setShowUpsell(false);
+    if (hasDiscountedAddons) {
+      setShowDiscountedAddons(true);
+    } else {
+      setIsCheckoutOpen(true);
+    }
+  };
+
+  const handleSkipDiscountedAddons = () => {
+    setShowDiscountedAddons(false);
     setIsCheckoutOpen(true);
   };
 
@@ -126,6 +149,15 @@ export function ShoppingCart({
     setShowUpsell(false);
   };
 
+  const handleBackFromDiscountedAddons = () => {
+    if (recommendations && recommendations.length > 0) {
+      setShowDiscountedAddons(false);
+      setShowUpsell(true);
+    } else {
+      setShowDiscountedAddons(false);
+    }
+  };
+
   const handleContinueShopping = () => {
     onContinueShopping?.();
     onClose();
@@ -155,16 +187,18 @@ export function ShoppingCart({
           {/* Header */}
           <div className="border-b border-gray-300 px-4 py-2">
             <div className="flex items-center justify-between">
-              {showUpsell ? (
+              {showUpsell || showDiscountedAddons ? (
                 <div className="flex items-center gap-2">
                   <button
-                    onClick={handleBackFromUpsell}
+                    onClick={showDiscountedAddons ? handleBackFromDiscountedAddons : handleBackFromUpsell}
                     className="rounded-full p-2 transition-colors hover:bg-gray-100"
-                    aria-label="Back to cart"
+                    aria-label="Back"
                   >
                     <ArrowLeft className="h-5 w-5" />
                   </button>
-                  <h2 className="text-lg font-medium">Before you go...</h2>
+                  <h2 className="text-lg font-medium">
+                    {showDiscountedAddons ? 'Exclusive deals for you' : 'Before you go...'}
+                  </h2>
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
@@ -182,49 +216,23 @@ export function ShoppingCart({
             </div>
           </div>
 
-          {/* Upsell Screen */}
+          {/* Upsell Screen (Stage 1) */}
           {showUpsell && (
             <CartUpsellScreen onSkip={handleSkipUpsell} limit={100} checkoutButtonClassName={checkoutButtonClassName} />
           )}
 
+          {/* Discounted Add-Ons Screen (Stage 2) */}
+          {showDiscountedAddons && (
+            <AddOnsDiscountScreen onSkip={handleSkipDiscountedAddons} checkoutButtonClassName={checkoutButtonClassName} />
+          )}
+
           {/* Free Shipping Progress */}
-          {!showUpsell && !isLoading && !error && cart && cart.items && cart.items.length > 0 && cart.brand?.freeShippingThreshold && (
-            <div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
-              {(() => {
-                const threshold = cart.brand.freeShippingThreshold;
-                const current = cart.pricing?.subtotal || 0;
-                const remaining = Math.max(0, threshold - current);
-                const progress = Math.min(100, (current / threshold) * 100);
-                const isFreeShipping = remaining <= 0;
-
-                return (
-                  <div className="space-y-2">
-                    <p className="text-sm font-bold text-center">
-                      {isFreeShipping ? (
-                        <span className="text-green-600">You've unlocked FREE delivery! 🎉</span>
-                      ) : (
-                        <span>
-                          You're <span className="text-red-500">{formatCurrency(remaining)}</span> away from FREE delivery
-                        </span>
-                      )}
-                    </p>
-                    <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
-                      <div
-                        className={cn(
-                          "h-full transition-all duration-500 ease-out",
-                          isFreeShipping ? "bg-green-500" : "bg-red-500"
-                        )}
-                        style={{ width: `${progress}%` }}
-                      />
-                    </div>
-                  </div>
-                );
-              })()}
-            </div>
+          {!showUpsell && !showDiscountedAddons && !isLoading && !error && cart && cart.items && cart.items.length > 0 && (
+            <FreeShippingProgress />
           )}
 
           {/* Loading State */}
-          {!showUpsell && isLoading && (
+          {!showUpsell && !showDiscountedAddons && isLoading && (
             <div className="flex flex-1 items-center justify-center">
               <div className="text-center">
                 <Loader2 className="mx-auto mb-4 h-12 w-12 animate-spin text-accent-500" />
@@ -234,7 +242,7 @@ export function ShoppingCart({
           )}
 
           {/* Error State */}
-          {!showUpsell && error && !isLoading && (
+          {!showUpsell && !showDiscountedAddons && error && !isLoading && (
             <div className="flex flex-1 items-center justify-center">
               <div className="text-center">
                 <Package className="mx-auto mb-4 h-12 w-12 text-red-600" />
@@ -244,7 +252,7 @@ export function ShoppingCart({
           )}
 
           {/* Empty State */}
-          {!showUpsell && !isLoading && !error && (!cart || !cart.items || cart.items.length === 0) && (
+          {!showUpsell && !showDiscountedAddons && !isLoading && !error && (!cart || !cart.items || cart.items.length === 0) && (
             <div className="flex flex-1 items-center justify-center">
               <div className="text-center">
                 <Package className="mx-auto mb-4 h-12 w-12 text-gray-400" />
@@ -254,7 +262,7 @@ export function ShoppingCart({
           )}
 
           {/* Cart Content */}
-          {!showUpsell && !isLoading && !error && cart && cart.items && cart.items.length > 0 && (
+          {!showUpsell && !showDiscountedAddons && !isLoading && !error && cart && cart.items && cart.items.length > 0 && (
             <>
               {/* Cart Items - Scrollable */}
               <div className="flex-1 overflow-y-auto">

package/src/components/VariantPickerModal.tsx

@@ -19,6 +19,11 @@ export interface Variant {
     price: number;
     sku: string;
     thumbnailUrl?: string | null;
+    availability?: {
+        available: boolean;
+        trackInventory: boolean;
+        totalInventory: number | null;
+    };
 }
 
 export interface VariantPickerProduct {
@@ -40,6 +45,8 @@ export interface VariantPickerModalProps {
     onConfirm: (product: VariantPickerProduct, variant: Variant) => void;
     /** Whether add operation is in progress */
     isLoading?: boolean;
+    /** Optional discount percentage to show discounted prices */
+    discountPercent?: number | null;
 }
 
 export function VariantPickerModal({
@@ -48,11 +55,13 @@ export function VariantPickerModal({
     product,
     onConfirm,
     isLoading = false,
+    discountPercent,
 }: VariantPickerModalProps) {
     const [selectedVariantId, setSelectedVariantId] = useState<string | null>(null);
 
-    // Reset selection when product changes
-    const effectiveVariantId = selectedVariantId || product?.variants[0]?.id || null;
+    // Reset selection when product changes — default to first available variant
+    const firstAvailableId = product?.variants.find(v => !v.availability || v.availability.available)?.id || product?.variants[0]?.id || null;
+    const effectiveVariantId = selectedVariantId || firstAvailableId;
     const selectedVariant = product?.variants.find(v => v.id === effectiveVariantId);
 
     const handleConfirm = () => {
@@ -72,7 +81,7 @@ export function VariantPickerModal({
             footer={
                 <Button
                     onClick={handleConfirm}
-                    disabled={!selectedVariant || isLoading}
+                    disabled={!selectedVariant || isLoading || (selectedVariant?.availability && !selectedVariant.availability.available)}
                     className="w-full bg-accent-500 hover:bg-accent-600 text-white"
                     size="lg"
                 >
@@ -84,7 +93,14 @@ export function VariantPickerModal({
                     ) : (
                         <>
                             <ShoppingCart className="h-4 w-4 mr-2" />
-                            Add to Cart - {selectedVariant && formatCurrency(selectedVariant.price)}
+                            Add to Cart - {selectedVariant && (
+                                discountPercent ? (
+                                    <span>
+                                        <span className="line-through opacity-60 mr-1">{formatCurrency(selectedVariant.price)}</span>
+                                        {formatCurrency(Math.round(selectedVariant.price * (1 - discountPercent / 100)))}
+                                    </span>
+                                ) : formatCurrency(selectedVariant.price)
+                            )}
                         </>
                     )}
                 </Button>
@@ -123,16 +139,20 @@ export function VariantPickerModal({
                     <div className="flex flex-wrap gap-2">
                         {product.variants.map((variant) => {
                             const isSelected = variant.id === effectiveVariantId;
+                            const isOutOfStock = variant.availability && !variant.availability.available;
                             const variantImage = variant.thumbnailUrl || product.thumbnailUrl;
                             return (
                                 <button
                                     key={variant.id}
-                                    onClick={() => setSelectedVariantId(variant.id)}
+                                    onClick={() => !isOutOfStock && setSelectedVariantId(variant.id)}
+                                    disabled={!!isOutOfStock}
                                     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"
+                                        isOutOfStock
+                                            ? "border-gray-200 bg-gray-50 text-gray-400 cursor-not-allowed opacity-60"
+                                            : isSelected
+                                                ? "border-accent-500 bg-accent-50 text-accent-700"
+                                                : "border-gray-200 bg-white text-gray-700 hover:border-gray-300"
                                     )}
                                 >
                                     {variantImage && (
@@ -142,7 +162,14 @@ export function VariantPickerModal({
                                             className="w-6 h-6 rounded-full object-cover flex-shrink-0"
                                         />
                                     )}
-                                    {variant.name || 'Default'} - {formatCurrency(variant.price)}
+                                    {variant.name || 'Default'} - {isOutOfStock ? (
+                                        <span className="text-gray-400">Sold out</span>
+                                    ) : discountPercent ? (
+                                        <span>
+                                            <span className="line-through opacity-60 mr-1">{formatCurrency(variant.price)}</span>
+                                            {formatCurrency(Math.round(variant.price * (1 - discountPercent / 100)))}
+                                        </span>
+                                    ) : formatCurrency(variant.price)}
                                 </button>
                             );
                         })}

package/src/contexts/CartContext.tsx

@@ -45,7 +45,7 @@ interface CartContextValue {
   /** Checkout mutation (from useCheckoutCart) */
   checkoutMutation: ReturnType<typeof useCheckoutCart>;
   /** Add item to cart by SKU with Meta Pixel tracking */
-  addItem: (productSlug: string, productName: string, price: number, sku: string, quantity: number) => Promise<void>;
+  addItem: (productSlug: string, productName: string, price: number, sku: string, quantity: number, fromUpsell?: boolean, upsellDiscountPercent?: number) => Promise<void>;
   /** Update item quantity */
   updateItem: (itemId: string, quantity: number) => Promise<void>;
   /** Remove item from cart */
@@ -253,7 +253,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   }, [cartId]);
 
   const addItem = useCallback(
-    async (productSlug: string, productName: string, price: number, sku: string, quantity: number) => {
+    async (productSlug: string, productName: string, price: number, sku: string, quantity: number, fromUpsell?: boolean, upsellDiscountPercent?: number) => {
       if (!cartId) throw new Error('No cart ID');
 
       // Get Facebook cookies for attribution
@@ -272,7 +272,9 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         fbp,
         ttp,
         ttclid,
-        refreshRecommendations: shouldRefreshRecommendations
+        refreshRecommendations: shouldRefreshRecommendations,
+        fromUpsell,
+        upsellDiscountPercent,
       });
 
       // Invalidate recommendations cache only if cart was closed when adding

package/src/index.ts

@@ -55,6 +55,9 @@ export type { ShoppingCartProps } from './components/ShoppingCart';
 export { CartUpsellScreen } from './components/CartUpsellScreen';
 export type { CartUpsellScreenProps } from './components/CartUpsellScreen';
 
+export { AddOnsDiscountScreen } from './components/AddOnsDiscountScreen';
+export type { AddOnsDiscountScreenProps } from './components/AddOnsDiscountScreen';
+
 export { DiscountCodeInput } from './components/DiscountCodeInput';
 export type { DiscountCodeInputProps } from './components/DiscountCodeInput';
 

package/src/test-utils/MockCartProvider.tsx

@@ -27,6 +27,8 @@ const mockCart: Cart = {
     tiktokPixelId: null as any,
     paystackPublicKey: null as any,
     paystackSecretKey: null as any,
+    upsellDiscountPercent: 10,
+    freeShippingThreshold: 15000,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     deletedAt: null as any,
@@ -342,8 +344,8 @@ export function MockCartProvider({
     updateCartMutation: mockUpdateCartMutation as any,
     checkoutMutation: mockCheckoutMutation as any,
 
-    addItem: async (productSlug: string, productName: string, price: number, sku: string, quantity: number) => {
-      console.log('Mock addItem:', { productSlug, productName, price, sku, quantity });
+    addItem: async (productSlug: string, productName: string, price: number, sku: string, quantity: number, fromUpsell?: boolean, upsellDiscountPercent?: number) => {
+      console.log('Mock addItem:', { productSlug, productName, price, sku, quantity, fromUpsell, upsellDiscountPercent });
     },
 
     updateItem: async (itemId: string, quantity: number) => {