@instockng/storefront-ui 1.0.10 → 1.0.12

package/src/lib/utils.ts

@@ -0,0 +1,45 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatCurrency(amount: number): string {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'NGN',
+  }).format(amount)
+}
+
+export function formatDate(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+export function formatDateTime(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  return d.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function getStatusColor(status: string): string {
+  const colors: Record<string, string> = {
+    pending: 'bg-yellow-100 text-yellow-800',
+    shipped: 'bg-blue-100 text-blue-800',
+    delivered: 'bg-green-100 text-green-800',
+    cancelled: 'bg-red-100 text-red-800',
+    refunded: 'bg-purple-100 text-purple-800',
+    prospect: 'bg-orange-100 text-orange-800',
+  }
+  return colors[status] || 'bg-gray-100 text-gray-800'
+}

package/src/paystack.svg

@@ -0,0 +1,67 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 280.6 50" style="enable-background:new 0 0 280.6 50;" xml:space="preserve">
+ <style type="text/css">
+  .st0{fill:#00C3F7;}
+	.st1{fill:#011B33;}
+ </style>
+ <g>
+  <g>
+   <path class="st0" d="M39.9,4.8H2.3C1.1,4.8,0,5.8,0,7.1v4.2c0,1.3,1.1,2.4,2.3,2.4h37.6c1.3,0,2.3-1.1,2.4-2.4V7.2
+			C42.3,5.8,41.2,4.8,39.9,4.8L39.9,4.8z M39.9,28.4H2.3c-0.6,0-1.2,0.3-1.7,0.7c-0.4,0.4-0.7,1-0.7,1.7V35c0,1.3,1.1,2.4,2.3,2.4
+			h37.6c1.3,0,2.3-1,2.4-2.4v-4.2C42.3,29.4,41.2,28.4,39.9,28.4L39.9,28.4z M23.5,40.1H2.3c-0.6,0-1.2,0.2-1.6,0.7
+			c-0.4,0.4-0.7,1-0.7,1.7v4.2c0,1.3,1.1,2.4,2.3,2.4h21.1c1.3,0,2.3-1.1,2.3-2.4v-4.3C25.8,41.2,24.8,40.1,23.5,40.1L23.5,40.1z
+			 M42.3,16.6h-40c-0.6,0-1.2,0.2-1.6,0.7c-0.4,0.4-0.7,1-0.7,1.7v4.2c0,1.3,1.1,2.4,2.3,2.4h39.9c1.3,0,2.3-1.1,2.3-2.4v-4.2
+			C44.6,17.6,43.6,16.6,42.3,16.6L42.3,16.6z M42.3,16.6">
+   </path>
+   <path class="st1" d="M86,14.3c-1.2-1.2-2.5-2.1-4.1-2.8c-1.5-0.7-3.2-1-4.9-1c-1.6,0-3.2,0.3-4.7,1c-1,0.5-1.9,1.1-2.6,1.9v-0.7
+			c0-0.4-0.2-0.7-0.4-1c-0.3-0.3-0.6-0.5-1-0.5h-5.3c-0.4,0-0.8,0.2-1,0.5c-0.3,0.3-0.4,0.6-0.4,1v35c0,0.4,0.2,0.7,0.4,1
+			c0.3,0.3,0.6,0.4,1,0.4h5.3c0.4,0,0.7-0.1,1-0.4c0.3-0.3,0.4-0.6,0.4-1v-12c0.8,0.8,1.7,1.5,2.8,1.8c1.4,0.5,2.9,0.8,4.3,0.8
+			c1.7,0,3.4-0.3,4.9-1c1.6-0.6,3-1.6,4.1-2.8c1.2-1.3,2.2-2.8,2.8-4.4c0.7-1.8,1.1-3.8,1-5.7c0-2-0.3-3.9-1-5.8
+			C88.2,17.1,87.2,15.6,86,14.3L86,14.3z M81.3,27c-0.3,0.7-0.7,1.4-1.2,2c-1.1,1.2-2.6,1.8-4.2,1.8c-0.8,0-1.6-0.2-2.3-0.5
+			c-0.7-0.3-1.4-0.8-1.9-1.3c-0.5-0.6-1-1.3-1.3-2c-0.6-1.6-0.6-3.3,0-4.9c0.3-0.7,0.7-1.4,1.3-2c0.6-0.6,1.2-1,1.9-1.4
+			c0.7-0.3,1.5-0.5,2.3-0.5c0.8,0,1.6,0.2,2.4,0.5c0.7,0.3,1.3,0.8,1.9,1.3c0.5,0.6,0.9,1.2,1.2,2C81.9,23.6,81.9,25.4,81.3,27
+			L81.3,27z M118.5,11.3h-5.3c-0.4,0-0.7,0.2-1,0.4c-0.3,0.3-0.4,0.7-0.4,1.1v0.6c-0.7-0.8-1.5-1.4-2.4-1.8c-1.4-0.7-3-1-4.6-1
+			c-3.4,0-6.7,1.4-9.1,3.8c-1.2,1.3-2.2,2.8-2.9,4.4c-0.8,1.8-1.1,3.8-1.1,5.8c0,2,0.3,4,1.1,5.8c0.7,1.6,1.7,3.1,2.9,4.4
+			c2.4,2.4,5.6,3.8,9,3.8c1.6,0,3.2-0.3,4.6-1c0.9-0.5,1.8-1.1,2.4-1.8v0.7c0,0.4,0.2,0.7,0.4,1c0.3,0.2,0.6,0.4,1,0.4h5.3
+			c0.4,0,0.7-0.2,1-0.4c0.3-0.3,0.4-0.6,0.4-1V12.8c0-0.4-0.1-0.7-0.4-1C119.2,11.4,118.9,11.3,118.5,11.3L118.5,11.3z M111.3,26.9
+			c-0.3,0.7-0.7,1.4-1.2,2c-0.5,0.5-1.2,1-1.9,1.4c-1.5,0.7-3.2,0.7-4.7,0c-0.7-0.3-1.4-0.8-1.9-1.4c-0.5-0.6-1-1.3-1.2-2
+			c-0.6-1.6-0.6-3.3,0-4.9c0.3-0.7,0.7-1.4,1.2-2c0.5-0.6,1.2-1,1.9-1.4c1.5-0.7,3.2-0.7,4.7,0c0.7,0.3,1.3,0.8,1.9,1.3
+			c0.5,0.6,0.9,1.2,1.2,2C112,23.6,112,25.4,111.3,26.9L111.3,26.9z M171.2,23.8c-0.8-0.7-1.6-1.2-2.6-1.6c-1-0.4-2-0.7-3.1-0.9
+			l-4-0.8c-1-0.2-1.8-0.5-2.2-0.8c-0.3-0.2-0.5-0.6-0.5-1c0-0.4,0.2-0.8,0.8-1.1c0.7-0.4,1.5-0.6,2.2-0.5c1,0,2.1,0.2,3,0.6
+			c0.9,0.4,1.8,0.9,2.6,1.4c1.2,0.7,2.2,0.6,2.9-0.2l1.9-2.2c0.4-0.4,0.6-0.9,0.6-1.4c0-0.5-0.3-1.1-0.7-1.4
+			c-0.8-0.7-2.1-1.5-3.9-2.2c-1.7-0.7-3.9-1.1-6.5-1.1c-1.6,0-3.1,0.2-4.6,0.7c-1.3,0.4-2.5,1-3.5,1.8c-1,0.7-1.7,1.7-2.3,2.8
+			c-0.5,1.1-0.8,2.2-0.8,3.4c0,2.2,0.7,4,2,5.3c1.3,1.3,3,2.2,5.2,2.6l4.2,0.9c0.9,0.2,1.8,0.4,2.7,0.8c0.5,0.2,0.8,0.6,0.8,1.2
+			c0,0.5-0.2,0.9-0.8,1.3c-0.5,0.4-1.4,0.6-2.5,0.6c-1.1,0-2.3-0.2-3.3-0.7c-1-0.5-1.9-1.1-2.7-1.8c-0.4-0.3-0.8-0.5-1.2-0.7
+			c-0.5-0.1-1.1,0-1.7,0.5l-2.3,1.8c-0.6,0.5-1,1.3-0.8,2c0.1,0.8,0.8,1.5,1.9,2.4c2.9,2,6.4,3,9.9,2.9c1.6,0,3.3-0.2,4.8-0.7
+			c1.4-0.4,2.6-1,3.7-1.9c1-0.8,1.9-1.8,2.4-2.9c0.6-1.1,0.8-2.3,0.8-3.6c0-1.1-0.2-2.2-0.7-3.3C172.5,25.3,171.9,24.5,171.2,23.8
+			L171.2,23.8z M194.2,30.2c-0.2-0.4-0.7-0.7-1.2-0.8c-0.5,0-1,0.2-1.4,0.4c-0.6,0.4-1.4,0.7-2.2,0.7c-0.2,0-0.5,0-0.8-0.1
+			c-0.3,0-0.5-0.2-0.7-0.4c-0.2-0.2-0.4-0.5-0.6-0.8c-0.2-0.4-0.3-0.9-0.2-1.4v-9.6h6.9c0.4,0,0.8-0.2,1.1-0.5
+			c0.3-0.3,0.5-0.6,0.5-1v-4.1c0-0.4-0.2-0.8-0.5-1c-0.3-0.3-0.6-0.4-1-0.4h-6.9V4.7c0-0.4-0.1-0.8-0.4-1c-0.3-0.3-0.6-0.4-1-0.4
+			h-5.3c-0.4,0-0.8,0.1-1,0.4c-0.3,0.3-0.4,0.7-0.4,1v6.6h-3c-0.4,0-0.8,0.2-1,0.5c-0.3,0.3-0.4,0.6-0.4,1v4.1c0,0.4,0.1,0.7,0.4,1
+			c0.2,0.3,0.6,0.5,1,0.5h3v11.4c0,1.4,0.2,2.7,0.8,3.9c0.5,1,1.2,1.9,2,2.6c0.8,0.7,1.8,1.2,2.9,1.5c1.1,0.3,2.2,0.5,3.3,0.5
+			c1.5,0,2.9-0.2,4.3-0.7c1.3-0.4,2.5-1.2,3.4-2.1c0.6-0.6,0.7-1.6,0.2-2.3L194.2,30.2z M223.2,11.3h-5.3c-0.4,0-0.7,0.2-1,0.4
+			c-0.3,0.3-0.4,0.7-0.4,1.1v0.6c-0.7-0.8-1.5-1.4-2.4-1.8c-1.4-0.7-3-1-4.6-1c-3.4,0-6.6,1.4-9,3.8c-1.2,1.3-2.2,2.8-2.9,4.4
+			c-0.8,1.8-1.1,3.8-1.1,5.7c0,2,0.3,3.9,1.1,5.8c0.7,1.6,1.7,3.1,2.9,4.4c2.4,2.4,5.6,3.8,9,3.8c1.6,0,3.2-0.3,4.6-1
+			c0.9-0.5,1.8-1.1,2.4-1.8v0.7c0,0.4,0.1,0.7,0.4,1c0.3,0.3,0.6,0.4,1,0.4h5.3c0.8,0,1.4-0.6,1.4-1.4V12.8c0-0.4-0.1-0.7-0.4-1
+			C223.9,11.4,223.6,11.3,223.2,11.3L223.2,11.3z M216,26.9c-0.3,0.7-0.7,1.4-1.2,2c-0.6,0.5-1.2,1-1.9,1.4
+			c-0.7,0.3-1.6,0.5-2.4,0.5c-0.8,0-1.6-0.2-2.3-0.5c-0.7-0.3-1.4-0.8-1.9-1.4c-0.5-0.6-1-1.3-1.2-2c-0.6-1.6-0.6-3.3,0-4.9
+			c0.3-0.7,0.7-1.4,1.2-2c0.6-0.6,1.2-1,1.9-1.4c0.7-0.3,1.5-0.5,2.3-0.5c0.8,0,1.6,0.2,2.4,0.5c0.7,0.3,1.3,0.8,1.9,1.3
+			c0.5,0.6,1,1.2,1.2,2C216.7,23.6,216.7,25.4,216,26.9L216,26.9z M252.2,29.8l-3-2.3c-0.6-0.5-1.1-0.6-1.6-0.4
+			c-0.4,0.2-0.8,0.5-1.1,0.8c-0.7,0.8-1.4,1.5-2.3,2.1c-0.9,0.5-1.9,0.8-3,0.7c-1.2,0-2.3-0.3-3.3-1c-1-0.7-1.7-1.7-2.1-2.8
+			c-0.3-0.8-0.4-1.6-0.4-2.4c0-0.8,0.1-1.7,0.4-2.5c0.3-0.7,0.7-1.4,1.2-2c0.6-0.6,1.2-1,1.9-1.3c0.7-0.3,1.6-0.5,2.4-0.5
+			c1,0,2.1,0.2,2.9,0.7c0.9,0.6,1.6,1.3,2.3,2.1c0.3,0.3,0.7,0.6,1.1,0.8c0.5,0.2,1,0.1,1.6-0.4l3-2.3c0.4-0.3,0.7-0.6,0.8-1
+			c0.2-0.5,0.1-1-0.1-1.4c-1.2-1.8-2.8-3.3-4.7-4.4c-2-1.1-4.4-1.7-7.1-1.7c-1.9,0-3.8,0.4-5.5,1.1c-1.7,0.7-3.2,1.7-4.5,3
+			c-1.3,1.3-2.3,2.8-3,4.4c-1.4,3.5-1.4,7.5,0,11c0.7,1.7,1.7,3.2,3,4.4c2.7,2.6,6.2,4,10,4c2.7,0,5.1-0.6,7.1-1.7
+			c1.9-1.1,3.5-2.6,4.7-4.4c0.3-0.4,0.3-0.9,0.1-1.4C252.8,30.5,252.5,30.1,252.2,29.8L252.2,29.8z M280.3,35.3l-8.3-12.3l7.1-9.4
+			c0.3-0.4,0.4-1,0.3-1.5c-0.1-0.4-0.5-0.8-1.3-0.8h-5.6c-0.3,0-0.6,0.1-0.9,0.2c-0.4,0.2-0.6,0.4-0.8,0.8l-5.7,8h-1.4V1.4
+			c0-0.4-0.1-0.7-0.4-1c-0.3-0.3-0.6-0.4-1-0.4h-5.3c-0.4,0-0.7,0.1-1,0.4c-0.3,0.3-0.4,0.6-0.4,1v34.8c0,0.4,0.2,0.8,0.4,1
+			c0.3,0.3,0.6,0.4,1,0.4h5.3c0.4,0,0.7-0.2,1-0.4c0.3-0.3,0.4-0.6,0.4-1V27h1.5l6.2,9.6c0.4,0.7,1.1,1.1,1.8,1.1h5.9
+			c0.9,0,1.3-0.4,1.4-0.8C280.7,36.4,280.6,35.8,280.3,35.3L280.3,35.3z M148.5,11.3h-5.9c-0.4,0-0.9,0.1-1.2,0.5
+			c-0.3,0.3-0.5,0.6-0.5,1L136.5,29h-1.1l-4.7-16.3c-0.1-0.3-0.2-0.7-0.5-1c-0.3-0.3-0.7-0.5-1.1-0.5h-6.1c-0.8,0-1.3,0.3-1.5,0.8
+			c-0.2,0.5-0.2,1,0,1.4l7.5,22.9c0.1,0.3,0.3,0.7,0.6,0.9c0.3,0.3,0.7,0.4,1.1,0.4h3.2l-0.3,0.7l-0.7,2.1c-0.2,0.6-0.6,1.2-1.2,1.7
+			c-0.5,0.4-1.1,0.6-1.8,0.6c-0.5,0-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.4-0.8c-0.4-0.3-0.9-0.4-1.3-0.4h-0.1c-0.6,0-1.1,0.3-1.3,0.8
+			l-1.9,2.8c-0.8,1.2-0.3,2,0.2,2.4c1,0.9,2.2,1.6,3.5,2.1c1.4,0.5,2.9,0.7,4.5,0.7c2.7,0,5-0.7,6.7-2.2c1.8-1.6,3.1-3.7,3.8-6
+			l8.7-28.3c0.2-0.5,0.2-1,0-1.5C149.7,11.6,149.3,11.3,148.5,11.3L148.5,11.3z M148.5,11.3">
+   </path>
+  </g>
+ </g>
+</svg>

package/src/providers/StorefrontProvider.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+/**
+ * Storefront Provider
+ *
+ * All-in-one provider that wraps ApiClient and Cart providers.
+ * This simplifies setup - just wrap your app with this one provider.
+ *
+ * @example
+ * ```tsx
+ * // app/layout.tsx
+ * import { StorefrontProvider } from '@oms/storefront-ui';
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <StorefrontProvider brandSlug="my-brand">
+ *           {children}
+ *         </StorefrontProvider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ * ```
+ */
+
+import { ReactNode } from 'react';
+import { ApiClientProvider } from '@oms/api-client';
+import { CartProvider, CartProviderProps } from '../contexts/CartContext';
+
+export interface StorefrontProviderProps {
+  /** Your children components */
+  children: ReactNode;
+  /** Brand slug for cart operations */
+  brandSlug: string;
+  /** Optional: Override the default API URL (defaults to https://oms-api.instock.ng) */
+  apiUrl?: string;
+  /** Optional: Initial cart ID (overrides localStorage) */
+  initialCartId?: string;
+  /** Optional: Props to pass to the ShoppingCart component */
+  shoppingCartProps?: CartProviderProps['shoppingCartProps'];
+}
+
+/**
+ * All-in-one provider for @oms/storefront-ui
+ *
+ * Wraps your app with:
+ * - ApiClientProvider (for API configuration and React Query)
+ * - CartProvider (for cart state management)
+ */
+export function StorefrontProvider({
+  children,
+  brandSlug,
+  apiUrl,
+  initialCartId,
+  shoppingCartProps,
+}: StorefrontProviderProps) {
+  return (
+    <ApiClientProvider {...(apiUrl && { baseURL: apiUrl })}>
+      <CartProvider
+        brandSlug={brandSlug}
+        initialCartId={initialCartId}
+        shoppingCartProps={shoppingCartProps}
+      >
+        {children}
+      </CartProvider>
+    </ApiClientProvider>
+  );
+}

package/src/styles.css

@@ -0,0 +1 @@
+@import 'tailwindcss';

package/src/test-utils/MockCartProvider.tsx

@@ -0,0 +1,424 @@
+/**
+ * MockCartProvider for Storybook
+ *
+ * Provides fake cart data for UI prototyping without needing a real backend.
+ */
+
+import { ReactNode, useState, useCallback } from 'react';
+import { CartContext } from '../contexts/CartContext';
+import { ShoppingCart } from '../components/ShoppingCart';
+import type { Cart, PublicOrderResponse } from '@oms/api-client';
+import type { ShoppingCartProps } from '../components/ShoppingCart';
+
+// Use the proper type from the API client
+type CheckoutResponse = PublicOrderResponse;
+
+const mockCart: Cart = {
+  id: 'mock-cart-123',
+  expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24).toISOString(),
+  brand: {
+    id: 'mock-brand-456',
+    name: 'Demo Store',
+    slug: 'demo-store',
+    logoUrl: 'https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=200&h=80&fit=crop',
+    siteUrl: 'https://demo-store.com',
+    domain: 'f',
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+  },
+  customerPhone: null,
+  customerEmail: null,
+  customerFirstName: null,
+  customerLastName: null,
+  availablePaymentMethods: ['cod'],
+  deliveryZone: null,
+  recoveryAttempts: 0,
+  lastRecoveryAttemptAt: null,
+  recoveryDiscountCode: null,
+  items: [
+    {
+      id: 'item-1',
+      variant: {
+        id: 'variant-1',
+        productId: 'product-1',
+        name: 'Medium - Blue',
+        price: 29.99,
+        sku: 'TSHIRT-MD-BLUE',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+        trackInventory: true,
+        lowStockThreshold: 10,
+        isActive: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        deletedAt: null,
+        product: {
+          id: 'product-1',
+          name: 'Premium Cotton T-Shirt',
+          slug: 'premium-cotton-t-shirt',
+          brandId: 'mock-brand-456',
+          isActive: true,
+          description: 'Comfortable premium cotton t-shirt',
+          thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+          quantityDiscounts: null,
+        },
+      },
+      quantity: 2,
+      basePrice: 29.99,
+      discountPercent: 0,
+      finalPrice: 25.99,
+      subtotal: 51.98,
+    },
+    {
+      id: 'item-2',
+      variant: {
+        id: 'variant-2',
+        productId: 'product-2',
+        name: 'Large - Black',
+        price: 34.99,
+        sku: 'JEANS-LG-BLACK',
+        thumbnailUrl: 'https://images.unsplash.com/photo-1542272604-787c3835535d?w=400',
+        trackInventory: true,
+        lowStockThreshold: 10,
+        isActive: true,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        deletedAt: null,
+        product: {
+          id: 'product-2',
+          name: 'Slim Fit Jeans',
+          slug: 'slim-fit-jeans',
+          brandId: 'mock-brand-456',
+          isActive: true,
+          description: 'Modern slim fit jeans',
+          thumbnailUrl: 'https://images.unsplash.com/photo-1542272604-787c3835535d?w=400',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+          quantityDiscounts: null,
+        },
+      },
+      quantity: 1,
+      basePrice: 34.99,
+      discountPercent: 0,
+      finalPrice: 34.99,
+      subtotal: 34.99,
+    },
+  ],
+  pricing: {
+    subtotal: 94.97,
+    deliveryCharge: 0,
+    discount: null,
+    total: 94.97,
+  },
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  convertedToOrderId: null,
+  wasRecovered: false,
+  recoveryUrl: 'https://demo-store.com?cartId=mock-cart-123',
+};
+
+interface MockCartProviderProps {
+  children: ReactNode;
+  cart?: Partial<Cart>;
+  isLoading?: boolean;
+  error?: Error | null;
+  /** Props to pass to the ShoppingCart component */
+  shoppingCartProps?: Omit<ShoppingCartProps, 'isOpen' | 'onClose'>;
+  /** Whether to render the ShoppingCart component (default: true) */
+  renderCart?: boolean;
+}
+
+export function MockCartProvider({
+  children,
+  cart: cartOverride,
+  isLoading = false,
+  error = null,
+  shoppingCartProps,
+  renderCart = true,
+}: MockCartProviderProps) {
+  const [cart, setCart] = useState<Cart>({
+    ...mockCart,
+    ...cartOverride,
+    items: cartOverride?.items ?? mockCart.items,
+    pricing: {
+      ...mockCart.pricing,
+      ...cartOverride?.pricing,
+    },
+    brand: {
+      ...mockCart.brand,
+      ...cartOverride?.brand,
+    },
+  } as Cart);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [checkoutData, setCheckoutData] = useState<CheckoutResponse | undefined>(undefined);
+  const [isCheckoutSuccess, setIsCheckoutSuccess] = useState(false);
+  const [isCheckoutPending, setIsCheckoutPending] = useState(false);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  // Mock mutations
+  const mockUpdateCartMutation = {
+    mutate: (data: any) => {
+      console.log('Mock updateCartMutation:', data);
+      setCart(prev => ({
+        ...prev,
+        ...data,
+      }));
+    },
+    mutateAsync: async (data: any) => {
+      console.log('Mock updateCartMutation:', data);
+      setCart(prev => ({
+        ...prev,
+        ...data,
+      }));
+      return cart;
+    },
+    isIdle: true,
+    isPending: false,
+    isError: false,
+    isSuccess: false,
+    data: undefined,
+    error: null,
+    reset: () => {},
+    status: 'idle' as const,
+    failureCount: 0,
+    failureReason: null,
+    isPaused: false,
+    variables: undefined,
+    submittedAt: 0,
+    context: undefined,
+  };
+
+  const createCheckoutResponse = useCallback((data: any): CheckoutResponse => {
+    return {
+      canConfirm: true,
+      confirmationMessage: '-',
+      id: `mock-order-${Date.now()}`,
+      brandId: cart.brand.id,
+      orderNumber: Math.floor(Math.random() * 10000),
+      firstName: data.firstName,
+      lastName: data.lastName,
+      phone: data.phone,
+      email: data.email || null,
+      address: data.address,
+      city: data.city,
+      deliveryZoneId: cart.deliveryZone?.id || 'mock-zone-1',
+      deliveryCharge: 1500,
+      estimatedDays: 3,
+      totalPrice: cart.pricing.total + 1500,
+      discountCodeId: null,
+      discountAmount: null,
+      paymentMethod: data.paymentMethod,
+      paystackReference: null,
+      status: 'pending' as const,
+      cancellationReason: null,
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      deletedAt: null,
+      lastRecoveryAttemptAt: null,
+      prospectReason: null,
+      prospectSince: null,
+      recoveryAttempts: 0,
+      recoveryDiscountCodeId: null,
+      userActionToken: 'mock-token-123',
+      wasRecovered: false,
+      // Computed fields from formatOrderResponse
+      subtotal: cart.pricing.subtotal,
+      // Relations
+      brand: cart.brand,
+      deliveryZone: {
+        id: cart.deliveryZone?.id || 'mock-zone-1',
+        name: cart.deliveryZone?.name || 'Mock Zone',
+        brandId: cart.brand.id,
+        deliveryCost: 1500,
+        freeShippingThreshold: null,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 3,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        deletedAt: null,
+        state: {
+          id: 'mock-state-1',
+          name: 'Mock State',
+          isActive: true,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+        },
+        isActive: true,
+        stateId: 'mock-state-1',
+      },
+      items: cart.items.map(item => ({
+        id: item.id,
+        orderId: `mock-order-${Date.now()}`,
+        variantId: item.variant.id,
+        warehouseId: 'mock-warehouse-1',
+        priceAtPurchase: item.finalPrice,
+        quantity: item.quantity,
+        variant: item.variant,
+        warehouse: {
+          id: 'mock-warehouse-1',
+          name: 'Main Warehouse',
+          isActive: true,
+          address: null,
+          city: null,
+          state: null,
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+        },
+      })),
+    } satisfies CheckoutResponse;
+  }, [cart]);
+
+  const mockCheckoutMutation = {
+    mutate: (data: any) => {
+      console.log('Mock checkoutMutation.mutate:', data);
+      setIsCheckoutPending(true);
+      // Simulate async operation and update state
+      setTimeout(() => {
+        const response = createCheckoutResponse(data);
+        setCheckoutData(response);
+        setIsCheckoutSuccess(true);
+        setIsCheckoutPending(false);
+      }, 500);
+    },
+    mutateAsync: async (data: any) => {
+      console.log('Mock checkoutMutation.mutateAsync:', data);
+      setIsCheckoutPending(true);
+      // Simulate network delay
+      await new Promise(resolve => setTimeout(resolve, 500));
+      const response = createCheckoutResponse(data);
+      setCheckoutData(response);
+      setIsCheckoutSuccess(true);
+      setIsCheckoutPending(false);
+      return response;
+    },
+    isIdle: !isCheckoutSuccess && !checkoutData && !isCheckoutPending,
+    isPending: isCheckoutPending,
+    isError: false,
+    isSuccess: isCheckoutSuccess,
+    data: checkoutData,
+    error: null,
+    reset: () => {
+      setCheckoutData(undefined);
+      setIsCheckoutSuccess(false);
+      setIsCheckoutPending(false);
+    },
+    status: isCheckoutPending ? 'pending' as const : isCheckoutSuccess ? 'success' as const : 'idle' as const,
+    failureCount: 0,
+    failureReason: null,
+    isPaused: false,
+    variables: undefined,
+    submittedAt: 0,
+    context: undefined,
+  };
+
+  const contextValue = {
+    cart,
+    cartId: cart.id,
+    isLoading,
+    error,
+    updateCartMutation: mockUpdateCartMutation as any,
+    checkoutMutation: mockCheckoutMutation as any,
+
+    addItem: async (variantId: string, quantity: number) => {
+      console.log('Mock addItem:', { variantId, quantity });
+    },
+
+    updateItem: async (itemId: string, quantity: number) => {
+      console.log('Mock updateItem:', { itemId, quantity });
+      setCart(prev => ({
+        ...prev,
+        items: prev.items.map(item =>
+          item.id === itemId ? { ...item, quantity, subtotal: item.finalPrice * quantity } : item
+        ),
+      }));
+    },
+
+    removeItem: async (itemId: string) => {
+      console.log('Mock removeItem:', itemId);
+      setCart(prev => ({
+        ...prev,
+        items: prev.items.filter(item => item.id !== itemId),
+      }));
+    },
+
+    applyDiscount: async (code: string) => {
+      console.log('Mock applyDiscount:', code);
+      if (code === 'SAVE10') {
+        const discountAmount = Math.round(cart.pricing.subtotal * 0.1 * 100) / 100;
+        setCart(prev => ({
+          ...prev,
+          pricing: {
+            ...prev.pricing,
+            discount: {
+              code,
+              type: 'percentage',
+              value: 10,
+              amount: discountAmount,
+              description: '10% off your order',
+            },
+            total: prev.pricing.subtotal - discountAmount,
+          },
+        }));
+      } else {
+        throw new Error('Invalid discount code');
+      }
+    },
+
+    removeDiscount: async () => {
+      console.log('Mock removeDiscount');
+      setCart(prev => ({
+        ...prev,
+        pricing: {
+          ...prev.pricing,
+          discount: null,
+          total: prev.pricing.subtotal,
+        },
+      }));
+    },
+
+    clearCart: () => {
+      console.log('Mock clearCart');
+      setCart(prev => ({
+        ...prev,
+        items: [],
+      }));
+    },
+
+    refetch: () => {
+      console.log('Mock refetch');
+    },
+
+    isOpen,
+    open,
+    close,
+  };
+
+  return (
+    <CartContext.Provider value={contextValue}>
+      {children}
+      {renderCart && (
+        <ShoppingCart
+          isOpen={isOpen}
+          onClose={close}
+          {...shoppingCartProps}
+        />
+      )}
+    </CartContext.Provider>
+  );
+}

package/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.svg?react' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+  export default ReactComponent;
+}