dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve consulting booking UX - allow single slot selection

Browse Source 
- Add pending slot state to distinguish between selected and confirmed slots
- First click: slot shows as pending (amber) with "Pilih" label
- Second click (same slot): confirms single slot selection
- Second click (different slot): creates range from pending to clicked slot
- Fix "Body already consumed" error in OAuth token refresh
- Enhance admin consulting slot display with category and notes

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

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-27 23:40:54 +07:00
parent 4d8f66ed3a
commit 777d989d34
3 changed files with 237 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/pages/ConsultingBooking.tsx
View File

@@ -67,12 +67,13 @@ export default function ConsultingBooking() {
const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1)); const [selectedDate, setSelectedDate] = useState<Date | undefined>(addDays(new Date(), 1));
// NEW: Range selection instead of array // Range selection with pending slot
interface TimeRange { interface TimeRange {
start: string | null; start: string | null;
end: string | null; end: string | null;
} }
const [selectedRange, setSelectedRange] = useState<TimeRange>({ start: null, end: null }); const [selectedRange, setSelectedRange] = useState<TimeRange>({ start: null, end: null });
const [pendingSlot, setPendingSlot] = useState<string | null>(null);
const [selectedCategory, setSelectedCategory] = useState(''); const [selectedCategory, setSelectedCategory] = useState('');
const [notes, setNotes] = useState(''); const [notes, setNotes] = useState('');
@@ -192,7 +193,12 @@ export default function ConsultingBooking() {
}, [selectedDate, workhours, confirmedSlots, webinars, settings]); }, [selectedDate, workhours, confirmedSlots, webinars, settings]);
// Helper: Get all slots between start and end (inclusive) // Helper: Get all slots between start and end (inclusive)
// Now supports single slot selection where start = end
const getSlotsInRange = useMemo(() => { const getSlotsInRange = useMemo(() => {
// If there's a pending slot but no confirmed range, don't show any slots as selected
if (pendingSlot && !selectedRange.start) return [];
// If only start is set (no end), don't show any slots as selected yet
if (!selectedRange.start || !selectedRange.end) return []; if (!selectedRange.start || !selectedRange.end) return [];
const startIndex = availableSlots.findIndex(s => s.start === selectedRange.start); const startIndex = availableSlots.findIndex(s => s.start === selectedRange.start);
@@ -203,65 +209,74 @@ export default function ConsultingBooking() {
return availableSlots return availableSlots
.slice(startIndex, endIndex + 1) .slice(startIndex, endIndex + 1)
.map(s => s.start); .map(s => s.start);
}, [selectedRange, availableSlots]); }, [selectedRange, availableSlots, pendingSlot]);
// NEW: Range selection handler // Range selection handler with pending slot UX
const handleSlotClick = (slotStart: string) => { const handleSlotClick = (slotStart: string) => {
const slot = availableSlots.find(s => s.start === slotStart); const slot = availableSlots.find(s => s.start === slotStart);
if (!slot || !slot.available) return; if (!slot || !slot.available) return;
setSelectedRange(prev => { // If there's a pending slot
// CASE 1: No selection yet → Set start time if (pendingSlot) {
if (!prev.start) { if (slotStart === pendingSlot) {
return { start: slotStart, end: null }; // Clicked same slot again → Confirm single slot selection
} setSelectedRange({ start: slotStart, end: slotStart });
setPendingSlot(null);
// CASE 2: Only start selected → Set end time } else {
if (!prev.end) { // Clicked different slot → First becomes start, second becomes end
if (slotStart === prev.start) { const pendingIndex = availableSlots.findIndex(s => s.start === pendingSlot);
// Clicked same slot → Clear selection
return { start: null, end: null };
}
// Ensure end is after start
const startIndex = availableSlots.findIndex(s => s.start === prev.start);
const clickIndex = availableSlots.findIndex(s => s.start === slotStart); const clickIndex = availableSlots.findIndex(s => s.start === slotStart);
if (clickIndex < startIndex) { if (clickIndex < pendingIndex) {
// Clicked before start → Make new start, old start becomes end // Clicked before pending → Make clicked slot start, pending becomes end
return { start: slotStart, end: prev.start }; setSelectedRange({ start: slotStart, end: pendingSlot });
} else {
// Clicked after pending → Pending is start, clicked is end
setSelectedRange({ start: pendingSlot, end: slotStart });
} }
setPendingSlot(null);
return { start: prev.start, end: slotStart };
} }
return;
}
// CASE 3: Both selected (changing range) // No pending slot - check if we're modifying existing selection
const startIndex = availableSlots.findIndex(s => s.start === prev.start); if (selectedRange.start && selectedRange.end) {
const endIndex = availableSlots.findIndex(s => s.start === prev.end); const startIndex = availableSlots.findIndex(s => s.start === selectedRange.start);
const endIndex = availableSlots.findIndex(s => s.start === selectedRange.end);
const clickIndex = availableSlots.findIndex(s => s.start === slotStart); const clickIndex = availableSlots.findIndex(s => s.start === slotStart);
// Clicked start time → Clear all // Clicked start time → Clear all
if (slotStart === prev.start) { if (slotStart === selectedRange.start) {
return { start: null, end: null }; setSelectedRange({ start: null, end: null });
return;
} }
// Clicked end time → Update end // Clicked end time → Remove end, keep start as pending
if (slotStart === prev.end) { if (slotStart === selectedRange.end) {
return { start: prev.start, end: null }; setPendingSlot(selectedRange.start);
setSelectedRange({ start: null, end: null });
return;
} }
// Clicked before start → New start, old start becomes end // Clicked before start → New start, old start becomes end
if (clickIndex < startIndex) { if (clickIndex < startIndex) {
return { start: slotStart, end: prev.start }; setSelectedRange({ start: slotStart, end: selectedRange.start });
return;
} }
// Clicked after end → New end // Clicked after end → New end
if (clickIndex > endIndex) { if (clickIndex > endIndex) {
return { start: prev.start, end: slotStart }; setSelectedRange({ start: selectedRange.start, end: slotStart });
return;
} }
// Clicked within range → Update end to clicked slot // Clicked within range → Update end to clicked slot
return { start: prev.start, end: slotStart }; setSelectedRange({ start: selectedRange.start, end: slotStart });
}); return;
}
// No selection at all → Set as pending
setPendingSlot(slotStart);
}; };
// Calculate total blocks from range // Calculate total blocks from range
@@ -447,7 +462,7 @@ export default function ConsultingBooking() {
Slot Waktu - {format(selectedDate, 'EEEE, d MMMM yyyy', { locale: id })} Slot Waktu - {format(selectedDate, 'EEEE, d MMMM yyyy', { locale: id })}
</CardTitle> </CardTitle>
<CardDescription> <CardDescription>
Klik slot awal dan akhir untuk memilih rentang waktu. {settings.consulting_block_duration_minutes} menit per blok. Klik satu slot untuk memilih, klik lagi untuk konfirmasi. Atau klik dua slot berbeda untuk rentang waktu. {settings.consulting_block_duration_minutes} menit per blok.
{webinars.length > 0 && ( {webinars.length > 0 && (
<span className="block mt-1 text-amber-600 dark:text-amber-400"> <span className="block mt-1 text-amber-600 dark:text-amber-400">
⚠️ {webinars.length} webinar terjadwal - beberapa slot mungkin tidak tersedia ⚠️ {webinars.length} webinar terjadwal - beberapa slot mungkin tidak tersedia
@@ -464,6 +479,7 @@ export default function ConsultingBooking() {
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-0"> <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-0">
{availableSlots.map((slot, index) => { {availableSlots.map((slot, index) => {
const isSelected = getSlotsInRange.includes(slot.start); const isSelected = getSlotsInRange.includes(slot.start);
const isPending = slot.start === pendingSlot;
const isStart = slot.start === selectedRange.start; const isStart = slot.start === selectedRange.start;
const isEnd = slot.start === selectedRange.end; const isEnd = slot.start === selectedRange.end;
const isMiddle = isSelected && !isStart && !isEnd; const isMiddle = isSelected && !isStart && !isEnd;
@@ -475,6 +491,11 @@ export default function ConsultingBooking() {
// Determine border radius for seamless connection // Determine border radius for seamless connection
let className = "border-2 h-10"; let className = "border-2 h-10";
// Add special styling for pending slot
if (isPending) {
className += " bg-amber-500 hover:bg-amber-600 text-white border-amber-600";
}
if (isStart) { if (isStart) {
// First selected slot - right side should connect // First selected slot - right side should connect
className += index < availableSlots.length - 1 && availableSlots[index + 1]?.start === getSlotsInRange[1] className += index < availableSlots.length - 1 && availableSlots[index + 1]?.start === getSlotsInRange[1]
@@ -491,14 +512,15 @@ export default function ConsultingBooking() {
return ( return (
<Button <Button
key={slot.start} key={slot.start}
variant={variant} variant={isPending ? "default" : variant}
disabled={!slot.available} disabled={!slot.available}
onClick={() => slot.available && handleSlotClick(slot.start)} onClick={() => slot.available && handleSlotClick(slot.start)}
className={className} className={className}
> >
{isStart && <span className="text-xs opacity-70">Mulai</span>} {isPending && <span className="text-xs opacity-70">Pilih</span>}
{!isStart && !isEnd && slot.start} {isStart && !isPending && <span className="text-xs opacity-70">Mulai</span>}
{isEnd && <span className="text-xs opacity-70">Selesai</span>} {!isPending && !isStart && !isEnd && slot.start}
{isEnd && !isPending && <span className="text-xs opacity-70">Selesai</span>}
</Button> </Button>
); );
})} })}
@@ -610,6 +632,21 @@ export default function ConsultingBooking() {
</div> </div>
)} )}
{pendingSlot && !selectedRange.start && (
<div className="pt-4 border-t">
<p className="text-sm text-muted-foreground mb-2">Slot dipilih:</p>
{/* Show pending slot */}
<div className="bg-amber-500/10 p-3 rounded-lg border-2 border-amber-500/20">
<div className="text-center">
<p className="text-xs text-muted-foreground">Klik lagi untuk konfirmasi, atau pilih slot lain</p>
<p className="font-bold text-lg text-amber-600">{pendingSlot}</p>
<p className="text-xs text-muted-foreground mt-1">1 blok = {settings.consulting_block_duration_minutes} menit ({formatIDR(settings.consulting_block_price)})</p>
</div>
</div>
</div>
)}
<div className="pt-4 border-t"> <div className="pt-4 border-t">
<div className="flex justify-between text-lg font-bold"> <div className="flex justify-between text-lg font-bold">
<span>Total</span> <span>Total</span>

57
src/pages/admin/AdminOrders.tsx
View File

@@ -46,6 +46,8 @@ interface ConsultingSlot {
end_time: string; end_time: string;
status: string; status: string;
meet_link?: string; meet_link?: string;
topic_category?: string | null;
notes?: string | null;
} }
export default function AdminOrders() { export default function AdminOrders() {
@@ -90,13 +92,17 @@ export default function AdminOrders() {
setOrderItems((itemsData as unknown as OrderItem[]) || []); setOrderItems((itemsData as unknown as OrderItem[]) || []);
// Check if any item is a consulting product and fetch slots // Check if any item is a consulting product and fetch slots
// Also fetch slots if no order_items exist (consulting-only order)
const hasConsulting = (itemsData as unknown as OrderItem[])?.some(item => item.product?.type === "consulting"); const hasConsulting = (itemsData as unknown as OrderItem[])?.some(item => item.product?.type === "consulting");
if (hasConsulting) { const hasNoItems = !itemsData || itemsData.length === 0;
if (hasConsulting || hasNoItems) {
const { data: slotsData } = await supabase const { data: slotsData } = await supabase
.from("consulting_slots") .from("consulting_slots")
.select("*") .select("*")
.eq("order_id", order.id) .eq("order_id", order.id)
.order("date", { ascending: true }); .order("date", { ascending: true })
.order("start_time", { ascending: true });
setConsultingSlots((slotsData as ConsultingSlot[]) || []); setConsultingSlots((slotsData as ConsultingSlot[]) || []);
} else { } else {
setConsultingSlots([]); setConsultingSlots([]);
@@ -475,19 +481,32 @@ export default function AdminOrders() {
<span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || "-"} <span className="text-muted-foreground">Metode:</span> {selectedOrder.payment_method || "-"}
</div> </div>
</div> </div>
<div className="border-t border-border pt-4"> {/* Order Items - only show if there are items */}
<p className="font-medium mb-2">Item:</p> {orderItems.length > 0 && (
{orderItems.map((item) => ( <div className="border-t border-border pt-4">
<div key={item.id} className="flex justify-between py-1"> <p className="font-medium mb-2">Item Pesanan:</p>
<span>{item.product?.title}</span> {orderItems.map((item) => (
<span className="font-bold">{formatIDR(item.unit_price)}</span> <div key={item.id} className="flex justify-between py-1">
<span>{item.product?.title}</span>
<span className="font-bold">{formatIDR(item.unit_price)}</span>
</div>
))}
<div className="flex justify-between pt-2 border-t border-border mt-2">
<span className="font-bold">Total</span>
<span className="font-bold">{formatIDR(selectedOrder.total_amount)}</span>
</div> </div>
))}
<div className="flex justify-between pt-2 border-t border-border mt-2">
<span className="font-bold">Total</span>
<span className="font-bold">{formatIDR(selectedOrder.total_amount)}</span>
</div> </div>
</div> )}
{/* Order Total for consulting-only orders */}
{orderItems.length === 0 && consultingSlots.length > 0 && (
<div className="border-t border-border pt-4">
<div className="flex justify-between">
<span className="font-bold">Total</span>
<span className="font-bold">{formatIDR(selectedOrder.total_amount)}</span>
</div>
</div>
)}
{/* Consulting Slots */} {/* Consulting Slots */}
{consultingSlots.length > 0 && ( {consultingSlots.length > 0 && (
@@ -499,12 +518,17 @@ export default function AdminOrders() {
<div className="space-y-2"> <div className="space-y-2">
{consultingSlots.map((slot) => ( {consultingSlots.map((slot) => (
<div key={slot.id} className="border-2 border-border rounded-lg p-3 bg-background"> <div key={slot.id} className="border-2 border-border rounded-lg p-3 bg-background">
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3 mb-2">
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center gap-2 mb-1 flex-wrap"> <div className="flex items-center gap-2 mb-1 flex-wrap">
<Badge variant={slot.status === "confirmed" ? "default" : "secondary"} className="text-xs"> <Badge variant={slot.status === "confirmed" ? "default" : "secondary"} className="text-xs">
{slot.status === "confirmed" ? "Terkonfirmasi" : slot.status} {slot.status === "confirmed" ? "Terkonfirmasi" : slot.status}
</Badge> </Badge>
{slot.topic_category && (
<Badge variant="outline" className="text-xs">
{slot.topic_category}
</Badge>
)}
{/* Meet Link Status */} {/* Meet Link Status */}
{slot.meet_link ? ( {slot.meet_link ? (
<Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700"> <Badge variant="outline" className="text-xs gap-1 border-green-500 text-green-700">
@@ -529,6 +553,11 @@ export default function AdminOrders() {
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
{slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB {slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB
</p> </p>
{slot.notes && (
<p className="text-xs text-muted-foreground mt-1 italic">
Catatan: {slot.notes}
</p>
)}
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
{slot.meet_link && ( {slot.meet_link && (

161
supabase/functions/create-google-meet-event/index.ts
View File

@@ -50,15 +50,16 @@ async function getGoogleAccessToken(oauthConfig: GoogleOAuthConfig): Promise<{ a
body: new URLSearchParams(tokenRequest), body: new URLSearchParams(tokenRequest),
}); });
const responseText = await response.text();
console.log("Token response status:", response.status); console.log("Token response status:", response.status);
console.log("Token response body:", responseText);
if (!response.ok) { if (!response.ok) {
throw new Error(`Token exchange failed: ${responseText}`); const errorText = await response.text();
console.error("Token response error:", errorText);
throw new Error(`Token exchange failed: ${errorText}`);
} }
const data = await response.json(); const data = await response.json();
console.log("Token response data:", JSON.stringify(data, null, 2));
if (!data.access_token) { if (!data.access_token) {
throw new Error("No access token in response"); throw new Error("No access token in response");
@@ -80,6 +81,12 @@ serve(async (req: Request): Promise<Response> => {
return new Response(null, { headers: corsHeaders }); return new Response(null, { headers: corsHeaders });
} }
const logs: string[] = [];
const log = (msg: string) => {
console.log(msg);
logs.push(msg);
};
try { try {
const supabaseUrl = Deno.env.get("SUPABASE_URL")!; const supabaseUrl = Deno.env.get("SUPABASE_URL")!;
const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!; const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
@@ -96,46 +103,60 @@ serve(async (req: Request): Promise<Response> => {
}; };
try { try {
log("Starting to read request body...");
debugInfo.bodyReadAttempt = "Starting req.text()"; debugInfo.bodyReadAttempt = "Starting req.text()";
const bodyText = await req.text(); const bodyText = await req.text();
debugInfo.bodyLength = bodyText.length; debugInfo.bodyLength = bodyText.length;
debugInfo.bodyPreview = bodyText.substring(0, 200); debugInfo.bodyPreview = bodyText.substring(0, 200);
console.log("Raw body text:", bodyText.substring(0, 100) + "..."); log(`Raw body text: ${bodyText.substring(0, 100)}...`);
body = JSON.parse(bodyText); body = JSON.parse(bodyText);
debugInfo.parsedBody = body; debugInfo.parsedBody = body;
log(`Parsed body: ${JSON.stringify(body)}`);
} catch (bodyError) { } catch (bodyError) {
debugInfo.readError = (bodyError as Error).message; debugInfo.readError = (bodyError as Error).message;
console.error("Error reading body:", bodyError); log(`Error reading body: ${(bodyError as Error).message}`);
console.error("Debug info:", JSON.stringify(debugInfo, null, 2)); log(`Debug info: ${JSON.stringify(debugInfo, null, 2)}`);
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Invalid request body: " + (bodyError as Error).message, message: "Invalid request body: " + (bodyError as Error).message,
debug: debugInfo debug: debugInfo,
logs: logs
}), }),
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
} }
console.log("Creating Google Meet event for slot:", body.slot_id); log(`Creating Google Meet event for slot: ${body.slot_id}`);
// Get platform settings // Get platform settings
log("Fetching platform settings...");
const { data: settings, error: settingsError } = await supabase const { data: settings, error: settingsError } = await supabase
.from("platform_settings") .from("platform_settings")
.select("integration_google_calendar_id, google_oauth_config") .select("integration_google_calendar_id, google_oauth_config")
.single(); .single();
if (settingsError) { if (settingsError) {
console.error("Error fetching settings:", settingsError); log(`Error fetching settings: ${JSON.stringify(settingsError)}`);
throw settingsError;
}
const calendarId = settings?.integration_google_calendar_id;
if (!calendarId) {
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Google Calendar ID belum dikonfigurasi di Pengaturan > Integrasi" message: "Error fetching settings: " + settingsError.message,
logs: logs
}),
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
);
}
const calendarId = settings?.integration_google_calendar_id;
log(`Calendar ID: ${calendarId}`);
if (!calendarId) {
log("Calendar ID not configured");
return new Response(
JSON.stringify({
success: false,
message: "Google Calendar ID belum dikonfigurasi di Pengaturan > Integrasi",
logs: logs
}), }),
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
@@ -145,10 +166,12 @@ serve(async (req: Request): Promise<Response> => {
const oauthConfigJson = settings?.google_oauth_config; const oauthConfigJson = settings?.google_oauth_config;
if (!oauthConfigJson) { if (!oauthConfigJson) {
log("OAuth config not found");
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Google OAuth Config belum dikonfigurasi. Tambahkan di Pengaturan > Integrasi. Format: {\"client_id\":\"...\",\"client_secret\":\"...\",\"refresh_token\":\"...\"}" message: "Google OAuth Config belum dikonfigurasi. Tambahkan di Pengaturan > Integrasi. Format: {\"client_id\":\"...\",\"client_secret\":\"...\",\"refresh_token\":\"...\"}",
logs: logs
}), }),
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
@@ -158,12 +181,14 @@ serve(async (req: Request): Promise<Response> => {
let oauthConfig: GoogleOAuthConfig; let oauthConfig: GoogleOAuthConfig;
try { try {
oauthConfig = JSON.parse(oauthConfigJson); oauthConfig = JSON.parse(oauthConfigJson);
log("OAuth config parsed successfully");
} catch (error: any) { } catch (error: any) {
console.error("Failed to parse OAuth config JSON:", error); log(`Failed to parse OAuth config: ${error.message}`);
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Format Google OAuth Config tidak valid: " + error.message message: "Format Google OAuth Config tidak valid: " + error.message,
logs: logs
}), }),
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
@@ -175,11 +200,11 @@ serve(async (req: Request): Promise<Response> => {
if (oauthConfig.access_token && oauthConfig.expires_at && oauthConfig.expires_at > now + 60) { if (oauthConfig.access_token && oauthConfig.expires_at && oauthConfig.expires_at > now + 60) {
// Token is still valid (with 60 second buffer) // Token is still valid (with 60 second buffer)
console.log("Using cached access_token (expires at:", new Date(oauthConfig.expires_at * 1000).toISOString(), ")"); log(`Using cached access_token (expires at: ${new Date(oauthConfig.expires_at * 1000).toISOString()})`);
accessToken = oauthConfig.access_token; accessToken = oauthConfig.access_token;
} else { } else {
// Need to refresh the token // Need to refresh the token
console.log("Access token expired or missing, refreshing..."); log("Access token expired or missing, refreshing...");
const tokenData = await getGoogleAccessToken(oauthConfig); const tokenData = await getGoogleAccessToken(oauthConfig);
accessToken = tokenData.access_token; accessToken = tokenData.access_token;
@@ -197,15 +222,17 @@ serve(async (req: Request): Promise<Response> => {
.update({ google_oauth_config: JSON.stringify(updatedConfig) }) .update({ google_oauth_config: JSON.stringify(updatedConfig) })
.eq("id", settings.id); .eq("id", settings.id);
console.log("Updated cached access_token in database"); log("Updated cached access_token in database");
} }
console.log("Got access token"); log("Got access token");
// Build event data // Build event data
// Include +07:00 timezone offset to ensure times are treated as Asia/Jakarta time // Include +07:00 timezone offset to ensure times are treated as Asia/Jakarta time
const startDate = new Date(`${body.date}T${body.start_time}+07:00`); const startDate = new Date(`${body.date}T${body.start_time}+07:00`);
const endDate = new Date(`${body.date}T${body.end_time}+07:00`); const endDate = new Date(`${body.date}T${body.end_time}+07:00`);
log(`Event time: ${startDate.toISOString()} to ${endDate.toISOString()}`);
const eventData = { const eventData = {
summary: `Konsultasi: ${body.topic} - ${body.client_name}`, summary: `Konsultasi: ${body.topic} - ${body.client_name}`,
description: `Client: ${body.client_email}\n\nNotes: ${body.notes || '-'}\n\nSlot ID: ${body.slot_id}`, description: `Client: ${body.client_email}\n\nNotes: ${body.notes || '-'}\n\nSlot ID: ${body.slot_id}`,
@@ -227,12 +254,13 @@ serve(async (req: Request): Promise<Response> => {
}, },
}; };
console.log("Creating event in calendar:", calendarId); log(`Creating event in calendar: ${calendarId}`);
console.log("Event data:", JSON.stringify(eventData, null, 2)); log(`Event data: ${JSON.stringify(eventData, null, 2)}`);
// Create event via Google Calendar API with better error handling // Create event via Google Calendar API with better error handling
let calendarResponse: Response; let calendarResponse: Response;
try { try {
log("Calling Google Calendar API...");
calendarResponse = await fetch( calendarResponse = await fetch(
`https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events?conferenceDataVersion=1`, `https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events?conferenceDataVersion=1`,
{ {
@@ -246,50 +274,73 @@ serve(async (req: Request): Promise<Response> => {
} }
); );
} catch (fetchError: any) { } catch (fetchError: any) {
console.error("Network error calling Google Calendar API:", fetchError); log(`Network error calling Google Calendar API: ${fetchError.message}`);
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Network error calling Google Calendar API: " + fetchError.message message: "Network error calling Google Calendar API: " + fetchError.message,
logs: logs
}), }),
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
} }
console.log("Calendar API response status:", calendarResponse.status); log(`Calendar API response status: ${calendarResponse.status}`);
if (!calendarResponse.ok) { if (!calendarResponse.ok) {
const errorText = await calendarResponse.text(); const errorText = await calendarResponse.text();
console.error("Google Calendar API error:", errorText); log(`Google Calendar API error: ${errorText}`);
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Gagal membuat event di Google Calendar: " + errorText message: "Gagal membuat event di Google Calendar: " + errorText,
logs: logs
}), }),
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
} }
const eventDataResult = await calendarResponse.json(); const eventDataResult = await calendarResponse.json();
console.log("Event created:", eventDataResult.id); log(`Event created with ID: ${eventDataResult.id}`);
console.log("Full event response:", JSON.stringify(eventDataResult, null, 2)); log(`Full event response: ${JSON.stringify(eventDataResult, null, 2)}`);
// Check if conference data was created // Check if conference data was created
if (eventDataResult.conferenceData && eventDataResult.conferenceData.entryPoints) { if (eventDataResult.conferenceData && eventDataResult.conferenceData.entryPoints) {
const meetLink = eventDataResult.conferenceData.entryPoints.find((ep: any) => ep.entryPointType === "video")?.uri; const meetLink = eventDataResult.conferenceData.entryPoints.find((ep: any) => ep.entryPointType === "video")?.uri;
if (meetLink) { if (meetLink) {
await supabase log(`Meet link found: ${meetLink}`);
.from("consulting_slots")
.update({ meet_link: meetLink })
.eq("id", body.slot_id);
// If this is part of a multi-slot order, update all slots with the same order_id
// First, check if this slot has an order_id
const { data: slotData } = await supabase
.from("consulting_slots")
.select("order_id")
.eq("id", body.slot_id)
.single();
if (slotData?.order_id) {
log(`Updating all slots in order ${slotData.order_id} with meet_link`);
await supabase
.from("consulting_slots")
.update({ meet_link: meetLink })
.eq("order_id", slotData.order_id);
} else {
log(`No order_id found, updating only slot ${body.slot_id}`);
await supabase
.from("consulting_slots")
.update({ meet_link: meetLink })
.eq("id", body.slot_id);
}
log("Successfully completed");
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: true, success: true,
meet_link: meetLink, meet_link: meetLink,
event_id: eventDataResult.id, event_id: eventDataResult.id,
html_link: eventDataResult.htmlLink, html_link: eventDataResult.htmlLink,
logs: logs
}), }),
{ headers: { ...corsHeaders, "Content-Type": "application/json" } } { headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
@@ -298,36 +349,60 @@ serve(async (req: Request): Promise<Response> => {
// Fallback to hangoutLink for backwards compatibility // Fallback to hangoutLink for backwards compatibility
if (eventDataResult.hangoutLink) { if (eventDataResult.hangoutLink) {
await supabase log(`Using hangoutLink: ${eventDataResult.hangoutLink}`);
.from("consulting_slots")
.update({ meet_link: eventDataResult.hangoutLink })
.eq("id", body.slot_id);
// If this is part of a multi-slot order, update all slots with the same order_id
const { data: slotData } = await supabase
.from("consulting_slots")
.select("order_id")
.eq("id", body.slot_id)
.single();
if (slotData?.order_id) {
log(`Updating all slots in order ${slotData.order_id} with meet_link`);
await supabase
.from("consulting_slots")
.update({ meet_link: eventDataResult.hangoutLink })
.eq("order_id", slotData.order_id);
} else {
log(`No order_id found, updating only slot ${body.slot_id}`);
await supabase
.from("consulting_slots")
.update({ meet_link: eventDataResult.hangoutLink })
.eq("id", body.slot_id);
}
log("Successfully completed");
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: true, success: true,
meet_link: eventDataResult.hangoutLink, meet_link: eventDataResult.hangoutLink,
event_id: eventDataResult.id, event_id: eventDataResult.id,
html_link: eventDataResult.htmlLink, html_link: eventDataResult.htmlLink,
logs: logs
}), }),
{ headers: { ...corsHeaders, "Content-Type": "application/json" } } { headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
} }
log("Event created but no meet link found");
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: "Event berhasil dibuat tapi tidak ada meet link" message: "Event berhasil dibuat tapi tidak ada meet link",
logs: logs
}), }),
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );
} catch (error: any) { } catch (error: any) {
console.error("Error creating Google Meet event:", error); log(`Error creating Google Meet event: ${error.message}`);
log(`Stack: ${error.stack}`);
return new Response( return new Response(
JSON.stringify({ JSON.stringify({
success: false, success: false,
message: error.message || "Unknown error occurred" message: error.message || "Unknown error occurred",
logs: logs
}), }),
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } } { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
); );