@instockng/storefront-ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instockng/storefront-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "Pre-built UI components for OMS e-commerce sites",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,6 +20,13 @@
     "src",
     "README.md"
   ],
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json || true",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ola-wale/oms.git",
@@ -38,7 +45,7 @@
   "author": "Ola Wale",
   "license": "MIT",
   "dependencies": {
-    "@instockng/api-client": "^1.0.2",
+    "@instockng/api-client": "^1.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "react-facebook-pixel": "^1.0.4",
@@ -58,8 +65,8 @@
     "@storybook/test": "^8.6.14",
     "@tailwindcss/postcss": "^4.1.14",
     "@tanstack/react-query": "^5.17.19",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.21",
     "lucide-react": "^0.536.0",
@@ -72,11 +79,5 @@
     "tailwindcss": "^4.1.14",
     "typescript": "^5.3.3",
     "vite": "^5.4.20"
-  },
-  "scripts": {
-    "type-check": "tsc --noEmit",
-    "build": "vite build && vite build --config vite.config.css.ts && tsc --project tsconfig.build.json || true",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
   }
-}
+}

package/src/components/CartItem.stories.tsx

@@ -20,7 +20,7 @@ const mockCartItem: CartItemType = {
   variant: {
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
-    deletedAt: null,
+    deletedAt: null as any,
     isActive: true,
     id: 'variant-1',
     name: 'Medium - Blue',
@@ -38,10 +38,10 @@ const mockCartItem: CartItemType = {
       brandId: 'brand-1',
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
-      deletedAt: null,
+      deletedAt: null as any,
       isActive: true,
       description: 'Premium cotton t-shirt',
-      quantityDiscounts: null,
+      quantityDiscounts: null as any,
     },
   },
   basePrice: 29.99,
@@ -69,10 +69,10 @@ export const NoImage: Story = {
           slug: 'cotton-shirt',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
-          deletedAt: null,
+          deletedAt: null as any,
           isActive: true,
           description: 'Premium cotton t-shirt',
-          quantityDiscounts: null,
+          quantityDiscounts: null as any,
           thumbnailUrl: null,
         },
       },

package/src/components/Checkout.stories.tsx

@@ -24,9 +24,9 @@ const mockDeliveryZones = [
         name: 'Ikeja',
         deliveryCost: 1500,
         freeShippingThreshold: 10000,
-        allowCOD: true,
+        allowCOD: false,
         allowOnline: true,
-        waybillOnly: false,
+        waybillOnly: true,
         estimatedDays: 2,
       },
       {
@@ -106,19 +106,20 @@ const mockCart: Cart = {
     logoUrl: 'https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=80&fit=crop',
     siteUrl: 'https://demo-store.com',
     domain: 'demo-store.com',
+    metaPixelId: null as any,
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
-    deletedAt: null,
+    deletedAt: null as any,
   },
-  customerPhone: null,
-  customerEmail: null,
-  customerFirstName: null,
-  customerLastName: null,
+  customerPhone: null as any,
+  customerEmail: null as any,
+  customerFirstName: null as any,
+  customerLastName: null as any,
   availablePaymentMethods: ['cod'],
-  deliveryZone: null,
+  deliveryZone: null as any,
   recoveryAttempts: 0,
-  lastRecoveryAttemptAt: null,
-  recoveryDiscountCode: null,
+  lastRecoveryAttemptAt: null as any,
+  recoveryDiscountCode: null as any,
   items: [
     {
       id: 'item-1',
@@ -134,7 +135,7 @@ const mockCart: Cart = {
         isActive: true,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        deletedAt: null,
+        deletedAt: null as any,
         product: {
           id: 'product-1',
           name: 'Premium Cotton T-Shirt',
@@ -145,8 +146,8 @@ const mockCart: Cart = {
           thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
-          deletedAt: null,
-          quantityDiscounts: null,
+          deletedAt: null as any,
+          quantityDiscounts: null as any,
         },
       },
       quantity: 2,
@@ -194,12 +195,12 @@ const mockCart: Cart = {
   pricing: {
     subtotal: 8697,
     deliveryCharge: 0,
-    discount: null,
+    discount: null as any,
     total: 8697,
   },
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
-  convertedToOrderId: null,
+  convertedToOrderId: null as any,
   wasRecovered: false,
   recoveryUrl: 'https://demo-store.com?cartId=mock-cart-123',
 };

package/src/components/Checkout.tsx

@@ -205,6 +205,10 @@ export function Checkout({
     return states?.find((state) => state.id === selectedStateId);
   }, [states, selectedStateId]);
 
+  const selectedDeliveryZone = useMemo(() => {
+    return selectedState?.zones.find((zone) => zone.id === selectedDeliveryZoneId);
+  }, [selectedState, selectedDeliveryZoneId]);
+
   // Use checkout mutation from cart context
   const checkout = checkoutMutation;
 
@@ -651,6 +655,44 @@ export function Checkout({
         <div className="w-full overflow-hidden">
           {/* Sliding Steps Container */}
           <div className="relative w-full">
+            {/* Delivery Zone Notices */}
+            {selectedDeliveryZone && (currentStep === 'delivery' || currentStep === 'payment') && (
+              <div className="space-y-3 p-4 pb-0">
+                {/* Waybill Delivery Notice */}
+                {selectedDeliveryZone.waybillOnly && (
+                  <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                    <div className="flex items-start gap-3">
+                      <Package className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+                      <div className="space-y-1">
+                        <p className="text-sm font-semibold text-amber-900">
+                          Waybill Delivery
+                        </p>
+                        <p className="text-sm text-amber-800">
+                          We deliver orders to this location using waybill service. You'll need to pick up your order at a motor park near you.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* COD Not Available Notice */}
+                {!selectedDeliveryZone?.allowCOD && (
+                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                    <div className="flex items-start gap-3">
+                      <Banknote className="h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5" />
+                      <div className="space-y-1">
+                        <p className="text-sm font-semibold text-blue-900">
+                          Cash on Delivery Unavailable
+                        </p>
+                        <p className="text-sm text-blue-800">
+                          We're unable to offer cash on delivery to this location. Please use online payment to complete your order.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
             <div
               className={cn(
                 'flex transition-transform duration-300 ease-in-out w-full',

package/src/components/ShoppingCart.stories.tsx

@@ -52,17 +52,18 @@ const mockCart: Cart = {
     domain: 'f',
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
-    deletedAt: null,
+    metaPixelId: null as any,
+    deletedAt: null as any,
   },
-  customerPhone: null,
-  customerEmail: null,
-  customerFirstName: null,
-  customerLastName: null,
+  customerPhone: null as any,
+  customerEmail: null as any,
+  customerFirstName: null as any,
+  customerLastName: null as any,
   availablePaymentMethods: ['cod'],
-  deliveryZone: null,
+  deliveryZone: null as any,
   recoveryAttempts: 0,
-  lastRecoveryAttemptAt: null,
-  recoveryDiscountCode: null,
+  lastRecoveryAttemptAt: null as any,
+  recoveryDiscountCode: null as any,
   items: [
     {
       id: 'item-1',
@@ -78,7 +79,7 @@ const mockCart: Cart = {
         isActive: true,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        deletedAt: null,
+        deletedAt: null as any,
         product: {
           id: 'product-1',
           name: 'Premium Cotton T-Shirt',
@@ -89,7 +90,7 @@ const mockCart: Cart = {
           thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
           createdAt: new Date().toISOString(),
           updatedAt: new Date().toISOString(),
-          deletedAt: null,
+          deletedAt: null as any,
           quantityDiscounts: null,
         },
       },
@@ -113,7 +114,7 @@ const mockCart: Cart = {
         isActive: true,
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
-        deletedAt: null,
+        deletedAt: null as any,
         product: {
           id: 'product-2',
           name: 'Slim Fit Jeans',
@@ -124,8 +125,8 @@ 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: null as any,
         },
       },
       quantity: 1,
@@ -138,12 +139,12 @@ const mockCart: Cart = {
   pricing: {
     subtotal: 8697,
     deliveryCharge: 0,
-    discount: null,
+    discount: null as any,
     total: 8697,
   },
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
-  convertedToOrderId: null,
+  convertedToOrderId: null as any,
   wasRecovered: false,
   recoveryUrl: 'https://demo-store.com?cartId=mock-cart-123',
 };
@@ -311,7 +312,7 @@ export const EmptyCart: CartProviderStory = {
       items: [],
       pricing: {
         subtotal: 0,
-        discount: null,
+        discount: null as any,
         deliveryCharge: 0,
         total: 0,
       },

package/src/components/ShoppingCart.tsx

@@ -15,7 +15,6 @@ import { Checkout } from './Checkout';
 import { Button } from './ui/button';
 import { X, Package, Loader2 } from 'lucide-react';
 import { formatCurrency, cn } from '../lib/utils';
-import { useMetaPixel } from '../providers/MetaPixelProvider';
 
 export interface ShoppingCartProps {
   /** Whether the cart is open */
@@ -59,10 +58,7 @@ export function ShoppingCart({
   emptyMessage = 'Your cart is empty',
 }: ShoppingCartProps) {
   // Get cart from CartProvider context
-  const { cart, isLoading, error } = useCart();
-
-  // Get Meta Pixel tracking
-  const { trackInitiateCheckout } = useMetaPixel();
+  const { cart, isLoading, error, trackCheckoutInitiated } = useCart();
 
   // State for checkout modal
   const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
@@ -95,12 +91,8 @@ export function ShoppingCart({
   const discount = cart?.pricing.discount?.amount || 0;
 
   const handleCheckout = () => {
-    // Track InitiateCheckout with Meta Pixel
-    if (cart) {
-      const itemCount = cart.items?.reduce((sum, item) => sum + item.quantity, 0) || 0;
-      const cartTotal = cart.pricing?.total || 0;
-      trackInitiateCheckout(cartTotal, itemCount);
-    }
+    // Track InitiateCheckout with Meta Pixel (includes event ID for CAPI deduplication)
+    trackCheckoutInitiated();
 
     setIsCheckoutOpen(true);
     onCheckout?.();

package/src/contexts/CartContext.tsx

@@ -49,6 +49,8 @@ interface CartContextValue {
   applyDiscount: (code: string) => Promise<void>;
   /** Remove discount code */
   removeDiscount: () => Promise<void>;
+  /** Track InitiateCheckout event (call when user starts checkout flow) */
+  trackCheckoutInitiated: () => void;
   /** Clear cart (removes from localStorage) */
   clearCart: () => void;
   /** Clear cart and create a new one immediately */
@@ -92,7 +94,26 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const isHandlingErrorRef = useRef(false);
 
   // Get Meta Pixel tracking methods
-  const { trackAddToCart, trackPurchase } = useMetaPixel();
+  const { trackAddToCart, trackInitiateCheckout, trackPurchase } = useMetaPixel();
+
+  /**
+   * Extract fbc (Facebook Click ID) and fbp (Facebook Browser ID) cookies for attribution
+   */
+  const getFbCookies = useCallback(() => {
+    if (typeof document === 'undefined') return { fbc: undefined, fbp: undefined };
+
+    const getCookie = (name: string) => {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) return parts.pop()?.split(';').shift();
+      return undefined;
+    };
+
+    return {
+      fbc: getCookie('_fbc'),
+      fbp: getCookie('_fbp'),
+    };
+  }, []);
 
   // Set mounted flag on client
   useEffect(() => {
@@ -226,11 +247,15 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
         item_price: Number(item.priceAtPurchase),
       })) || [];
 
+      // Generate event ID matching backend format: order_{orderId}
+      const eventID = `order_${order.id}`;
+
       trackPurchase(
         Number(order.totalPrice),
         'NGN',
         order.id,
-        items
+        items,
+        eventID
       );
     },
   });
@@ -245,13 +270,35 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
   const addItem = useCallback(
     async (productSlug: string, productName: string, price: number, sku: string, quantity: number) => {
       if (!cartId) throw new Error('No cart ID');
-      await addItemMutation.mutateAsync({ sku, quantity });
 
-      // Track AddToCart event with Meta Pixel
-      trackAddToCart(productSlug, productName, price, quantity);
+      // Get Facebook cookies for attribution
+      const { fbc, fbp } = getFbCookies();
+
+      // Add item to cart via API
+      const updatedCart = await addItemMutation.mutateAsync({ sku, quantity, fbc, fbp });
+
+      // Skip tracking if error response
+      if ('error' in updatedCart) return;
+
+      // Find the newly added item (last item with matching SKU)
+      const matchingItems = updatedCart.items?.filter(
+        (item) => item.variant?.sku === sku
+      );
+      const addedItem = matchingItems?.[matchingItems.length - 1];
+
+      if (addedItem) {
+        // Generate event ID matching backend format: cart_{cartId}_item_{itemId}
+        const eventID = `cart_${cartId}_item_${addedItem.id}`;
+
+        // Track AddToCart event with Meta Pixel and matching event ID
+        trackAddToCart(productSlug, productName, price, quantity, eventID);
+      } else {
+        // Fallback without event ID if item not found
+        trackAddToCart(productSlug, productName, price, quantity);
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cartId, trackAddToCart]
+    [cartId, trackAddToCart, getFbCookies]
   );
 
   const updateItem = useCallback(
@@ -310,6 +357,22 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     setIsOpen(false);
   }, []);
 
+  const trackCheckoutInitiated = useCallback(() => {
+    if (!cart || !cartId) return;
+
+    // Get cart total from pricing
+    const cartTotal = Number(cart.pricing?.total || 0);
+
+    // Calculate item count
+    const itemCount = cart.items?.reduce((sum, item) => sum + item.quantity, 0) || 0;
+
+    // Generate event ID matching backend format: cart_{cartId}_checkout
+    const eventID = `cart_${cartId}_checkout`;
+
+    // Track InitiateCheckout event with Meta Pixel
+    trackInitiateCheckout(cartTotal, itemCount, eventID);
+  }, [cart, cartId, trackInitiateCheckout]);
+
   const value: CartContextValue = {
     cart: cart || null,
     cartId,
@@ -322,6 +385,7 @@ export function CartProvider({ children, brandSlug, initialCartId, shoppingCartP
     removeItem,
     applyDiscount,
     removeDiscount,
+    trackCheckoutInitiated,
     clearCart,
     clearAndCreateNewCart,
     refetch,

package/src/providers/MetaPixelProvider.tsx

@@ -18,7 +18,7 @@ interface MetaPixelContextValue {
   /**
    * Track a custom event
    */
-  track: (event: string, data?: Record<string, unknown>) => void;
+  track: (event: string, data?: Record<string, unknown>, eventID?: string) => void;
 
   /**
    * Track a page view
@@ -28,7 +28,7 @@ interface MetaPixelContextValue {
   /**
    * Track product view
    */
-  trackProductView: (productId: string, productName: string, price: number) => void;
+  trackProductView: (productId: string, productName: string, price: number, eventID?: string) => void;
 
   /**
    * Track add to cart event
@@ -36,13 +36,17 @@ interface MetaPixelContextValue {
    * @param productName - Product name
    * @param price - Unit price (not total)
    * @param quantity - Quantity added
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackAddToCart: (productId: string, productName: string, price: number, quantity: number) => void;
+  trackAddToCart: (productId: string, productName: string, price: number, quantity: number, eventID?: string) => void;
 
   /**
    * Track begin checkout event
+   * @param cartTotal - Total cart value
+   * @param itemCount - Number of items
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackInitiateCheckout: (cartTotal: number, itemCount: number) => void;
+  trackInitiateCheckout: (cartTotal: number, itemCount: number, eventID?: string) => void;
 
   /**
    * Track purchase event
@@ -50,8 +54,9 @@ interface MetaPixelContextValue {
    * @param currency - Currency code (e.g., 'NGN', 'USD')
    * @param orderId - Order ID or order number
    * @param items - Array of purchased items with SKU, quantity, and price
+   * @param eventID - Optional event ID for deduplication with CAPI
    */
-  trackPurchase: (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[]) => void;
+  trackPurchase: (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[], eventID?: string) => void;
 
   /**
    * Whether the pixel is initialized
@@ -126,7 +131,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
     });
   }, [pixelId, shouldDebug]);
 
-  const track = (event: string, data?: Record<string, unknown>) => {
+  const track = (event: string, data?: Record<string, unknown>, eventID?: string) => {
     if (!isInitialized || !reactPixel) {
       if (shouldDebug) {
         console.log('[Meta Pixel] Track (not initialized):', event, data);
@@ -134,10 +139,13 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       return;
     }
 
-    reactPixel.track(event, data);
+    // Include eventID for deduplication with CAPI
+    const eventData = eventID ? { ...data, eventID } : data;
+
+    reactPixel.track(event, eventData);
 
     if (shouldDebug) {
-      console.log('[Meta Pixel] Track:', event, data);
+      console.log('[Meta Pixel] Track:', event, eventData, eventID ? `(ID: ${eventID})` : '');
     }
   };
 
@@ -156,17 +164,17 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
     }
   };
 
-  const trackProductView = (productId: string, productName: string, price: number) => {
+  const trackProductView = (productId: string, productName: string, price: number, eventID?: string) => {
     track('ViewContent', {
       content_ids: [productId],
       content_name: productName,
       content_type: 'product',
       value: price,
       currency: 'NGN',
-    });
+    }, eventID);
   };
 
-  const trackAddToCart = (productId: string, productName: string, price: number, quantity: number) => {
+  const trackAddToCart = (productId: string, productName: string, price: number, quantity: number, eventID?: string) => {
     track('AddToCart', {
       content_ids: [productId],
       content_name: productName,
@@ -174,18 +182,18 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
       value: price,
       currency: 'NGN',
       num_items: quantity,
-    });
+    }, eventID);
   };
 
-  const trackInitiateCheckout = (cartTotal: number, itemCount: number) => {
+  const trackInitiateCheckout = (cartTotal: number, itemCount: number, eventID?: string) => {
     track('InitiateCheckout', {
       value: cartTotal,
       currency: 'NGN',
       num_items: itemCount,
-    });
+    }, eventID);
   };
 
-  const trackPurchase = (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[]) => {
+  const trackPurchase = (orderTotal: number, currency: string, orderId: string, items: PurchaseItem[], eventID?: string) => {
     track('Purchase', {
       value: orderTotal,
       currency,
@@ -196,7 +204,7 @@ export function MetaPixelProvider({ children, pixelId, debug }: MetaPixelProvide
         item_price: item.item_price,
       })),
       order_id: orderId,
-    });
+    }, eventID);
   };
 
   const value: MetaPixelContextValue = {

package/src/providers/StorefrontProvider.tsx

@@ -82,8 +82,11 @@ export function StorefrontProvider({
   initialCartId,
   shoppingCartProps,
 }: StorefrontProviderProps) {
+  // Storefront-ui doesn't use authenticated endpoints, so provide a no-op getAuthToken
+  const getAuthToken = async () => '';
+
   return (
-    <ApiClientProvider {...(apiUrl && { baseURL: apiUrl })}>
+    <ApiClientProvider getAuthToken={getAuthToken} {...(apiUrl && { baseURL: apiUrl })}>
       <StorefrontProviderInner
         brandSlug={brandSlug}
         initialCartId={initialCartId}