Changes

src/pages/Checkout.tsx

@@ -0,0 +1,158 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Layout } from '@/components/Layout';
+import { useCart } from '@/contexts/CartContext';
+import { useAuth } from '@/hooks/useAuth';
+import { supabase } from '@/integrations/supabase/client';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { toast } from '@/hooks/use-toast';
+import { Trash2 } from 'lucide-react';
+
+export default function Checkout() {
+  const { items, removeItem, clearCart, total } = useCart();
+  const { user } = useAuth();
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+
+  const handleCheckout = async () => {
+    if (!user) {
+      toast({ title: 'Login required', description: 'Please login to complete your purchase' });
+      navigate('/auth');
+      return;
+    }
+
+    if (items.length === 0) {
+      toast({ title: 'Cart is empty', description: 'Add some products to your cart first', variant: 'destructive' });
+      return;
+    }
+
+    setLoading(true);
+
+    // Create order
+    const { data: order, error: orderError } = await supabase
+      .from('orders')
+      .insert({
+        user_id: user.id,
+        total_amount: total,
+        status: 'pending'
+      })
+      .select()
+      .single();
+
+    if (orderError || !order) {
+      toast({ title: 'Error', description: 'Failed to create order', variant: 'destructive' });
+      setLoading(false);
+      return;
+    }
+
+    // Create order items
+    const orderItems = items.map(item => ({
+      order_id: order.id,
+      product_id: item.id,
+      unit_price: item.sale_price ?? item.price,
+      quantity: 1
+    }));
+
+    const { error: itemsError } = await supabase
+      .from('order_items')
+      .insert(orderItems);
+
+    if (itemsError) {
+      toast({ title: 'Error', description: 'Failed to add order items', variant: 'destructive' });
+      setLoading(false);
+      return;
+    }
+
+    // For demo: mark as paid and grant access
+    await supabase
+      .from('orders')
+      .update({ status: 'paid' })
+      .eq('id', order.id);
+
+    // Grant access to products
+    const accessRecords = items.map(item => ({
+      user_id: user.id,
+      product_id: item.id
+    }));
+
+    await supabase.from('user_access').insert(accessRecords);
+
+    clearCart();
+    toast({ title: 'Success', description: 'Your order has been placed!' });
+    navigate('/dashboard');
+    setLoading(false);
+  };
+
+  return (
+    <Layout>
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-4xl font-bold mb-8">Checkout</h1>
+
+        {items.length === 0 ? (
+          <Card className="border-2 border-border">
+            <CardContent className="py-12 text-center">
+              <p className="text-muted-foreground mb-4">Your cart is empty</p>
+              <Button onClick={() => navigate('/products')} variant="outline" className="border-2">
+                Browse Products
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <div className="lg:col-span-2 space-y-4">
+              {items.map((item) => (
+                <Card key={item.id} className="border-2 border-border">
+                  <CardContent className="py-4">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <h3 className="font-semibold">{item.title}</h3>
+                        <p className="text-sm text-muted-foreground capitalize">{item.type}</p>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <span className="font-bold">
+                          ${item.sale_price ?? item.price}
+                        </span>
+                        <Button 
+                          variant="ghost" 
+                          size="sm" 
+                          onClick={() => removeItem(item.id)}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+
+            <div>
+              <Card className="border-2 border-border shadow-md sticky top-4">
+                <CardHeader>
+                  <CardTitle>Order Summary</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex justify-between text-lg">
+                    <span>Total</span>
+                    <span className="font-bold">${total}</span>
+                  </div>
+                  <Button 
+                    onClick={handleCheckout} 
+                    className="w-full shadow-sm" 
+                    disabled={loading}
+                  >
+                    {loading ? 'Processing...' : user ? 'Complete Purchase' : 'Login to Checkout'}
+                  </Button>
+                  <p className="text-xs text-muted-foreground text-center">
+                    This is a demo checkout. No actual payment will be processed.
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}