Changes

src/pages/ProductDetail.tsx

@@ -1,13 +1,15 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import { supabase } from '@/integrations/supabase/client';
 import { Layout } from '@/components/Layout';
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { useCart } from '@/contexts/CartContext';
+import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { Skeleton } from '@/components/ui/skeleton';
+import { Video, Calendar, BookOpen } from 'lucide-react';
 
 interface Product {
   id: string;
@@ -18,18 +20,33 @@ interface Product {
   content: string;
   price: number;
   sale_price: number | null;
+  meeting_link: string | null;
+  recording_url: string | null;
+  created_at: string;
 }
 
 export default function ProductDetail() {
   const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
   const [product, setProduct] = useState<Product | null>(null);
   const [loading, setLoading] = useState(true);
+  const [hasAccess, setHasAccess] = useState(false);
+  const [checkingAccess, setCheckingAccess] = useState(true);
   const { addItem, items } = useCart();
+  const { user } = useAuth();
 
   useEffect(() => {
     if (slug) fetchProduct();
   }, [slug]);
 
+  useEffect(() => {
+    if (product && user) {
+      checkUserAccess();
+    } else {
+      setCheckingAccess(false);
+    }
+  }, [product, user]);
+
   const fetchProduct = async () => {
     const { data, error } = await supabase
       .from('products')
@@ -46,42 +63,62 @@ export default function ProductDetail() {
     setLoading(false);
   };
 
+  const checkUserAccess = async () => {
+    if (!product || !user) return;
+    const { data } = await supabase
+      .from('user_access')
+      .select('id')
+      .eq('user_id', user.id)
+      .eq('product_id', product.id)
+      .maybeSingle();
+    setHasAccess(!!data);
+    setCheckingAccess(false);
+  };
+
   const handleAddToCart = () => {
     if (!product) return;
-    addItem({
-      id: product.id,
-      title: product.title,
-      price: product.price,
-      sale_price: product.sale_price,
-      type: product.type,
-    });
+    addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
     toast({ title: 'Added to cart', description: `${product.title} has been added to your cart` });
   };
 
   const isInCart = product ? items.some(item => item.id === product.id) : false;
 
+  const getVideoEmbed = (url: string) => {
+    const youtubeMatch = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([^&\s]+)/);
+    if (youtubeMatch) return `https://www.youtube.com/embed/${youtubeMatch[1]}`;
+    const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+    if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+    return url;
+  };
+
   if (loading) {
-    return (
-      <Layout>
-        <div className="container mx-auto px-4 py-8">
-          <Skeleton className="h-10 w-1/2 mb-4" />
-          <Skeleton className="h-6 w-1/4 mb-8" />
-          <Skeleton className="h-64 w-full" />
-        </div>
-      </Layout>
-    );
+    return (<Layout><div className="container mx-auto px-4 py-8"><Skeleton className="h-10 w-1/2 mb-4" /><Skeleton className="h-6 w-1/4 mb-8" /><Skeleton className="h-64 w-full" /></div></Layout>);
   }
 
   if (!product) {
-    return (
-      <Layout>
-        <div className="container mx-auto px-4 py-8 text-center">
-          <h1 className="text-2xl font-bold">Product not found</h1>
-        </div>
-      </Layout>
-    );
+    return (<Layout><div className="container mx-auto px-4 py-8 text-center"><h1 className="text-2xl font-bold">Product not found</h1></div></Layout>);
   }
 
+  const renderActionButtons = () => {
+    if (checkingAccess) return <Skeleton className="h-10 w-40" />;
+    if (!hasAccess) {
+      return (<Button onClick={handleAddToCart} disabled={isInCart} size="lg" className="shadow-sm">{isInCart ? 'Already in Cart' : 'Add to Cart'}</Button>);
+    }
+    switch (product.type) {
+      case 'consulting':
+        return (<Button asChild size="lg" className="shadow-sm"><a href={product.meeting_link || '#'} target="_blank" rel="noopener noreferrer"><Calendar className="w-4 h-4 mr-2" />Book Consulting Session</a></Button>);
+      case 'webinar':
+        if (product.recording_url) {
+          return (<div className="aspect-video bg-muted rounded-lg overflow-hidden"><iframe src={getVideoEmbed(product.recording_url)} className="w-full h-full" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen /></div>);
+        }
+        return product.meeting_link ? (<Button asChild size="lg" className="shadow-sm"><a href={product.meeting_link} target="_blank" rel="noopener noreferrer"><Video className="w-4 h-4 mr-2" />Join Live Webinar</a></Button>) : <Badge variant="secondary">Recording coming soon</Badge>;
+      case 'bootcamp':
+        return (<Button onClick={() => navigate(`/bootcamp/${product.slug}`)} size="lg" className="shadow-sm"><BookOpen className="w-4 h-4 mr-2" />Start Bootcamp</Button>);
+      default:
+        return null;
+    }
+  };
+
   return (
     <Layout>
       <div className="container mx-auto px-4 py-8">
@@ -89,41 +126,18 @@ export default function ProductDetail() {
           <div className="flex items-start justify-between mb-6">
             <div>
               <h1 className="text-4xl font-bold mb-2">{product.title}</h1>
-              <Badge className="bg-secondary">{product.type}</Badge>
+              <Badge className="bg-secondary capitalize">{product.type}</Badge>
+              {hasAccess && <Badge className="bg-accent ml-2">You have access</Badge>}
             </div>
             <div className="text-right">
-              {product.sale_price ? (
-                <div>
-                  <span className="text-3xl font-bold">${product.sale_price}</span>
-                  <span className="text-muted-foreground line-through ml-2">${product.price}</span>
-                </div>
-              ) : (
-                <span className="text-3xl font-bold">${product.price}</span>
-              )}
+              {product.sale_price ? (<div><span className="text-3xl font-bold">${product.sale_price}</span><span className="text-muted-foreground line-through ml-2">${product.price}</span></div>) : (<span className="text-3xl font-bold">${product.price}</span>)}
             </div>
           </div>
-
           <p className="text-lg text-muted-foreground mb-6">{product.description}</p>
-
-          <Card className="border-2 border-border mb-6">
-            <CardContent className="pt-6">
-              <div 
-                className="prose max-w-none"
-                dangerouslySetInnerHTML={{ __html: product.content || '<p>No content available</p>' }}
-              />
-            </CardContent>
-          </Card>
-
-          <Button 
-            onClick={handleAddToCart} 
-            disabled={isInCart}
-            size="lg"
-            className="shadow-sm"
-          >
-            {isInCart ? 'Already in Cart' : 'Add to Cart'}
-          </Button>
+          <Card className="border-2 border-border mb-6"><CardContent className="pt-6"><div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: product.content || '<p>No content available</p>' }} /></CardContent></Card>
+          {renderActionButtons()}
         </div>
       </div>
     </Layout>
   );
-}
+}