@instockng/storefront-ui 1.0.10 → 1.0.11

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',
+  },
+};