From f1fb2758f8faaa4c1e160d6316e2eaaef2f7454d Mon Sep 17 00:00:00 2001
From: dwindown <dwinx.ramz@gmail.com>
Date: Fri, 26 Dec 2025 00:56:03 +0700
Subject: [PATCH] Fix webinar join logic to use event_start + duration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Users can now join webinar even if it's already started:
- isWebinarJoinable(): returns true if current time <= event_start + duration
- isWebinarEnded(): returns true if current time > event_start + duration
- "Gabung Webinar" button shows as long as webinar hasn't ended
- This allows latecomers to join immediately

Previously used only event_start which prevented joining after start time.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/pages/ProductDetail.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pages/ProductDetail.tsx b/src/pages/ProductDetail.tsx
index 89b81bd..89ec598 100644
--- a/src/pages/ProductDetail.tsx
+++ b/src/pages/ProductDetail.tsx
@@ -196,6 +196,17 @@ export default function ProductDetail() {
     return new Date() > eventEnd;
   };
 
+  // Check if webinar is currently running or about to start (can join)
+  const isWebinarJoinable = () => {
+    if (!product || product.type !== 'webinar' || !product.event_start) return false;
+    const eventStart = new Date(product.event_start);
+    const durationMs = (product.duration_minutes || 60) * 60 * 1000;
+    const eventEnd = new Date(eventStart.getTime() + durationMs);
+    const now = new Date();
+    // Can join if webinar hasn't ended yet (even if it's already started)
+    return now <= eventEnd;
+  };
+
   const handleAddToCart = () => {
     if (!product) return;
     addItem({ id: product.id, title: product.title, price: product.price, sale_price: product.sale_price, type: product.type });
@@ -254,9 +265,6 @@ export default function ProductDetail() {
           </Button>
         );
       case 'webinar':
-        // Check if webinar has ended
-        const webinarEnded = product.event_start && new Date(product.event_start) <= new Date();
-
         if (product.recording_url) {
           return (
             <div className="space-y-4">
@@ -278,8 +286,8 @@ export default function ProductDetail() {
           );
         }
 
-        // Only show "Gabung Webinar" if webinar hasn't ended and has meeting link
-        if (!webinarEnded && product.meeting_link) {
+        // Show "Gabung Webinar" if webinar hasn't ended yet (can join even if already started)
+        if (isWebinarJoinable() && product.meeting_link) {
           return (
             <Button asChild size="lg" className="shadow-sm">
               <a href={product.meeting_link} target="_blank" rel="noopener noreferrer">
@@ -291,7 +299,7 @@ export default function ProductDetail() {
         }
 
         // Webinar has ended but no recording yet
-        if (webinarEnded) {
+        if (isWebinarEnded()) {
           return <Badge className="bg-muted text-primary">Rekaman segera tersedia</Badge>;
         }