@instockng/storefront-ui 1.0.10 → 1.0.12

package/src/components/CartItem.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CartItem } from './CartItem';
+import type {CartItem as CartItemType} from '@oms/api-client';
+
+const meta = {
+  title: 'Components/CartItem',
+  component: CartItem,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CartItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockCartItem: CartItemType = {
+  id: 'item-1',
+  quantity: 2,
+  variant: {
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    deletedAt: null,
+    isActive: true,
+    id: 'variant-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,
+    productId: 'product-1',
+    product: {
+      name: 'Premium Cotton T-Shirt',
+      slug: 'cotton-shirt',
+      thumbnailUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+      id: 'product-1',
+      brandId: 'brand-1',
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      deletedAt: null,
+      isActive: true,
+      description: 'Premium cotton t-shirt',
+      quantityDiscounts: null,
+    },
+  },
+  basePrice: 29.99,
+  discountPercent: 0,
+  finalPrice: 29.99,
+  subtotal: 59.98,
+};
+
+export const Default: Story = {
+  args: {
+    item: mockCartItem,
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    item: {
+      ...mockCartItem,
+      variant: {
+        ...mockCartItem.variant,
+        product: {
+          name: 'Premium Cotton T-Shirt',
+          id: 'product-1',
+          brandId: 'brand-1',
+          slug: 'cotton-shirt',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          deletedAt: null,
+          isActive: true,
+          description: 'Premium cotton t-shirt',
+          quantityDiscounts: null,
+          thumbnailUrl: null,
+        },
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    item: mockCartItem,
+    disabled: true,
+  },
+};
+
+export const Removing: Story = {
+  args: {
+    item: mockCartItem,
+  },
+};

package/src/components/CartItem.tsx

@@ -0,0 +1,141 @@
+/**
+ * CartItem Component
+ *
+ * Displays a single item in the shopping cart with quantity controls and remove button.
+ */
+
+import { Trash2, Package } from 'lucide-react';
+import { formatCurrency, cn } from '../lib/utils';
+import type { CartItem as CartItemType } from '@oms/api-client';
+import { useCart } from '@/contexts/CartContext';
+import { useCallback, useState } from 'react';
+
+export interface CartItemProps {
+  item: CartItemType;
+  /** Custom class name */
+  className?: string;
+  /** Disable controls */
+  disabled?: boolean;
+}
+
+export function CartItem({
+  item,
+  className,
+  disabled = false,
+}: CartItemProps) {
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [isUpdating, setIsUpdating] = useState(false);
+  const { removeItem, updateItem } = useCart();
+
+  const handleQuantityChange = useCallback(async (newQuantity: number) => {
+    if (newQuantity <= 0) return;
+    setIsUpdating(true);
+  
+    try {
+      await updateItem(item.id, newQuantity);
+    } catch (error) {
+      console.error('Failed to update item quantity:', error);
+    }
+
+    setIsUpdating(false);
+  }, [item.id, updateItem]);
+
+  const handleRemove = useCallback(async () => {
+    setIsRemoving(true);
+    try {
+      await removeItem(item.id);
+    } catch (error) {
+      console.error('Failed to remove item:', error);
+    }
+    setIsRemoving(false);
+  }, [item.id, removeItem]);
+
+  return (
+    <div
+      className={cn(
+        'flex gap-3 transition-opacity',
+        (disabled || isRemoving || isUpdating) && 'opacity-50',
+        className
+      )}
+    >
+      {/* Product Image */}
+      <div className="h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg bg-gray-100">
+        {item.variant.product.thumbnailUrl ? (
+          <img
+            src={item.variant.product.thumbnailUrl}
+            alt={item.variant.product.name}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center">
+            <Package className="h-6 w-6 text-gray-400" />
+          </div>
+        )}
+      </div>
+
+      {/* Item Details */}
+      <div className="flex flex-1 flex-col justify-between py-1">
+        <div>
+          <div className="flex items-start justify-between gap-2">
+            <div className="flex-1">
+              <h3 className="text-base font-semibold leading-tight">
+                {item.variant.product.name}
+              </h3>
+              {item.variant.name && <p className="mt-0.5 text-sm text-gray-600">
+                {item.variant.name}
+              </p>}
+            </div>
+
+            {/* Remove Button */}
+            <button
+              onClick={handleRemove}
+              disabled={disabled || isRemoving}
+              className="text-gray-400 hover:text-red-600 disabled:cursor-not-allowed disabled:opacity-50"
+              aria-label="Remove item"
+            >
+              <Trash2 className="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Quantity Controls and Price */}
+        <div className="flex items-center justify-between mt-2">
+          {/* Quantity Controls */}
+          <div className="inline-flex items-center overflow-hidden rounded-full bg-gray-200 text-gray-700">
+            <button
+              aria-label="Decrease quantity"
+              onClick={() => handleQuantityChange(item.quantity - 1)}
+              disabled={disabled || item.quantity <= 1 || isUpdating}
+              className="flex h-8 w-8 items-center justify-center transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              −
+            </button>
+            <span className="px-3 text-base font-medium select-none">
+              {item.quantity}
+            </span>
+            <button
+              aria-label="Increase quantity"
+              onClick={() => handleQuantityChange(item.quantity + 1)}
+              disabled={disabled || isUpdating}
+              className="flex h-8 w-8 items-center justify-center transition-colors hover:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              +
+            </button>
+          </div>
+
+          {/* Price */}
+          <div className="text-right">
+            <p className="text-base font-medium">
+              {formatCurrency(item.subtotal)}
+            </p>
+            {item.basePrice !== item.finalPrice && (
+              <p className="text-xs text-[#DC143C] line-through">
+                {formatCurrency(item.basePrice * item.quantity)}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Checkout.stories.tsx

@@ -0,0 +1,380 @@
+/**
+ * Checkout Storybook Stories
+ *
+ * Demonstrates the checkout flow with mocked cart and delivery zone data.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { fn } from '@storybook/test';
+import { Checkout, type CheckoutProps } from './Checkout';
+import { Button } from './ui/button';
+import { MockCartProvider } from '../test-utils/MockCartProvider';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { Cart } from '@oms/api-client';
+
+// Mock delivery zones data
+const mockDeliveryZones = [
+  {
+    id: 'state-1',
+    name: 'Lagos',
+    zones: [
+      {
+        id: 'zone-1',
+        name: 'Ikeja',
+        deliveryCost: 1500,
+        freeShippingThreshold: 10000,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 2,
+      },
+      {
+        id: 'zone-2',
+        name: 'Victoria Island',
+        deliveryCost: 2000,
+        freeShippingThreshold: 15000,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 1,
+      },
+      {
+        id: 'zone-3',
+        name: 'Lekki',
+        deliveryCost: 2500,
+        freeShippingThreshold: 15000,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 2,
+      },
+    ],
+  },
+  {
+    id: 'state-2',
+    name: 'Abuja',
+    zones: [
+      {
+        id: 'zone-4',
+        name: 'Wuse',
+        deliveryCost: 3000,
+        freeShippingThreshold: 20000,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 3,
+      },
+      {
+        id: 'zone-5',
+        name: 'Garki',
+        deliveryCost: 3000,
+        freeShippingThreshold: 20000,
+        allowCOD: true,
+        allowOnline: true,
+        waybillOnly: false,
+        estimatedDays: 3,
+      },
+    ],
+  },
+];
+
+// Create a query client with mocked delivery zones data
+const createMockQueryClient = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  // Pre-populate the cache with mock delivery zones
+  queryClient.setQueryData(['deliveryZones', 'mock-brand-456'], mockDeliveryZones);
+
+  return queryClient;
+};
+
+// Mock cart data
+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: 'demo-store.com',
+    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: 2999,
+        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: 'cotton-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: 2999,
+      discountPercent: 0,
+      finalPrice: 2599,
+      subtotal: 5198,
+    },
+    {
+      id: 'item-2',
+      variant: {
+        id: 'variant-2',
+        productId: 'product-2',
+        name: 'Large - Black',
+        price: 3499,
+        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',
+          brandId: 'mock-brand-456',
+          slug: 'cotton-shirt',
+          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: 3499,
+      discountPercent: 0,
+      finalPrice: 3499,
+      subtotal: 3499,
+    },
+  ],
+  pricing: {
+    subtotal: 8697,
+    deliveryCharge: 0,
+    discount: null,
+    total: 8697,
+  },
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  convertedToOrderId: null,
+  wasRecovered: false,
+  recoveryUrl: 'https://demo-store.com?cartId=mock-cart-123',
+};
+
+const meta = {
+  title: 'Components/Checkout',
+  component: Checkout,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Checkout>;
+
+export default meta;
+
+// Wrapper component to handle modal state and provide mock data
+const CheckoutWrapper = (args: any) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const queryClient = createMockQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <MockCartProvider cart={mockCart} renderCart={false}>
+        <div className="flex flex-col items-center gap-4 p-8">
+          <div className="text-center">
+            <h2 className="text-2xl font-bold mb-2">Checkout Flow Demo</h2>
+            <p className="text-gray-600 mb-4">
+              Click the button below to start the checkout process with mock data
+            </p>
+          </div>
+          <Button onClick={() => setIsOpen(true)} size="lg">
+            Start Checkout
+          </Button>
+        </div>
+        <Checkout
+          {...args}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          onSuccess={(orderId) => {
+            args.onSuccess?.(orderId);
+          }}
+          onError={(error) => {
+            console.error('Checkout error:', error);
+            alert(`Checkout failed: ${error.message}`);
+            args.onError?.(error);
+          }}
+        />
+      </MockCartProvider>
+    </QueryClientProvider>
+  );
+};
+
+const mockRefundPolicy = {
+  title: '🤔 Curious about Refunds?',
+  policies: [
+    '2 day return window from delivery date',
+    'Items must be unused and in original packaging',
+    'Refunds processed as soon as item is received',
+    'Refunds issued to original payment method',
+    'Contact support@example.com to initiate refund',
+  ],
+};
+
+// Type for story args that excludes modal-controlled props
+type CheckoutStoryArgs = Omit<CheckoutProps, 'isOpen' | 'onClose'>;
+
+// Default checkout with mock data
+export const Default: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => <CheckoutWrapper {...args} />,
+  args: {
+    onSuccess: fn(),
+    onError: fn(),
+    refundPolicy: mockRefundPolicy,
+  },
+};
+
+// Checkout with pre-filled customer data
+export const WithPrefilledData: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => <CheckoutWrapper {...args} />,
+  args: {
+    ...Default.args,
+    initialData: {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'john.doe@example.com',
+      phone: '08012345678',
+      address: '123 Main Street',
+      city: 'Ikeja',
+      deliveryZoneId: 'zone-1',
+      paymentMethod: 'online',
+    },
+  },
+};
+
+// Without refund policy accordion
+export const NoRefundPolicy: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => <CheckoutWrapper {...args} />,
+  args: {
+    ...Default.args,
+    refundPolicy: undefined,
+  },
+};
+
+// Cash on delivery pre-selected
+export const CashOnDeliverySelected: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => <CheckoutWrapper {...args} />,
+  args: {
+    ...Default.args,
+    initialData: {
+      paymentMethod: 'cod',
+    },
+  },
+};
+
+// Cart with discount applied
+export const WithDiscount: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const queryClient = createMockQueryClient();
+
+    const cartWithDiscount: Cart = {
+      ...mockCart,
+      pricing: {
+        subtotal: 8697,
+        discount: {
+          code: 'SAVE10',
+          type: 'percentage',
+          value: 10,
+          amount: 870,
+          description: '10% off your order',
+        },
+        deliveryCharge: 0,
+        total: 7827,
+      },
+    };
+
+    return (
+      <QueryClientProvider client={queryClient}>
+        <MockCartProvider cart={cartWithDiscount} renderCart={false}>
+          <div className="flex flex-col items-center gap-4 p-8">
+            <div className="text-center">
+              <h2 className="text-2xl font-bold mb-2">Checkout with Discount</h2>
+              <p className="text-gray-600 mb-4">10% discount applied to cart</p>
+            </div>
+            <Button onClick={() => setIsOpen(true)} size="lg">
+              Start Checkout
+            </Button>
+          </div>
+          <Checkout
+            {...args}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            onSuccess={(orderId) => {
+              args.onSuccess?.(orderId);
+            }}
+            onError={(error) => {
+              console.error('Checkout error:', error);
+              alert(`Checkout failed: ${error.message}`);
+              args.onError?.(error);
+            }}
+          />
+        </MockCartProvider>
+      </QueryClientProvider>
+    );
+  },
+  args: {
+    ...Default.args,
+  },
+};
+
+// Custom submit button text
+export const CustomButtonText: StoryObj<CheckoutStoryArgs> = {
+  render: (args) => <CheckoutWrapper {...args} />,
+  args: {
+    ...Default.args,
+    submitButtonText: 'Complete Purchase',
+  },
+};