@instockng/storefront-ui 1.0.9 → 1.0.11

package/src/components/ui/modal.tsx

@@ -0,0 +1,181 @@
+'use client';
+
+/**
+ * Modal Component
+ *
+ * A floating modal dialog with overlay, header, content area, and footer.
+ * Built with React portals for proper z-index stacking.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface ModalProps {
+  /** Controls modal visibility */
+  isOpen: boolean;
+  /** Callback when modal should close */
+  onClose: () => void;
+  /** Modal title - can be string or React element */
+  title?: React.ReactNode;
+  /** Modal content */
+  children: React.ReactNode;
+  /** Footer content (typically buttons) */
+  footer?: React.ReactNode;
+  /** Additional CSS class for the modal container */
+  className?: string;
+  /** Additional CSS class for the modal content area */
+  contentClassName?: string;
+  /** Size of the modal */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  /** Whether clicking the overlay closes the modal */
+  closeOnOverlayClick?: boolean;
+  /** Whether to show the close button */
+  showCloseButton?: boolean;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  className,
+  contentClassName,
+  size = 'md',
+  closeOnOverlayClick = true,
+  showCloseButton = true,
+}: ModalProps): JSX.Element | null {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+
+  // Handle animation state
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      // Small delay to trigger animation
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsAnimating(true);
+        });
+      });
+    } else {
+      setIsAnimating(false);
+      // Wait for animation to finish before unmounting
+      const timer = setTimeout(() => {
+        setShouldRender(false);
+      }, 200); // Match transition duration
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  // Handle ESC key
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEsc);
+      return () => document.removeEventListener('keydown', handleEsc);
+    }
+  }, [isOpen, onClose]);
+
+  // Lock body scroll when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [isOpen]);
+
+  if (!shouldRender) return null;
+
+  const sizeClasses = {
+    sm: 'max-w-md',
+    md: 'max-w-lg',
+    lg: 'max-w-2xl',
+    xl: 'max-w-4xl',
+    full: 'max-w-full mx-4',
+  };
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (closeOnOverlayClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const modalContent = (
+    <div
+      className={cn(
+        'fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-4 bg-black/50 backdrop-blur-sm transition-opacity duration-200',
+        isAnimating ? 'opacity-100' : 'opacity-0'
+      )}
+      onClick={handleOverlayClick}
+    >
+      <div
+        ref={modalRef}
+        className={cn(
+          'relative w-full bg-white rounded-xl shadow-xl flex flex-col max-h-[90vh] transition-all duration-200',
+          isAnimating ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
+          sizeClasses[size],
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? 'modal-title' : undefined}
+      >
+        {/* Header */}
+        {(title || showCloseButton) && (
+          <div className="flex items-center justify-between p-4 border-b border-gray-200 flex-shrink-0">
+              {title && (
+                <h2
+                  id="modal-title"
+                  className="text-xl font-semibold text-gray-900"
+                >
+                  {title}
+                </h2>
+              )}
+              {showCloseButton && (
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="ml-auto p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+                  aria-label="Close modal"
+                >
+                  <X size={20} />
+                </button>
+              )}
+            </div>
+          )}
+
+        {/* Content */}
+        <div
+          className={cn(
+            'flex-1 overflow-y-auto p-4 min-h-0',
+            contentClassName
+          )}
+        >
+          {children}
+        </div>
+
+        {/* Footer */}
+        {footer && (
+          <div className="p-4 border-t border-gray-200 bg-gray-50 flex-shrink-0 rounded-b-xl">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+
+  // Render modal using portal
+  return createPortal(modalContent, document.body);
+}

package/src/contexts/CartContext.tsx

@@ -0,0 +1,305 @@
+'use client';
+
+/**
+ * Cart Context Provider
+ *
+ * Manages cart state with localStorage persistence and auto-creation.
+ * Uses @oms/api-client hooks for all cart operations.
+ * Includes built-in ShoppingCart modal that can be opened/closed from anywhere.
+ */
+
+import { createContext, useContext, useState, useEffect, ReactNode, useCallback, useRef } from 'react';
+import {
+  useGetCart,
+  useCreateCart,
+  useUpdateCart,
+  useAddCartItem,
+  useUpdateCartItem,
+  useRemoveCartItem,
+  useApplyDiscount,
+  useRemoveDiscount,
+  useCheckoutCart,
+  type Cart,
+} from '@oms/api-client';
+import { ShoppingCart } from '../components/ShoppingCart';
+
+const CART_ID_KEY = 'oms_cart_id';
+
+interface CartContextValue {
+  /** Current cart data */
+  cart: Cart | null;
+  /** Cart ID (from localStorage or newly created) */
+  cartId: string | null;
+  /** Loading state */
+  isLoading: boolean;
+  /** Error state */
+  error: Error | null;
+  /** Update cart mutation (from useUpdateCart) */
+  updateCartMutation: ReturnType<typeof useUpdateCart>;
+  /** Checkout mutation (from useCheckoutCart) */
+  checkoutMutation: ReturnType<typeof useCheckoutCart>;
+  /** Add item to cart by SKU */
+  addItem: (sku: string, quantity: number) => Promise<void>;
+  /** Update item quantity */
+  updateItem: (itemId: string, quantity: number) => Promise<void>;
+  /** Remove item from cart */
+  removeItem: (itemId: string) => Promise<void>;
+  /** Apply discount code */
+  applyDiscount: (code: string) => Promise<void>;
+  /** Remove discount code */
+  removeDiscount: () => Promise<void>;
+  /** Clear cart (removes from localStorage) */
+  clearCart: () => void;
+  /** Refresh cart data */
+  refetch: () => void;
+  /** Whether the cart modal is open */
+  isOpen: boolean;
+  /** Open the cart modal */
+  open: () => void;
+  /** Close the cart modal */
+  close: () => void;
+}
+
+export const CartContext = createContext<CartContextValue | null>(null);
+
+export interface CartProviderProps {
+  children: ReactNode;
+  /** Brand slug for cart operations */
+  brandSlug: string;
+  /** Optional initial cart ID (overrides localStorage) */
+  initialCartId?: string;
+  /** Props to pass to the ShoppingCart component */
+  shoppingCartProps?: Omit<import('../components/ShoppingCart').ShoppingCartProps, 'isOpen' | 'onClose'>;
+}
+
+export function CartProvider({ children, brandSlug, initialCartId, shoppingCartProps }: CartProviderProps) {
+  // Always start with null to avoid hydration mismatch
+  // We'll load from localStorage in useEffect after mount
+  const [cartId, setCartId] = useState<string | null>(initialCartId || null);
+
+  // Cart modal state
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Track if component has mounted (client-side only)
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Use refs to prevent infinite loops
+  const hasInitializedRef = useRef(false);
+  const isHandlingErrorRef = useRef(false);
+
+  // Set mounted flag on client
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  // Load cartId from URL/localStorage after mount (client-side only)
+  // This avoids hydration mismatch between server and client
+  useEffect(() => {
+    if (initialCartId || hasInitializedRef.current) return;
+
+    // Check URL query params first
+    const urlParams = new URLSearchParams(window.location.search);
+    const cartIdFromUrl = urlParams.get('cartId');
+    if (cartIdFromUrl) {
+      setCartId(cartIdFromUrl);
+      return;
+    }
+
+    // Fall back to localStorage
+    const storedCartId = localStorage.getItem(CART_ID_KEY);
+    if (storedCartId) {
+      setCartId(storedCartId);
+    }
+  }, [initialCartId]);
+
+  // Fetch cart if we have a cartId
+  const { data: cart, isLoading, error, refetch } = useGetCart(cartId || '', {
+    enabled: !!cartId,
+    retry: false, // Don't retry on failure - cart might be invalid/expired
+  });
+
+  // Auto-create cart if none exists
+  const createCartMutation = useCreateCart({
+    onSuccess: (data) => {
+      // Check if response is an error
+      if ('error' in data) {
+        console.error('Failed to create cart:', data.error);
+        return;
+      }
+
+      setCartId(data.id);
+    },
+    onError: (error) => {
+      console.error('Failed to create cart:', error);
+    },
+  });
+
+  // Auto-create cart on mount if no cartId exists - only runs ONCE
+  // Use a layout effect to run before paint
+  useEffect(() => {
+    if (!hasInitializedRef.current && !cartId && !initialCartId) {
+      hasInitializedRef.current = true;
+      // Defer cart creation to next tick
+      const timeoutId = setTimeout(() => {
+        if (!hasInitializedRef.current) return; // Double check
+        createCartMutation.mutate(brandSlug);
+      }, 0);
+
+      return () => clearTimeout(timeoutId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Handle cart fetch error (invalid/expired cart from URL or localStorage)
+  // Only clear the cart if there's an error, don't try to create a new one
+  useEffect(() => {
+    if (error && cartId && !isHandlingErrorRef.current) {
+      isHandlingErrorRef.current = true;
+      console.warn('Cart fetch failed, clearing invalid cart:', error);
+
+      // Use a microtask to batch the state updates
+      Promise.resolve().then(() => {
+        setCartId(null);
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem(CART_ID_KEY);
+        }
+        isHandlingErrorRef.current = false;
+      });
+    }
+  }, [error, cartId]);
+
+  // Mutations
+  const addItemMutation = useAddCartItem(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const updateItemMutation = useUpdateCartItem(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const removeItemMutation = useRemoveCartItem(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const applyDiscountMutation = useApplyDiscount(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const removeDiscountMutation = useRemoveDiscount(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const updateCartMutation = useUpdateCart(cartId || '', {
+    onSuccess: () => refetch(),
+  });
+
+  const checkoutMutation = useCheckoutCart(cartId || '');
+
+  // Store cartId in localStorage when it changes
+  useEffect(() => {
+    if (cartId && typeof window !== 'undefined') {
+      localStorage.setItem(CART_ID_KEY, cartId);
+    }
+  }, [cartId]);
+
+  const addItem = useCallback(
+    async (sku: string, quantity: number) => {
+      if (!cartId) throw new Error('No cart ID');
+      await addItemMutation.mutateAsync({ sku, quantity });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cartId]
+  );
+
+  const updateItem = useCallback(
+    async (itemId: string, quantity: number) => {
+      if (!cartId) throw new Error('No cart ID');
+      await updateItemMutation.mutateAsync({ itemId, quantity });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cartId]
+  );
+
+  const removeItem = useCallback(
+    async (itemId: string) => {
+      if (!cartId) throw new Error('No cart ID');
+      await removeItemMutation.mutateAsync(itemId);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cartId]
+  );
+
+  const applyDiscount = useCallback(
+    async (code: string) => {
+      if (!cartId) throw new Error('No cart ID');
+      await applyDiscountMutation.mutateAsync({ code });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cartId]
+  );
+
+  const removeDiscount = useCallback(async () => {
+    if (!cartId) throw new Error('No cart ID');
+    await removeDiscountMutation.mutateAsync();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cartId]);
+
+  const clearCart = useCallback(() => {
+    setCartId(null);
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(CART_ID_KEY);
+    }
+  }, []);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const value: CartContextValue = {
+    cart: cart || null,
+    cartId,
+    isLoading,
+    error: error as Error | null,
+    updateCartMutation,
+    checkoutMutation,
+    addItem,
+    updateItem,
+    removeItem,
+    applyDiscount,
+    removeDiscount,
+    clearCart,
+    refetch,
+    isOpen,
+    open,
+    close,
+  };
+
+  return (
+    <CartContext.Provider value={value}>
+      {children}
+      {/* Only render ShoppingCart on client to avoid hydration mismatch */}
+      {isMounted && (
+        <ShoppingCart
+          isOpen={isOpen}
+          onClose={close}
+          {...shoppingCartProps}
+        />
+      )}
+    </CartContext.Provider>
+  );
+}
+
+/**
+ * Hook to access cart context
+ */
+export function useCart() {
+  const context = useContext(CartContext);
+  if (!context) {
+    throw new Error('useCart must be used within CartProvider');
+  }
+  return context;
+}

package/src/hooks/usePaystackPayment.ts

@@ -0,0 +1,137 @@
+'use client';
+
+/**
+ * Paystack Payment Hook
+ *
+ * Provides integration with Paystack Inline JS for processing online payments.
+ * Handles script loading, popup initialization, and payment callbacks.
+ */
+
+import { useEffect, useState, useCallback } from 'react';
+
+// Paystack Inline types
+declare global {
+  interface Window {
+    PaystackPop?: {
+      setup: (config: PaystackConfig) => {
+        openIframe: () => void;
+      };
+    };
+  }
+}
+
+export interface PaystackConfig {
+  key: string;
+  email: string;
+  amount: number; // Amount in kobo (smallest currency unit)
+  currency?: string;
+  ref?: string;
+  metadata?: {
+    custom_fields?: Array<{
+      display_name: string;
+      variable_name: string;
+      value: string | number;
+    }>;
+    [key: string]: any;
+  };
+  callback?: (response: PaystackResponse) => void;
+  onClose?: () => void;
+}
+
+export interface PaystackResponse {
+  reference: string;
+  status: string;
+  trans: string;
+  transaction: string;
+  trxref: string;
+  message: string;
+}
+
+export interface UsePaystackPaymentOptions {
+  publicKey: string;
+  onSuccess?: (response: PaystackResponse) => void;
+  onClose?: () => void;
+}
+
+export function usePaystackPayment({
+  publicKey,
+  onSuccess,
+  onClose,
+}: UsePaystackPaymentOptions) {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Load Paystack Inline script
+  useEffect(() => {
+    // Check if script is already loaded
+    if (window.PaystackPop) {
+      setIsLoaded(true);
+      return;
+    }
+
+    // Check if script tag already exists
+    const existingScript = document.querySelector('script[src="https://js.paystack.co/v1/inline.js"]');
+    if (existingScript) {
+      existingScript.addEventListener('load', () => setIsLoaded(true));
+      return;
+    }
+
+    // Load script
+    const script = document.createElement('script');
+    script.src = 'https://js.paystack.co/v1/inline.js';
+    script.async = true;
+    script.onload = () => {
+      setIsLoaded(true);
+    };
+    script.onerror = () => {
+      setError('Failed to load Paystack script');
+    };
+
+    document.body.appendChild(script);
+
+    return () => {
+      // Don't remove script on unmount as it can be reused
+    };
+  }, []);
+
+  const initializePayment = useCallback(
+    (config: Omit<PaystackConfig, 'key' | 'callback' | 'onClose'>) => {
+      if (!isLoaded || !window.PaystackPop) {
+        setError('Paystack script not loaded');
+        return;
+      }
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const handler = window.PaystackPop.setup({
+          ...config,
+          key: publicKey,
+          callback: (response) => {
+            setIsLoading(false);
+            onSuccess?.(response);
+          },
+          onClose: () => {
+            setIsLoading(false);
+            onClose?.();
+          },
+        });
+
+        handler.openIframe();
+      } catch (err) {
+        setIsLoading(false);
+        setError(err instanceof Error ? err.message : 'Failed to initialize payment');
+      }
+    },
+    [isLoaded, publicKey, onSuccess, onClose]
+  );
+
+  return {
+    isLoaded,
+    isLoading,
+    error,
+    initializePayment,
+  };
+}

package/src/index.ts

@@ -0,0 +1,51 @@
+/**
+ * @oms/storefront-ui
+ *
+ * Pre-built UI components for OMS e-commerce sites
+ */
+
+// Export all-in-one provider (recommended)
+export { StorefrontProvider } from './providers/StorefrontProvider';
+export type { StorefrontProviderProps } from './providers/StorefrontProvider';
+
+// Export cart context (use this instead of prop drilling)
+export { CartProvider, useCart } from './contexts/CartContext';
+
+// Export main components
+export { OrderConfirmation } from './components/OrderConfirmation';
+export type { OrderConfirmationProps } from './components/OrderConfirmation';
+
+export { ProductCard } from './components/ProductCard';
+export type { ProductCardProps, ProductCardProduct } from './components/ProductCard';
+
+export { ProductGrid } from './components/ProductGrid';
+export type { ProductGridProps } from './components/ProductGrid';
+
+export { CartItem } from './components/CartItem';
+export type { CartItemProps } from './components/CartItem';
+
+export { ShoppingCart } from './components/ShoppingCart';
+export type { ShoppingCartProps } from './components/ShoppingCart';
+
+export { DiscountCodeInput } from './components/DiscountCodeInput';
+export type { DiscountCodeInputProps } from './components/DiscountCodeInput';
+
+export { Checkout } from './components/Checkout';
+export type { CheckoutProps, CheckoutFormData } from './components/Checkout';
+
+// Export UI primitives (for customization)
+export { Button } from './components/ui/button';
+export { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from './components/ui/card';
+export { Badge } from './components/ui/badge';
+export { Modal } from './components/ui/modal';
+export type { ModalProps } from './components/ui/modal';
+export { FormInput } from './components/ui/form-input';
+export type { FormInputProps } from './components/ui/form-input';
+export { FormSelect } from './components/ui/form-select';
+export type { FormSelectProps } from './components/ui/form-select';
+
+// Export utilities
+export { cn, formatCurrency, formatDate, formatDateTime, getStatusColor } from './lib/utils';
+
+// Re-export API client hooks for convenience
+export * from '@oms/api-client';