@instockng/storefront-ui 1.0.10 → 1.0.11

package/src/components/ShoppingCart.stories.tsx

@@ -0,0 +1,459 @@
+/**
+ * Shopping Cart Storybook Stories
+ *
+ * Demonstrates the cart context API - open/close cart from anywhere using useCart().
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { useCart } from '../contexts/CartContext';
+import { MockCartProvider } from '../test-utils/MockCartProvider';
+import { fn } from '@storybook/test';
+import { Button } from './ui/button';
+import { ShoppingCart as ShoppingCartIcon } from 'lucide-react';
+import type { Cart } from '@oms/api-client';
+
+// Demo component showing how to use the cart context
+const CartDemo = ({ title, description }: { title?: string; description?: string }) => {
+  const { open, cart } = useCart();
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold mb-4">
+          {title || 'Shopping Cart Context Demo'}
+        </h1>
+        <p className="text-gray-600 mb-6">
+          {description || 'Click the button below to open the cart. The cart state is managed by CartContext - you can call open() from anywhere in your app!'}
+        </p>
+        <div className="flex gap-4 items-center">
+          <Button onClick={open} size="lg">
+            <ShoppingCartIcon className="h-5 w-5" />
+            Open Cart ({cart?.items?.length || 0} items)
+          </Button>
+          <div className="text-sm text-gray-500">
+            Try this: <code className="bg-gray-200 px-2 py-1 rounded">const {'{ open }'} = useCart();</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// 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: '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: 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: '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: 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',
+          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: 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',
+};
+
+// Create a wrapper type for our stories
+type CartProviderStory = StoryObj<{
+  cart: Partial<Cart>;
+  shoppingCartProps: any;
+}>;
+
+const meta: Meta<{
+  cart: Partial<Cart>;
+  shoppingCartProps: any;
+}> = {
+  title: 'Components/ShoppingCart',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+// Default shopping cart
+export const Default: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: {},
+  },
+};
+
+// Cart with discount code input
+export const WithDiscountCode: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        showDiscountCode: true,
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Cart with Discount Code"
+        description="The cart includes a discount code input. Try entering 'SAVE10' to see it in action!"
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: { showDiscountCode: true },
+  },
+};
+
+// Without discount code input
+export const WithoutDiscountCode: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        showDiscountCode: false,
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Cart without Discount Code"
+        description="This cart hides the discount code input field."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: { showDiscountCode: false },
+  },
+};
+
+// Custom button text
+export const CustomButtonText: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        checkoutButtonText: 'Complete Purchase',
+        continueShoppingText: 'Keep Browsing',
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Custom Button Text"
+        description="The checkout and continue shopping buttons have custom text."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: {
+      checkoutButtonText: 'Complete Purchase',
+      continueShoppingText: 'Keep Browsing',
+    },
+  },
+};
+
+// Checkout button disabled
+export const CheckoutDisabled: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        disableCheckout: true,
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Checkout Disabled"
+        description="The checkout button is disabled (useful when items are out of stock or other validation fails)."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: { disableCheckout: true },
+  },
+};
+
+// Empty cart state
+export const EmptyCart: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        emptyMessage: 'Your shopping cart is empty. Start adding items!',
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Empty Cart"
+        description="The cart has no items. See the empty state message."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: {
+      ...mockCart,
+      items: [],
+      pricing: {
+        subtotal: 0,
+        discount: null,
+        deliveryCharge: 0,
+        total: 0,
+      },
+    },
+    shoppingCartProps: {
+      emptyMessage: 'Your shopping cart is empty. Start adding items!',
+    },
+  },
+};
+
+// Cart with discount applied
+export const WithDiscount: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        showDiscountCode: true,
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Cart with Discount Applied"
+        description="A 10% discount has been applied to this cart."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: {
+      ...mockCart,
+      pricing: {
+        subtotal: 8697,
+        discount: {
+          code: 'SAVE10',
+          type: 'percentage',
+          value: 10,
+          amount: 870,
+          description: '10% off your order',
+        },
+        deliveryCharge: 0,
+        total: 7827,
+      },
+    },
+    shoppingCartProps: { showDiscountCode: true },
+  },
+};
+
+// Integrated checkout
+export const WithIntegratedCheckout: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        onOrderSuccess: fn(),
+        onCheckoutError: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <CartDemo
+        title="Integrated Checkout"
+        description="This cart includes the checkout flow. Click 'Checkout' to see the checkout modal."
+      />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: {
+      onOrderSuccess: fn(),
+      onCheckoutError: fn(),
+    },
+  },
+};
+
+// Multiple open buttons example
+const MultipleButtonsDemo = () => {
+  const { open, cart } = useCart();
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto space-y-8">
+        <div>
+          <h1 className="text-3xl font-bold mb-4">
+            Open Cart from Anywhere
+          </h1>
+          <p className="text-gray-600 mb-6">
+            Since the cart is managed by context, you can open it from any component in your app!
+          </p>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-4">Header Component</h2>
+          <Button onClick={open} variant="outline">
+            <ShoppingCartIcon className="h-4 w-4" />
+            Cart ({cart?.items?.length || 0})
+          </Button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-4">Product Card</h2>
+          <p className="text-gray-600 mb-4">After adding to cart, you might want to show the cart:</p>
+          <Button onClick={open} size="lg">
+            <ShoppingCartIcon className="h-5 w-5" />
+            View Cart
+          </Button>
+        </div>
+
+        <div className="bg-white p-6 rounded-lg shadow">
+          <h2 className="text-xl font-semibold mb-4">Floating Action Button</h2>
+          <div className="fixed bottom-8 right-8">
+            <Button onClick={open} size="lg" className="rounded-full shadow-lg">
+              <ShoppingCartIcon className="h-6 w-6" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="bg-blue-50 border border-blue-200 p-4 rounded-lg">
+          <p className="text-sm text-blue-800">
+            <strong>💡 Tip:</strong> All these buttons use the same <code className="bg-blue-100 px-1 rounded">open()</code> function from <code className="bg-blue-100 px-1 rounded">useCart()</code>.
+            No prop drilling needed!
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const OpenFromAnywhere: CartProviderStory = {
+  render: (args) => (
+    <MockCartProvider
+      cart={args.cart}
+      shoppingCartProps={{
+        onCheckout: fn(),
+        onContinueShopping: fn(),
+        ...args.shoppingCartProps,
+      }}
+    >
+      <MultipleButtonsDemo />
+    </MockCartProvider>
+  ),
+  args: {
+    cart: mockCart,
+    shoppingCartProps: {},
+  },
+};