@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/checkout-flow/CheckoutFlow.stories.tsx

@@ -0,0 +1,408 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  CheckoutFlow,
+  defaultCartItems,
+  defaultShippingMethods,
+  defaultPaymentMethods,
+} from './index'
+import type { CartItem, ShippingMethod, PaymentMethod, CheckoutAddress } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof CheckoutFlow> = {
+  title: 'Blocks/CheckoutFlow',
+  component: CheckoutFlow,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A 4-step e-commerce checkout flow with cart review, shipping address & method selection, payment method selection, and order review with coupon support.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof CheckoutFlow>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <CheckoutFlow
+        items={defaultCartItems}
+        shippingMethods={defaultShippingMethods}
+        paymentMethods={defaultPaymentMethods}
+        onSubmitOrder={async (data) => {
+          console.log('Order submitted:', data)
+          await new Promise((resolve) => setTimeout(resolve, 1500))
+        }}
+      />
+    </div>
+  ),
+}
+
+export const WithDiscount: Story = {
+  render: () => (
+    <div className="p-6">
+      <CheckoutFlow
+        items={defaultCartItems}
+        shippingMethods={defaultShippingMethods}
+        paymentMethods={defaultPaymentMethods}
+        discount={{ code: 'SAVE20', amount: 20, type: 'percent' }}
+        onRemoveDiscount={() => console.log('Remove discount')}
+        onSubmitOrder={async (data) => {
+          console.log('Order submitted:', data)
+        }}
+      />
+    </div>
+  ),
+}
+
+export const LargeCart: Story = {
+  render: () => {
+    const largeCart: CartItem[] = [
+      {
+        id: '1',
+        name: 'MacBook Pro 16"',
+        description: 'Apple M3 Max chip, 48GB RAM, 1TB SSD',
+        price: 3499.00,
+        quantity: 1,
+        variant: 'Space Black',
+      },
+      {
+        id: '2',
+        name: 'Pro Display XDR',
+        description: 'Standard glass, 6K resolution',
+        price: 4999.00,
+        quantity: 1,
+      },
+      {
+        id: '3',
+        name: 'Magic Keyboard with Touch ID',
+        price: 199.00,
+        quantity: 2,
+        variant: 'Black Keys',
+      },
+      {
+        id: '4',
+        name: 'Magic Mouse',
+        price: 99.00,
+        quantity: 2,
+        variant: 'Silver',
+      },
+      {
+        id: '5',
+        name: 'USB-C to Lightning Cable',
+        price: 29.00,
+        quantity: 3,
+        variant: '2m',
+      },
+      {
+        id: '6',
+        name: 'AppleCare+ for MacBook Pro',
+        description: '3 years of hardware coverage',
+        price: 399.00,
+        quantity: 1,
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={largeCart}
+          shippingMethods={defaultShippingMethods}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithCouponHandler: Story = {
+  render: () => {
+    const [discount, setDiscount] = React.useState<{ code: string; amount: number; type: 'percent' | 'fixed' } | undefined>()
+
+    const handleApplyCoupon = async (code: string) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      if (code.toUpperCase() === 'SAVE10') {
+        setDiscount({ code: 'SAVE10', amount: 10, type: 'percent' })
+        return { discount: 10, type: 'percent' as const }
+      }
+      if (code.toUpperCase() === 'FLAT50') {
+        setDiscount({ code: 'FLAT50', amount: 50, type: 'fixed' })
+        return { discount: 50, type: 'fixed' as const }
+      }
+      return null
+    }
+
+    return (
+      <div className="p-6">
+        <div className="mb-4 p-4 bg-muted rounded-lg text-sm">
+          <p className="font-medium">Try these coupon codes:</p>
+          <ul className="mt-2 space-y-1 text-muted-foreground">
+            <li><code className="bg-background px-1 rounded">SAVE10</code> - 10% off</li>
+            <li><code className="bg-background px-1 rounded">FLAT50</code> - $50 off</li>
+          </ul>
+        </div>
+        <CheckoutFlow
+          items={defaultCartItems}
+          discount={discount}
+          onApplyCoupon={handleApplyCoupon}
+          onRemoveDiscount={() => setDiscount(undefined)}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomShippingMethods: Story = {
+  render: () => {
+    const customShipping: ShippingMethod[] = [
+      {
+        id: 'free',
+        name: 'Free Shipping',
+        description: 'Standard postal delivery',
+        price: 0,
+        estimatedDays: '7-10 business days',
+      },
+      {
+        id: 'economy',
+        name: 'Economy',
+        description: 'Budget-friendly option',
+        price: 2.99,
+        estimatedDays: '5-7 business days',
+      },
+      {
+        id: 'standard',
+        name: 'Standard',
+        description: 'Reliable delivery',
+        price: 6.99,
+        estimatedDays: '3-5 business days',
+      },
+      {
+        id: 'priority',
+        name: 'Priority',
+        description: 'Faster delivery with tracking',
+        price: 12.99,
+        estimatedDays: '2-3 business days',
+      },
+      {
+        id: 'express',
+        name: 'Express',
+        description: 'Guaranteed fast delivery',
+        price: 19.99,
+        estimatedDays: 'Next business day',
+      },
+      {
+        id: 'same-day',
+        name: 'Same Day',
+        description: 'Available in select areas',
+        price: 29.99,
+        estimatedDays: 'Today',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={defaultCartItems}
+          shippingMethods={customShipping}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const CustomPaymentMethods: Story = {
+  render: () => {
+    const customPayments: PaymentMethod[] = [
+      { id: 'visa', type: 'card', label: 'Visa ending in 4242', last4: '4242' },
+      { id: 'mastercard', type: 'card', label: 'Mastercard ending in 8888', last4: '8888' },
+      { id: 'paypal', type: 'paypal', label: 'PayPal' },
+      { id: 'apple', type: 'apple', label: 'Apple Pay' },
+      { id: 'google', type: 'google', label: 'Google Pay' },
+      { id: 'bank', type: 'bank', label: 'Bank Transfer' },
+    ]
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={defaultCartItems}
+          shippingMethods={defaultShippingMethods}
+          paymentMethods={customPayments}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const EuroCheckout: Story = {
+  render: () => {
+    const euroItems: CartItem[] = [
+      {
+        id: '1',
+        name: 'Designer Handbag',
+        description: 'Italian leather, handcrafted',
+        price: 899.00,
+        quantity: 1,
+        variant: 'Cognac',
+      },
+      {
+        id: '2',
+        name: 'Silk Scarf',
+        description: 'Hand-printed silk twill',
+        price: 350.00,
+        quantity: 1,
+        variant: 'Floral Pattern',
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={euroItems}
+          currency="€"
+          taxRate={20}
+          shippingMethods={defaultShippingMethods}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const SingleItem: Story = {
+  render: () => {
+    const singleItem: CartItem[] = [
+      {
+        id: '1',
+        name: 'Premium Subscription',
+        description: 'Annual plan with all features',
+        price: 99.99,
+        quantity: 1,
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={singleItem}
+          shippingMethods={[
+            {
+              id: 'digital',
+              name: 'Digital Delivery',
+              description: 'Instant access after payment',
+              price: 0,
+              estimatedDays: 'Immediate',
+            },
+          ]}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+          }}
+        />
+      </div>
+    )
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [orderSubmitted, setOrderSubmitted] = React.useState(false)
+    const [submittedData, setSubmittedData] = React.useState<any>(null)
+
+    const handleSubmitOrder = async (data: {
+      address: CheckoutAddress
+      shippingMethod: string
+      paymentMethod: string
+      saveInfo: boolean
+    }) => {
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+      setSubmittedData(data)
+      setOrderSubmitted(true)
+    }
+
+    if (orderSubmitted) {
+      return (
+        <div className="p-6 max-w-xl mx-auto">
+          <div className="text-center py-12">
+            <div className="h-16 w-16 rounded-full bg-green-500/10 mx-auto flex items-center justify-center mb-4">
+              <svg className="h-8 w-8 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+              </svg>
+            </div>
+            <h2 className="text-2xl font-bold">Order Confirmed!</h2>
+            <p className="text-muted-foreground mt-2">Thank you for your purchase.</p>
+            <p className="text-sm mt-4">
+              Shipping to: {submittedData?.address?.firstName} {submittedData?.address?.lastName}
+            </p>
+            <button
+              onClick={() => setOrderSubmitted(false)}
+              className="mt-6 px-4 py-2 bg-primary text-primary-foreground rounded-lg"
+            >
+              Place Another Order
+            </button>
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <div className="p-6">
+        <CheckoutFlow
+          items={defaultCartItems}
+          shippingMethods={defaultShippingMethods}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={handleSubmitOrder}
+        />
+      </div>
+    )
+  },
+}
+
+export const EcommerceCheckout: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between max-w-6xl mx-auto">
+          <div>
+            <h1 className="font-bold text-xl">ShopName</h1>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Continue Shopping</a>
+            <a href="#" className="text-foreground font-medium">Checkout</a>
+          </nav>
+        </div>
+      </header>
+      <main className="p-6">
+        <CheckoutFlow
+          items={defaultCartItems}
+          shippingMethods={defaultShippingMethods}
+          paymentMethods={defaultPaymentMethods}
+          onSubmitOrder={async (data) => {
+            console.log('Order submitted:', data)
+            await new Promise((resolve) => setTimeout(resolve, 1500))
+            alert('Order placed successfully!')
+          }}
+        />
+      </main>
+    </div>
+  ),
+}