Add availability checking and calendar sync to admin session editing: **New Features:** - Admin can now select time slots using visual picker with availability checking - Time slot picker respects confirmed sessions and excludes current session from conflict check - Calendar events are automatically updated when session time changes - consulting_time_slots table is updated when time changes (old slots deleted, new slots created) **New Component:** - src/components/admin/TimeSlotPickerModal.tsx - Reusable modal for time slot selection - Shows visual grid of available time slots - Range selection for multi-slot sessions - Availability checking against consulting_sessions - Supports editing (excludes current session from conflicts) **Enhanced AdminConsulting.tsx:** - Replaced simple time inputs with TimeSlotPickerModal - Added state: timeSlotPickerOpen, editTotalBlocks, editTotalDuration - Added handleTimeSlotSelect callback - Enhanced saveMeetLink to: - Update consulting_time_slots when time changes - Call update-calendar-event edge function - Update calendar event time via Google Calendar API - Button shows selected time with duration and blocks count **New Edge Function:** - supabase/functions/update-calendar-event/index.ts - Updates existing Google Calendar events when session time changes - Uses PATCH method to update event (preserves event_id and history) - Handles OAuth token refresh with caching - Only updates start/end time (keeps title, description, meet link) **Flow:** 1. Admin clicks "Edit" on session → Opens dialog 2. Admin clicks time button → Opens TimeSlotPickerModal 3. Admin selects new time → Only shows available slots 4. On save: - consulting_sessions updated with new time - Old consulting_time_slots deleted - New consulting_time_slots created - Google Calendar event updated (same event_id) - Meet link preserved **Benefits:** - ✅ Prevents double-booking with availability checking - ✅ Visual time slot selection (same UX as booking page) - ✅ Calendar events stay in sync (no orphaned events) - ✅ Time slots table properly maintained - ✅ Meet link and event_id preserved during time changes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
279 lines
8.4 KiB
TypeScript
279 lines
8.4 KiB
TypeScript
import { serve } from "https://deno.land/std@0.190.0/http/server.ts";
|
|
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
|
|
|
|
const corsHeaders = {
|
|
"Access-Control-Allow-Origin": "*",
|
|
"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
|
|
};
|
|
|
|
interface GoogleOAuthConfig {
|
|
client_id: string;
|
|
client_secret: string;
|
|
refresh_token: string;
|
|
access_token?: string;
|
|
expires_at?: number;
|
|
}
|
|
|
|
interface UpdateEventRequest {
|
|
session_id: string;
|
|
date: string;
|
|
start_time: string;
|
|
end_time: string;
|
|
}
|
|
|
|
// Function to get access token from refresh token (OAuth2)
|
|
async function getGoogleAccessToken(oauthConfig: GoogleOAuthConfig): Promise<{ access_token: string; expires_in: number }> {
|
|
try {
|
|
console.log("Attempting to exchange refresh token for access token...");
|
|
|
|
const tokenRequest = {
|
|
client_id: oauthConfig.client_id,
|
|
client_secret: oauthConfig.client_secret,
|
|
refresh_token: oauthConfig.refresh_token,
|
|
grant_type: "refresh_token",
|
|
};
|
|
|
|
const response = await fetch("https://oauth2.googleapis.com/token", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
body: new URLSearchParams(tokenRequest),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
console.error("Token response error:", errorText);
|
|
throw new Error(`Token exchange failed: ${errorText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data.access_token) {
|
|
throw new Error("No access token in response");
|
|
}
|
|
|
|
console.log("Successfully obtained access token");
|
|
return {
|
|
access_token: data.access_token,
|
|
expires_in: data.expires_in || 3600
|
|
};
|
|
} catch (error: any) {
|
|
console.error("Error getting Google access token:", error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
serve(async (req: Request): Promise<Response> => {
|
|
if (req.method === "OPTIONS") {
|
|
return new Response(null, { headers: corsHeaders });
|
|
}
|
|
|
|
const logs: string[] = [];
|
|
const log = (msg: string) => {
|
|
console.log(msg);
|
|
logs.push(msg);
|
|
};
|
|
|
|
try {
|
|
const supabaseUrl = Deno.env.get("SUPABASE_URL")!;
|
|
const supabaseServiceKey = Deno.env.get("SUPABASE_SERVICE_ROLE_KEY")!;
|
|
const supabase = createClient(supabaseUrl, supabaseServiceKey);
|
|
|
|
const body: UpdateEventRequest = await req.json();
|
|
const { session_id, date, start_time, end_time } = body;
|
|
|
|
log(`Updating calendar event for session: ${session_id}`);
|
|
log(`New time: ${date} ${start_time} - ${end_time}`);
|
|
|
|
// Get session details including calendar_event_id
|
|
const { data: session, error: sessionError } = await supabase
|
|
.from("consulting_sessions")
|
|
.select("id, calendar_event_id, topic_category, profiles(name, email), notes, meet_link")
|
|
.eq("id", session_id)
|
|
.single();
|
|
|
|
if (sessionError || !session) {
|
|
log(`Session not found: ${sessionError?.message}`);
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Session not found",
|
|
logs: logs
|
|
}),
|
|
{ status: 404, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
if (!session.calendar_event_id) {
|
|
log("No calendar event ID found for this session");
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "No calendar event linked to this session",
|
|
logs: logs
|
|
}),
|
|
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
// Get platform settings
|
|
log("Fetching platform settings...");
|
|
const { data: settings, error: settingsError } = await supabase
|
|
.from("platform_settings")
|
|
.select("integration_google_calendar_id, google_oauth_config")
|
|
.single();
|
|
|
|
if (settingsError || !settings) {
|
|
log(`Error fetching settings: ${settingsError?.message}`);
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Error fetching settings",
|
|
logs: logs
|
|
}),
|
|
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
const calendarId = settings.integration_google_calendar_id;
|
|
if (!calendarId) {
|
|
log("Calendar ID not configured");
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Google Calendar ID not configured",
|
|
logs: logs
|
|
}),
|
|
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
// Get OAuth config
|
|
const oauthConfigJson = settings.google_oauth_config;
|
|
if (!oauthConfigJson) {
|
|
log("OAuth config not found");
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Google OAuth Config not configured",
|
|
logs: logs
|
|
}),
|
|
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
let oauthConfig: GoogleOAuthConfig;
|
|
try {
|
|
oauthConfig = JSON.parse(oauthConfigJson);
|
|
} catch (error: any) {
|
|
log(`Failed to parse OAuth config: ${error.message}`);
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Invalid OAuth config format",
|
|
logs: logs
|
|
}),
|
|
{ status: 400, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
// Get access token
|
|
let accessToken: string;
|
|
const now = Math.floor(Date.now() / 1000);
|
|
|
|
if (oauthConfig.access_token && oauthConfig.expires_at && oauthConfig.expires_at > now + 60) {
|
|
log(`Using cached access_token`);
|
|
accessToken = oauthConfig.access_token;
|
|
} else {
|
|
log("Refreshing access token...");
|
|
const tokenData = await getGoogleAccessToken(oauthConfig);
|
|
accessToken = tokenData.access_token;
|
|
|
|
const newExpiresAt = now + tokenData.expires_in;
|
|
const updatedConfig = {
|
|
...oauthConfig,
|
|
access_token: accessToken,
|
|
expires_at: newExpiresAt
|
|
};
|
|
|
|
await supabase
|
|
.from("platform_settings")
|
|
.update({ google_oauth_config: JSON.stringify(updatedConfig) })
|
|
.eq("id", settings.id);
|
|
|
|
log("Updated cached access_token in database");
|
|
}
|
|
|
|
// Build event data for update
|
|
const startDate = new Date(`${date}T${start_time}+07:00`);
|
|
const endDate = new Date(`${date}T${end_time}+07:00`);
|
|
|
|
log(`Event time: ${startDate.toISOString()} to ${endDate.toISOString()}`);
|
|
|
|
const eventData = {
|
|
start: {
|
|
dateTime: startDate.toISOString(),
|
|
timeZone: "Asia/Jakarta",
|
|
},
|
|
end: {
|
|
dateTime: endDate.toISOString(),
|
|
timeZone: "Asia/Jakarta",
|
|
},
|
|
};
|
|
|
|
log(`Updating event ${session.calendar_event_id} in calendar ${calendarId}`);
|
|
|
|
// Update event via Google Calendar API
|
|
const calendarResponse = await fetch(
|
|
`https://www.googleapis.com/calendar/v3/calendars/${encodeURIComponent(calendarId)}/events/${encodeURIComponent(session.calendar_event_id)}`,
|
|
{
|
|
method: "PATCH",
|
|
headers: {
|
|
"Authorization": `Bearer ${accessToken}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(eventData),
|
|
}
|
|
);
|
|
|
|
log(`Calendar API response status: ${calendarResponse.status}`);
|
|
|
|
if (!calendarResponse.ok) {
|
|
const errorText = await calendarResponse.text();
|
|
log(`Google Calendar API error: ${errorText}`);
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: "Failed to update event in Google Calendar: " + errorText,
|
|
logs: logs
|
|
}),
|
|
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
|
|
const eventDataResult = await calendarResponse.json();
|
|
log(`Event updated successfully: ${eventDataResult.id}`);
|
|
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: true,
|
|
event_id: eventDataResult.id,
|
|
html_link: eventDataResult.htmlLink,
|
|
logs: logs
|
|
}),
|
|
{ headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
|
|
} catch (error: any) {
|
|
log(`Error updating calendar event: ${error.message}`);
|
|
log(`Stack: ${error.stack}`);
|
|
return new Response(
|
|
JSON.stringify({
|
|
success: false,
|
|
message: error.message || "Internal server error",
|
|
logs: logs
|
|
}),
|
|
{ status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } }
|
|
);
|
|
}
|
|
});
|