,
, etc.
+ .replace(/<[^>]*>/g, " ")
+ // Convert HTML entities
+ .replace(/&/g, "&")
+ .replace(/</g, "<")
+ .replace(/>/g, ">")
+ .replace(/"/g, '"')
+ .replace(/'/g, "'")
+ .replace(/ /g, " ")
+ // Convert markdown links [text](url) to just text
+ .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+ // Remove bold/italic markers **text** or *text*
+ .replace(/\*\*([^*]+)\*\*/g, "$1")
+ .replace(/\*([^*]+)\*/g, "$1")
+ // Remove inline code `text`
+ .replace(/`([^`]+)`/g, "$1")
+ // Remove strikethrough ~~text~~
+ .replace(/~~([^~]+)~~/g, "$1")
+ // Remove heading markers # ## ###
+ .replace(/^#{1,6}\s+/gm, "")
+ // Remove blockquote markers >
+ .replace(/^>\s+/gm, "")
+ // Remove list markers - * +
+ .replace(/^[\s]*[-*+]\s+/gm, "")
+ // Remove numbered list markers 1. 2. etc
+ .replace(/^[\s]*\d+\.\s+/gm, "")
+ // Normalize multiple whitespace/newlines to single space
+ .replace(/\s+/g, " ")
+ // Trim whitespace
+ .trim()
+ );
+ };
+
+ const handleEventTypePress = (eventType: EventType) => {
+ handleEdit(eventType);
+ };
+
+ const handleEventTypeLongPress = (eventType: EventType) => {
+ if (Platform.OS === "web") {
+ // Show custom modal for web platform
+ setSelectedEventType(eventType);
+ setShowActionModal(true);
+ return;
+ }
+
+ if (Platform.OS !== "ios") {
+ // Fallback for non-iOS platforms (Android)
+ Alert.alert(eventType.title, eventType.description || "", [
+ { text: "Cancel", style: "cancel" },
+ { text: "Edit", onPress: () => handleEdit(eventType) },
+ { text: "Duplicate", onPress: () => handleDuplicate(eventType) },
+ { text: "Delete", style: "destructive", onPress: () => handleDelete(eventType) },
+ ]);
+ return;
+ }
+
+ ActionSheetIOS.showActionSheetWithOptions(
+ {
+ options: ["Cancel", "Edit", "Duplicate", "Delete"],
+ destructiveButtonIndex: 3, // Delete button
+ cancelButtonIndex: 0,
+ title: eventType.title,
+ message: eventType.description ? normalizeMarkdown(eventType.description) : undefined,
+ },
+ (buttonIndex) => {
+ switch (buttonIndex) {
+ case 1: // Edit
+ handleEdit(eventType);
+ break;
+ case 2: // Duplicate
+ handleDuplicate(eventType);
+ break;
+ case 3: // Delete
+ handleDelete(eventType);
+ break;
+ default:
+ // Cancel - do nothing
+ break;
+ }
+ }
+ );
+ };
+
+ const handleCopyLink = async (eventType: EventType) => {
+ try {
+ const link = await CalComAPIService.buildEventTypeLink(eventType.slug);
+ Clipboard.setString(link);
+
+ if (Platform.OS === "web") {
+ showToastMessage("Link copied!", eventType.id);
+ } else {
+ Alert.alert("Link Copied", "Event type link copied!");
+ }
+ } catch (error) {
+ if (Platform.OS === "web") {
+ showToastMessage("Failed to copy link");
+ } else {
+ Alert.alert("Error", "Failed to copy link. Please try again.");
+ }
+ }
+ };
+
+ const handleShare = async (eventType: EventType) => {
+ try {
+ const link = await CalComAPIService.buildEventTypeLink(eventType.slug);
+ await Share.share({
+ message: `Book a meeting: ${eventType.title}`,
+ url: link,
+ });
+ } catch (error) {
+ Alert.alert("Error", "Failed to share link. Please try again.");
+ }
+ };
+
+ const handleEdit = (eventType: EventType) => {
+ const duration = getDuration(eventType);
+ router.push({
+ pathname: "/event-type-detail",
+ params: {
+ id: eventType.id.toString(),
+ title: eventType.title,
+ description: eventType.description || "",
+ duration: duration.toString(),
+ price: eventType.price?.toString() || "",
+ currency: eventType.currency || "",
+ slug: eventType.slug || "",
+ },
+ });
+ };
+
+ const handleDelete = (eventType: EventType) => {
+ setEventTypeToDelete(eventType);
+ setShowDeleteModal(true);
+ };
+
+ const confirmDelete = async () => {
+ if (!eventTypeToDelete) return;
+
+ setIsDeleting(true);
+ try {
+ await CalComAPIService.deleteEventType(eventTypeToDelete.id);
+
+ // Only update state if component is still mounted
+ if (isMountedRef.current) {
+ // Remove the deleted event type from local state
+ const updatedEventTypes = eventTypes.filter((et) => et.id !== eventTypeToDelete.id);
+ setEventTypes(updatedEventTypes);
+ setFilteredEventTypes(updatedEventTypes);
+
+ // Close modal and reset state
+ setShowDeleteModal(false);
+ setEventTypeToDelete(null);
+
+ if (Platform.OS === "web") {
+ showToastMessage("Event type deleted successfully");
+ } else {
+ Alert.alert("Success", "Event type deleted successfully");
+ }
+ }
+ } catch (error) {
+ console.error("Failed to delete event type:", error);
+ if (isMountedRef.current) {
+ if (Platform.OS === "web") {
+ showToastMessage("Failed to delete event type");
+ } else {
+ Alert.alert("Error", "Failed to delete event type. Please try again.");
+ }
+ }
+ } finally {
+ setIsDeleting(false);
+ }
+ };
+
+ const handleDuplicate = async (eventType: EventType) => {
+ try {
+ // Generate a new title and slug for the duplicate
+ const newTitle = `${eventType.title} (copy)`;
+ let newSlug = `${eventType.slug}-copy`;
+
+ // Check if slug already exists and append a number if needed
+ let counter = 1;
+ while (eventTypes.some((et) => et.slug === newSlug)) {
+ newSlug = `${eventType.slug}-copy-${counter}`;
+ counter++;
+ }
+
+ const duration = getDuration(eventType);
+
+ // Create the duplicate event type
+ const duplicatedEventType = await CalComAPIService.createEventType({
+ title: newTitle,
+ slug: newSlug,
+ lengthInMinutes: duration,
+ description: eventType.description || undefined,
+ });
+
+ // Refresh the list
+ await fetchEventTypes();
+
+ if (Platform.OS === "web") {
+ showToastMessage("Event type duplicated successfully");
+ } else {
+ Alert.alert("Success", "Event type duplicated successfully");
+ }
+
+ // Navigate to edit the newly created duplicate
+ router.push({
+ pathname: "/event-type-detail",
+ params: {
+ id: duplicatedEventType.id.toString(),
+ title: duplicatedEventType.title,
+ description: duplicatedEventType.description || "",
+ duration: (
+ duplicatedEventType.lengthInMinutes ||
+ duplicatedEventType.length ||
+ duration
+ ).toString(),
+ slug: duplicatedEventType.slug || "",
+ },
+ });
+ } catch (error) {
+ console.error("Failed to duplicate event type:", error);
+ if (Platform.OS === "web") {
+ showToastMessage("Failed to duplicate event type");
+ } else {
+ Alert.alert("Error", "Failed to duplicate event type. Please try again.");
+ }
+ }
+ };
+
+ const handlePreview = async (eventType: EventType) => {
+ try {
+ const link = await CalComAPIService.buildEventTypeLink(eventType.slug);
+ // Open in browser
+ if (Platform.OS === "web") {
+ window.open(link, "_blank");
+ } else {
+ // For mobile, use Linking
+ await Linking.openURL(link);
+ }
+ } catch (error) {
+ console.error("Failed to open preview:", error);
+ if (Platform.OS === "web") {
+ showToastMessage("Failed to open preview");
+ } else {
+ Alert.alert("Error", "Failed to open preview. Please try again.");
+ }
+ }
+ };
+
+ const handleCreateNew = () => {
+ handleOpenCreateModal();
+ };
+
+ const handleOpenCreateModal = () => {
+ setShowCreateModal(true);
+ };
+
+ const handleCloseCreateModal = () => {
+ setShowCreateModal(false);
+ setNewEventTitle("");
+ setNewEventSlug("");
+ setNewEventDescription("");
+ setNewEventDuration("15");
+ setIsSlugManuallyEdited(false);
+ };
+
+ const handleCreateEventType = async () => {
+ if (!newEventTitle.trim()) {
+ Alert.alert("Error", "Please enter a title for your event type");
+ return;
+ }
+
+ if (!newEventSlug.trim()) {
+ Alert.alert("Error", "Please enter a URL for your event type");
+ return;
+ }
+
+ const duration = parseInt(newEventDuration);
+ if (isNaN(duration) || duration <= 0) {
+ Alert.alert("Error", "Please enter a valid duration");
+ return;
+ }
+
+ setCreating(true);
+ try {
+ // Create the event type with the form data
+ const newEventType = await CalComAPIService.createEventType({
+ title: newEventTitle.trim(),
+ slug: newEventSlug.trim(),
+ lengthInMinutes: duration,
+ description: newEventDescription.trim() || undefined,
+ });
+
+ // Close modal and reset form
+ handleCloseCreateModal();
+
+ // Refresh the list
+ await fetchEventTypes();
+
+ // Navigate to edit the newly created event type
+ router.push({
+ pathname: "/event-type-detail",
+ params: {
+ id: newEventType.id.toString(),
+ title: newEventType.title,
+ description: newEventType.description || "",
+ duration: (newEventType.lengthInMinutes || newEventType.length || 15).toString(),
+ slug: newEventType.slug || "",
+ },
+ });
+ } catch (error) {
+ console.error("Failed to create event type:", error);
+ Alert.alert("Error", "Failed to create event type. Please try again.");
+ } finally {
+ setCreating(false);
+ }
+ };
+
+ const renderEventType = ({ item, index }: { item: EventType; index: number }) => {
+ const duration = getDuration(item);
+ const isLast = index === filteredEventTypes.length - 1;
+
+ return (
+ handleEventTypePress(item)}
+ onLongPress={() => handleEventTypeLongPress(item)}
+ style={{ paddingHorizontal: 16, paddingVertical: 16 }}
+ >
+
+
+
+ {item.title}
+
+ {item.description && (
+
+ {normalizeMarkdown(item.description)}
+
+ )}
+
+
+ {formatDuration(duration)}
+
+
+ {(item.price != null && item.price > 0) || item.requiresConfirmation ? (
+
+ {item.price != null && item.price > 0 && (
+
+ {item.currency || "$"}
+ {item.price}
+
+ )}
+ {item.requiresConfirmation && (
+
+ Requires Confirmation
+
+ )}
+
+ ) : null}
+
+
+
+ handlePreview(item)}
+ >
+
+
+
+ handleCopyLink(item)}
+ >
+ {copiedEventTypeId === item.id ? (
+
+
+ )}
+
+
+
+ handleEventTypeLongPress(item)}
+ >
+
+
+
+
+
+ );
+ };
+
+ if (loading) {
+ return (
+
+
+
+ Loading event types...
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+ Unable to load event types
+
+ {error}
+
+ Retry
+
+
+
+ );
+ }
+
+ if (eventTypes.length === 0) {
+ return (
+
+
+
+
+
+ No event types found
+
+ Create your first event type in Cal.com
+
+
+
+ );
+ }
+
+ if (filteredEventTypes.length === 0 && searchQuery.trim() !== "") {
+ return (
+
+
+
+
+
+ No results found
+
+ Try searching with different keywords
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ New
+
+
+
+
+ {filteredEventTypes.map((item, index) => (
+ {renderEventType({ item, index })}
+ ))}
+
+
+
+
+ {/* Create Event Type Modal */}
+
+
+ e.stopPropagation()}
+ style={{
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 20 },
+ shadowOpacity: 0.25,
+ shadowRadius: 25,
+ elevation: 24,
+ }}
+ >
+ {/* Header */}
+
+
+ Add a new event type
+
+
+ Set up event types to offer different types of meetings.
+
+
+
+ {/* Content */}
+
+ {/* Title */}
+
+ Title
+ {
+ setNewEventTitle(text);
+ // Auto-generate slug from title if user hasn't manually edited it
+ if (!isSlugManuallyEdited) {
+ setNewEventSlug(slugify(text, true));
+ }
+ }}
+ autoFocus
+ autoCapitalize="words"
+ returnKeyType="next"
+ />
+
+
+ {/* URL */}
+
+ URL
+
+ https://cal.com/{username}/
+ {
+ setIsSlugManuallyEdited(true);
+ setNewEventSlug(slugify(text, true));
+ }}
+ autoCapitalize="none"
+ autoCorrect={false}
+ returnKeyType="next"
+ />
+
+
+
+ {/* Description */}
+
+ Description
+
+
+ {/* Duration */}
+
+ Duration
+
+ minutes
+
+
+
+
+ {/* Footer */}
+
+
+
+ Close
+
+
+ Continue
+
+
+
+
+
+
+
+ {/* Action Modal for Web Platform */}
+ {
+ setShowActionModal(false);
+ setSelectedEventType(null);
+ }}
+ >
+ {
+ setShowActionModal(false);
+ setSelectedEventType(null);
+ }}
+ >
+ e.stopPropagation()}
+ >
+ {selectedEventType && (
+ <>
+
+
+ {selectedEventType.title}
+
+ {selectedEventType.description && (
+
+ {normalizeMarkdown(selectedEventType.description)}
+
+ )}
+
+
+
+ {
+ setShowActionModal(false);
+ const eventType = selectedEventType;
+ setSelectedEventType(null);
+ if (eventType) handleEdit(eventType);
+ }}
+ >
+ Edit
+
+
+ {
+ setShowActionModal(false);
+ const eventType = selectedEventType;
+ setSelectedEventType(null);
+ if (eventType) handleDuplicate(eventType);
+ }}
+ >
+ Duplicate
+
+
+ {/* Separator before delete button */}
+ {
+ setShowActionModal(false);
+ const eventType = selectedEventType;
+ setSelectedEventType(null);
+ if (eventType) handleDelete(eventType);
+ }}
+ >
+ Delete
+
+
+
+
+ {
+ setShowActionModal(false);
+ setSelectedEventType(null);
+ }}
+ >
+ Cancel
+
+
+
+ )}
+
+
+
+
+ {/* New Menu Modal for Web Platform */}
+ setShowNewModal(false)}
+ >
+ setShowNewModal(false)}
+ >
+ e.stopPropagation()}
+ >
+ {/* Header */}
+
+ New
+ Choose what to create
+
+
+ {/* Options List */}
+
+ {/* New Event Type */}
+ {
+ setShowNewModal(false);
+ // Small delay to ensure the "New" modal closes before opening create modal
+ setTimeout(() => {
+ handleOpenCreateModal();
+ }, 100);
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ New Event Type
+
+
+
+ {/* Cancel button */}
+
+ setShowNewModal(false)}
+ >
+ Cancel
+
+
+
+
+
+
+ {/* Delete Confirmation Modal */}
+ {
+ if (!isDeleting) {
+ setShowDeleteModal(false);
+ setEventTypeToDelete(null);
+ }
+ }}
+ >
+
+
+ {/* Header with icon and title */}
+
+
+ {/* Danger icon */}
+
+
+
+ {/* Title and description */}
+
+
+ Delete Event Type
+
+
+ {eventTypeToDelete && (
+ <>
+ This will permanently delete the "{eventTypeToDelete.title}" event type.
+ This action cannot be undone.
+
+ )}
+
+
+
+
+
+ {/* Footer with buttons */}
+
+
+ Delete
+
+
+ {
+ setShowDeleteModal(false);
+ setEventTypeToDelete(null);
+ }}
+ disabled={isDeleting}
+ >
+ Cancel
+
+
+
+
+
+
+ {/* Toast for Web Platform */}
+ {showToast && (
+
+
+ {toastMessage}
+
+
+ )}
+
+ );
+}
diff --git a/companion/app/(tabs)/more.tsx b/companion/app/(tabs)/more.tsx
new file mode 100644
index 0000000000..d33ca5250b
--- /dev/null
+++ b/companion/app/(tabs)/more.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { View, Text, TouchableOpacity, ScrollView, Linking, Alert } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import { Header } from "../../components/Header";
+import { LogoutButton } from "../../components/LogoutButton";
+
+interface MoreMenuItem {
+ name: string;
+ icon: keyof typeof Ionicons.glyphMap;
+ isExternal?: boolean;
+ href?: string;
+ onPress?: () => void;
+}
+
+export default function More() {
+ const router = useRouter();
+
+ const openExternalLink = async (url: string, fallbackMessage: string) => {
+ try {
+ const supported = await Linking.canOpenURL(url);
+ if (supported) {
+ await Linking.openURL(url);
+ } else {
+ Alert.alert("Error", `Cannot open ${fallbackMessage} on your device.`);
+ }
+ } catch (error) {
+ console.error(`Failed to open ${url}:`, error);
+ Alert.alert("Error", `Failed to open ${fallbackMessage}. Please try again.`);
+ }
+ };
+
+ const menuItems: MoreMenuItem[] = [
+ {
+ name: "Profile",
+ icon: "person-outline",
+ isExternal: true,
+ onPress: () =>
+ openExternalLink("https://app.cal.com/settings/my-account/profile", "Profile page"),
+ },
+ {
+ name: "Apps",
+ icon: "grid-outline",
+ isExternal: true,
+ onPress: () => openExternalLink("https://app.cal.com/apps", "Apps page"),
+ },
+ {
+ name: "Routing",
+ icon: "git-branch-outline",
+ isExternal: true,
+ onPress: () => openExternalLink("https://app.cal.com/routing", "Routing page"),
+ },
+ {
+ name: "Workflows",
+ icon: "flash-outline",
+ isExternal: true,
+ onPress: () => openExternalLink("https://app.cal.com/workflows", "Workflows page"),
+ },
+ {
+ name: "Insights",
+ icon: "bar-chart-outline",
+ isExternal: true,
+ onPress: () => openExternalLink("https://app.cal.com/insights", "Insights page"),
+ },
+ {
+ name: "Support",
+ icon: "help-circle-outline",
+ isExternal: true,
+ onPress: () => openExternalLink("https://go.cal.com/support", "Support"),
+ },
+ ];
+
+ return (
+
+
+
+
+ {menuItems.map((item, index) => (
+ router.push(item.href!) : item.onPress}
+ className={`flex-row items-center justify-between bg-white px-5 py-5 active:bg-[#F8F9FA] ${
+ index < menuItems.length - 1 ? "border-b border-[#E5E5EA]" : ""
+ }`}
+ >
+
+ {item.name}
+
+ {item.isExternal ? (
+
+ ))}
+
+
+ {/* Authentication Info and Logout */}
+
+
+
+
+ We view the companion as an extension of the web application. If you are performing any
+ complicated actions, please refer back to the web application.
+
+
+
+ );
+}
diff --git a/companion/app/_layout.tsx b/companion/app/_layout.tsx
new file mode 100644
index 0000000000..da89a2764f
--- /dev/null
+++ b/companion/app/_layout.tsx
@@ -0,0 +1,48 @@
+import { Stack } from "expo-router";
+import { Platform, View, StatusBar } from "react-native";
+import { AuthProvider, useAuth } from "../contexts/AuthContext";
+import LoginScreen from "../components/LoginScreen";
+import "../global.css";
+
+function RootLayoutContent() {
+ const { isAuthenticated } = useAuth();
+
+ const content = isAuthenticated ? (
+
+
+ ) : (
+
+
+ );
+}
+
+export default function RootLayout() {
+ return (
+
+
+ );
+}
diff --git a/companion/app/availability-detail.tsx b/companion/app/availability-detail.tsx
new file mode 100644
index 0000000000..4e0f33ab8e
--- /dev/null
+++ b/companion/app/availability-detail.tsx
@@ -0,0 +1,994 @@
+import { Ionicons } from "@expo/vector-icons";
+import { GlassView } from "expo-glass-effect";
+import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import React, { useState, useEffect } from "react";
+import {
+ View,
+ Text,
+ ScrollView,
+ TouchableOpacity,
+ TextInput,
+ Alert,
+ ActivityIndicator,
+ Switch,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { CalComAPIService, Schedule } from "../services/calcom";
+import { ScheduleAvailability } from "../services/types";
+import { FullScreenModal } from "../components/FullScreenModal";
+
+const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+const DAY_ABBREVIATIONS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+// Convert 24-hour time to 12-hour format with AM/PM
+const formatTime12Hour = (time24: string): string => {
+ const [hours, minutes] = time24.split(":");
+ const hour = parseInt(hours, 10);
+ const min = minutes || "00";
+ const period = hour >= 12 ? "PM" : "AM";
+ const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+ // Pad single-digit hours with leading zero for consistent width
+ const hour12Padded = hour12.toString().padStart(2, "0");
+ return `${hour12Padded}:${min} ${period}`;
+};
+
+// Format availability for display
+const formatAvailabilityDisplay = (
+ availability: Record
+): string[] => {
+ // Group slots by time range
+ const timeRangeMap: Record = {};
+
+ Object.keys(availability).forEach((dayIndexStr) => {
+ const dayIndex = Number(dayIndexStr);
+ const slots = availability[dayIndex];
+ if (slots && slots.length > 0) {
+ slots.forEach((slot) => {
+ const timeKey = `${slot.startTime}-${slot.endTime}`;
+ if (!timeRangeMap[timeKey]) {
+ timeRangeMap[timeKey] = [];
+ }
+ timeRangeMap[timeKey].push(dayIndex);
+ });
+ }
+ });
+
+ // Format each time range group
+ const formatted: string[] = [];
+ Object.keys(timeRangeMap).forEach((timeKey) => {
+ const days = timeRangeMap[timeKey].sort((a, b) => a - b);
+ const [startTime, endTime] = timeKey.split("-");
+ const dayNames = days.map((day) => DAY_ABBREVIATIONS[day]).join(", ");
+ const timeRange = `${formatTime12Hour(startTime)} - ${formatTime12Hour(endTime)}`;
+ formatted.push(`${dayNames}, ${timeRange}`);
+ });
+
+ return formatted;
+};
+
+// Generate time options (15-minute intervals)
+const generateTimeOptions = () => {
+ const options: string[] = [];
+ for (let hour = 0; hour < 24; hour++) {
+ for (let minute = 0; minute < 60; minute += 15) {
+ const h = hour.toString().padStart(2, "0");
+ const m = minute.toString().padStart(2, "0");
+ options.push(`${h}:${m}`);
+ }
+ }
+ return options;
+};
+
+const TIME_OPTIONS = generateTimeOptions();
+
+export default function AvailabilityDetail() {
+ const router = useRouter();
+ const { id } = useLocalSearchParams<{ id: string }>();
+ const insets = useSafeAreaInsets();
+
+ const [loading, setLoading] = useState(true);
+ const [saving, setSaving] = useState(false);
+ const [schedule, setSchedule] = useState(null);
+ const [scheduleName, setScheduleName] = useState("");
+ const [timeZone, setTimeZone] = useState("");
+ const [isDefault, setIsDefault] = useState(false);
+ const [availability, setAvailability] = useState>({});
+ const [showTimezoneModal, setShowTimezoneModal] = useState(false);
+ const [showTimePicker, setShowTimePicker] = useState<{
+ dayIndex: number;
+ slotIndex: number;
+ type: "start" | "end";
+ } | null>(null);
+ const [overrides, setOverrides] = useState<
+ Array<{
+ date: string; // Format: "2024-05-20"
+ startTime: string; // Format: "12:00" or "00:00" for unavailable
+ endTime: string; // Format: "14:00" or "00:00" for unavailable
+ }>
+ >([]);
+ const [showOverrideModal, setShowOverrideModal] = useState(false);
+ const [editingOverride, setEditingOverride] = useState(null);
+ const [overrideDate, setOverrideDate] = useState("");
+ const [overrideStartTime, setOverrideStartTime] = useState("09:00");
+ const [overrideEndTime, setOverrideEndTime] = useState("17:00");
+ const [isUnavailable, setIsUnavailable] = useState(false);
+ const [showOverrideTimePicker, setShowOverrideTimePicker] = useState<{
+ type: "start" | "end";
+ } | null>(null);
+
+ // Common timezones
+ const timezones = [
+ "America/New_York",
+ "America/Chicago",
+ "America/Denver",
+ "America/Los_Angeles",
+ "Europe/London",
+ "Europe/Paris",
+ "Europe/Berlin",
+ "Asia/Tokyo",
+ "Asia/Shanghai",
+ "Asia/Kolkata",
+ "Australia/Sydney",
+ "UTC",
+ ];
+
+ useEffect(() => {
+ if (id) {
+ fetchSchedule();
+ }
+ }, [id]);
+
+ const fetchSchedule = async () => {
+ try {
+ setLoading(true);
+ const scheduleData = await CalComAPIService.getScheduleById(Number(id));
+
+ if (scheduleData) {
+ setSchedule(scheduleData);
+ setScheduleName(scheduleData.name || "");
+ setTimeZone(scheduleData.timeZone || "UTC");
+ setIsDefault(scheduleData.isDefault || false);
+
+ // Convert availability array to day-indexed object
+ const availabilityMap: Record = {};
+
+ // Map day names to numbers
+ const dayNameToNumber: Record = {
+ Sunday: 0,
+ Monday: 1,
+ Tuesday: 2,
+ Wednesday: 3,
+ Thursday: 4,
+ Friday: 5,
+ Saturday: 6,
+ };
+
+ if (scheduleData.availability && Array.isArray(scheduleData.availability)) {
+ scheduleData.availability.forEach((slot) => {
+ // Handle both string day names and number day formats
+ let days: number[] = [];
+ if (Array.isArray(slot.days)) {
+ days = slot.days
+ .map((day) => {
+ // If it's a day name string (e.g., "Sunday", "Monday")
+ if (typeof day === "string" && dayNameToNumber[day] !== undefined) {
+ return dayNameToNumber[day];
+ }
+ // If it's a number string (e.g., "0", "1")
+ if (typeof day === "string") {
+ const parsed = parseInt(day, 10);
+ if (!isNaN(parsed) && parsed >= 0 && parsed <= 6) {
+ return parsed;
+ }
+ }
+ // If it's already a number
+ if (typeof day === "number" && day >= 0 && day <= 6) {
+ return day;
+ }
+ return null;
+ })
+ .filter((day): day is number => day !== null);
+ }
+
+ days.forEach((day) => {
+ if (!availabilityMap[day]) {
+ availabilityMap[day] = [];
+ }
+ availabilityMap[day].push({
+ days: [day.toString()],
+ startTime: slot.startTime || "09:00:00",
+ endTime: slot.endTime || "17:00:00",
+ });
+ });
+ });
+ }
+
+ setAvailability(availabilityMap);
+
+ // Load overrides if they exist
+ if (scheduleData.overrides && Array.isArray(scheduleData.overrides)) {
+ const formattedOverrides = scheduleData.overrides.map((override) => ({
+ date: override.date || "",
+ startTime: override.startTime || "00:00",
+ endTime: override.endTime || "00:00",
+ }));
+ setOverrides(formattedOverrides);
+ } else {
+ setOverrides([]);
+ }
+ }
+ } catch (error) {
+ console.error("Error fetching schedule:", error);
+ Alert.alert("Error", "Failed to load schedule. Please try again.");
+ router.back();
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const toggleDay = (dayIndex: number) => {
+ setAvailability((prev) => {
+ const newAvailability = { ...prev };
+ if (newAvailability[dayIndex] && newAvailability[dayIndex].length > 0) {
+ // Disable day - remove availability
+ delete newAvailability[dayIndex];
+ } else {
+ // Enable day - add default time slot (9 AM - 5 PM)
+ newAvailability[dayIndex] = [
+ {
+ days: [dayIndex.toString()],
+ startTime: "09:00:00",
+ endTime: "17:00:00",
+ },
+ ];
+ }
+ return newAvailability;
+ });
+ };
+
+ const addTimeSlot = (dayIndex: number) => {
+ setAvailability((prev) => {
+ const newAvailability = { ...prev };
+ if (!newAvailability[dayIndex]) {
+ newAvailability[dayIndex] = [];
+ }
+ newAvailability[dayIndex].push({
+ days: [dayIndex.toString()],
+ startTime: "09:00:00",
+ endTime: "17:00:00",
+ });
+ return newAvailability;
+ });
+ };
+
+ const removeTimeSlot = (dayIndex: number, slotIndex: number) => {
+ setAvailability((prev) => {
+ const newAvailability = { ...prev };
+ if (newAvailability[dayIndex]) {
+ newAvailability[dayIndex] = newAvailability[dayIndex].filter((_, i) => i !== slotIndex);
+ if (newAvailability[dayIndex].length === 0) {
+ delete newAvailability[dayIndex];
+ }
+ }
+ return newAvailability;
+ });
+ };
+
+ const updateTimeSlot = (
+ dayIndex: number,
+ slotIndex: number,
+ type: "start" | "end",
+ time: string
+ ) => {
+ setAvailability((prev) => {
+ const newAvailability = { ...prev };
+ if (newAvailability[dayIndex] && newAvailability[dayIndex][slotIndex]) {
+ const slot = { ...newAvailability[dayIndex][slotIndex] };
+ if (type === "start") {
+ slot.startTime = `${time}:00`;
+ } else {
+ slot.endTime = `${time}:00`;
+ }
+ newAvailability[dayIndex][slotIndex] = slot;
+ }
+ return newAvailability;
+ });
+ };
+
+ const handleSave = async () => {
+ try {
+ setSaving(true);
+
+ // Convert availability object back to array format with day names
+ const availabilityArray: Array<{
+ days: string[]; // Day names like "Monday", "Tuesday"
+ startTime: string; // Format: "09:00"
+ endTime: string; // Format: "10:00"
+ }> = [];
+
+ Object.keys(availability).forEach((dayIndexStr) => {
+ const dayIndex = Number(dayIndexStr);
+ const slots = availability[dayIndex];
+ if (slots && slots.length > 0) {
+ slots.forEach((slot) => {
+ // Convert day number to day name
+ const dayName = DAYS[dayIndex];
+
+ // Format time from "09:00:00" to "09:00" (remove seconds)
+ const formatTimeForAPI = (time: string): string => {
+ return time.substring(0, 5); // Take only HH:MM
+ };
+
+ availabilityArray.push({
+ days: [dayName],
+ startTime: formatTimeForAPI(slot.startTime),
+ endTime: formatTimeForAPI(slot.endTime),
+ });
+ });
+ }
+ });
+
+ // Format overrides for API (ensure times are in HH:MM format)
+ const formattedOverrides = overrides.map((override) => ({
+ date: override.date,
+ startTime: override.startTime.substring(0, 5), // Ensure HH:MM format
+ endTime: override.endTime.substring(0, 5), // Ensure HH:MM format
+ }));
+
+ await CalComAPIService.updateSchedule(Number(id), {
+ name: scheduleName,
+ timeZone,
+ availability: availabilityArray,
+ isDefault: isDefault,
+ overrides: formattedOverrides,
+ });
+
+ Alert.alert("Success", "Schedule updated successfully", [
+ { text: "OK", onPress: () => router.back() },
+ ]);
+ } catch (error) {
+ Alert.alert("Error", "Failed to update schedule. Please try again.");
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ const handleSetAsDefault = async () => {
+ try {
+ await CalComAPIService.updateSchedule(Number(id), {
+ isDefault: true,
+ });
+ setIsDefault(true);
+ Alert.alert("Success", "Schedule set as default successfully");
+ } catch (error) {
+ Alert.alert("Error", "Failed to set schedule as default. Please try again.");
+ }
+ };
+
+ const handleDelete = () => {
+ Alert.alert("Delete Schedule", `Are you sure you want to delete "${scheduleName}"?`, [
+ { text: "Cancel", style: "cancel" },
+ {
+ text: "Delete",
+ style: "destructive",
+ onPress: async () => {
+ try {
+ await CalComAPIService.deleteSchedule(Number(id));
+ Alert.alert("Success", "Schedule deleted successfully", [
+ { text: "OK", onPress: () => router.back() },
+ ]);
+ } catch (error) {
+ Alert.alert("Error", "Failed to delete schedule. Please try again.");
+ }
+ },
+ },
+ ]);
+ };
+
+ const handleAddOverride = () => {
+ setEditingOverride(null);
+ setOverrideDate("");
+ setOverrideStartTime("09:00");
+ setOverrideEndTime("17:00");
+ setIsUnavailable(false);
+ setShowOverrideModal(true);
+ };
+
+ const handleEditOverride = (index: number) => {
+ const override = overrides[index];
+ setEditingOverride(index);
+ setOverrideDate(override.date);
+ setOverrideStartTime(override.startTime);
+ setOverrideEndTime(override.endTime);
+ setIsUnavailable(override.startTime === "00:00" && override.endTime === "00:00");
+ setShowOverrideModal(true);
+ };
+
+ const handleDeleteOverride = (index: number) => {
+ Alert.alert("Delete Override", "Are you sure you want to delete this date override?", [
+ { text: "Cancel", style: "cancel" },
+ {
+ text: "Delete",
+ style: "destructive",
+ onPress: () => {
+ setOverrides(overrides.filter((_, i) => i !== index));
+ },
+ },
+ ]);
+ };
+
+ const handleSaveOverride = () => {
+ if (!overrideDate) {
+ Alert.alert("Error", "Please select a date");
+ return;
+ }
+
+ const newOverride = {
+ date: overrideDate,
+ startTime: isUnavailable ? "00:00" : overrideStartTime,
+ endTime: isUnavailable ? "00:00" : overrideEndTime,
+ };
+
+ if (editingOverride !== null) {
+ // Update existing override
+ const updated = [...overrides];
+ updated[editingOverride] = newOverride;
+ setOverrides(updated);
+ } else {
+ // Add new override
+ setOverrides([...overrides, newOverride]);
+ }
+
+ setShowOverrideModal(false);
+ };
+
+ const formatDateForDisplay = (dateStr: string): string => {
+ if (!dateStr) return "";
+ const date = new Date(dateStr + "T00:00:00");
+ return date.toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ });
+ };
+
+ if (loading) {
+ return (
+
+ Loading schedule...
+
+ );
+ }
+
+ return (
+ <>
+ (
+ Edit Availability
+ ),
+ headerLeft: () => (
+ router.back()} className="ml-4">
+
+ ),
+ headerRight: () => (
+
+ Save
+
+ ),
+ }}
+ />
+
+
+
+ {/* Schedule Name and Working Hours Display */}
+
+ {scheduleName}
+ {Object.keys(availability).length > 0 ? (
+
+ {formatAvailabilityDisplay(availability).map((line, index) => (
+
+ {line}
+
+ ))}
+
+ ) : (
+ No availability set
+ )}
+
+
+ {/* Availability Schedule */}
+
+ Availability
+ {DAYS.map((day, dayIndex) => {
+ const daySlots = availability[dayIndex] || [];
+ const isEnabled = daySlots.length > 0;
+ const firstSlot = daySlots[0];
+
+ return (
+
+
+
+ toggleDay(dayIndex)}
+ trackColor={{ false: "#E5E5EA", true: "#34C759" }}
+ thumbColor="#fff"
+ style={{ transform: [{ scaleX: 0.8 }, { scaleY: 0.8 }] }}
+ />
+
+ {DAY_ABBREVIATIONS[dayIndex]}
+
+ {isEnabled && firstSlot && (
+
+
+ setShowTimePicker({ dayIndex, slotIndex: 0, type: "start" })
+ }
+ className="rounded-lg border border-[#E5E5EA] bg-white px-2 py-1"
+ style={{ width: 85 }}
+ >
+
+ {formatTime12Hour(firstSlot.startTime)}
+
+
+ -
+
+ setShowTimePicker({ dayIndex, slotIndex: 0, type: "end" })
+ }
+ className="rounded-lg border border-[#E5E5EA] bg-white px-2 py-1"
+ style={{ width: 85 }}
+ >
+
+ {formatTime12Hour(firstSlot.endTime)}
+
+
+
+ )}
+
+ {isEnabled && (
+ addTimeSlot(dayIndex)} className="p-1">
+
+ )}
+
+
+ {isEnabled && daySlots.length > 1 && (
+
+ {daySlots.slice(1).map((slot, slotIndex) => (
+
+
+ setShowTimePicker({
+ dayIndex,
+ slotIndex: slotIndex + 1,
+ type: "start",
+ })
+ }
+ className="rounded-lg border border-[#E5E5EA] bg-white px-2 py-1"
+ style={{ width: 85 }}
+ >
+
+ {formatTime12Hour(slot.startTime)}
+
+
+ -
+
+ setShowTimePicker({
+ dayIndex,
+ slotIndex: slotIndex + 1,
+ type: "end",
+ })
+ }
+ className="rounded-lg border border-[#E5E5EA] bg-white px-2 py-1"
+ style={{ width: 85 }}
+ >
+
+ {formatTime12Hour(slot.endTime)}
+
+
+ removeTimeSlot(dayIndex, slotIndex + 1)}
+ className="p-1"
+ >
+
+
+ ))}
+
+ )}
+
+ );
+ })}
+
+
+ {/* Timezone */}
+
+ Timezone
+ setShowTimezoneModal(true)}
+ className="flex-row items-center justify-between rounded-lg border border-[#E5E5EA] bg-[#F8F9FA] px-3 py-3"
+ >
+ {timeZone}
+
+
+
+ {/* Date Overrides */}
+
+ Date overrides
+
+ Add dates when your availability changes from your daily hours.
+
+
+ {overrides.length > 0 && (
+
+ {overrides.map((override, index) => (
+
+
+
+ {formatDateForDisplay(override.date)}
+
+ {override.startTime === "00:00" && override.endTime === "00:00" ? (
+ Unavailable (All day)
+ ) : (
+
+ {formatTime12Hour(override.startTime + ":00")} -{" "}
+ {formatTime12Hour(override.endTime + ":00")}
+
+ )}
+
+
+ handleEditOverride(index)} className="p-2">
+
+ handleDeleteOverride(index)}
+ className="p-2"
+ >
+
+
+
+ ))}
+
+ )}
+
+
+ Add an override
+
+
+
+
+
+ {/* Bottom Action Bar */}
+
+
+
+ Set as Default
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Timezone Modal */}
+ setShowTimezoneModal(false)}
+ >
+ setShowTimezoneModal(false)}
+ >
+ e.stopPropagation()}
+ >
+
+ Select Timezone
+ setShowTimezoneModal(false)}>
+
+
+
+ {timezones.map((tz) => (
+ {
+ setTimeZone(tz);
+ setShowTimezoneModal(false);
+ }}
+ className="border-b border-[#E5E5EA] py-3"
+ >
+ {tz}
+
+ ))}
+
+
+
+
+
+ {/* Time Picker Modal */}
+ setShowTimePicker(null)}
+ >
+ setShowTimePicker(null)}
+ >
+ e.stopPropagation()}
+ >
+
+
+ Select {showTimePicker?.type === "start" ? "Start" : "End"} Time
+
+ setShowTimePicker(null)}>
+
+
+
+ {TIME_OPTIONS.map((time) => {
+ const currentTime =
+ showTimePicker?.type === "start"
+ ? availability[showTimePicker.dayIndex]?.[
+ showTimePicker.slotIndex
+ ]?.startTime.substring(0, 5)
+ : availability[showTimePicker?.dayIndex || 0]?.[
+ showTimePicker?.slotIndex || 0
+ ]?.endTime.substring(0, 5);
+ const isSelected = currentTime === time;
+
+ return (
+ {
+ if (showTimePicker) {
+ updateTimeSlot(
+ showTimePicker.dayIndex,
+ showTimePicker.slotIndex,
+ showTimePicker.type,
+ time
+ );
+ setShowTimePicker(null);
+ }
+ }}
+ className={`border-b border-[#E5E5EA] py-3 ${isSelected ? "bg-[#E3F2FD]" : ""}`}
+ >
+
+ {time}
+
+
+ );
+ })}
+
+
+
+
+
+ {/* Override Modal */}
+ setShowOverrideModal(false)}
+ >
+ setShowOverrideModal(false)}
+ >
+ e.stopPropagation()}
+ >
+
+
+ {editingOverride !== null ? "Edit Override" : "Add Override"}
+
+ setShowOverrideModal(false)}>
+
+
+
+
+
+ {/* Date Picker */}
+
+
+ Select the dates to override
+
+ Enter date in YYYY-MM-DD format
+
+
+ {/* Unavailable Toggle */}
+
+
+ Mark unavailable (All day)
+
+
+
+ {/* Time Picker (only if not unavailable) */}
+ {!isUnavailable && (
+
+
+ Which hours are you free?
+
+
+ setShowOverrideTimePicker({ type: "start" })}
+ className="flex-1 rounded-lg border border-[#E5E5EA] bg-white px-3 py-3"
+ >
+
+ {formatTime12Hour(overrideStartTime + ":00")}
+
+
+ -
+ setShowOverrideTimePicker({ type: "end" })}
+ className="flex-1 rounded-lg border border-[#E5E5EA] bg-white px-3 py-3"
+ >
+
+ {formatTime12Hour(overrideEndTime + ":00")}
+
+
+
+
+ )}
+
+ {/* Save Button */}
+
+
+ Save Override
+
+
+
+
+
+
+
+
+ {/* Override Time Picker Modal */}
+ setShowOverrideTimePicker(null)}
+ >
+ setShowOverrideTimePicker(null)}
+ >
+ e.stopPropagation()}
+ >
+
+
+ Select {showOverrideTimePicker?.type === "start" ? "Start" : "End"} Time
+
+ setShowOverrideTimePicker(null)}>
+
+
+
+ {TIME_OPTIONS.map((time) => {
+ const currentTime =
+ showOverrideTimePicker?.type === "start" ? overrideStartTime : overrideEndTime;
+ const isSelected = currentTime === time;
+ return (
+ {
+ if (showOverrideTimePicker?.type === "start") {
+ setOverrideStartTime(time);
+ } else {
+ setOverrideEndTime(time);
+ }
+ setShowOverrideTimePicker(null);
+ }}
+ className={`border-b border-[#E5E5EA] py-3 ${isSelected ? "bg-[#F0F9FF]" : ""}`}
+ >
+
+ {formatTime12Hour(time + ":00")}
+
+
+ );
+ })}
+
+
+
+
+
+ );
+}
diff --git a/companion/app/booking-detail.tsx b/companion/app/booking-detail.tsx
new file mode 100644
index 0000000000..821978e77e
--- /dev/null
+++ b/companion/app/booking-detail.tsx
@@ -0,0 +1,747 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import React, { useState, useEffect } from "react";
+import {
+ View,
+ Text,
+ ScrollView,
+ TouchableOpacity,
+ Alert,
+ ActivityIndicator,
+ Linking,
+ TextInput,
+ Platform,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { CalComAPIService, Booking } from "../services/calcom";
+import { SvgImage } from "../components/SvgImage";
+import { FullScreenModal } from "../components/FullScreenModal";
+import { getAppIconUrl } from "../utils/getAppIconUrl";
+import { getDefaultLocationIconUrl, defaultLocations } from "../utils/defaultLocations";
+
+// Format date: "Tuesday, November 25, 2025"
+const formatDateFull = (dateString: string): string => {
+ if (!dateString) return "";
+ try {
+ const date = new Date(dateString);
+ return date.toLocaleDateString("en-US", {
+ weekday: "long",
+ month: "long",
+ day: "numeric",
+ year: "numeric",
+ });
+ } catch (error) {
+ return "";
+ }
+};
+
+// Format time: "9:40pm - 10:00pm"
+const formatTime12Hour = (dateString: string): string => {
+ if (!dateString) return "";
+ try {
+ const date = new Date(dateString);
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ const period = hours >= 12 ? "pm" : "am";
+ const hour12 = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+ const minStr = minutes.toString().padStart(2, "0");
+ return `${hour12}:${minStr}${period}`;
+ } catch (error) {
+ return "";
+ }
+};
+
+// Get timezone from date string
+const getTimezone = (dateString: string): string => {
+ if (!dateString) return "";
+ try {
+ const date = new Date(dateString);
+ const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+ return timeZone;
+ } catch (error) {
+ return "";
+ }
+};
+
+// Get initials from a name (e.g., "Keith Williams" -> "KW", "Dhairyashil Shinde" -> "DS")
+const getInitials = (name: string): string => {
+ if (!name) return "";
+ const parts = name.trim().split(/\s+/);
+ if (parts.length === 0) return "";
+ if (parts.length === 1) {
+ return parts[0].charAt(0).toUpperCase();
+ }
+ // Get first letter of first name and first letter of last name
+ return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+
+// Get location provider info
+const getLocationProvider = (location: string | undefined, metadata?: Record) => {
+ // Check metadata for videoCallUrl first
+ const videoCallUrl = metadata?.videoCallUrl;
+ const locationToCheck = videoCallUrl || location;
+
+ if (!locationToCheck) return null;
+
+ // Check if it's a video call URL
+ if (typeof locationToCheck === "string" && locationToCheck.startsWith("http")) {
+ // Try to detect provider from URL
+ if (locationToCheck.includes("cal.com/video") || locationToCheck.includes("cal-video")) {
+ const iconUrl = getAppIconUrl("daily_video", "cal-video");
+ return {
+ label: "Cal Video",
+ iconUrl: iconUrl || "https://app.cal.com/app-store/dailyvideo/icon.svg",
+ url: locationToCheck,
+ };
+ }
+ // Check for other video providers by URL pattern
+ const videoProviders = [
+ { pattern: /zoom\.us/, label: "Zoom", type: "zoom_video", appId: "zoom" },
+ {
+ pattern: /meet\.google\.com/,
+ label: "Google Meet",
+ type: "google_video",
+ appId: "google-meet",
+ },
+ {
+ pattern: /teams\.microsoft\.com/,
+ label: "Microsoft Teams",
+ type: "office365_video",
+ appId: "msteams",
+ },
+ ];
+
+ for (const provider of videoProviders) {
+ if (provider.pattern.test(locationToCheck)) {
+ const iconUrl = getAppIconUrl(provider.type, provider.appId);
+ return {
+ label: provider.label,
+ iconUrl: iconUrl,
+ url: locationToCheck,
+ };
+ }
+ }
+
+ // Generic link meeting
+ const linkIconUrl = getDefaultLocationIconUrl("link") || "https://app.cal.com/link.svg";
+ return {
+ label: "Link Meeting",
+ iconUrl: linkIconUrl,
+ url: locationToCheck,
+ };
+ }
+
+ // Check if it's an integration location (e.g., "integrations:zoom", "integrations:cal-video")
+ if (typeof locationToCheck === "string" && locationToCheck.startsWith("integrations:")) {
+ const appId = locationToCheck.replace("integrations:", "");
+ const iconUrl = getAppIconUrl("", appId);
+
+ if (iconUrl) {
+ // Format appId to display name (e.g., "cal-video" -> "Cal Video")
+ const formatAppIdToDisplayName = (id: string): string => {
+ return id
+ .split("-")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+ };
+
+ return {
+ label: formatAppIdToDisplayName(appId),
+ iconUrl: iconUrl,
+ url: null,
+ };
+ }
+ }
+
+ // Check if it's a default location type
+ const defaultLocation = defaultLocations.find((loc) => loc.type === locationToCheck);
+ if (defaultLocation) {
+ return {
+ label: defaultLocation.label,
+ iconUrl: defaultLocation.iconUrl,
+ url: null,
+ };
+ }
+
+ // Fallback: return as plain text location
+ return {
+ label: locationToCheck,
+ iconUrl: null,
+ url: null,
+ };
+};
+
+export default function BookingDetail() {
+ const router = useRouter();
+ const { uid } = useLocalSearchParams<{ uid: string }>();
+ const insets = useSafeAreaInsets();
+
+ const [loading, setLoading] = useState(true);
+ const [booking, setBooking] = useState(null);
+ const [error, setError] = useState(null);
+ const [showActionsModal, setShowActionsModal] = useState(false);
+ const [showRescheduleModal, setShowRescheduleModal] = useState(false);
+ const [rescheduleReason, setRescheduleReason] = useState("");
+ const [rescheduling, setRescheduling] = useState(false);
+
+ useEffect(() => {
+ if (uid) {
+ fetchBooking();
+ }
+ }, [uid]);
+
+ const fetchBooking = async () => {
+ try {
+ setLoading(true);
+ setError(null);
+ const bookingData = await CalComAPIService.getBookingByUid(uid);
+ console.log("Booking data received:", JSON.stringify(bookingData, null, 2));
+ console.log("User:", bookingData.user);
+ console.log("Hosts:", bookingData.hosts);
+ console.log("Attendees:", bookingData.attendees);
+ console.log("Recurring fields:", {
+ recurringEventId: bookingData.recurringEventId,
+ recurringBookingUid: (bookingData as any).recurringBookingUid,
+ metadata: (bookingData as any).metadata,
+ });
+ setBooking(bookingData);
+ } catch (err) {
+ console.error("Error fetching booking:", err);
+ setError("Failed to load booking. Please try again.");
+ Alert.alert("Error", "Failed to load booking. Please try again.", [
+ { text: "OK", onPress: () => router.back() },
+ ]);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleJoinMeeting = () => {
+ if (!booking?.location) return;
+
+ const provider = getLocationProvider(booking.location);
+ if (provider?.url) {
+ Linking.openURL(provider.url);
+ }
+ };
+
+ const handleReschedule = async () => {
+ if (!booking) return;
+
+ setRescheduling(true);
+ try {
+ // For now, we'll use the current start time
+ // In a full implementation, you'd show a date/time picker
+ await CalComAPIService.rescheduleBooking(booking.uid, {
+ start: booking.startTime,
+ reschedulingReason: rescheduleReason.trim() || undefined,
+ });
+
+ Alert.alert("Success", "Reschedule request sent successfully");
+ setShowRescheduleModal(false);
+ setRescheduleReason("");
+
+ // Refresh booking data
+ await fetchBooking();
+ } catch (error) {
+ console.error("Failed to reschedule booking:", error);
+ Alert.alert("Error", "Failed to send reschedule request. Please try again.");
+ } finally {
+ setRescheduling(false);
+ }
+ };
+
+ if (loading) {
+ return (
+
+ Loading booking...
+
+ );
+ }
+
+ if (error || !booking) {
+ return (
+
+
+ {error || "Booking not found"}
+
+ router.back()}
+ >
+ Go Back
+
+
+ );
+ }
+
+ const startTime = booking.start || booking.startTime || "";
+ const endTime = booking.end || booking.endTime || "";
+ const dateFormatted = formatDateFull(startTime);
+ const timeFormatted = `${formatTime12Hour(startTime)} - ${formatTime12Hour(endTime)}`;
+ const timezone = getTimezone(startTime);
+ const locationProvider = getLocationProvider(booking.location, booking.responses);
+
+ return (
+ <>
+ (
+ router.back()}
+ className="items-center justify-center rounded-full"
+ style={{ width: 40, height: 40, backgroundColor: "#F0F0F0" }}
+ >
+
+ ),
+ headerRight: () => (
+ setShowActionsModal(true)}
+ className="items-center justify-center rounded-full"
+ style={{ width: 40, height: 40, backgroundColor: "#F0F0F0" }}
+ >
+
+ ),
+ }}
+ />
+
+
+ {/* Title */}
+
+ {booking.title}
+
+ {dateFormatted} {timeFormatted} ({timezone})
+
+
+
+ {/* Who Section */}
+
+ Who
+ {/* Show host from user field or hosts array */}
+ {(booking.user || (booking.hosts && booking.hosts.length > 0)) && (
+
+ {booking.user ? (
+
+
+
+ {getInitials(booking.user.name)}
+
+
+
+
+
+ {booking.user.name}
+
+
+ host
+
+
+ {booking.user.email}
+
+
+ ) : booking.hosts && booking.hosts.length > 0 ? (
+ booking.hosts.map((host, hostIndex) => (
+ 0 ? "mt-4" : ""}`}
+ >
+
+
+ {getInitials(host.name || "Host")}
+
+
+
+
+
+ {host.name || "Host"}
+
+
+ host
+
+
+ {host.email && {host.email} }
+
+
+ ))
+ ) : null}
+
+ )}
+ {booking.attendees && booking.attendees.length > 0 && (
+
+ {booking.attendees.map((attendee, index) => (
+ 0 ? "mt-4" : ""}`}>
+
+
+ {getInitials(attendee.name)}
+
+
+
+
+ {attendee.name}
+
+ {attendee.email}
+
+
+ ))}
+
+ )}
+
+
+ {/* Where Section */}
+ {locationProvider && (
+
+ Where
+ {locationProvider.url ? (
+
+ {locationProvider.iconUrl && (
+ {locationProvider.label}:
+
+ {locationProvider.url}
+
+
+ ) : (
+
+ {locationProvider.iconUrl && (
+ {locationProvider.label}
+
+ )}
+
+ )}
+
+ {/* Recurring Event Section */}
+ {(booking.recurringEventId || booking.recurringBookingUid) && (
+
+ Recurring Event
+ Every 2 weeks for 6 occurrences
+
+ )}
+
+ {/* Description Section */}
+ {booking.description && (
+
+ Description
+ {booking.description}
+
+ )}
+
+ {/* Join Meeting Button */}
+ {locationProvider?.url && (
+
+ {locationProvider.iconUrl && (
+
+ Join {locationProvider.label}
+
+
+ )}
+
+
+
+ {/* Booking Actions Modal */}
+ setShowActionsModal(false)}
+ >
+ setShowActionsModal(false)}
+ >
+ e.stopPropagation()}
+ >
+ {/* Header */}
+
+
+ Booking Actions
+
+
+ {/* Actions List */}
+
+ {/* View Booking */}
+ {
+ setShowActionsModal(false);
+ // TODO: Navigate to booking view page
+ console.log("View booking");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ View Booking
+
+
+ {/* Separator */}
+
+ Edit event
+
+
+ {/* Request Reschedule */}
+ {
+ setShowActionsModal(false);
+ setShowRescheduleModal(true);
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Send Reschedule Request
+
+
+ {/* Edit Location */}
+ {
+ setShowActionsModal(false);
+ // TODO: Open edit location dialog
+ console.log("Edit location");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Edit Location
+
+
+ {/* Add Guests */}
+ {
+ setShowActionsModal(false);
+ // TODO: Open add guests dialog
+ console.log("Add guests");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Add Guests
+
+
+ {/* Separator */}
+
+ After event
+
+
+ {/* View Recordings */}
+ {locationProvider?.url && (
+ {
+ setShowActionsModal(false);
+ // TODO: Open view recordings dialog
+ console.log("View recordings");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ View Recordings
+
+ )}
+
+ {/* Meeting Session Details */}
+ {locationProvider?.url && (
+ {
+ setShowActionsModal(false);
+ // TODO: Open session details dialog
+ console.log("Meeting session details");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Meeting Session Details
+
+ )}
+
+ {/* Mark as No-Show */}
+ {
+ setShowActionsModal(false);
+ // TODO: Mark as no-show
+ console.log("Mark as no-show");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Mark as No-Show
+
+
+ {/* Separator */}
+ {
+ setShowActionsModal(false);
+ // TODO: Open report booking dialog
+ console.log("Report booking");
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Report Booking
+
+
+ {/* Separator */}
+ {
+ setShowActionsModal(false);
+ Alert.alert("Cancel Booking", "Are you sure you want to cancel this booking?", [
+ { text: "No", style: "cancel" },
+ {
+ text: "Yes, Cancel",
+ style: "destructive",
+ onPress: () => {
+ // TODO: Cancel booking
+ console.log("Cancel booking");
+ },
+ },
+ ]);
+ }}
+ className="flex-row items-center p-2 hover:bg-gray-50 md:p-4"
+ >
+ Cancel Booking
+
+
+
+ {/* Cancel button */}
+
+ setShowActionsModal(false)}
+ >
+ Cancel
+
+
+
+
+
+
+ {/* Reschedule Modal */}
+ setShowRescheduleModal(false)}
+ >
+ setShowRescheduleModal(false)}
+ >
+ e.stopPropagation()}
+ style={{
+ shadowColor: "#000",
+ shadowOffset: { width: 0, height: 20 },
+ shadowOpacity: 0.25,
+ shadowRadius: 25,
+ elevation: 24,
+ }}
+ >
+ {/* Header */}
+
+
+
+
+
+
+ Reschedule request
+
+
+ Send a reschedule request to the organizer of this booking.
+
+
+
+
+
+ {/* Content */}
+
+
+ Reason for reschedule request
+ (Optional)
+
+
+
+ {/* Footer */}
+
+
+ {
+ setShowRescheduleModal(false);
+ setRescheduleReason("");
+ }}
+ disabled={rescheduling}
+ >
+ Cancel
+
+
+ Reschedule request
+
+
+
+
+
+
+
+ );
+}
diff --git a/companion/app/event-type-detail.tsx b/companion/app/event-type-detail.tsx
new file mode 100644
index 0000000000..3991df5b37
--- /dev/null
+++ b/companion/app/event-type-detail.tsx
@@ -0,0 +1,2188 @@
+import { Ionicons } from "@expo/vector-icons";
+import { GlassView } from "expo-glass-effect";
+import { useRouter, useLocalSearchParams, Stack } from "expo-router";
+import React, { useState, useEffect } from "react";
+import {
+ View,
+ Text,
+ ScrollView,
+ TouchableOpacity,
+ TextInput,
+ Switch,
+ Modal,
+ Linking,
+ Alert,
+ Clipboard,
+ Animated,
+ Image,
+ Platform,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { CalComAPIService, Schedule, ConferencingOption, EventType } from "../services/calcom";
+import { getAppIconUrl } from "../utils/getAppIconUrl";
+import {
+ defaultLocations,
+ getDefaultLocationIconUrl,
+ isDefaultLocation,
+ DefaultLocationType,
+} from "../utils/defaultLocations";
+import { SvgImage } from "../components/SvgImage";
+import {
+ parseBufferTime,
+ parseMinimumNotice,
+ parseFrequencyUnit,
+ parseSlotInterval,
+} from "../utils/parsers/event-type-parsers";
+import { slugify } from "../utils/slugify";
+import { BasicsTab } from "./event-type-detail/tabs/BasicsTab";
+import { AvailabilityTab } from "./event-type-detail/tabs/AvailabilityTab";
+import { LimitsTab } from "./event-type-detail/tabs/LimitsTab";
+import { AdvancedTab } from "./event-type-detail/tabs/AdvancedTab";
+import { RecurringTab } from "./event-type-detail/tabs/RecurringTab";
+
+const tabs = [
+ { id: "basics", label: "Basics", icon: "link" },
+ { id: "availability", label: "Availability", icon: "calendar" },
+ { id: "limits", label: "Limits", icon: "time" },
+ { id: "advanced", label: "Advanced", icon: "settings" },
+ { id: "recurring", label: "Recurring", icon: "refresh" },
+ { id: "apps", label: "Apps", icon: "grid" },
+ { id: "workflows", label: "Workflows", icon: "flash" },
+ { id: "webhooks", label: "Webhooks", icon: "code" },
+];
+
+export default function EventTypeDetail() {
+ const router = useRouter();
+ const { id, title, description, duration, price, currency, slug } = useLocalSearchParams<{
+ id: string;
+ title: string;
+ description?: string;
+ duration: string;
+ price?: string;
+ currency?: string;
+ slug?: string;
+ }>();
+
+ const insets = useSafeAreaInsets();
+ const [activeTab, setActiveTab] = useState("basics");
+
+ // Form state
+ const [eventTitle, setEventTitle] = useState(title || "");
+ const [eventDescription, setEventDescription] = useState(description || "");
+ const [eventSlug, setEventSlug] = useState(slug || "");
+ const [eventDuration, setEventDuration] = useState(duration || "30");
+ const [username, setUsername] = useState("username");
+ const [allowMultipleDurations, setAllowMultipleDurations] = useState(false);
+ const [selectedLocation, setSelectedLocation] = useState("");
+ const [showLocationDropdown, setShowLocationDropdown] = useState(false);
+ const [locationAddress, setLocationAddress] = useState("");
+ const [locationLink, setLocationLink] = useState("");
+ const [locationPhone, setLocationPhone] = useState("");
+ const [selectedDurations, setSelectedDurations] = useState([]);
+ const [defaultDuration, setDefaultDuration] = useState("");
+ const [showDurationDropdown, setShowDurationDropdown] = useState(false);
+ const [showDefaultDurationDropdown, setShowDefaultDurationDropdown] = useState(false);
+ const [schedules, setSchedules] = useState([]);
+ const [selectedSchedule, setSelectedSchedule] = useState(null);
+ const [selectedScheduleDetails, setSelectedScheduleDetails] = useState(null);
+ const [showScheduleDropdown, setShowScheduleDropdown] = useState(false);
+ const [schedulesLoading, setSchedulesLoading] = useState(false);
+ const [scheduleDetailsLoading, setScheduleDetailsLoading] = useState(false);
+ const [isHidden, setIsHidden] = useState(false);
+ const [selectedTimezone, setSelectedTimezone] = useState("");
+ const [showTimezoneDropdown, setShowTimezoneDropdown] = useState(false);
+ const [conferencingOptions, setConferencingOptions] = useState([]);
+ const [conferencingLoading, setConferencingLoading] = useState(false);
+ const [eventTypeData, setEventTypeData] = useState(null);
+ const [saving, setSaving] = useState(false);
+ const [beforeEventBuffer, setBeforeEventBuffer] = useState("No buffer time");
+ const [afterEventBuffer, setAfterEventBuffer] = useState("No buffer time");
+ const [showBeforeBufferDropdown, setShowBeforeBufferDropdown] = useState(false);
+ const [showAfterBufferDropdown, setShowAfterBufferDropdown] = useState(false);
+ const [minimumNoticeValue, setMinimumNoticeValue] = useState("1");
+ const [minimumNoticeUnit, setMinimumNoticeUnit] = useState("Hours");
+ const [showMinimumNoticeUnitDropdown, setShowMinimumNoticeUnitDropdown] = useState(false);
+ const [limitBookingFrequency, setLimitBookingFrequency] = useState(false);
+ const [frequencyLimits, setFrequencyLimits] = useState([{ id: 1, value: "1", unit: "Per day" }]);
+ const [showFrequencyUnitDropdown, setShowFrequencyUnitDropdown] = useState(null);
+ const [frequencyAnimationValue] = useState(new Animated.Value(0));
+ const [limitTotalDuration, setLimitTotalDuration] = useState(false);
+ const [durationLimits, setDurationLimits] = useState([{ id: 1, value: "60", unit: "Per day" }]);
+ const [showDurationUnitDropdown, setShowDurationUnitDropdown] = useState(null);
+ const [durationAnimationValue] = useState(new Animated.Value(0));
+ const [slotInterval, setSlotInterval] = useState("Default");
+ const [showSlotIntervalDropdown, setShowSlotIntervalDropdown] = useState(false);
+ const [onlyShowFirstAvailableSlot, setOnlyShowFirstAvailableSlot] = useState(false);
+ const [maxActiveBookingsPerBooker, setMaxActiveBookingsPerBooker] = useState(false);
+ const [maxActiveBookingsValue, setMaxActiveBookingsValue] = useState("1");
+ const [limitFutureBookings, setLimitFutureBookings] = useState(false);
+ const [futureBookingType, setFutureBookingType] = useState<"rolling" | "range">("rolling");
+ const [rollingDays, setRollingDays] = useState("30");
+ const [rollingCalendarDays, setRollingCalendarDays] = useState(false);
+ const [rangeStartDate, setRangeStartDate] = useState("");
+ const [rangeEndDate, setRangeEndDate] = useState("");
+ const [offsetStartTimes, setOffsetStartTimes] = useState(false);
+ const [offsetStartValue, setOffsetStartValue] = useState("0");
+
+ // Advanced tab state
+ const [calendarEventName, setCalendarEventName] = useState("");
+ const [addToCalendarEmail, setAddToCalendarEmail] = useState("");
+ const [selectedLayouts, setSelectedLayouts] = useState(["MONTH_VIEW"]);
+ const [defaultLayout, setDefaultLayout] = useState("MONTH_VIEW");
+ const [requiresConfirmation, setRequiresConfirmation] = useState(false);
+ const [disableCancelling, setDisableCancelling] = useState(false);
+ const [disableRescheduling, setDisableRescheduling] = useState(false);
+ const [sendCalVideoTranscription, setSendCalVideoTranscription] = useState(false);
+ const [autoTranslate, setAutoTranslate] = useState(false);
+ const [requiresBookerEmailVerification, setRequiresBookerEmailVerification] = useState(false);
+ const [hideCalendarNotes, setHideCalendarNotes] = useState(false);
+ const [hideCalendarEventDetails, setHideCalendarEventDetails] = useState(false);
+ const [successRedirectUrl, setSuccessRedirectUrl] = useState("");
+ const [forwardParamsSuccessRedirect, setForwardParamsSuccessRedirect] = useState(false);
+ const [hideOrganizerEmail, setHideOrganizerEmail] = useState(false);
+ const [lockTimezone, setLockTimezone] = useState(false);
+ const [allowReschedulingPastEvents, setAllowReschedulingPastEvents] = useState(false);
+ const [allowBookingThroughRescheduleLink, setAllowBookingThroughRescheduleLink] = useState(false);
+ const [customReplyToEmail, setCustomReplyToEmail] = useState("");
+ const [eventTypeColorLight, setEventTypeColorLight] = useState("#292929");
+ const [eventTypeColorDark, setEventTypeColorDark] = useState("#FAFAFA");
+
+ // Recurring tab state
+ const [recurringEnabled, setRecurringEnabled] = useState(false);
+ const [recurringInterval, setRecurringInterval] = useState("1");
+ const [recurringFrequency, setRecurringFrequency] = useState<
+ "daily" | "weekly" | "monthly" | "yearly"
+ >("weekly");
+ const [recurringOccurrences, setRecurringOccurrences] = useState("12");
+
+ const bufferTimeOptions = [
+ "No buffer time",
+ "5 Minutes",
+ "10 Minutes",
+ "15 Minutes",
+ "20 Minutes",
+ "30 Minutes",
+ "45 Minutes",
+ "60 Minutes",
+ "90 Minutes",
+ "120 Minutes",
+ ];
+ const timeUnitOptions = ["Minutes", "Hours", "Days"];
+ const frequencyUnitOptions = ["Per day", "Per Month", "Per year"];
+ const durationUnitOptions = ["Per day", "Per week", "Per month"];
+ const slotIntervalOptions = [
+ "Default",
+ "5 Minutes",
+ "10 Minutes",
+ "15 Minutes",
+ "20 Minutes",
+ "30 Minutes",
+ "45 Minutes",
+ "60 Minutes",
+ "75 Minutes",
+ "90 Minutes",
+ "105 Minutes",
+ "120 Minutes",
+ ];
+ const availableDurations = [
+ "5 mins",
+ "10 mins",
+ "15 mins",
+ "20 mins",
+ "25 mins",
+ "30 mins",
+ "45 mins",
+ "50 mins",
+ "60 mins",
+ "75 mins",
+ "80 mins",
+ "90 mins",
+ "120 mins",
+ "150 mins",
+ "180 mins",
+ "240 mins",
+ "300 mins",
+ "360 mins",
+ "420 mins",
+ "480 mins",
+ ];
+
+ const formatDuration = (minutes: string) => {
+ const mins = parseInt(minutes) || 0;
+ if (mins < 60) return `${mins}m`;
+ const hours = Math.floor(mins / 60);
+ const remainingMins = mins % 60;
+ return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
+ };
+
+ const truncateTitle = (text: string, maxLength: number = 20) => {
+ return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+ };
+
+ const formatAppIdToDisplayName = (appId: string): string => {
+ // Convert appId like "google-meet" to "Google Meet"
+ return appId
+ .split("-")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+ };
+
+ const displayNameToLocationValue = (
+ displayName: string
+ ): {
+ type: string;
+ integration?: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ public?: boolean;
+ } | null => {
+ // First check if it's a default location
+ const defaultLocation = defaultLocations.find((loc) => loc.label === displayName);
+ if (defaultLocation) {
+ // Map internal location types to API location types
+ switch (defaultLocation.type) {
+ case "attendeeInPerson":
+ return { type: "attendeeAddress" };
+ case "inPerson":
+ // For organizer address, we need to preserve existing address if available
+ // or use empty string (will be filled by organizer later)
+ return { type: "address", address: "", public: true };
+ case "link":
+ // For link meeting, we need to preserve existing link if available
+ // or use empty string (will be filled by organizer later)
+ return { type: "link", link: "", public: true };
+ case "phone":
+ return { type: "attendeePhone" };
+ case "userPhone":
+ // For organizer phone, we need to preserve existing phone if available
+ // or use empty string (will be filled by organizer later)
+ return { type: "phone", phone: "", public: true };
+ case "somewhereElse":
+ return { type: "attendeeDefined" };
+ default:
+ return { type: defaultLocation.type };
+ }
+ }
+
+ // Otherwise, find matching conferencing option
+ const option = conferencingOptions.find(
+ (opt) => formatAppIdToDisplayName(opt.appId) === displayName
+ );
+ if (option) {
+ return { type: "integration", integration: option.appId, public: true };
+ }
+
+ return null;
+ };
+
+ const displayNameToAppId = (displayName: string): string | null => {
+ // Legacy function for backward compatibility - only for conferencing apps
+ const option = conferencingOptions.find(
+ (opt) => formatAppIdToDisplayName(opt.appId) === displayName
+ );
+ return option ? option.appId : null;
+ };
+
+ type LocationOption = { label: string; iconUrl: string | null; value: string };
+ type LocationGroup = { category: string; options: LocationOption[] };
+
+ const getLocationOptions = (): LocationGroup[] => {
+ // Group conferencing apps under "conferencing" category
+ const conferencingAppOptions: LocationOption[] = conferencingOptions.map((option) => {
+ const iconUrl = getAppIconUrl(option.type, option.appId);
+ return {
+ label: formatAppIdToDisplayName(option.appId),
+ iconUrl: iconUrl,
+ value: `integrations:${option.appId}`,
+ };
+ });
+
+ // Group default locations by their category
+ const defaultLocationOptions: LocationOption[] = defaultLocations.map((location) => ({
+ label: location.label,
+ iconUrl: location.iconUrl,
+ value: location.type,
+ }));
+
+ // Group options by category
+ const grouped: Record = {};
+
+ // Add conferencing apps
+ if (conferencingAppOptions.length > 0) {
+ grouped["conferencing"] = conferencingAppOptions;
+ }
+
+ // Add default locations by category
+ defaultLocations.forEach((location) => {
+ const category = location.category;
+ if (!grouped[category]) {
+ grouped[category] = [];
+ }
+ const option = defaultLocationOptions.find((opt) => opt.value === location.type);
+ if (option) {
+ grouped[category].push(option);
+ }
+ });
+
+ // Convert to array format with category labels
+ const categoryLabels: Record = {
+ conferencing: "Conferencing",
+ "in person": "In Person",
+ phone: "Phone",
+ other: "Other",
+ };
+
+ const result: LocationGroup[] = [];
+ for (const category in grouped) {
+ if (grouped[category].length > 0) {
+ result.push({
+ category: categoryLabels[category] || category,
+ options: grouped[category],
+ });
+ }
+ }
+
+ console.log(
+ "Total location groups:",
+ result.length,
+ result.map((g) => `${g.category}: ${g.options.length}`)
+ );
+ return result;
+ };
+
+ const getSelectedLocationIconUrl = (): string | null => {
+ if (!selectedLocation) return null;
+
+ // First, check if it's a default location
+ const defaultLocation = defaultLocations.find((loc) => loc.label === selectedLocation);
+ if (defaultLocation) {
+ return defaultLocation.iconUrl;
+ }
+
+ // Try to find in conferencing options
+ const option = conferencingOptions.find(
+ (opt) => formatAppIdToDisplayName(opt.appId) === selectedLocation
+ );
+ if (option) {
+ return getAppIconUrl(option.type, option.appId);
+ }
+
+ // Fallback: Handle Cal Video directly (it might not be in conferencing options as it's a global app)
+ // Check if selectedLocation matches Cal Video display names
+ const calVideoNames = ["Cal Video", "Cal-Video", "cal-video"];
+ if (
+ calVideoNames.includes(selectedLocation) ||
+ selectedLocation.toLowerCase().includes("cal video")
+ ) {
+ return getAppIconUrl("daily_video", "cal-video");
+ }
+
+ // Fallback: Try to reverse the formatAppIdToDisplayName to get appId
+ // Convert "Cal Video" back to "cal-video" and try to get icon
+ const reverseAppId = selectedLocation.toLowerCase().replace(/\s+/g, "-");
+ const fallbackIconUrl = getAppIconUrl("", reverseAppId);
+ if (fallbackIconUrl) {
+ return fallbackIconUrl;
+ }
+
+ return null;
+ };
+
+ const toggleDurationSelection = (duration: string) => {
+ const newSelected = selectedDurations.includes(duration)
+ ? selectedDurations.filter((d) => d !== duration)
+ : [...selectedDurations, duration];
+
+ setSelectedDurations(newSelected);
+
+ // Reset default duration if it's no longer in selected durations
+ if (!newSelected.includes(defaultDuration)) {
+ setDefaultDuration("");
+ }
+ };
+
+ const toggleBookingFrequency = (value: boolean) => {
+ setLimitBookingFrequency(value);
+
+ Animated.timing(frequencyAnimationValue, {
+ toValue: value ? 1 : 0,
+ duration: 300,
+ useNativeDriver: false,
+ }).start();
+ };
+
+ const addFrequencyLimit = () => {
+ const newId = Math.max(...frequencyLimits.map((limit) => limit.id)) + 1;
+ setFrequencyLimits([...frequencyLimits, { id: newId, value: "1", unit: "Per day" }]);
+ };
+
+ const removeFrequencyLimit = (id: number) => {
+ setFrequencyLimits(frequencyLimits.filter((limit) => limit.id !== id));
+ };
+
+ const updateFrequencyLimit = (id: number, field: "value" | "unit", newValue: string) => {
+ setFrequencyLimits(
+ frequencyLimits.map((limit) => (limit.id === id ? { ...limit, [field]: newValue } : limit))
+ );
+ };
+
+ const toggleTotalDuration = (value: boolean) => {
+ setLimitTotalDuration(value);
+
+ Animated.timing(durationAnimationValue, {
+ toValue: value ? 1 : 0,
+ duration: 300,
+ useNativeDriver: false,
+ }).start();
+ };
+
+ const addDurationLimit = () => {
+ const newId = Math.max(...durationLimits.map((limit) => limit.id)) + 1;
+ setDurationLimits([...durationLimits, { id: newId, value: "60", unit: "Per day" }]);
+ };
+
+ const removeDurationLimit = (id: number) => {
+ setDurationLimits(durationLimits.filter((limit) => limit.id !== id));
+ };
+
+ const updateDurationLimit = (id: number, field: "value" | "unit", newValue: string) => {
+ setDurationLimits(
+ durationLimits.map((limit) => (limit.id === id ? { ...limit, [field]: newValue } : limit))
+ );
+ };
+
+ const fetchSchedules = async () => {
+ try {
+ setSchedulesLoading(true);
+ const schedulesData = await CalComAPIService.getSchedules();
+ setSchedules(schedulesData);
+
+ // Set default schedule if one exists
+ const defaultSchedule = schedulesData.find((schedule) => schedule.isDefault);
+ if (defaultSchedule) {
+ setSelectedSchedule(defaultSchedule);
+ await fetchScheduleDetails(defaultSchedule.id);
+ }
+ } catch (error) {
+ console.error("Failed to fetch schedules:", error);
+ } finally {
+ setSchedulesLoading(false);
+ }
+ };
+
+ const fetchScheduleDetails = async (scheduleId: number) => {
+ try {
+ setScheduleDetailsLoading(true);
+ console.log("Fetching schedule details for ID:", scheduleId);
+ const scheduleDetails = await CalComAPIService.getScheduleById(scheduleId);
+ console.log("Raw schedule details response:", scheduleDetails);
+ setSelectedScheduleDetails(scheduleDetails);
+ if (scheduleDetails.timeZone) {
+ setSelectedTimezone(scheduleDetails.timeZone);
+ }
+ } catch (error) {
+ console.error("Failed to fetch schedule details:", error);
+ setSelectedScheduleDetails(null);
+ } finally {
+ setScheduleDetailsLoading(false);
+ }
+ };
+
+ const fetchConferencingOptions = async () => {
+ try {
+ setConferencingLoading(true);
+ const options = await CalComAPIService.getConferencingOptions();
+ console.log("Fetched conferencing options:", JSON.stringify(options, null, 2));
+ setConferencingOptions(options);
+ } catch (error) {
+ console.error("Failed to fetch conferencing options:", error);
+ } finally {
+ setConferencingLoading(false);
+ }
+ };
+
+ const fetchEventTypeData = async () => {
+ if (!id) return;
+
+ try {
+ const eventType = await CalComAPIService.getEventTypeById(parseInt(id));
+ if (eventType) {
+ setEventTypeData(eventType);
+
+ // Load basic fields
+ if (eventType.title) setEventTitle(eventType.title);
+ if (eventType.slug) setEventSlug(eventType.slug);
+ if (eventType.description) setEventDescription(eventType.description);
+ if (eventType.lengthInMinutes) setEventDuration(eventType.lengthInMinutes.toString());
+ if (eventType.hidden !== undefined) setIsHidden(eventType.hidden);
+
+ // Load buffer times
+ if (eventType.beforeEventBuffer) {
+ setBeforeEventBuffer(`${eventType.beforeEventBuffer} Minutes`);
+ }
+ if (eventType.afterEventBuffer) {
+ setAfterEventBuffer(`${eventType.afterEventBuffer} Minutes`);
+ }
+
+ // Load minimum booking notice
+ if (eventType.minimumBookingNotice) {
+ const minutes = eventType.minimumBookingNotice;
+ if (minutes >= 1440) {
+ // Days
+ setMinimumNoticeValue((minutes / 1440).toString());
+ setMinimumNoticeUnit("Days");
+ } else if (minutes >= 60) {
+ // Hours
+ setMinimumNoticeValue((minutes / 60).toString());
+ setMinimumNoticeUnit("Hours");
+ } else {
+ // Minutes
+ setMinimumNoticeValue(minutes.toString());
+ setMinimumNoticeUnit("Minutes");
+ }
+ }
+
+ // Load slot interval
+ if (eventType.slotInterval) {
+ setSlotInterval(`${eventType.slotInterval} Minutes`);
+ }
+
+ // Load booking frequency limits
+ if (eventType.bookingLimitsCount && !("disabled" in eventType.bookingLimitsCount)) {
+ setLimitBookingFrequency(true);
+ const limits = [];
+ let idCounter = 1;
+ if (eventType.bookingLimitsCount.day) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsCount.day.toString(),
+ unit: "Per day",
+ });
+ }
+ if (eventType.bookingLimitsCount.week) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsCount.week.toString(),
+ unit: "Per week",
+ });
+ }
+ if (eventType.bookingLimitsCount.month) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsCount.month.toString(),
+ unit: "Per month",
+ });
+ }
+ if (eventType.bookingLimitsCount.year) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsCount.year.toString(),
+ unit: "Per year",
+ });
+ }
+ if (limits.length > 0) {
+ setFrequencyLimits(limits);
+ }
+ }
+
+ // Load duration limits
+ if (eventType.bookingLimitsDuration && !("disabled" in eventType.bookingLimitsDuration)) {
+ setLimitTotalDuration(true);
+ const limits = [];
+ let idCounter = 1;
+ if (eventType.bookingLimitsDuration.day) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsDuration.day.toString(),
+ unit: "Per day",
+ });
+ }
+ if (eventType.bookingLimitsDuration.week) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsDuration.week.toString(),
+ unit: "Per week",
+ });
+ }
+ if (eventType.bookingLimitsDuration.month) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsDuration.month.toString(),
+ unit: "Per month",
+ });
+ }
+ if (eventType.bookingLimitsDuration.year) {
+ limits.push({
+ id: idCounter++,
+ value: eventType.bookingLimitsDuration.year.toString(),
+ unit: "Per year",
+ });
+ }
+ if (limits.length > 0) {
+ setDurationLimits(limits);
+ }
+ }
+
+ // Load only show first slot
+ if (eventType.onlyShowFirstAvailableSlot !== undefined) {
+ setOnlyShowFirstAvailableSlot(eventType.onlyShowFirstAvailableSlot);
+ }
+
+ // Load max active bookings
+ if (
+ eventType.bookerActiveBookingsLimit &&
+ !("disabled" in eventType.bookerActiveBookingsLimit)
+ ) {
+ setMaxActiveBookingsPerBooker(true);
+ setMaxActiveBookingsValue(eventType.bookerActiveBookingsLimit.count.toString());
+ }
+
+ // Load booking window (future bookings limit)
+ if (eventType.bookingWindow && !("disabled" in eventType.bookingWindow)) {
+ setLimitFutureBookings(true);
+ if (eventType.bookingWindow.type === "range") {
+ setFutureBookingType("range");
+ if (
+ Array.isArray(eventType.bookingWindow.value) &&
+ eventType.bookingWindow.value.length === 2
+ ) {
+ setRangeStartDate(eventType.bookingWindow.value[0]);
+ setRangeEndDate(eventType.bookingWindow.value[1]);
+ }
+ } else {
+ setFutureBookingType("rolling");
+ if (typeof eventType.bookingWindow.value === "number") {
+ setRollingDays(eventType.bookingWindow.value.toString());
+ }
+ setRollingCalendarDays(eventType.bookingWindow.type === "calendarDays");
+ }
+ }
+
+ // Load Advanced tab fields
+ if (eventType.metadata) {
+ if (eventType.metadata.calendarEventName) {
+ setCalendarEventName(eventType.metadata.calendarEventName);
+ }
+ if (eventType.metadata.addToCalendarEmail) {
+ setAddToCalendarEmail(eventType.metadata.addToCalendarEmail);
+ }
+ if (eventType.metadata.customReplyToEmail) {
+ setCustomReplyToEmail(eventType.metadata.customReplyToEmail);
+ }
+ if (eventType.metadata.disableCancelling) {
+ setDisableCancelling(true);
+ }
+ if (eventType.metadata.disableRescheduling) {
+ setDisableRescheduling(true);
+ }
+ if (eventType.metadata.sendCalVideoTranscription) {
+ setSendCalVideoTranscription(true);
+ }
+ if (eventType.metadata.autoTranslate) {
+ setAutoTranslate(true);
+ }
+ if (eventType.metadata.hideCalendarEventDetails) {
+ setHideCalendarEventDetails(true);
+ }
+ if (eventType.metadata.hideOrganizerEmail) {
+ setHideOrganizerEmail(true);
+ }
+ if (eventType.metadata.allowReschedulingPastEvents) {
+ setAllowReschedulingPastEvents(true);
+ }
+ if (eventType.metadata.allowBookingThroughRescheduleLink) {
+ setAllowBookingThroughRescheduleLink(true);
+ }
+ }
+
+ // Load booker layouts
+ if (eventType.bookerLayouts) {
+ if (
+ eventType.bookerLayouts.enabledLayouts &&
+ Array.isArray(eventType.bookerLayouts.enabledLayouts)
+ ) {
+ setSelectedLayouts(eventType.bookerLayouts.enabledLayouts);
+ }
+ if (eventType.bookerLayouts.defaultLayout) {
+ setDefaultLayout(eventType.bookerLayouts.defaultLayout);
+ }
+ }
+
+ // Load confirmation settings
+ if (eventType.requiresConfirmation !== undefined) {
+ setRequiresConfirmation(eventType.requiresConfirmation);
+ }
+
+ // Load other boolean fields
+ if (eventType.requiresBookerEmailVerification !== undefined) {
+ setRequiresBookerEmailVerification(eventType.requiresBookerEmailVerification);
+ }
+ if (eventType.hideCalendarNotes !== undefined) {
+ setHideCalendarNotes(eventType.hideCalendarNotes);
+ }
+ if (eventType.lockTimeZoneToggleOnBookingPage !== undefined) {
+ setLockTimezone(eventType.lockTimeZoneToggleOnBookingPage);
+ }
+
+ // Load redirect URL
+ if (eventType.successRedirectUrl) {
+ setSuccessRedirectUrl(eventType.successRedirectUrl);
+ if (eventType.forwardParamsSuccessRedirect !== undefined) {
+ setForwardParamsSuccessRedirect(eventType.forwardParamsSuccessRedirect);
+ }
+ }
+
+ // Load event type colors
+ if (eventType.eventTypeColor) {
+ if (eventType.eventTypeColor.lightEventTypeColor) {
+ setEventTypeColorLight(eventType.eventTypeColor.lightEventTypeColor);
+ }
+ if (eventType.eventTypeColor.darkEventTypeColor) {
+ setEventTypeColorDark(eventType.eventTypeColor.darkEventTypeColor);
+ }
+ }
+
+ // Load recurring event settings
+ if (eventType.recurrence && !("disabled" in eventType.recurrence)) {
+ setRecurringEnabled(true);
+ setRecurringInterval(eventType.recurrence.interval.toString());
+ setRecurringFrequency(eventType.recurrence.frequency);
+ setRecurringOccurrences(eventType.recurrence.occurrences.toString());
+ }
+
+ // Extract location from event type
+ if (eventType.locations && eventType.locations.length > 0) {
+ const firstLocation = eventType.locations[0];
+
+ // Handle conferencing apps (with integration field)
+ if (firstLocation.integration) {
+ // Format the integration name (e.g., "google-meet" -> "Google Meet")
+ const formattedLocation = formatAppIdToDisplayName(firstLocation.integration);
+ setSelectedLocation(formattedLocation);
+ }
+ // Handle default locations (with type field)
+ else if (firstLocation.type) {
+ // Map API location types to internal location types
+ // Need to distinguish between organizer and attendee types based on presence of fields
+ let internalType = firstLocation.type;
+
+ // Check if it's an organizer type (has address, link, or phone field)
+ if (
+ firstLocation.type === "address" ||
+ (firstLocation.type === "phone" && firstLocation.phone)
+ ) {
+ // Organizer types
+ if (firstLocation.type === "address") {
+ internalType = "inPerson"; // Organizer address
+ } else if (firstLocation.type === "phone" && firstLocation.phone) {
+ internalType = "userPhone"; // Organizer phone
+ }
+ } else if (firstLocation.type === "link") {
+ internalType = "link"; // Link meeting
+ } else {
+ // Attendee types - map API types to internal types
+ const apiToInternalTypeMap: Record = {
+ attendeeAddress: "attendeeInPerson",
+ attendeePhone: "phone",
+ attendeeDefined: "somewhereElse",
+ };
+
+ if (apiToInternalTypeMap[firstLocation.type]) {
+ internalType = apiToInternalTypeMap[firstLocation.type];
+ }
+ }
+
+ const defaultLocation = defaultLocations.find((loc) => loc.type === internalType);
+ if (defaultLocation) {
+ setSelectedLocation(defaultLocation.label);
+
+ // Populate location input values if they exist
+ if (firstLocation.address) {
+ setLocationAddress(firstLocation.address);
+ }
+ if (firstLocation.link) {
+ setLocationLink(firstLocation.link);
+ }
+ if (firstLocation.phone) {
+ setLocationPhone(firstLocation.phone);
+ }
+ } else {
+ // Fallback: try to format the type as display name
+ setSelectedLocation(firstLocation.type);
+ }
+ }
+ }
+ }
+ } catch (error) {
+ console.error("Failed to fetch event type data:", error);
+ }
+ };
+
+ useEffect(() => {
+ if (activeTab === "availability") {
+ fetchSchedules();
+ }
+ if (activeTab === "basics") {
+ fetchConferencingOptions();
+ }
+ }, [activeTab]);
+
+ useEffect(() => {
+ // Fetch event type data and conferencing options on initial load
+ fetchEventTypeData();
+ fetchConferencingOptions();
+ }, [id]);
+
+ useEffect(() => {
+ const fetchUsername = async () => {
+ try {
+ const userUsername = await CalComAPIService.getUsername();
+ setUsername(userUsername);
+ } catch (error) {
+ console.error("Failed to fetch username:", error);
+ }
+ };
+ fetchUsername();
+ }, []);
+
+ const formatTime = (time: string) => {
+ try {
+ // Handle different time formats that might come from the API
+ let date: Date;
+
+ if (time.includes(":")) {
+ // Format like "09:00" or "09:00:00"
+ const [hours, minutes] = time.split(":").map(Number);
+ date = new Date();
+ date.setHours(hours, minutes || 0, 0, 0);
+ } else {
+ // Other formats
+ date = new Date(time);
+ }
+
+ return date.toLocaleTimeString("en-US", {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ });
+ } catch (error) {
+ return time; // Return original if parsing fails
+ }
+ };
+
+ const getDaySchedule = () => {
+ if (!selectedScheduleDetails) {
+ console.log("No selectedScheduleDetails");
+ return [];
+ }
+
+ console.log("selectedScheduleDetails:", selectedScheduleDetails);
+ console.log("availability:", selectedScheduleDetails.availability);
+
+ const daysOfWeek = [
+ "Sunday",
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ ];
+
+ const daySchedule = daysOfWeek.map((day) => {
+ // Try different possible day formats
+ const dayLower = day.toLowerCase();
+ const dayUpper = day.toUpperCase();
+ const dayShort = day.substring(0, 3).toLowerCase(); // mon, tue, etc.
+ const dayShortUpper = day.substring(0, 3).toUpperCase();
+
+ const availability = selectedScheduleDetails.availability?.find((avail) => {
+ if (!avail.days || !Array.isArray(avail.days)) return false;
+
+ return avail.days.some(
+ (d) =>
+ d === dayLower ||
+ d === dayUpper ||
+ d === day ||
+ d === dayShort ||
+ d === dayShortUpper ||
+ d.toLowerCase() === dayLower
+ );
+ });
+
+ console.log(`${day}: availability found:`, availability);
+
+ return {
+ day,
+ available: !!availability,
+ startTime: availability?.startTime,
+ endTime: availability?.endTime,
+ };
+ });
+
+ return daySchedule;
+ };
+
+ const handlePreview = async () => {
+ try {
+ const eventTypeSlug = eventSlug || "preview";
+ const link = await CalComAPIService.buildEventTypeLink(eventTypeSlug);
+
+ const supported = await Linking.canOpenURL(link);
+ if (supported) {
+ await Linking.openURL(link);
+ } else {
+ Alert.alert("Error", "Cannot open this URL on your device.");
+ }
+ } catch (error) {
+ console.error("Failed to generate preview link:", error);
+ Alert.alert("Error", "Failed to generate preview link. Please try again.");
+ }
+ };
+
+ const handleCopyLink = async () => {
+ try {
+ const eventTypeSlug = eventSlug || "event-link";
+ const link = await CalComAPIService.buildEventTypeLink(eventTypeSlug);
+
+ Clipboard.setString(link);
+ Alert.alert("Success", "Link copied!");
+ } catch (error) {
+ console.error("Failed to copy link:", error);
+ Alert.alert("Error", "Failed to copy link. Please try again.");
+ }
+ };
+
+ const handleDelete = () => {
+ Alert.alert("Delete Event Type", `Are you sure you want to delete "${eventTitle}"?`, [
+ { text: "Cancel", style: "cancel" },
+ {
+ text: "Delete",
+ style: "destructive",
+ onPress: async () => {
+ try {
+ console.log("Attempting to delete event type with ID:", id);
+ const eventTypeId = parseInt(id);
+
+ if (isNaN(eventTypeId)) {
+ throw new Error("Invalid event type ID");
+ }
+
+ await CalComAPIService.deleteEventType(eventTypeId);
+ console.log("Event type deleted successfully");
+
+ Alert.alert("Success", "Event type deleted successfully", [
+ {
+ text: "OK",
+ onPress: () => {
+ console.log("Navigating back after successful deletion");
+ router.back();
+ },
+ },
+ ]);
+ } catch (error) {
+ console.error("Failed to delete event type:", error);
+ const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
+ Alert.alert("Error", `Failed to delete event type: ${errorMessage}`);
+ }
+ },
+ },
+ ]);
+ };
+
+ const handleSave = async () => {
+ if (!id) {
+ Alert.alert("Error", "Event type ID is missing");
+ return;
+ }
+
+ // Validate required fields
+ if (!eventTitle || !eventSlug) {
+ Alert.alert("Error", "Title and slug are required");
+ return;
+ }
+
+ const durationNum = parseInt(eventDuration);
+ if (isNaN(durationNum) || durationNum <= 0) {
+ Alert.alert("Error", "Duration must be a positive number");
+ return;
+ }
+
+ try {
+ setSaving(true);
+
+ // Build location payload if a location is selected
+ let locationsPayload:
+ | Array<{
+ type: string;
+ integration?: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ public?: boolean;
+ }>
+ | undefined;
+
+ if (selectedLocation) {
+ const locationValue = displayNameToLocationValue(selectedLocation);
+ if (!locationValue) {
+ Alert.alert("Error", "Invalid location selected");
+ setSaving(false);
+ return;
+ }
+
+ // Get existing location data to preserve values (address, link, phone)
+ const existingLocation = eventTypeData?.locations?.[0];
+
+ // Build location payload based on type
+ const locationPayload: {
+ type: string;
+ integration?: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ public?: boolean;
+ } = {
+ type: locationValue.type,
+ };
+
+ // Add type-specific fields based on location type
+ if (locationValue.type === "integration") {
+ locationPayload.integration = locationValue.integration;
+ locationPayload.public = locationValue.public ?? true;
+ } else if (locationValue.type === "address") {
+ locationPayload.address = locationAddress || existingLocation?.address || "";
+ locationPayload.public = true;
+ } else if (locationValue.type === "link") {
+ locationPayload.link = locationLink || existingLocation?.link || "";
+ locationPayload.public = true;
+ } else if (locationValue.type === "phone") {
+ locationPayload.phone = locationPhone || existingLocation?.phone || "";
+ locationPayload.public = true;
+ }
+
+ locationsPayload = [locationPayload];
+ }
+
+ // Build the payload with all fields
+ const payload: any = {
+ title: eventTitle,
+ slug: eventSlug,
+ lengthInMinutes: durationNum,
+ };
+
+ // Add optional fields if they have values
+ if (eventDescription) {
+ payload.description = eventDescription;
+ }
+
+ if (locationsPayload) {
+ payload.locations = locationsPayload;
+ }
+
+ if (selectedSchedule) {
+ payload.scheduleId = selectedSchedule.id;
+ }
+
+ if (isHidden !== undefined) {
+ payload.hidden = isHidden;
+ }
+
+ // Add buffer times if set
+ if (beforeEventBuffer && beforeEventBuffer !== "No buffer time") {
+ const bufferMinutes = parseBufferTime(beforeEventBuffer);
+ if (bufferMinutes > 0) {
+ payload.beforeEventBuffer = bufferMinutes;
+ }
+ }
+
+ if (afterEventBuffer && afterEventBuffer !== "No buffer time") {
+ const bufferMinutes = parseBufferTime(afterEventBuffer);
+ if (bufferMinutes > 0) {
+ payload.afterEventBuffer = bufferMinutes;
+ }
+ }
+
+ // Add minimum booking notice
+ if (minimumNoticeValue && minimumNoticeUnit) {
+ const noticeMinutes = parseMinimumNotice(minimumNoticeValue, minimumNoticeUnit);
+ if (noticeMinutes > 0) {
+ payload.minimumBookingNotice = noticeMinutes;
+ }
+ }
+
+ // Add booking limits if enabled
+ if (limitBookingFrequency && frequencyLimits.length > 0) {
+ const limitsCount: any = {};
+ frequencyLimits.forEach((limit) => {
+ const unit = parseFrequencyUnit(limit.unit);
+ if (unit) {
+ limitsCount[unit] = parseInt(limit.value) || 1;
+ }
+ });
+ if (Object.keys(limitsCount).length > 0) {
+ payload.bookingLimitsCount = limitsCount;
+ }
+ }
+
+ if (limitTotalDuration && durationLimits.length > 0) {
+ const limitsDuration: any = {};
+ durationLimits.forEach((limit) => {
+ const unit = parseFrequencyUnit(limit.unit);
+ if (unit) {
+ limitsDuration[unit] = parseInt(limit.value) || 60;
+ }
+ });
+ if (Object.keys(limitsDuration).length > 0) {
+ payload.bookingLimitsDuration = limitsDuration;
+ }
+ }
+
+ // Add slot interval if not default
+ if (slotInterval && slotInterval !== "Default") {
+ const intervalMinutes = parseSlotInterval(slotInterval);
+ if (intervalMinutes > 0) {
+ payload.slotInterval = intervalMinutes;
+ }
+ }
+
+ // Add other boolean flags
+ if (onlyShowFirstAvailableSlot) {
+ payload.onlyShowFirstAvailableSlot = true;
+ }
+
+ if (maxActiveBookingsPerBooker && maxActiveBookingsValue) {
+ const count = parseInt(maxActiveBookingsValue);
+ if (count > 0) {
+ payload.bookerActiveBookingsLimit = { count };
+ }
+ }
+
+ // Add booking window (future bookings limit)
+ if (limitFutureBookings) {
+ if (futureBookingType === "range") {
+ payload.bookingWindow = {
+ type: "range",
+ value: [rangeStartDate, rangeEndDate],
+ };
+ } else {
+ payload.bookingWindow = {
+ type: rollingCalendarDays ? "calendarDays" : "businessDays",
+ value: parseInt(rollingDays),
+ rolling: true,
+ };
+ }
+ } else {
+ payload.bookingWindow = { disabled: true };
+ }
+
+ // Add Advanced tab fields
+ if (calendarEventName) {
+ payload.metadata = payload.metadata || {};
+ payload.metadata.calendarEventName = calendarEventName;
+ }
+
+ if (addToCalendarEmail) {
+ payload.metadata = payload.metadata || {};
+ payload.metadata.addToCalendarEmail = addToCalendarEmail;
+ }
+
+ // Booker layouts
+ if (selectedLayouts.length > 0) {
+ payload.bookerLayouts = {
+ enabledLayouts: selectedLayouts,
+ defaultLayout: defaultLayout,
+ };
+ }
+
+ // Confirmation policy
+ payload.requiresConfirmation = requiresConfirmation;
+
+ // Boolean flags - always set the actual boolean value so toggling off works
+ payload.metadata = {
+ ...(payload.metadata || {}),
+ disableCancelling,
+ disableRescheduling,
+ sendCalVideoTranscription,
+ autoTranslate,
+ hideCalendarEventDetails,
+ hideOrganizerEmail,
+ allowReschedulingPastEvents,
+ allowBookingThroughRescheduleLink,
+ };
+ payload.requiresBookerEmailVerification = requiresBookerEmailVerification;
+ payload.hideCalendarNotes = hideCalendarNotes;
+ payload.lockTimeZoneToggleOnBookingPage = lockTimezone;
+
+ // Redirect URL
+ if (successRedirectUrl) {
+ payload.successRedirectUrl = successRedirectUrl;
+ if (forwardParamsSuccessRedirect) {
+ payload.forwardParamsSuccessRedirect = true;
+ }
+ }
+
+ // Custom reply-to email
+ if (customReplyToEmail) {
+ payload.metadata = payload.metadata || {};
+ payload.metadata.customReplyToEmail = customReplyToEmail;
+ }
+
+ // Event type colors
+ if (eventTypeColorLight || eventTypeColorDark) {
+ payload.eventTypeColor = {
+ lightEventTypeColor: eventTypeColorLight,
+ darkEventTypeColor: eventTypeColorDark,
+ };
+ }
+
+ // Recurring event
+ if (recurringEnabled) {
+ payload.recurrence = {
+ interval: parseInt(recurringInterval) || 1,
+ occurrences: parseInt(recurringOccurrences) || 12,
+ frequency: recurringFrequency,
+ };
+ } else {
+ payload.recurrence = { disabled: true };
+ }
+
+ // Detect create vs update mode
+ const isCreateMode = id === "new";
+
+ if (isCreateMode) {
+ // Create new event type
+ const newEventType = await CalComAPIService.createEventType(payload);
+ Alert.alert("Success", "Event type created successfully", [
+ {
+ text: "OK",
+ onPress: () => router.back(),
+ },
+ ]);
+ } else {
+ // Update existing event type
+ await CalComAPIService.updateEventType(parseInt(id), payload);
+ Alert.alert("Success", "Event type updated successfully");
+ // Refresh event type data
+ await fetchEventTypeData();
+ }
+ } catch (error) {
+ console.error("Failed to save event type:", error);
+ const action = id === "new" ? "create" : "update";
+ Alert.alert("Error", `Failed to ${action} event type. Please try again.`);
+ } finally {
+ setSaving(false);
+ }
+ };
+
+ return (
+ <>
+
+ {/* Glass Header */}
+
+
+ router.back()}
+ >
+
+
+
+ {id === "new" ? "Create Event Type" : truncateTitle(title)}
+
+
+
+
+ {id === "new" ? "Create" : "Save"}
+
+
+
+
+
+ {/* Tabs */}
+
+
+ {tabs.map((tab) => (
+ setActiveTab(tab.id)}
+ >
+
+
+ {tab.label}
+
+
+
+ ))}
+
+
+
+ {/* Content */}
+
+ {activeTab === "basics" && (
+ setShowDurationDropdown(false)}
+ >
+ setShowDurationDropdown(false)}
+ >
+
+
+ Select Available Durations
+
+
+ {availableDurations.map((duration) => (
+ toggleDurationSelection(duration)}
+ >
+
+ {duration}
+
+ {selectedDurations.includes(duration) && (
+
+ ))}
+
+ setShowDurationDropdown(false)}
+ >
+ Done
+
+
+
+
+
+ {/* Default Duration Dropdown Modal */}
+ setShowDefaultDurationDropdown(false)}
+ >
+ setShowDefaultDurationDropdown(false)}
+ >
+
+
+ Select Default Duration
+
+ {selectedDurations.map((duration) => (
+ {
+ setDefaultDuration(duration);
+ setShowDefaultDurationDropdown(false);
+ }}
+ >
+
+ {duration}
+
+ {defaultDuration === duration && (
+
+ ))}
+
+
+
+
+ {/* Schedule Dropdown Modal */}
+ setShowScheduleDropdown(false)}
+ >
+ setShowScheduleDropdown(false)}
+ >
+
+
+ Select Schedule
+
+ {schedules.map((schedule) => (
+ {
+ setSelectedSchedule(schedule);
+ setShowScheduleDropdown(false);
+ fetchScheduleDetails(schedule.id);
+ }}
+ >
+
+
+ {schedule.name}
+
+ {schedule.isDefault && (
+
+ Default
+
+ )}
+
+ {selectedSchedule?.id === schedule.id && (
+
+ ))}
+
+
+
+
+ {/* Timezone Dropdown Modal */}
+ setShowTimezoneDropdown(false)}
+ >
+ setShowTimezoneDropdown(false)}
+ >
+
+
+ Select Timezone
+
+
+ {[
+ "America/New_York",
+ "America/Chicago",
+ "America/Denver",
+ "America/Los_Angeles",
+ "Europe/London",
+ "Europe/Paris",
+ "Europe/Berlin",
+ "Asia/Tokyo",
+ "Asia/Shanghai",
+ "Asia/Kolkata",
+ "Australia/Sydney",
+ "UTC",
+ ].map((tz) => (
+ {
+ setSelectedTimezone(tz);
+ setShowTimezoneDropdown(false);
+ }}
+ >
+
+ {tz}
+
+ {(selectedTimezone === tz ||
+ (selectedScheduleDetails?.timeZone === tz && !selectedTimezone)) && (
+
+ ))}
+
+
+
+
+
+ {/* Location Dropdown Modal */}
+ setShowLocationDropdown(false)}
+ >
+ setShowLocationDropdown(false)}
+ >
+
+ {conferencingLoading ? (
+
+ Loading locations...
+
+ ) : (
+ (() => {
+ const groups = getLocationOptions();
+ if (groups.length === 0) {
+ return (
+
+ No locations available
+
+ );
+ }
+ return (
+
+ {groups.map((group) => (
+
+ {/* Section Header */}
+
+
+ {group.category}
+
+
+ {/* Section Options */}
+ {group.options.map((option) => (
+ {
+ const newLocation = defaultLocations.find(
+ (loc) => loc.label === option.label
+ );
+ setSelectedLocation(option.label);
+ setShowLocationDropdown(false);
+ // Clear input values that are not needed for the new location
+ if (!newLocation || newLocation.type !== "inPerson") {
+ setLocationAddress("");
+ }
+ if (!newLocation || newLocation.type !== "link") {
+ setLocationLink("");
+ }
+ if (!newLocation || newLocation.type !== "userPhone") {
+ setLocationPhone("");
+ }
+ }}
+ >
+
+ {option.iconUrl ? (
+
+
+ ?
+
+
+ )}
+
+ {option.label}
+
+
+ {selectedLocation === option.label && (
+
+ ))}
+
+ ))}
+
+ );
+ })()
+ )}
+
+
+
+
+ {/* Before Event Buffer Dropdown Modal */}
+ setShowBeforeBufferDropdown(false)}
+ >
+ setShowBeforeBufferDropdown(false)}
+ >
+
+
+ Before event buffer
+
+ {bufferTimeOptions.map((option) => (
+ {
+ setBeforeEventBuffer(option);
+ setShowBeforeBufferDropdown(false);
+ }}
+ >
+
+ {option}
+
+ {beforeEventBuffer === option && (
+
+ ))}
+
+
+
+
+ {/* After Event Buffer Dropdown Modal */}
+ setShowAfterBufferDropdown(false)}
+ >
+ setShowAfterBufferDropdown(false)}
+ >
+
+
+ After event buffer
+
+ {bufferTimeOptions.map((option) => (
+ {
+ setAfterEventBuffer(option);
+ setShowAfterBufferDropdown(false);
+ }}
+ >
+
+ {option}
+
+ {afterEventBuffer === option && (
+
+ ))}
+
+
+
+
+ {/* Minimum Notice Unit Dropdown Modal */}
+ setShowMinimumNoticeUnitDropdown(false)}
+ >
+ setShowMinimumNoticeUnitDropdown(false)}
+ >
+
+
+ Time unit
+
+ {timeUnitOptions.map((option) => (
+ {
+ setMinimumNoticeUnit(option);
+ setShowMinimumNoticeUnitDropdown(false);
+ }}
+ >
+
+ {option}
+
+ {minimumNoticeUnit === option && (
+
+ ))}
+
+
+
+
+ {/* Frequency Unit Dropdown Modal */}
+ setShowFrequencyUnitDropdown(null)}
+ >
+ setShowFrequencyUnitDropdown(null)}
+ >
+
+
+ Frequency unit
+
+ {frequencyUnitOptions.map((option) => {
+ const selectedLimit = frequencyLimits.find(
+ (limit) => limit.id === showFrequencyUnitDropdown
+ );
+ const isSelected = selectedLimit?.unit === option;
+ return (
+ {
+ if (showFrequencyUnitDropdown) {
+ updateFrequencyLimit(showFrequencyUnitDropdown, "unit", option);
+ }
+ setShowFrequencyUnitDropdown(null);
+ }}
+ >
+
+ {option}
+
+ {isSelected &&
+ );
+ })}
+
+
+
+
+ {/* Duration Unit Dropdown Modal */}
+ setShowDurationUnitDropdown(null)}
+ >
+ setShowDurationUnitDropdown(null)}
+ >
+
+
+ Duration unit
+
+ {durationUnitOptions.map((option) => {
+ const selectedLimit = durationLimits.find(
+ (limit) => limit.id === showDurationUnitDropdown
+ );
+ const isSelected = selectedLimit?.unit === option;
+ return (
+ {
+ if (showDurationUnitDropdown) {
+ updateDurationLimit(showDurationUnitDropdown, "unit", option);
+ }
+ setShowDurationUnitDropdown(null);
+ }}
+ >
+
+ {option}
+
+ {isSelected &&
+ );
+ })}
+
+
+
+
+ {/* Slot Interval Dropdown Modal */}
+ setShowSlotIntervalDropdown(false)}
+ >
+ setShowSlotIntervalDropdown(false)}
+ >
+
+
+ Slot interval
+
+ {slotIntervalOptions.map((option) => (
+ {
+ setSlotInterval(option);
+ setShowSlotIntervalDropdown(false);
+ }}
+ >
+
+ {option}
+
+ {slotInterval === option && (
+
+ ))}
+
+
+
+
+ {activeTab === "availability" && (
+
+ Connected Apps
+
+ Manage app integrations for this event type.
+
+
+ )}
+
+ {activeTab === "workflows" && (
+
+ Workflows
+
+ Configure automated workflows and actions.
+
+
+ )}
+
+ {activeTab === "webhooks" && (
+
+ Webhooks
+
+ Set up webhook endpoints for event notifications.
+
+
+ )}
+
+
+ {/* Bottom Action Bar */}
+
+
+
+ Hidden
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/companion/app/event-type-detail/constants.ts b/companion/app/event-type-detail/constants.ts
new file mode 100644
index 0000000000..dff9194f1e
--- /dev/null
+++ b/companion/app/event-type-detail/constants.ts
@@ -0,0 +1,79 @@
+// Constants for Event Type Detail screen
+
+export const bufferTimeOptions = [
+ "No buffer time",
+ "5 Minutes",
+ "10 Minutes",
+ "15 Minutes",
+ "20 Minutes",
+ "30 Minutes",
+ "45 Minutes",
+ "60 Minutes",
+ "90 Minutes",
+ "120 Minutes",
+];
+
+export const timeUnitOptions = ["Minutes", "Hours", "Days"];
+
+export const frequencyUnitOptions = ["Per day", "Per Month", "Per year"];
+
+export const durationUnitOptions = ["Per day", "Per week", "Per month"];
+
+export const slotIntervalOptions = [
+ "Default",
+ "5 Minutes",
+ "10 Minutes",
+ "15 Minutes",
+ "20 Minutes",
+ "30 Minutes",
+ "45 Minutes",
+ "60 Minutes",
+ "75 Minutes",
+ "90 Minutes",
+ "105 Minutes",
+ "120 Minutes",
+];
+
+export const availableDurations = [
+ "5 mins",
+ "10 mins",
+ "15 mins",
+ "20 mins",
+ "25 mins",
+ "30 mins",
+ "45 mins",
+ "50 mins",
+ "60 mins",
+ "75 mins",
+ "80 mins",
+ "90 mins",
+ "120 mins",
+ "150 mins",
+ "180 mins",
+ "240 mins",
+ "300 mins",
+ "360 mins",
+ "420 mins",
+ "480 mins",
+];
+
+export const defaultLocations = [
+ { label: "Attendee Address", type: "attendeeInPerson" as const },
+ { label: "Organizer Address", type: "inPerson" as const },
+ { label: "Link Meeting", type: "link" as const },
+ { label: "Attendee Phone Number", type: "phone" as const },
+ { label: "Organizer Phone Number", type: "userPhone" as const },
+];
+
+export const tabs = [
+ { id: "basics", label: "Basics" },
+ { id: "availability", label: "Availability" },
+ { id: "limits", label: "Limits" },
+ { id: "advanced", label: "Advanced" },
+ { id: "recurring", label: "Recurring" },
+ { id: "apps", label: "Apps" },
+ { id: "webhooks", label: "Webhooks" },
+ { id: "private-links", label: "Private Links" },
+ { id: "seats", label: "Seats" },
+ { id: "colors", label: "Colors" },
+];
diff --git a/companion/app/event-type-detail/tabs/AdvancedTab.tsx b/companion/app/event-type-detail/tabs/AdvancedTab.tsx
new file mode 100644
index 0000000000..754d1ddf70
--- /dev/null
+++ b/companion/app/event-type-detail/tabs/AdvancedTab.tsx
@@ -0,0 +1,521 @@
+import React from "react";
+import { View, Text, TextInput, TouchableOpacity, Switch, Alert } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+interface AdvancedTabProps {
+ // Calendar event name
+ calendarEventName: string;
+ setCalendarEventName: (value: string) => void;
+
+ // Add to calendar email
+ addToCalendarEmail: string;
+ setAddToCalendarEmail: (value: string) => void;
+
+ // Layout
+ selectedLayouts: string[];
+ setSelectedLayouts: (layouts: string[]) => void;
+ defaultLayout: string;
+ setDefaultLayout: (layout: string) => void;
+
+ // Confirmation settings
+ requiresConfirmation: boolean;
+ setRequiresConfirmation: (value: boolean) => void;
+ disableCancelling: boolean;
+ setDisableCancelling: (value: boolean) => void;
+ disableRescheduling: boolean;
+ setDisableRescheduling: (value: boolean) => void;
+
+ // Additional settings
+ sendCalVideoTranscription: boolean;
+ setSendCalVideoTranscription: (value: boolean) => void;
+ autoTranslate: boolean;
+ setAutoTranslate: (value: boolean) => void;
+ requiresBookerEmailVerification: boolean;
+ setRequiresBookerEmailVerification: (value: boolean) => void;
+ hideCalendarNotes: boolean;
+ setHideCalendarNotes: (value: boolean) => void;
+ hideCalendarEventDetails: boolean;
+ setHideCalendarEventDetails: (value: boolean) => void;
+ hideOrganizerEmail: boolean;
+ setHideOrganizerEmail: (value: boolean) => void;
+ lockTimezone: boolean;
+ setLockTimezone: (value: boolean) => void;
+ allowReschedulingPastEvents: boolean;
+ setAllowReschedulingPastEvents: (value: boolean) => void;
+ allowBookingThroughRescheduleLink: boolean;
+ setAllowBookingThroughRescheduleLink: (value: boolean) => void;
+
+ // Redirect on booking
+ successRedirectUrl: string;
+ setSuccessRedirectUrl: (value: string) => void;
+ forwardParamsSuccessRedirect: boolean;
+ setForwardParamsSuccessRedirect: (value: boolean) => void;
+
+ // Custom reply-to email
+ customReplyToEmail: string;
+ setCustomReplyToEmail: (value: string) => void;
+
+ // Event type colors
+ eventTypeColorLight: string;
+ setEventTypeColorLight: (value: string) => void;
+ eventTypeColorDark: string;
+ setEventTypeColorDark: (value: string) => void;
+}
+
+export function AdvancedTab(props: AdvancedTabProps) {
+ const layoutOptions = [
+ { id: "MONTH_VIEW", label: "Month", icon: "calendar-outline" },
+ { id: "WEEK_VIEW", label: "Weekly", icon: "calendar-outline" },
+ { id: "COLUMN_VIEW", label: "Column", icon: "list-outline" },
+ ];
+
+ return (
+
+ {/* Calendar Event Name Card */}
+
+ Calendar event name
+
+ Use variables like {"{"}Scheduler{"}"} for booker name, {"{"}Organizer{"}"} for your name
+
+
+
+ {/* Add to Calendar Card */}
+
+ Add to calendar
+
+ We'll display this email address as the organizer, and send confirmation emails here.
+
+
+
+ {/* Layout Card */}
+
+ Layout
+
+ You can select multiple and your bookers can switch views.
+
+
+ {/* Layout Options */}
+
+ {layoutOptions.map((layout) => (
+ {
+ if (props.selectedLayouts.includes(layout.id)) {
+ // Don't allow deselecting if it's the only one
+ if (props.selectedLayouts.length > 1) {
+ props.setSelectedLayouts(props.selectedLayouts.filter((l) => l !== layout.id));
+ // If removing the default, set a new default
+ if (props.defaultLayout === layout.id) {
+ const remaining = props.selectedLayouts.filter((l) => l !== layout.id);
+ props.setDefaultLayout(remaining[0]);
+ }
+ }
+ } else {
+ props.setSelectedLayouts([...props.selectedLayouts, layout.id]);
+ }
+ }}
+ >
+
+ {layout.label}
+
+ {props.selectedLayouts.includes(layout.id) && (
+
+ ))}
+
+
+ {/* Default View */}
+ {props.selectedLayouts.length > 1 && (
+
+ Default view
+
+ {props.selectedLayouts.map((layoutId) => {
+ const layout = layoutOptions.find((l) => l.id === layoutId);
+ if (!layout) return null;
+ return (
+ props.setDefaultLayout(layout.id)}
+ >
+ {layout.label}
+ {props.defaultLayout === layout.id && (
+
+ );
+ })}
+
+
+ )}
+
+
+ {/* Booking Questions Card */}
+
+ Booking questions
+
+ Customize the questions asked on the booking page.
+
+
+ Alert.alert("Coming Soon", "Booking questions customization will be available soon.")
+ }
+ >
+ Manage booking questions
+
+
+
+ {/* Requires confirmation */}
+
+
+
+ Requires confirmation
+
+ The booking needs to be manually confirmed before it is pushed to your calendar
+
+
+
+
+
+ {/* Disable Cancelling */}
+
+
+
+ Disable Cancelling
+
+ Guests can no longer cancel the event with calendar invite or email
+
+
+
+
+
+ {/* Disable Rescheduling */}
+
+
+
+ Disable Rescheduling
+
+ Guests can no longer reschedule the event with calendar invite or email
+
+
+
+
+
+ {/* Send Cal Video Transcription Emails */}
+
+
+
+
+ Send Cal Video Transcription Emails
+
+
+ Send emails with the transcription of the Cal Video after the meeting ends
+
+
+
+
+
+ {/* Auto translate */}
+
+
+
+
+ Auto translate title and description
+
+
+ Automatically translate titles and descriptions to the visitor's browser language
+ using AI
+
+
+
+
+
+ {/* Requires booker email verification */}
+
+
+
+
+ Requires booker email verification
+
+
+ To ensure booker's email verification before scheduling events
+
+
+
+
+
+ {/* Hide notes in calendar */}
+
+
+
+ Hide notes in calendar
+
+ For privacy reasons, additional inputs and notes will be hidden in the calendar entry
+
+
+
+
+
+ {/* Hide calendar event details */}
+
+
+
+
+ Hide calendar event details on shared calendars
+
+
+ When a calendar is shared, events are visible but details are hidden from those
+ without write access
+
+
+
+
+
+ {/* Hide organizer's email */}
+
+
+
+ Hide organizer's email
+
+ Hide organizer's email address from the booking screen, email notifications, and
+ calendar events
+
+
+
+
+
+ {/* Lock timezone */}
+
+
+
+
+ Lock timezone on booking page
+
+
+ To lock the timezone on booking page, useful for in-person events
+
+
+
+
+
+ {/* Allow rescheduling past events */}
+
+
+
+
+ Allow rescheduling past events
+
+
+ Enabling this option allows for past events to be rescheduled
+
+
+
+
+
+ {/* Allow booking through reschedule link */}
+
+
+
+
+ Allow booking through reschedule link
+
+
+ When enabled, users will be able to create a new booking when trying to reschedule a
+ cancelled booking
+
+
+
+
+
+ {/* Redirect on booking Card */}
+
+ Redirect on booking
+
+ Redirect to a custom URL after a successful booking
+
+
+ Forward query parameters
+
+
+
+ {/* Custom Reply-To Email Card */}
+
+ Custom 'Reply-To' email
+
+ Use a different email address as the replyTo for confirmation emails instead of the
+ organizer's email
+
+
+
+ {/* Event Type Color Card */}
+
+ Event type color
+
+ This is only used for event type & booking differentiation within the app. It is not
+ displayed to bookers.
+
+
+
+ Light theme color
+
+
+
+
+ Dark theme color
+
+
+
+
+
+
+ );
+}
diff --git a/companion/app/event-type-detail/tabs/AvailabilityTab.tsx b/companion/app/event-type-detail/tabs/AvailabilityTab.tsx
new file mode 100644
index 0000000000..6096989fcf
--- /dev/null
+++ b/companion/app/event-type-detail/tabs/AvailabilityTab.tsx
@@ -0,0 +1,110 @@
+import React from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Schedule } from "../../../services/calcom";
+
+interface DaySchedule {
+ day: string;
+ available: boolean;
+ startTime?: string;
+ endTime?: string;
+}
+
+interface AvailabilityTabProps {
+ selectedSchedule: Schedule | null;
+ setShowScheduleDropdown: (show: boolean) => void;
+ schedulesLoading: boolean;
+ scheduleDetailsLoading: boolean;
+ selectedScheduleDetails: any;
+ getDaySchedule: () => DaySchedule[];
+ formatTime: (time: string) => string;
+ selectedTimezone: string;
+}
+
+export function AvailabilityTab(props: AvailabilityTabProps) {
+ return (
+
+
+ Availability
+ props.setShowScheduleDropdown(true)}
+ disabled={props.schedulesLoading}
+ >
+
+ {props.schedulesLoading
+ ? "Loading schedules..."
+ : props.selectedSchedule
+ ? props.selectedSchedule.name
+ : "Select schedule"}
+
+
+
+
+ {props.selectedSchedule && (
+ <>
+
+ {props.scheduleDetailsLoading ? (
+
+ Loading schedule details...
+
+ ) : props.selectedScheduleDetails ? (
+ props.getDaySchedule().map((dayInfo, index) => (
+
+
+ {dayInfo.day}
+
+
+ {dayInfo.available && dayInfo.startTime && dayInfo.endTime
+ ? `${props.formatTime(dayInfo.startTime)} - ${props.formatTime(dayInfo.endTime)}`
+ : "Unavailable"}
+
+
+ ))
+ ) : (
+
+
+ Failed to load schedule details
+
+
+ )}
+
+
+
+ Timezone
+
+
+ {props.selectedTimezone || props.selectedScheduleDetails?.timeZone || "No timezone"}
+
+
+
+
+ )}
+
+ );
+}
diff --git a/companion/app/event-type-detail/tabs/BasicsTab.tsx b/companion/app/event-type-detail/tabs/BasicsTab.tsx
new file mode 100644
index 0000000000..939486c06d
--- /dev/null
+++ b/companion/app/event-type-detail/tabs/BasicsTab.tsx
@@ -0,0 +1,257 @@
+import React from "react";
+import { View, Text, TextInput, TouchableOpacity, Switch } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SvgImage } from "../../../components/SvgImage";
+import { defaultLocations, DefaultLocationType } from "../../../utils/defaultLocations";
+import { slugify } from "../../../utils/slugify";
+
+interface BasicsTabProps {
+ // Title, description, URL
+ eventTitle: string;
+ setEventTitle: (value: string) => void;
+ eventDescription: string;
+ setEventDescription: (value: string) => void;
+ username: string;
+ eventSlug: string;
+ setEventSlug: (value: string) => void;
+
+ // Duration
+ allowMultipleDurations: boolean;
+ setAllowMultipleDurations: (value: boolean) => void;
+ eventDuration: string;
+ setEventDuration: (value: string) => void;
+ selectedDurations: string[];
+ setShowDurationDropdown: (show: boolean) => void;
+ defaultDuration: string;
+ setShowDefaultDurationDropdown: (show: boolean) => void;
+
+ // Location
+ selectedLocation: string;
+ setShowLocationDropdown: (show: boolean) => void;
+ conferencingLoading: boolean;
+ getSelectedLocationIconUrl: () => string | null;
+ locationAddress: string;
+ setLocationAddress: (value: string) => void;
+ locationLink: string;
+ setLocationLink: (value: string) => void;
+ locationPhone: string;
+ setLocationPhone: (value: string) => void;
+}
+
+export function BasicsTab(props: BasicsTabProps) {
+ return (
+
+ {/* Title and Description Card */}
+
+
+ Title
+
+
+
+ Description
+
+
+
+ URL
+
+
+ cal.com/{props.username}/
+
+ props.setEventSlug(slugify(text, true))}
+ placeholder="event-slug"
+ placeholderTextColor="#8E8E93"
+ />
+
+
+
+
+ {/* Duration Card */}
+
+ {!props.allowMultipleDurations && (
+
+ Duration
+
+ Minutes
+
+
+ )}
+
+ {props.allowMultipleDurations && (
+ <>
+
+
+ Available durations
+
+ props.setShowDurationDropdown(true)}
+ >
+
+ {props.selectedDurations.length > 0
+ ? `${props.selectedDurations.length} duration${
+ props.selectedDurations.length > 1 ? "s" : ""
+ } selected`
+ : "Select durations"}
+
+
+
+
+ {props.selectedDurations.length > 0 && (
+
+ Default duration
+ props.setShowDefaultDurationDropdown(true)}
+ >
+
+ {props.defaultDuration || "Select default duration"}
+
+
+
+ )}
+
+ )}
+
+
+ Allow multiple durations
+
+
+
+ {/* Location Card */}
+
+
+ Location
+ props.setShowLocationDropdown(true)}
+ disabled={props.conferencingLoading}
+ >
+
+ {!props.conferencingLoading &&
+ props.selectedLocation &&
+ props.getSelectedLocationIconUrl() && (
+
+ {props.conferencingLoading
+ ? "Loading locations..."
+ : props.selectedLocation || "Select location"}
+
+
+
+
+ {/* Location Input Fields - shown conditionally based on selected location type */}
+ {(() => {
+ const currentLocation = defaultLocations.find(
+ (loc) => loc.label === props.selectedLocation
+ );
+ if (!currentLocation || !currentLocation.organizerInputType) {
+ return null;
+ }
+
+ if (currentLocation.organizerInputType === "text") {
+ // Text input for address or link
+ const isAddress = currentLocation.type === "inPerson";
+ const isLink = currentLocation.type === "link";
+
+ return (
+
+
+ {currentLocation.organizerInputLabel ||
+ (isAddress ? "Address" : "Meeting Link")}
+
+ {
+ if (isAddress) {
+ props.setLocationAddress(text);
+ } else {
+ props.setLocationLink(text);
+ }
+ }}
+ autoCapitalize="none"
+ autoCorrect={false}
+ keyboardType={isLink ? "url" : "default"}
+ />
+ {currentLocation.messageForOrganizer && (
+
+ {currentLocation.messageForOrganizer}
+
+ )}
+
+ );
+ } else if (currentLocation.organizerInputType === "phone") {
+ // Phone input
+ return (
+
+
+ {currentLocation.organizerInputLabel || "Phone Number"}
+
+
+ {currentLocation.messageForOrganizer}
+
+ )}
+
+ );
+ }
+ return null;
+ })()}
+
+
+
+ );
+}
diff --git a/companion/app/event-type-detail/tabs/LimitsTab.tsx b/companion/app/event-type-detail/tabs/LimitsTab.tsx
new file mode 100644
index 0000000000..5eea809a17
--- /dev/null
+++ b/companion/app/event-type-detail/tabs/LimitsTab.tsx
@@ -0,0 +1,500 @@
+import React from "react";
+import { View, Text, TextInput, TouchableOpacity, Switch, Animated } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import {
+ bufferTimeOptions,
+ timeUnitOptions,
+ frequencyUnitOptions,
+ durationUnitOptions,
+ slotIntervalOptions,
+} from "../constants";
+
+interface FrequencyLimit {
+ id: number;
+ value: string;
+ unit: string;
+}
+
+interface DurationLimit {
+ id: number;
+ value: string;
+ unit: string;
+}
+
+interface LimitsTabProps {
+ // Buffer times
+ beforeEventBuffer: string;
+ setShowBeforeBufferDropdown: (show: boolean) => void;
+ afterEventBuffer: string;
+ setShowAfterBufferDropdown: (show: boolean) => void;
+
+ // Minimum notice
+ minimumNoticeValue: string;
+ setMinimumNoticeValue: (value: string) => void;
+ minimumNoticeUnit: string;
+ setShowMinimumNoticeUnitDropdown: (show: boolean) => void;
+
+ // Slot interval
+ slotInterval: string;
+ setShowSlotIntervalDropdown: (show: boolean) => void;
+
+ // Booking frequency
+ limitBookingFrequency: boolean;
+ toggleBookingFrequency: (value: boolean) => void;
+ frequencyAnimationValue: Animated.Value;
+ frequencyLimits: FrequencyLimit[];
+ updateFrequencyLimit: (id: number, field: string, value: string) => void;
+ setShowFrequencyUnitDropdown: (id: number) => void;
+ removeFrequencyLimit: (id: number) => void;
+ addFrequencyLimit: () => void;
+
+ // Total duration
+ limitTotalDuration: boolean;
+ toggleTotalDuration: (value: boolean) => void;
+ durationAnimationValue: Animated.Value;
+ durationLimits: DurationLimit[];
+ updateDurationLimit: (id: number, field: string, value: string) => void;
+ setShowDurationUnitDropdown: (id: number) => void;
+ removeDurationLimit: (id: number) => void;
+ addDurationLimit: () => void;
+
+ // Only show first slot
+ onlyShowFirstAvailableSlot: boolean;
+ setOnlyShowFirstAvailableSlot: (value: boolean) => void;
+
+ // Max active bookings
+ maxActiveBookingsPerBooker: boolean;
+ setMaxActiveBookingsPerBooker: (value: boolean) => void;
+ maxActiveBookingsValue: string;
+ setMaxActiveBookingsValue: (value: string) => void;
+
+ // Future bookings
+ limitFutureBookings: boolean;
+ setLimitFutureBookings: (value: boolean) => void;
+ futureBookingType: "rolling" | "range";
+ setFutureBookingType: (type: "rolling" | "range") => void;
+ rollingDays: string;
+ setRollingDays: (value: string) => void;
+ rollingCalendarDays: boolean;
+ setRollingCalendarDays: (value: boolean) => void;
+ rangeStartDate: string;
+ setRangeStartDate: (value: string) => void;
+ rangeEndDate: string;
+ setRangeEndDate: (value: string) => void;
+}
+
+export function LimitsTab(props: LimitsTabProps) {
+ return (
+
+ {/* Buffer Time, Minimum Notice, and Slot Interval Card */}
+
+
+ Before event
+ props.setShowBeforeBufferDropdown(true)}
+ >
+ {props.beforeEventBuffer}
+
+
+
+
+ After event
+ props.setShowAfterBufferDropdown(true)}
+ >
+ {props.afterEventBuffer}
+
+
+
+
+ Minimum Notice
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ const num = parseInt(numericValue) || 0;
+ if (num >= 0) {
+ props.setMinimumNoticeValue(numericValue || "0");
+ }
+ }}
+ placeholder="1"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ props.setShowMinimumNoticeUnitDropdown(true)}
+ >
+ {props.minimumNoticeUnit}
+
+
+
+
+
+ Time-slot intervals
+ props.setShowSlotIntervalDropdown(true)}
+ >
+
+ {props.slotInterval === "Default" ? "Use event length (default)" : props.slotInterval}
+
+
+
+
+
+ {/* Booking Frequency Limit Card */}
+
+
+
+ Limit booking frequency
+
+ Limit how many times this event can be booked.
+
+
+
+
+
+ {props.limitBookingFrequency && (
+ <>
+ {props.frequencyLimits.map((limit, index) => (
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ const num = parseInt(numericValue) || 0;
+ if (num >= 0) {
+ props.updateFrequencyLimit(limit.id, "value", numericValue || "0");
+ }
+ }}
+ placeholder="1"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ props.setShowFrequencyUnitDropdown(limit.id)}
+ >
+ {limit.unit}
+
+ {props.frequencyLimits.length > 1 && (
+ props.removeFrequencyLimit(limit.id)}
+ >
+
+ )}
+
+ ))}
+
+ Add Limit
+
+
+ )}
+
+
+
+ {/* Total Booking Duration Limit Card */}
+
+
+
+
+ Limit total booking duration
+
+
+ Limit total amount of time that this event can be booked.
+
+
+
+
+
+ {props.limitTotalDuration && (
+ <>
+ {props.durationLimits.map((limit, index) => (
+
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ const num = parseInt(numericValue) || 0;
+ if (num >= 0) {
+ props.updateDurationLimit(limit.id, "value", numericValue || "0");
+ }
+ }}
+ placeholder="60"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ Minutes
+
+ props.setShowDurationUnitDropdown(limit.id)}
+ >
+ {limit.unit}
+
+ {props.durationLimits.length > 1 && (
+ props.removeDurationLimit(limit.id)}
+ >
+
+ )}
+
+ ))}
+
+ Add Limit
+
+
+ )}
+
+
+
+ {/* Only Show First Available Slot Card */}
+
+
+
+
+ Only show the first slot of each day as available
+
+
+ This will limit your availability for this event type to one slot per day, scheduled
+ at the earliest available time.
+
+
+
+
+
+ {/* Max Active Bookings Per Booker Card */}
+
+
+
+
+ Limit number of upcoming bookings per booker
+
+
+ Limit the number of active bookings a booker can make for this event type.
+
+
+
+ {props.maxActiveBookingsPerBooker && (
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ const num = parseInt(numericValue) || 0;
+ if (num >= 0) {
+ props.setMaxActiveBookingsValue(numericValue || "1");
+ }
+ }}
+ placeholder="1"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+
+ )}
+
+
+ {/* Limit Future Bookings Card */}
+
+
+
+ Limit future bookings
+
+ Limit how far in the future this event can be booked.
+
+
+
+ {props.limitFutureBookings && (
+
+
+ props.setFutureBookingType("rolling")}
+ >
+
+ Rolling
+
+
+ props.setFutureBookingType("range")}
+ >
+
+ Date Range
+
+
+
+ {props.futureBookingType === "rolling" && (
+
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ const num = parseInt(numericValue) || 0;
+ if (num >= 0) {
+ props.setRollingDays(numericValue || "30");
+ }
+ }}
+ placeholder="30"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ props.setRollingCalendarDays(!props.rollingCalendarDays)}
+ >
+
+ {props.rollingCalendarDays ? "Calendar days" : "Business days"}
+
+
+
+ days into the future
+
+ )}
+ {props.futureBookingType === "range" && (
+
+
+ Start date
+
+
+ End date
+
+
+ )}
+
+ )}
+
+
+ );
+}
diff --git a/companion/app/event-type-detail/tabs/RecurringTab.tsx b/companion/app/event-type-detail/tabs/RecurringTab.tsx
new file mode 100644
index 0000000000..d779fdef14
--- /dev/null
+++ b/companion/app/event-type-detail/tabs/RecurringTab.tsx
@@ -0,0 +1,137 @@
+import React from "react";
+import { View, Text, TextInput, TouchableOpacity, Switch, Alert } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+
+interface RecurringTabProps {
+ recurringEnabled: boolean;
+ setRecurringEnabled: (value: boolean) => void;
+ recurringInterval: string;
+ setRecurringInterval: (value: string) => void;
+ recurringFrequency: "daily" | "weekly" | "monthly" | "yearly";
+ setRecurringFrequency: (value: "daily" | "weekly" | "monthly" | "yearly") => void;
+ recurringOccurrences: string;
+ setRecurringOccurrences: (value: string) => void;
+}
+
+export function RecurringTab({
+ recurringEnabled,
+ setRecurringEnabled,
+ recurringInterval,
+ setRecurringInterval,
+ recurringFrequency,
+ setRecurringFrequency,
+ recurringOccurrences,
+ setRecurringOccurrences,
+}: RecurringTabProps) {
+ return (
+
+ {/* Recurring Event Toggle Card */}
+
+
+
+ Recurring event
+
+ Set up this event type to repeat at regular intervals
+
+
+
+
+
+ {/* Recurring Configuration Card - shown when enabled */}
+ {recurringEnabled && (
+
+ Recurrence pattern
+
+ {/* Repeats Every */}
+
+ Repeats every
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ // Don't allow empty or 0 values; fall back to 1 so users can keep editing
+ if (numericValue === "" || numericValue === "0") {
+ setRecurringInterval("1");
+ return;
+ }
+ const num = parseInt(numericValue);
+ if (num >= 1 && num <= 20) {
+ setRecurringInterval(numericValue);
+ }
+ }}
+ placeholder="1"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ {
+ Alert.alert("Select Frequency", "Choose how often this event repeats", [
+ {
+ text: "Daily",
+ onPress: () => setRecurringFrequency("daily"),
+ },
+ {
+ text: "Weekly",
+ onPress: () => setRecurringFrequency("weekly"),
+ },
+ {
+ text: "Monthly",
+ onPress: () => setRecurringFrequency("monthly"),
+ },
+ {
+ text: "Yearly",
+ onPress: () => setRecurringFrequency("yearly"),
+ },
+ { text: "Cancel", style: "cancel" },
+ ]);
+ }}
+ >
+ {recurringFrequency}
+
+
+
+
+ {/* Maximum Occurrences */}
+
+ Maximum number of events
+
+ {
+ const numericValue = text.replace(/[^0-9]/g, "");
+ // Don't allow empty or 0 values; fall back to 1 so users can keep editing
+ if (numericValue === "" || numericValue === "0") {
+ setRecurringOccurrences("1");
+ return;
+ }
+ const num = parseInt(numericValue);
+ if (num >= 1) {
+ setRecurringOccurrences(numericValue);
+ }
+ }}
+ placeholder="12"
+ placeholderTextColor="#8E8E93"
+ keyboardType="numeric"
+ />
+ occurrences
+
+
+ The booking will create {recurringOccurrences} events that repeat {recurringFrequency}
+
+
+
+ )}
+
+ );
+}
diff --git a/companion/app/event-type-detail/utils.ts b/companion/app/event-type-detail/utils.ts
new file mode 100644
index 0000000000..c6682935f6
--- /dev/null
+++ b/companion/app/event-type-detail/utils.ts
@@ -0,0 +1,58 @@
+// Utility functions for Event Type Detail
+
+export const formatDuration = (minutes: string) => {
+ const mins = parseInt(minutes) || 0;
+ if (mins < 60) return `${mins}m`;
+ const hours = Math.floor(mins / 60);
+ const remainingMins = mins % 60;
+ return remainingMins > 0 ? `${hours}h ${remainingMins}m` : `${hours}h`;
+};
+
+export const truncateTitle = (text: string, maxLength: number = 20) => {
+ return text.length > maxLength ? `${text.substring(0, maxLength)}...` : text;
+};
+
+export const formatAppIdToDisplayName = (appId: string): string => {
+ // Convert appId like "google-meet" to "Google Meet"
+ return appId
+ .split("-")
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+};
+
+export const displayNameToLocationValue = (
+ displayName: string,
+ defaultLocations: Array<{ label: string; type: string }>
+): {
+ type: string;
+ integration?: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ public?: boolean;
+} | null => {
+ // First check if it's a default location
+ const defaultLocation = defaultLocations.find((loc) => loc.label === displayName);
+ if (defaultLocation) {
+ // Map internal location types to API location types
+ switch (defaultLocation.type) {
+ case "attendeeInPerson":
+ return { type: "attendeeAddress" };
+ case "inPerson":
+ return { type: "address", address: "", public: true };
+ case "link":
+ return { type: "link", link: "", public: true };
+ case "phone":
+ return { type: "attendeePhone" };
+ case "userPhone":
+ return { type: "phone", phone: "", public: true };
+ default:
+ return null;
+ }
+ }
+
+ // Check if it's a conferencing app (formatted display name)
+ // e.g., "Google Meet", "Zoom", etc.
+ const appId = displayName.toLowerCase().replace(/\s+/g, "-");
+ return { type: "integration", integration: appId };
+};
diff --git a/companion/app/index.tsx b/companion/app/index.tsx
new file mode 100644
index 0000000000..b8113aefc7
--- /dev/null
+++ b/companion/app/index.tsx
@@ -0,0 +1,5 @@
+import { Redirect } from "expo-router";
+
+export default function Index() {
+ return
+ Processing OAuth callback...
+
+ Please wait while we complete the authentication.
+
+
+ );
+}
diff --git a/companion/assets/adaptive-icon.png b/companion/assets/adaptive-icon.png
new file mode 100644
index 0000000000..03d6f6b6c6
Binary files /dev/null and b/companion/assets/adaptive-icon.png differ
diff --git a/companion/assets/favicon.png b/companion/assets/favicon.png
new file mode 100644
index 0000000000..e75f697b18
Binary files /dev/null and b/companion/assets/favicon.png differ
diff --git a/companion/assets/icon.png b/companion/assets/icon.png
new file mode 100644
index 0000000000..a0b1526fc7
Binary files /dev/null and b/companion/assets/icon.png differ
diff --git a/companion/assets/logo.svg b/companion/assets/logo.svg
new file mode 100644
index 0000000000..bccfe813ef
--- /dev/null
+++ b/companion/assets/logo.svg
@@ -0,0 +1,9 @@
+
+
diff --git a/companion/assets/splash-icon.png b/companion/assets/splash-icon.png
new file mode 100644
index 0000000000..03d6f6b6c6
Binary files /dev/null and b/companion/assets/splash-icon.png differ
diff --git a/companion/babel.config.js b/companion/babel.config.js
new file mode 100644
index 0000000000..18767383ab
--- /dev/null
+++ b/companion/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = function (api) {
+ api.cache(true);
+ return {
+ presets: [["babel-preset-expo", { jsxImportSource: "nativewind" }], "nativewind/babel"],
+ };
+};
diff --git a/companion/components/AuthTokenProvider.tsx b/companion/components/AuthTokenProvider.tsx
new file mode 100644
index 0000000000..b6d6f0f261
--- /dev/null
+++ b/companion/components/AuthTokenProvider.tsx
@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+import { useAuth } from "../contexts/AuthContext";
+import { setAuthToken, setWebSession } from "../services/calcom";
+
+export function AuthTokenProvider({ children }: { children: React.ReactNode }) {
+ const { accessToken, isAuthenticated, isWebSession } = useAuth();
+
+ useEffect(() => {
+ if (isAuthenticated) {
+ if (accessToken) {
+ setAuthToken(accessToken);
+ }
+ setWebSession(isWebSession);
+ } else {
+ setAuthToken(null);
+ setWebSession(false);
+ }
+ }, [isAuthenticated, accessToken, isWebSession]);
+
+ return <>{children};
+}
diff --git a/companion/components/CalComLogo.tsx b/companion/components/CalComLogo.tsx
new file mode 100644
index 0000000000..d6df1b423d
--- /dev/null
+++ b/companion/components/CalComLogo.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+
+interface CalComLogoProps {
+ width?: number;
+ height?: number;
+ color?: string;
+}
+
+export function CalComLogo({ width = 101, height = 22, color = "#292929" }: CalComLogoProps) {
+ return (
+
+
+ );
+}
diff --git a/companion/components/FullScreenModal.tsx b/companion/components/FullScreenModal.tsx
new file mode 100644
index 0000000000..bb4ce8281e
--- /dev/null
+++ b/companion/components/FullScreenModal.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { Modal, ModalProps, Platform, View } from "react-native";
+
+interface FullScreenModalProps extends ModalProps {
+ visible: boolean;
+ onRequestClose: () => void;
+ children: React.ReactNode;
+}
+
+/**
+ * A modal wrapper that expands the browser extension iframe to full screen
+ * when running in the web platform (browser extension).
+ *
+ * For mobile platforms, it behaves like a regular Modal.
+ */
+export function FullScreenModal({
+ visible,
+ onRequestClose,
+ children,
+ ...modalProps
+}: FullScreenModalProps) {
+ useEffect(() => {
+ // Only send expand/collapse messages on web platform (browser extension)
+ if (Platform.OS !== "web") {
+ return;
+ }
+
+ if (visible) {
+ // Expand the iframe to full width when modal opens
+ window.parent.postMessage({ type: "cal-companion-expand" }, "*");
+ } else {
+ // Collapse the iframe back to 400px when modal closes
+ window.parent.postMessage({ type: "cal-companion-collapse" }, "*");
+ }
+
+ // Cleanup: collapse on unmount if still visible
+ return () => {
+ if (visible && Platform.OS === "web") {
+ window.parent.postMessage({ type: "cal-companion-collapse" }, "*");
+ }
+ };
+ }, [visible]);
+
+ // For non-web platforms, just use the regular Modal
+ if (Platform.OS !== "web") {
+ return (
+
+ {children}
+
+ );
+ }
+
+ // For web platform (browser extension), use the modal with full-screen behavior
+ return (
+
+ {children}
+
+ );
+}
diff --git a/companion/components/Header.tsx b/companion/components/Header.tsx
new file mode 100644
index 0000000000..237e8d67e9
--- /dev/null
+++ b/companion/components/Header.tsx
@@ -0,0 +1,300 @@
+import { Ionicons } from "@expo/vector-icons";
+import { useRouter } from "expo-router";
+import React, { useState, useEffect } from "react";
+import {
+ View,
+ Text,
+ TouchableOpacity,
+ Image,
+ ActivityIndicator,
+ Modal,
+ Alert,
+ Linking,
+ Platform,
+ ActionSheetIOS,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { CalComAPIService, UserProfile } from "../services/calcom";
+import { CalComLogo } from "./CalComLogo";
+import { FullScreenModal } from "./FullScreenModal";
+
+export function Header() {
+ const router = useRouter();
+ const insets = useSafeAreaInsets();
+ const [userProfile, setUserProfile] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [showProfileModal, setShowProfileModal] = useState(false);
+
+ useEffect(() => {
+ fetchUserProfile();
+ }, []);
+
+ const fetchUserProfile = async () => {
+ try {
+ const profile = await CalComAPIService.getUserProfile();
+ setUserProfile(profile);
+ } catch (error) {
+ console.error("Failed to fetch user profile:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleProfile = () => {
+ if (Platform.OS === "ios") {
+ const options = ["Cancel", "My Profile", "My Settings", "Out of Office", "Help", "Sign Out"];
+
+ ActionSheetIOS.showActionSheetWithOptions(
+ {
+ options,
+ destructiveButtonIndex: 6, // Sign Out
+ cancelButtonIndex: 0,
+ title: userProfile?.name || "Profile Menu",
+ },
+ (buttonIndex) => {
+ switch (buttonIndex) {
+ case 1: // My Profile
+ handleMenuOption("profile");
+ break;
+ case 2: // My Settings
+ handleMenuOption("settings");
+ break;
+ case 3: // Out of Office
+ handleMenuOption("outOfOffice");
+ break;
+ case 4: // Support
+ handleMenuOption("help");
+ break;
+ case 5: // Sign Out
+ handleMenuOption("signOut");
+ break;
+ }
+ }
+ );
+ } else {
+ setShowProfileModal(true);
+ }
+ };
+
+ const openExternalLink = async (url: string, fallbackMessage: string) => {
+ try {
+ const supported = await Linking.canOpenURL(url);
+ if (supported) {
+ await Linking.openURL(url);
+ } else {
+ Alert.alert("Error", `Cannot open ${fallbackMessage} on your device.`);
+ }
+ } catch (error) {
+ console.error(`Failed to open ${url}:`, error);
+ Alert.alert("Error", `Failed to open ${fallbackMessage}. Please try again.`);
+ }
+ };
+
+ const handleMenuOption = (option: string) => {
+ if (Platform.OS !== "ios") {
+ setShowProfileModal(false);
+ }
+ switch (option) {
+ case "profile":
+ openExternalLink("https://app.cal.com/settings/my-account/profile", "Profile page");
+ break;
+ case "settings":
+ openExternalLink("https://app.cal.com/settings/my-account", "Settings page");
+ break;
+ case "outOfOffice":
+ openExternalLink(
+ "https://app.cal.com/settings/my-account/out-of-office",
+ "Out of Office page"
+ );
+ break;
+ case "roadmap":
+ openExternalLink("https://cal.com/roadmap", "Roadmap");
+ break;
+ case "help":
+ openExternalLink("https://cal.com/help", "Help page");
+ break;
+ case "signOut":
+ Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+ { text: "Cancel", style: "cancel" },
+ {
+ text: "Sign Out",
+ style: "destructive",
+ onPress: () => {
+ // TODO: Implement sign out
+ console.log("Sign Out pressed");
+ },
+ },
+ ]);
+ break;
+ }
+ };
+
+ return (
+ <>
+
+ {/* Left: Cal.com Logo */}
+
+
+
+ {/* Right: Icons */}
+
+ {/* Profile Picture */}
+
+ {loading ? (
+
+
+ )}
+
+
+
+
+ {/* Profile Menu Modal */}
+ setShowProfileModal(false)}
+ >
+ setShowProfileModal(false)}
+ >
+ e.stopPropagation()}
+ >
+ {/* Header with profile info */}
+
+
+
+ {userProfile?.avatarUrl ? (
+
+ {userProfile?.name
+ ? userProfile.name.charAt(0).toUpperCase()
+ : userProfile?.email?.charAt(0).toUpperCase() || "?"}
+
+ )}
+
+
+
+ {userProfile?.name || "User"}
+
+ {userProfile?.email && (
+ {userProfile.email}
+ )}
+
+
+
+
+ {/* Menu Items */}
+
+ handleMenuOption("profile")}
+ >
+
+ My Profile
+
+
+
+ handleMenuOption("settings")}
+ >
+
+ My Settings
+
+
+
+ handleMenuOption("outOfOffice")}
+ >
+
+ Out of Office
+
+
+
+ handleMenuOption("roadmap")}
+ >
+
+ Roadmap
+
+
+
+ handleMenuOption("help")}
+ >
+
+ Help
+
+
+
+ handleMenuOption("signOut")}
+ >
+ Sign Out
+
+
+
+ {/* Cancel button */}
+
+ setShowProfileModal(false)}
+ >
+ Cancel
+
+
+
+
+
+
+ );
+}
diff --git a/companion/components/LoginScreen.tsx b/companion/components/LoginScreen.tsx
new file mode 100644
index 0000000000..d20ea5e0f2
--- /dev/null
+++ b/companion/components/LoginScreen.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { View, Text, TouchableOpacity, Alert, ActivityIndicator } from "react-native";
+import { useAuth } from "../contexts/AuthContext";
+
+export function LoginScreen() {
+ const { loginWithOAuth, loading } = useAuth();
+
+ const handleOAuthLogin = async () => {
+ try {
+ await loginWithOAuth();
+ } catch (error) {
+ console.error("OAuth login error:", error);
+ Alert.alert(
+ "Login Failed",
+ error instanceof Error
+ ? error.message
+ : "Failed to login with OAuth. Please check your configuration and try again.",
+ [{ text: "OK" }]
+ );
+ }
+ };
+
+ return (
+
+
+
+ Welcome to Cal.com Companion
+
+
+ Sign in to manage your bookings and event types
+
+
+
+ {loading ?
+ {loading ? "Signing in..." : "Sign in with Cal.com"}
+
+
+
+ );
+}
+
+export default LoginScreen;
diff --git a/companion/components/LogoutButton.tsx b/companion/components/LogoutButton.tsx
new file mode 100644
index 0000000000..14defc4fa3
--- /dev/null
+++ b/companion/components/LogoutButton.tsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import { TouchableOpacity, Text, Alert, Platform } from "react-native";
+import { useAuth } from "../contexts/AuthContext";
+import { LogoutConfirmModal } from "./LogoutConfirmModal";
+
+interface LogoutButtonProps {
+ className?: string;
+ variant?: "default" | "destructive" | "ghost";
+}
+
+export function LogoutButton({ className = "" }: LogoutButtonProps) {
+ const { logout } = useAuth();
+ const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+ const handleLogoutPress = () => {
+ if (Platform.OS === "web") {
+ setShowConfirmModal(true);
+ } else {
+ // Mobile: use Alert.alert
+ Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+ {
+ text: "Cancel",
+ style: "cancel",
+ },
+ {
+ text: "Sign Out",
+ style: "destructive",
+ onPress: performLogout,
+ },
+ ]);
+ }
+ };
+
+ const performLogout = async () => {
+ try {
+ await logout();
+ } catch (error) {
+ console.error("Logout error:", error);
+ if (Platform.OS === "web") {
+ window.alert("Failed to sign out. Please try again.");
+ } else {
+ Alert.alert("Error", "Failed to sign out. Please try again.");
+ }
+ }
+ };
+
+ const handleConfirmLogout = () => {
+ setShowConfirmModal(false);
+ performLogout();
+ };
+
+ const handleCancelLogout = () => {
+ setShowConfirmModal(false);
+ };
+
+ return (
+ <>
+
+ Sign Out
+
+
+
+
+
+ Sign Out
+ Are you sure you want to sign out?
+
+
+
+ Cancel
+
+
+
+ Sign Out
+
+
+
+
+
+ );
+}
diff --git a/companion/components/SvgImage.tsx b/companion/components/SvgImage.tsx
new file mode 100644
index 0000000000..4848f1fd25
--- /dev/null
+++ b/companion/components/SvgImage.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { View, Image } from "react-native";
+import { SvgUri } from "react-native-svg";
+
+interface SvgImageProps {
+ uri: string;
+ width: number;
+ height: number;
+ style?: { marginRight?: number };
+}
+
+/**
+ * Component that can display both SVG and regular images
+ * Falls back to regular Image if SVG fails
+ */
+export const SvgImage: React.FC = ({ uri, width, height, style }) => {
+ const [useFallback, setUseFallback] = useState(false);
+ // Extract pathname (ignore query strings and hash) to detect SVG correctly
+ // Handles URLs like: icon.svg?variant=dark or icon.svg#hash
+ const pathname = uri.split("?")[0].split("#")[0];
+ const isSvg = pathname.toLowerCase().endsWith(".svg");
+
+ if (!isSvg || useFallback) {
+ // Use regular Image for non-SVG or if SVG failed
+ return (
+
+ console.log("Image load error:", uri)}
+ />
+
+ );
+ }
+
+ // Use SvgUri for SVG files
+ return (
+
+ {
+ console.log("SVG load error, falling back to Image:", error);
+ setUseFallback(true);
+ }}
+ />
+
+ );
+};
diff --git a/companion/components/Tooltip.tsx b/companion/components/Tooltip.tsx
new file mode 100644
index 0000000000..08757504c2
--- /dev/null
+++ b/companion/components/Tooltip.tsx
@@ -0,0 +1,75 @@
+import React, { useState, useRef, useEffect } from "react";
+import { View, Text, Platform } from "react-native";
+
+interface TooltipProps {
+ text: string;
+ children: React.ReactElement;
+}
+
+export function Tooltip({ text, children }: TooltipProps) {
+ const [showTooltip, setShowTooltip] = useState(false);
+ const [position, setPosition] = useState({ top: 0, left: 0 });
+ const containerRef = useRef(null);
+
+ // Only show tooltips on web platform
+ if (Platform.OS !== "web") {
+ return children;
+ }
+
+ const handleMouseEnter = (e: any) => {
+ if (containerRef.current) {
+ const rect = containerRef.current.getBoundingClientRect();
+ setPosition({
+ top: rect.top - 40,
+ left: rect.left + rect.width / 2 + 20,
+ });
+ setShowTooltip(true);
+ }
+ };
+
+ const handleMouseLeave = () => {
+ setShowTooltip(false);
+ };
+
+ return (
+
+ {children}
+ {showTooltip && (
+
+
+ {text}
+
+
+ )}
+
+ );
+}
diff --git a/companion/contexts/AuthContext.tsx b/companion/contexts/AuthContext.tsx
new file mode 100644
index 0000000000..b93645ffcf
--- /dev/null
+++ b/companion/contexts/AuthContext.tsx
@@ -0,0 +1,367 @@
+/// ;
+ loginWithOAuth: () => Promise;
+ logout: () => Promise;
+ loading: boolean;
+}
+
+const AuthContext = createContext(undefined);
+
+const ACCESS_TOKEN_KEY = "cal_access_token";
+const REFRESH_TOKEN_KEY = "cal_refresh_token";
+const OAUTH_TOKENS_KEY = "cal_oauth_tokens";
+const AUTH_TYPE_KEY = "cal_auth_type";
+
+type AuthType = "oauth" | "web_session";
+
+interface AuthProviderProps {
+ children: ReactNode;
+}
+
+// Check if chrome.storage is available (browser extension context)
+const isChromeStorageAvailable = (): boolean => {
+ return (
+ Platform.OS === "web" &&
+ typeof chrome !== "undefined" &&
+ chrome.storage !== undefined &&
+ chrome.storage.local !== undefined
+ );
+};
+
+// Unified storage helper to abstract web/mobile/extension differences
+const storage = {
+ get: async (key: string): Promise => {
+ // Use chrome.storage in browser extension context (most secure)
+ if (isChromeStorageAvailable()) {
+ return new Promise((resolve) => {
+ chrome.storage.local.get([key], (result) => {
+ resolve(result[key] || null);
+ });
+ });
+ }
+ // Fall back to localStorage for regular web apps
+ if (Platform.OS === "web") {
+ return localStorage.getItem(key);
+ }
+ // Use SecureStore for mobile
+ return await SecureStore.getItemAsync(key);
+ },
+ set: async (key: string, value: string): Promise => {
+ // Use chrome.storage in browser extension context (most secure)
+ if (isChromeStorageAvailable()) {
+ return new Promise((resolve, reject) => {
+ chrome.storage.local.set({ [key]: value }, () => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(chrome.runtime.lastError.message));
+ } else {
+ resolve();
+ }
+ });
+ });
+ }
+ // Fall back to localStorage for regular web apps
+ if (Platform.OS === "web") {
+ localStorage.setItem(key, value);
+ return;
+ }
+ // Use SecureStore for mobile
+ await SecureStore.setItemAsync(key, value);
+ },
+ remove: async (key: string): Promise => {
+ // Use chrome.storage in browser extension context (most secure)
+ if (isChromeStorageAvailable()) {
+ return new Promise((resolve, reject) => {
+ chrome.storage.local.remove(key, () => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(chrome.runtime.lastError.message));
+ } else {
+ resolve();
+ }
+ });
+ });
+ }
+ // Fall back to localStorage for regular web apps
+ if (Platform.OS === "web") {
+ localStorage.removeItem(key);
+ return;
+ }
+ // Use SecureStore for mobile
+ await SecureStore.deleteItemAsync(key);
+ },
+ removeAll: async (keys: string[]): Promise => {
+ // Use chrome.storage in browser extension context (most secure)
+ if (isChromeStorageAvailable()) {
+ return new Promise((resolve, reject) => {
+ chrome.storage.local.remove(keys, () => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(chrome.runtime.lastError.message));
+ } else {
+ resolve();
+ }
+ });
+ });
+ }
+ // Fall back to localStorage for regular web apps
+ if (Platform.OS === "web") {
+ keys.forEach((key) => localStorage.removeItem(key));
+ return;
+ }
+ // Use SecureStore for mobile
+ await Promise.all(keys.map((key) => SecureStore.deleteItemAsync(key)));
+ },
+};
+
+export function AuthProvider({ children }: AuthProviderProps) {
+ const [isAuthenticated, setIsAuthenticated] = useState(false);
+ const [accessToken, setAccessToken] = useState(null);
+ const [refreshToken, setRefreshToken] = useState(null);
+ const [userInfo, setUserInfo] = useState(null);
+ const [isWebSession, setIsWebSession] = useState(false);
+ const [loading, setLoading] = useState(true);
+ const [oauthService] = useState(() => {
+ try {
+ return createCalComOAuthService();
+ } catch (error) {
+ console.warn("Failed to initialize OAuth service:", error);
+ return null;
+ }
+ });
+
+ // Setup refresh token function for OAuth
+ const setupRefreshTokenFunction = (service: CalComOAuthService) => {
+ CalComAPIService.setRefreshTokenFunction(async (refreshToken: string) => {
+ const newTokens = await service.refreshAccessToken(refreshToken);
+ return {
+ accessToken: newTokens.accessToken,
+ refreshToken: newTokens.refreshToken,
+ };
+ });
+ };
+
+ // Common post-login setup: configure API service and fetch user profile
+ const setupAfterLogin = async (token: string, refreshToken?: string) => {
+ CalComAPIService.setAccessToken(token, refreshToken);
+
+ try {
+ await CalComAPIService.getUserProfile();
+ } catch (profileError) {
+ console.error("Failed to fetch user profile:", profileError);
+ // Don't fail login if profile fetch fails
+ }
+ };
+
+ // Save OAuth tokens to storage
+ const saveOAuthTokens = async (tokens: OAuthTokens) => {
+ await storage.set(OAUTH_TOKENS_KEY, JSON.stringify(tokens));
+ await storage.set(AUTH_TYPE_KEY, "oauth");
+ };
+
+ // Clear all auth data from storage
+ const clearAuth = async () => {
+ await storage.removeAll([ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY, OAUTH_TOKENS_KEY, AUTH_TYPE_KEY]);
+ };
+
+ // Reset all auth state
+ const resetAuthState = () => {
+ setAccessToken(null);
+ setRefreshToken(null);
+ setUserInfo(null);
+ setIsAuthenticated(false);
+ setIsWebSession(false);
+ CalComAPIService.clearAuth();
+ CalComAPIService.clearUserProfile();
+ };
+
+ useEffect(() => {
+ checkAuthState();
+
+ // Set up token refresh callback
+ const handleTokenRefresh = async (newAccessToken: string, newRefreshToken?: string) => {
+ try {
+ const tokens: OAuthTokens = {
+ accessToken: newAccessToken,
+ refreshToken: newRefreshToken || refreshToken || undefined,
+ tokenType: "Bearer",
+ };
+
+ await saveOAuthTokens(tokens);
+ setAccessToken(newAccessToken);
+ if (newRefreshToken) {
+ setRefreshToken(newRefreshToken);
+ }
+
+ CalComAPIService.setAccessToken(
+ newAccessToken,
+ newRefreshToken || refreshToken || undefined
+ );
+ } catch (error) {
+ console.error("Failed to handle token refresh:", error);
+ await logout();
+ }
+ };
+
+ CalComAPIService.setTokenRefreshCallback(handleTokenRefresh);
+
+ return () => {
+ CalComAPIService.setTokenRefreshCallback(() => Promise.resolve());
+ };
+ }, [refreshToken]);
+
+ // Handle OAuth authentication
+ const handleOAuthAuth = async (storedTokens: OAuthTokens) => {
+ if (!oauthService) return;
+
+ // Refresh token if expired
+ let tokens = storedTokens;
+ if (oauthService.isTokenExpired(storedTokens) && storedTokens.refreshToken) {
+ try {
+ console.log("Access token expired, refreshing...");
+ tokens = await oauthService.refreshAccessToken(storedTokens.refreshToken);
+ await saveOAuthTokens(tokens);
+ } catch (refreshError) {
+ console.error("Failed to refresh token:", refreshError);
+ await clearAuth();
+ return;
+ }
+ }
+
+ // Set state
+ setAccessToken(tokens.accessToken);
+ setRefreshToken(tokens.refreshToken || null);
+ setIsAuthenticated(true);
+ setIsWebSession(false);
+
+ // Setup API service and refresh function
+ await setupAfterLogin(tokens.accessToken, tokens.refreshToken);
+ if (tokens.refreshToken) {
+ setupRefreshTokenFunction(oauthService);
+ }
+ };
+
+ // Handle web session authentication
+ const handleWebSessionAuth = () => {
+ setIsWebSession(true);
+ };
+
+ const checkAuthState = async () => {
+ try {
+ const authType = (await storage.get(AUTH_TYPE_KEY)) as AuthType | null;
+ const storedOAuthTokens = await storage.get(OAUTH_TOKENS_KEY);
+ const storedTokens = storedOAuthTokens ? JSON.parse(storedOAuthTokens) : null;
+
+ if (authType === "oauth" && storedTokens && oauthService) {
+ await handleOAuthAuth(storedTokens);
+ } else if (authType === "web_session") {
+ handleWebSessionAuth();
+ }
+ } catch (error) {
+ console.error("Failed to check auth state:", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const loginFromWebSession = async (sessionUserInfo: any) => {
+ try {
+ setUserInfo(sessionUserInfo);
+ setIsAuthenticated(true);
+ setIsWebSession(true);
+ await storage.set(AUTH_TYPE_KEY, "web_session");
+
+ // Try to get tokens from web session
+ const tokens = await WebAuthService.getTokensFromWebSession();
+ if (tokens.accessToken) {
+ setAccessToken(tokens.accessToken);
+ setRefreshToken(tokens.refreshToken || null);
+ await setupAfterLogin(tokens.accessToken, tokens.refreshToken);
+ }
+ } catch (error) {
+ console.error("Failed to login from web session:", error);
+ throw error;
+ }
+ };
+
+ const loginWithOAuth = async (): Promise => {
+ if (!oauthService) {
+ throw new Error("OAuth service not available. Please check your configuration.");
+ }
+
+ try {
+ setLoading(true);
+
+ const tokens = await oauthService.startAuthorizationFlow();
+
+ // Save tokens
+ await saveOAuthTokens(tokens);
+
+ // Update state
+ setAccessToken(tokens.accessToken);
+ setRefreshToken(tokens.refreshToken || null);
+ setIsAuthenticated(true);
+ setIsWebSession(false);
+
+ // Setup API service and refresh function
+ await setupAfterLogin(tokens.accessToken, tokens.refreshToken);
+ if (tokens.refreshToken) {
+ setupRefreshTokenFunction(oauthService);
+ }
+
+ // Clear PKCE parameters
+ oauthService.clearPKCEParams();
+ } catch (error) {
+ console.error("OAuth login failed:", error);
+ throw error;
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const logout = async () => {
+ try {
+ await clearAuth();
+ resetAuthState();
+ } catch (error) {
+ console.error("Failed to logout:", error);
+ }
+ };
+
+ const value: AuthContextType = {
+ isAuthenticated,
+ accessToken,
+ refreshToken,
+ userInfo,
+ isWebSession,
+ loginFromWebSession,
+ loginWithOAuth,
+ logout,
+ loading,
+ };
+
+ return {children} ;
+}
+
+export function useAuth(): AuthContextType {
+ const context = useContext(AuthContext);
+ if (context === undefined) {
+ throw new Error("useAuth must be used within an AuthProvider");
+ }
+ return context;
+}
diff --git a/companion/extension/entrypoints/background/index.ts b/companion/extension/entrypoints/background/index.ts
new file mode 100644
index 0000000000..557e4e7360
--- /dev/null
+++ b/companion/extension/entrypoints/background/index.ts
@@ -0,0 +1,223 @@
+/// {
+ return new Promise((resolve, reject) => {
+ if (!chrome.identity) {
+ reject(new Error("Chrome identity API not available"));
+ return;
+ }
+
+ chrome.identity.launchWebAuthFlow(
+ {
+ url: authUrl,
+ interactive: true,
+ },
+ (responseUrl) => {
+ if (chrome.runtime.lastError) {
+ console.error("OAuth flow failed:", chrome.runtime.lastError.message);
+ reject(new Error(`OAuth flow failed: ${chrome.runtime.lastError.message}`));
+ } else if (responseUrl) {
+ resolve(responseUrl);
+ } else {
+ console.error("OAuth flow returned no response URL");
+ reject(new Error("OAuth flow cancelled or failed"));
+ }
+ }
+ );
+ });
+}
+
+async function handleTokenExchange(
+ tokenRequest: any,
+ tokenEndpoint: string,
+ state?: string
+): Promise {
+ // CSRF protection: validate state parameter (defense-in-depth)
+ // State is already validated in iframe context; this validates in background script
+ if (state) {
+ try {
+ const result = await chrome.storage.local.get(["oauth_state"]);
+ const storedState = result.oauth_state;
+
+ if (storedState && storedState !== state) {
+ await chrome.storage.local.remove("oauth_state");
+ console.error("State parameter mismatch - possible CSRF attack");
+ throw new Error("Invalid state parameter - possible CSRF attack");
+ }
+
+ if (storedState && storedState === state) {
+ await chrome.storage.local.remove("oauth_state");
+ }
+ } catch (error) {
+ if (error instanceof Error && error.message.includes("Invalid state parameter")) {
+ throw error;
+ }
+ // For storage errors, log but continue (non-blocking)
+ console.warn("State validation warning (non-blocking):", error);
+ }
+ }
+
+ const body = new URLSearchParams();
+ Object.keys(tokenRequest).forEach((key) => {
+ body.append(key, tokenRequest[key]);
+ });
+
+ try {
+ const response = await fetch(tokenEndpoint, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ Accept: "application/json",
+ },
+ body: body.toString(),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("Token exchange error response:", errorData);
+ throw new Error(`Token exchange failed: ${response.status} ${errorData}`);
+ }
+
+ const tokenData = await response.json();
+
+ const tokens = {
+ accessToken: tokenData.access_token,
+ refreshToken: tokenData.refresh_token,
+ tokenType: tokenData.token_type || "Bearer",
+ expiresAt: tokenData.expires_in ? Date.now() + tokenData.expires_in * 1000 : undefined,
+ scope: tokenData.scope,
+ };
+
+ return tokens;
+ } catch (error) {
+ console.error("Token exchange failed:", error);
+ throw error instanceof Error ? error : new Error(String(error));
+ }
+}
+
+async function fetchEventTypes() {
+ const API_BASE_URL = "https://api.cal.com/v2";
+
+ const result = await chrome.storage.local.get(["cal_oauth_tokens"]);
+ const oauthTokens = result.cal_oauth_tokens
+ ? JSON.parse(result.cal_oauth_tokens as string)
+ : null;
+
+ if (!oauthTokens?.accessToken) {
+ throw new Error("No OAuth access token found. Please sign in with OAuth.");
+ }
+
+ // Get current user to retrieve username
+ const userResponse = await fetch(`${API_BASE_URL}/me`, {
+ headers: {
+ Authorization: `Bearer ${oauthTokens.accessToken}`,
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-11",
+ },
+ });
+
+ if (!userResponse.ok) {
+ throw new Error(`Failed to get user: ${userResponse.statusText}`);
+ }
+
+ const userData = await userResponse.json();
+ const username = userData?.data?.username;
+
+ const params = new URLSearchParams();
+ if (username) {
+ params.append("username", username);
+ }
+
+ const queryString = params.toString();
+ const endpoint = `${API_BASE_URL}/event-types${queryString ? `?${queryString}` : ""}`;
+
+ const response = await fetch(endpoint, {
+ headers: {
+ Authorization: `Bearer ${oauthTokens.accessToken}`,
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-14",
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error(`Failed to fetch event types: ${response.statusText}`);
+ }
+
+ const data = await response.json();
+
+ // Handle different response formats
+ if (Array.isArray(data)) {
+ return data;
+ } else if (data?.data && Array.isArray(data.data)) {
+ return data.data;
+ } else if (data?.eventTypes && Array.isArray(data.eventTypes)) {
+ return data.eventTypes;
+ }
+
+ return [];
+}
diff --git a/companion/extension/entrypoints/content.ts b/companion/extension/entrypoints/content.ts
new file mode 100644
index 0000000000..677d860db0
--- /dev/null
+++ b/companion/extension/entrypoints/content.ts
@@ -0,0 +1,2923 @@
+/// "],
+ main() {
+ const existingSidebar = document.getElementById("cal-companion-sidebar");
+ if (existingSidebar) {
+ return;
+ }
+
+ // Initialize Gmail integration if on Gmail
+ // Wrapped in try-catch to prevent breaking Gmail if anything fails
+ if (window.location.hostname === "mail.google.com") {
+ try {
+ initGmailIntegration();
+ console.log("Cal.com: Gmail integration initialized successfully");
+ } catch (error) {
+ // Fail silently - don't break Gmail UI
+ console.error("Cal.com: Failed to initialize Gmail integration:", error);
+ }
+ }
+
+ let isVisible = false;
+ let isClosed = true;
+
+ // Create sidebar container
+ const sidebarContainer = document.createElement("div");
+ sidebarContainer.id = "cal-companion-sidebar";
+ sidebarContainer.style.position = "fixed";
+ sidebarContainer.style.top = "0";
+ sidebarContainer.style.right = "0";
+ sidebarContainer.style.pointerEvents = "none";
+ sidebarContainer.style.width = "100vw";
+ sidebarContainer.style.height = "100vh";
+ sidebarContainer.style.zIndex = "2147483647";
+ sidebarContainer.style.backgroundColor = "transparent";
+ sidebarContainer.style.transition = "none";
+ sidebarContainer.style.transform = "translateX(100%)";
+ sidebarContainer.style.display = "none";
+
+ // Create iframe container with max width
+ const iframeContainer = document.createElement("div");
+ iframeContainer.style.width = "100%";
+ iframeContainer.style.height = "100%";
+ iframeContainer.style.display = "flex";
+ iframeContainer.style.justifyContent = "flex-end";
+ iframeContainer.style.pointerEvents = "none";
+
+ // Create iframe
+ const iframe = document.createElement("iframe");
+ iframe.src = "http://localhost:8081";
+ iframe.style.width = "400px";
+ iframe.style.height = "100%";
+ iframe.style.border = "none";
+ iframe.style.borderRadius = "0";
+ iframe.style.backgroundColor = "transparent";
+ iframe.style.pointerEvents = "auto";
+ iframe.style.transition = "none";
+
+ iframeContainer.appendChild(iframe);
+
+ // Listen for messages from iframe to control width and handle OAuth
+ window.addEventListener("message", (event) => {
+ // Security: Only accept messages from our iframe's origin
+ // This prevents malicious scripts on the host page from manipulating the companion
+ const iframeOrigin = new URL(iframe.src).origin;
+ if (event.source !== iframe.contentWindow || event.origin !== iframeOrigin) {
+ return;
+ }
+
+ if (event.data.type === "cal-companion-expand") {
+ // Disable transition for instant expansion
+ iframe.style.transition = "none";
+ iframe.style.width = "100%";
+ iframeContainer.style.pointerEvents = "auto";
+ iframeContainer.style.justifyContent = "center";
+ } else if (event.data.type === "cal-companion-collapse") {
+ // Disable transition for instant collapse
+ iframe.style.transition = "none";
+ iframe.style.width = "400px";
+ iframeContainer.style.pointerEvents = "none";
+ iframeContainer.style.justifyContent = "flex-end";
+ } else if (event.data.type === "cal-extension-oauth-request") {
+ // Handle OAuth request from iframe
+ handleOAuthRequest(event.data.authUrl, iframe.contentWindow);
+ } else if (event.data.type === "cal-extension-token-exchange-request") {
+ // Handle token exchange request from iframe
+ handleTokenExchangeRequest(
+ event.data.tokenRequest,
+ event.data.tokenEndpoint,
+ event.data.state, // Pass state for CSRF validation
+ iframe.contentWindow
+ );
+ }
+ });
+
+ // Handle OAuth requests by forwarding to background script
+ function handleOAuthRequest(authUrl: string, iframeWindow: Window | null) {
+ // Send request to background script
+ chrome.runtime.sendMessage(
+ { action: "start-extension-oauth", authUrl: authUrl },
+ (response) => {
+ if (chrome.runtime.lastError) {
+ console.error(
+ "Failed to communicate with background script:",
+ chrome.runtime.lastError.message
+ );
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-oauth-result",
+ success: false,
+ error: `Extension communication failed: ${chrome.runtime.lastError.message}`,
+ },
+ "*"
+ );
+ return;
+ }
+
+ // Forward the response back to iframe
+ if (response.success) {
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-oauth-result",
+ success: true,
+ responseUrl: response.responseUrl,
+ },
+ "*"
+ );
+ } else {
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-oauth-result",
+ success: false,
+ error: response.error || "OAuth flow failed",
+ },
+ "*"
+ );
+ }
+ }
+ );
+ }
+
+ // Handle token exchange requests by forwarding to background script
+ function handleTokenExchangeRequest(
+ tokenRequest: any,
+ tokenEndpoint: string,
+ state: string | undefined,
+ iframeWindow: Window | null
+ ) {
+ // Send request to background script
+ chrome.runtime.sendMessage(
+ {
+ action: "exchange-oauth-tokens",
+ tokenRequest: tokenRequest,
+ tokenEndpoint: tokenEndpoint,
+ state: state, // Include state for CSRF validation
+ },
+ (response) => {
+ if (chrome.runtime.lastError) {
+ console.error(
+ "Failed to communicate with background script:",
+ chrome.runtime.lastError.message
+ );
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-token-exchange-result",
+ success: false,
+ error: `Extension communication failed: ${chrome.runtime.lastError.message}`,
+ },
+ "*"
+ );
+ return;
+ }
+
+ // Forward the response back to iframe
+ if (response.success) {
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-token-exchange-result",
+ success: true,
+ tokens: response.tokens,
+ },
+ "*"
+ );
+ } else {
+ iframeWindow?.postMessage(
+ {
+ type: "cal-extension-token-exchange-result",
+ success: false,
+ error: response.error || "Token exchange failed",
+ },
+ "*"
+ );
+ }
+ }
+ );
+ }
+
+ sidebarContainer.appendChild(iframeContainer);
+
+ // Create floating buttons container
+ const buttonsContainer = document.createElement("div");
+ buttonsContainer.id = "cal-companion-buttons";
+ buttonsContainer.style.position = "fixed";
+ buttonsContainer.style.top = "20px";
+ buttonsContainer.style.right = "420px";
+ buttonsContainer.style.display = "flex";
+ buttonsContainer.style.flexDirection = "column";
+ buttonsContainer.style.gap = "8px";
+ buttonsContainer.style.zIndex = "2147483648";
+ buttonsContainer.style.transition = "none";
+ buttonsContainer.style.display = "none";
+
+ // Create toggle button
+ const toggleButton = document.createElement("button");
+ toggleButton.innerHTML = "◀";
+ toggleButton.style.width = "40px";
+ toggleButton.style.height = "40px";
+ toggleButton.style.borderRadius = "50%";
+ toggleButton.style.border = "1px solid white";
+ toggleButton.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+ toggleButton.style.backdropFilter = "blur(10px)";
+ toggleButton.style.color = "white";
+ toggleButton.style.cursor = "pointer";
+ toggleButton.style.fontSize = "16px";
+ toggleButton.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+ toggleButton.style.transition = "all 0.2s ease";
+ toggleButton.style.display = "flex";
+ toggleButton.style.alignItems = "center";
+ toggleButton.style.justifyContent = "center";
+ toggleButton.title = "Toggle sidebar";
+
+ // Create close button
+ const closeButton = document.createElement("button");
+ closeButton.innerHTML = `
+
+`;
+ closeButton.style.width = "40px";
+ closeButton.style.height = "40px";
+ closeButton.style.borderRadius = "50%";
+ closeButton.style.border = "1px solid rgba(255, 255, 255, 0.5)";
+ closeButton.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
+ closeButton.style.backdropFilter = "blur(10px)";
+ closeButton.style.color = "white";
+ closeButton.style.cursor = "pointer";
+ closeButton.style.fontSize = "16px";
+ closeButton.style.boxShadow = "0 2px 8px rgba(0,0,0,0.2)";
+ closeButton.style.transition = "all 0.2s ease";
+ closeButton.style.display = "flex";
+ closeButton.style.alignItems = "center";
+ closeButton.style.justifyContent = "center";
+ closeButton.title = "Close sidebar";
+
+ // Add hover effects
+ toggleButton.addEventListener("mouseenter", () => {
+ toggleButton.style.transform = "scale(1.1)";
+ });
+ toggleButton.addEventListener("mouseleave", () => {
+ toggleButton.style.transform = "scale(1)";
+ });
+
+ closeButton.addEventListener("mouseenter", () => {
+ closeButton.style.transform = "scale(1.1)";
+ });
+ closeButton.addEventListener("mouseleave", () => {
+ closeButton.style.transform = "scale(1)";
+ });
+
+ // Toggle functionality
+ toggleButton.addEventListener("click", () => {
+ if (isClosed) return;
+
+ isVisible = !isVisible;
+ if (isVisible) {
+ sidebarContainer.style.transform = "translateX(0)";
+ buttonsContainer.style.right = "420px";
+ toggleButton.innerHTML = `
+ `;
+ } else {
+ sidebarContainer.style.transform = "translateX(100%)";
+ buttonsContainer.style.right = "20px";
+ toggleButton.innerHTML = `
+ `;
+ }
+ });
+
+ // Close functionality
+ closeButton.addEventListener("click", () => {
+ isClosed = true;
+ isVisible = false;
+ sidebarContainer.style.display = "none";
+ buttonsContainer.style.display = "none";
+ });
+
+ // Add buttons to container
+ buttonsContainer.appendChild(toggleButton);
+ buttonsContainer.appendChild(closeButton);
+
+ // Add everything to DOM
+ document.body.appendChild(sidebarContainer);
+ document.body.appendChild(buttonsContainer);
+
+ // Listen for extension icon click
+ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+ if (message.action === "icon-clicked") {
+ if (isClosed) {
+ // Reopen closed sidebar
+ isClosed = false;
+ isVisible = true;
+ sidebarContainer.style.display = "block";
+ buttonsContainer.style.display = "flex";
+ sidebarContainer.style.transform = "translateX(0)";
+ buttonsContainer.style.right = "420px";
+ toggleButton.innerHTML = `
+ `;
+ } else {
+ // Toggle visible sidebar
+ isVisible = !isVisible;
+ if (isVisible) {
+ sidebarContainer.style.transform = "translateX(0)";
+ buttonsContainer.style.right = "420px";
+ toggleButton.innerHTML = `
+ `;
+ } else {
+ sidebarContainer.style.transform = "translateX(100%)";
+ buttonsContainer.style.right = "20px";
+ toggleButton.innerHTML = `
+ `;
+ }
+ }
+ sendResponse({ success: true }); // Send response to acknowledge
+ }
+ });
+
+ // Gmail integration function
+ function initGmailIntegration() {
+ // Cache for event types (refreshed on page reload)
+ let eventTypesCache: any[] | null = null;
+ let cacheTimestamp: number | null = null;
+ const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
+
+ // Function to inject Cal.com button as a new table cell after Send button
+ function injectCalButton() {
+ // Look specifically for Gmail compose Send buttons - they have specific attributes
+ // Gmail Send button usually has div[role="button"] with specific data attributes inside a td
+ const sendButtons = document.querySelectorAll(
+ 'div[role="button"][data-tooltip="Send (Ctrl-Enter)"], div[role="button"][data-tooltip*="Send"], div[role="button"][aria-label*="Send"]'
+ );
+
+ sendButtons.forEach((sendButton) => {
+ // Find the parent td cell that contains the send button
+ const sendButtonCell = sendButton.closest("td");
+ if (!sendButtonCell) return;
+
+ // Find the parent table row
+ const tableRow = sendButtonCell.closest("tr");
+ if (!tableRow) return;
+
+ // Check if we already injected our button for this specific send button
+ const existingCalButton = sendButtonCell.parentElement?.querySelector(
+ ".cal-companion-gmail-button"
+ );
+ if (existingCalButton) return;
+
+ // Additional check: make sure this is actually in a compose window
+ // Gmail compose windows have specific containers
+ const composeWindow = sendButton.closest('[role="dialog"]') || sendButton.closest(".nH");
+ if (!composeWindow) return;
+
+ // Create new table cell for Cal.com button
+ const calButtonCell = document.createElement("td");
+ calButtonCell.className = "cal-companion-gmail-button";
+ calButtonCell.style.cssText = `
+ padding: 0;
+ margin: 0;
+ vertical-align: middle;
+ border: none;
+ `;
+
+ // Create Cal.com button
+ const calButton = document.createElement("div");
+ calButton.style.cssText = `
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ margin: 2px 4px;
+ border-radius: 50%;
+ background-color: #000000;
+ border: 2px solid #ffffff;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ `;
+
+ // Add Cal.com icon (official logo)
+ calButton.innerHTML = `
+
+
+ `;
+
+ // Add hover effect
+ calButton.addEventListener("mouseenter", () => {
+ calButton.style.backgroundColor = "#333333";
+ calButton.style.transform = "scale(1.05)";
+ });
+
+ calButton.addEventListener("mouseleave", () => {
+ calButton.style.backgroundColor = "#000000";
+ calButton.style.transform = "scale(1)";
+ });
+
+ // Add click handler to show Cal.com menu
+ calButton.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Remove any existing menus
+ const existingMenu = document.querySelector(".cal-companion-gmail-menu");
+ if (existingMenu) {
+ existingMenu.remove();
+ return;
+ }
+
+ // Create menu
+ const menu = document.createElement("div");
+ menu.className = "cal-companion-gmail-menu";
+ menu.style.cssText = `
+ position: absolute;
+ bottom: 100%;
+ left: 0;
+ width: 400px;
+ max-height: 250px;
+ background: white;
+ border-radius: 8px;
+ box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
+ font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
+ font-size: 14px;
+ z-index: 9999;
+ overflow-y: auto;
+ margin-bottom: 4px;
+ `;
+
+ // Show loading state
+ menu.innerHTML = `
+
+ Loading event types...
+
+ `;
+
+ // Array to track tooltips for cleanup
+ const tooltipsToCleanup: HTMLElement[] = [];
+
+ // Fetch event types from Cal.com API
+ fetchEventTypes(menu, tooltipsToCleanup);
+
+ // Position menu relative to button
+ calButtonCell.style.position = "relative";
+ calButtonCell.appendChild(menu);
+
+ // Close menu when clicking outside
+ setTimeout(() => {
+ document.addEventListener("click", function closeMenu(e) {
+ if (!menu.contains(e.target as Node)) {
+ // Clean up all tooltips
+ tooltipsToCleanup.forEach((tooltip) => tooltip.remove());
+ menu.remove();
+ document.removeEventListener("click", closeMenu);
+ }
+ });
+ }, 0);
+ });
+
+ function createTooltip(text, buttonElement) {
+ const tooltip = document.createElement("div");
+ tooltip.className = "cal-tooltip";
+ tooltip.style.cssText = `
+ position: fixed;
+ background-color: #1a1a1a;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ white-space: nowrap;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+ z-index: 10002;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ display: none;
+ `;
+ tooltip.textContent = text;
+ document.body.appendChild(tooltip);
+
+ // Position tooltip on hover
+ const updatePosition = () => {
+ const rect = buttonElement.getBoundingClientRect();
+ tooltip.style.left = `${rect.left + rect.width / 2}px`;
+ tooltip.style.top = `${rect.top - 8}px`;
+ tooltip.style.transform = "translate(-50%, -100%)";
+ };
+
+ buttonElement.addEventListener("mouseenter", () => {
+ updatePosition();
+ tooltip.style.display = "block";
+ tooltip.style.opacity = "1";
+ });
+
+ buttonElement.addEventListener("mouseleave", () => {
+ tooltip.style.opacity = "0";
+ setTimeout(() => {
+ if (tooltip.style.opacity === "0") {
+ tooltip.style.display = "none";
+ }
+ }, 150);
+ });
+
+ return tooltip;
+ }
+
+ function openCalSidebar() {
+ // Open Cal.com sidebar or quick schedule flow
+ if (isClosed) {
+ // Trigger sidebar open
+ chrome.runtime.sendMessage({ action: "icon-clicked" });
+ } else {
+ // Toggle sidebar visibility
+ isVisible = !isVisible;
+ if (isVisible) {
+ sidebarContainer.style.transform = "translateX(0)";
+ } else {
+ sidebarContainer.style.transform = "translateX(100%)";
+ }
+ }
+ }
+
+ async function fetchEventTypes(menu, tooltipsToCleanup) {
+ try {
+ // Check cache first
+ const now = Date.now();
+ const isCacheValid =
+ eventTypesCache && cacheTimestamp && now - cacheTimestamp < CACHE_DURATION;
+
+ let eventTypes: any[] = [];
+
+ if (isCacheValid) {
+ // Use cached data
+ eventTypes = eventTypesCache!;
+ } else {
+ // Check if extension context is valid
+ if (!chrome.runtime?.id) {
+ throw new Error("Extension context invalidated. Please reload the page.");
+ }
+
+ // Fetch fresh data from background script
+ const response = await new Promise((resolve, reject) => {
+ try {
+ chrome.runtime.sendMessage({ action: "fetch-event-types" }, (response) => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(chrome.runtime.lastError.message));
+ } else if (response && response.error) {
+ reject(new Error(response.error));
+ } else {
+ resolve(response);
+ }
+ });
+ } catch (err) {
+ reject(err);
+ }
+ });
+
+ if (response && (response as any).data) {
+ eventTypes = (response as any).data;
+ } else if (Array.isArray(response)) {
+ eventTypes = response;
+ } else {
+ eventTypes = [];
+ }
+
+ // Ensure eventTypes is an array
+ if (!Array.isArray(eventTypes)) {
+ eventTypes = [];
+ }
+
+ // Update cache
+ eventTypesCache = eventTypes;
+ cacheTimestamp = now;
+ }
+
+ // Clear loading state
+ menu.innerHTML = "";
+
+ if (eventTypes.length === 0) {
+ menu.innerHTML = `
+
+ No event types found
+
+ `;
+ return;
+ }
+
+ // Add event types - with additional safety checks
+ try {
+ eventTypes.forEach((eventType, index) => {
+ // Validate eventType object
+ if (!eventType || typeof eventType !== "object") {
+ return;
+ }
+
+ const title = eventType.title || "Untitled Event";
+ const length =
+ eventType.lengthInMinutes || eventType.length || eventType.duration || 30;
+ const description = eventType.description || "";
+
+ const menuItem = document.createElement("div");
+ menuItem.style.cssText = `
+ padding: 14px 16px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ transition: background-color 0.1s ease;
+ border-bottom: ${index < eventTypes.length - 1 ? "1px solid #E5E5EA" : "none"};
+ `;
+
+ // Create content wrapper
+ const contentWrapper = document.createElement("div");
+ contentWrapper.style.cssText = `
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ margin-right: 12px;
+ position: relative;
+ min-width: 0;
+ overflow: hidden;
+ `;
+
+ contentWrapper.innerHTML = `
+
+ ${title}
+
+
+
+ ${length}min
+
+ ${description ? `${description} ` : ""}
+
+ `;
+
+ // Create tooltip for content wrapper
+ const contentTooltip = document.createElement("div");
+ contentTooltip.className = "cal-tooltip";
+ contentTooltip.style.cssText = `
+ position: fixed;
+ background-color: #1a1a1a;
+ color: white;
+ padding: 4px 8px;
+ border-radius: 6px;
+ font-size: 12px;
+ font-weight: 600;
+ white-space: nowrap;
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity 0.15s ease;
+ z-index: 10002;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ display: none;
+ `;
+ contentTooltip.textContent = "Insert link";
+ document.body.appendChild(contentTooltip);
+ tooltipsToCleanup.push(contentTooltip);
+
+ // Show/hide tooltip
+ contentWrapper.addEventListener("mouseenter", (e) => {
+ const rect = contentWrapper.getBoundingClientRect();
+ // Shift right to better center on the visible content
+ contentTooltip.style.left = `${rect.left + rect.width / 2 + 80}px`;
+ contentTooltip.style.top = `${rect.top + 35}px`;
+ contentTooltip.style.transform = "translate(-50%, -100%)";
+ contentTooltip.style.display = "block";
+ contentTooltip.style.opacity = "1";
+ });
+ contentWrapper.addEventListener("mouseleave", () => {
+ contentTooltip.style.opacity = "0";
+ setTimeout(() => {
+ if (contentTooltip.style.opacity === "0") {
+ contentTooltip.style.display = "none";
+ }
+ }, 150);
+ });
+
+ // Add click handler to content wrapper to insert link
+ contentWrapper.addEventListener("click", (e) => {
+ e.stopPropagation();
+ // Remove tooltip
+ contentTooltip.remove();
+ menu.remove();
+ // Insert link into email text
+ insertEventTypeLink(eventType);
+ });
+
+ // Create buttons container
+ const buttonsContainer = document.createElement("div");
+ buttonsContainer.style.cssText = `
+ display: flex;
+ align-items: center;
+ gap: 0;
+ flex-shrink: 0;
+ `;
+
+ // Preview button
+ const previewBtn = document.createElement("button");
+ previewBtn.innerHTML = `
+
+
+ `;
+ previewBtn.style.cssText = `
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #e5e5ea;
+ border-right: none;
+ border-radius: 6px 0 0 6px;
+ background: white;
+ cursor: pointer;
+ transition: background-color 0.1s ease;
+ padding: 0;
+ position: relative;
+ `;
+
+ // Create tooltip for preview button
+ const previewTooltip = createTooltip("Preview", previewBtn);
+ tooltipsToCleanup.push(previewTooltip);
+
+ previewBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const bookingUrl = `https://cal.com/${eventType.users?.[0]?.username || "user"}/${eventType.slug}`;
+ window.open(bookingUrl, "_blank");
+ });
+ previewBtn.addEventListener("mouseenter", () => {
+ previewBtn.style.backgroundColor = "#f8f9fa";
+ });
+ previewBtn.addEventListener("mouseleave", () => {
+ previewBtn.style.backgroundColor = "white";
+ });
+
+ // Copy link button
+ const copyBtn = document.createElement("button");
+ copyBtn.innerHTML = `
+
+
+ `;
+ copyBtn.style.cssText = `
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #e5e5ea;
+ border-right: none;
+ background: white;
+ cursor: pointer;
+ transition: background-color 0.1s ease;
+ padding: 0;
+ position: relative;
+ `;
+
+ // Create tooltip for copy button
+ const copyTooltip = createTooltip("Copy link", copyBtn);
+ tooltipsToCleanup.push(copyTooltip);
+
+ copyBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ // Copy to clipboard
+ const bookingUrl = `https://cal.com/${eventType.users?.[0]?.username || "user"}/${eventType.slug}`;
+ navigator.clipboard
+ .writeText(bookingUrl)
+ .then(() => {
+ showNotification("Link copied!", "success");
+ // Change icon to checkmark
+ copyBtn.innerHTML = `
+
+
+ `;
+ setTimeout(() => {
+ copyBtn.innerHTML = `
+
+
+ `;
+ }, 2000);
+ })
+ .catch(() => {
+ showNotification("Failed to copy link", "error");
+ });
+ });
+ copyBtn.addEventListener("mouseenter", () => {
+ copyBtn.style.backgroundColor = "#f8f9fa";
+ });
+ copyBtn.addEventListener("mouseleave", () => {
+ copyBtn.style.backgroundColor = "white";
+ });
+
+ // Edit button (replaces three dots menu)
+ const editBtn = document.createElement("button");
+ editBtn.innerHTML = `
+
+
+ `;
+ editBtn.style.cssText = `
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid #e5e5ea;
+ border-radius: 0 6px 6px 0;
+ background: white;
+ cursor: pointer;
+ transition: background-color 0.1s ease;
+ padding: 0;
+ position: relative;
+ `;
+
+ // Create tooltip for edit button
+ const editTooltip = createTooltip("Edit", editBtn);
+ tooltipsToCleanup.push(editTooltip);
+
+ editBtn.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const editUrl = `https://app.cal.com/event-types/${eventType.id}`;
+ window.open(editUrl, "_blank");
+ });
+ editBtn.addEventListener("mouseenter", () => {
+ editBtn.style.backgroundColor = "#f8f9fa";
+ });
+ editBtn.addEventListener("mouseleave", () => {
+ editBtn.style.backgroundColor = "white";
+ });
+
+ // Assemble buttons
+ buttonsContainer.appendChild(previewBtn);
+ buttonsContainer.appendChild(copyBtn);
+ buttonsContainer.appendChild(editBtn);
+
+ // Hover effect for whole item
+ menuItem.addEventListener("mouseenter", () => {
+ menuItem.style.backgroundColor = "#f8f9fa";
+ });
+
+ menuItem.addEventListener("mouseleave", () => {
+ menuItem.style.backgroundColor = "transparent";
+ });
+
+ // Assemble menu item
+ menuItem.appendChild(contentWrapper);
+ menuItem.appendChild(buttonsContainer);
+
+ menu.appendChild(menuItem);
+ });
+ } catch (forEachError) {
+ menu.innerHTML = `
+
+ Error displaying event types
+
+ `;
+ }
+ } catch (error) {
+ menu.innerHTML = `
+
+ Failed to load event types
+
+
+ Error: ${(error as Error).message}
+
+
+ Close
+
+ `;
+ }
+ }
+
+ function insertEventTypeLink(eventType) {
+ // Construct the Cal.com booking link
+ const bookingUrl = `https://cal.com/${eventType.users?.[0]?.username || "user"}/${eventType.slug}`;
+
+ // Try to insert at cursor position in the compose field
+ const inserted = insertTextAtCursor(bookingUrl);
+
+ if (inserted) {
+ showNotification("Link inserted", "success");
+ } else {
+ // Fallback: copy to clipboard if insertion fails
+ navigator.clipboard
+ .writeText(bookingUrl)
+ .then(() => {
+ showNotification("Link copied!", "success");
+ })
+ .catch(() => {
+ showNotification("Failed to copy link", "error");
+ });
+ }
+ }
+
+ function copyEventTypeLink(eventType) {
+ // Construct the Cal.com booking link
+ const bookingUrl = `https://cal.com/${eventType.users?.[0]?.username || "user"}/${eventType.slug}`;
+
+ // Try to insert at cursor position in the compose field
+ const inserted = insertTextAtCursor(bookingUrl);
+
+ if (inserted) {
+ showNotification("Link inserted", "success");
+ } else {
+ // Fallback: copy to clipboard if insertion fails
+ navigator.clipboard
+ .writeText(bookingUrl)
+ .then(() => {
+ showNotification("Link copied!", "success");
+ })
+ .catch(() => {
+ showNotification("Failed to copy link", "error");
+ });
+ }
+ }
+
+ function insertTextAtCursor(text) {
+ // Find the active compose field
+ // Gmail uses contenteditable divs for the compose body
+ const composeBody =
+ document.querySelector('[role="textbox"][aria-label*="Message Body"]') ||
+ document.querySelector('[role="textbox"][g_editable="true"]') ||
+ document.querySelector('div[contenteditable="true"][role="textbox"]');
+
+ if (!composeBody) {
+ return false;
+ }
+
+ // Focus the compose field
+ (composeBody as HTMLElement).focus();
+
+ // Get the current selection
+ const selection = window.getSelection();
+ if (!selection || selection.rangeCount === 0) {
+ // If no selection, append to the end
+ const textNode = document.createTextNode(" " + text + " ");
+ composeBody.appendChild(textNode);
+
+ // Move cursor after inserted text
+ const range = document.createRange();
+ range.setStartAfter(textNode);
+ range.collapse(true);
+ selection?.removeAllRanges();
+ selection?.addRange(range);
+
+ return true;
+ }
+
+ // Insert at cursor position
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+
+ // Create a text node with the link (with spaces around it)
+ const textNode = document.createTextNode(" " + text + " ");
+ range.insertNode(textNode);
+
+ // Move cursor after inserted text
+ range.setStartAfter(textNode);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ // Trigger input event so Gmail knows content changed
+ composeBody.dispatchEvent(new Event("input", { bubbles: true }));
+ composeBody.dispatchEvent(new Event("change", { bubbles: true }));
+
+ return true;
+ }
+
+ function showNotification(message, type) {
+ const notification = document.createElement("div");
+ notification.style.cssText = `
+ position: fixed;
+ bottom: 80px;
+ right: 80px;
+ padding: 10px 12px;
+ background: ${type === "success" ? "#111827" : "#752522"};
+ color: white;
+ border: 1px solid #2b2b2b;
+ border-radius: 8px;
+ font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ z-index: 10000;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ `;
+
+ // Add check icon for success
+ if (type === "success") {
+ const checkIcon = document.createElement("span");
+ checkIcon.innerHTML = `
+
+
+ `;
+ checkIcon.style.cssText = `
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ `;
+ notification.appendChild(checkIcon);
+ }
+
+ // Add message text
+ const messageText = document.createElement("span");
+ messageText.textContent = message;
+ notification.appendChild(messageText);
+
+ document.body.appendChild(notification);
+
+ // Trigger fade-in animation
+ requestAnimationFrame(() => {
+ notification.style.opacity = "1";
+ notification.style.transform = "translateY(0)";
+ });
+
+ // Fade out and remove after 3 seconds
+ setTimeout(() => {
+ notification.style.opacity = "0";
+ notification.style.transform = "translateY(10px)";
+ setTimeout(() => {
+ notification.remove();
+ }, 200);
+ }, 3000);
+ }
+
+ // Add tooltip
+ calButton.title = "Schedule with Cal.com";
+
+ // Add button to cell
+ calButtonCell.appendChild(calButton);
+
+ // Insert the new cell after the send button cell
+ if (sendButtonCell.nextSibling) {
+ tableRow.insertBefore(calButtonCell, sendButtonCell.nextSibling);
+ } else {
+ tableRow.appendChild(calButtonCell);
+ }
+ });
+ }
+
+ // Initial injection
+ setTimeout(injectCalButton, 1000);
+
+ // Watch for DOM changes (Gmail is a SPA)
+ const observer = new MutationObserver(() => {
+ injectCalButton();
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+
+ // Also inject on URL changes (Gmail navigation)
+ let currentUrl = window.location.href;
+ setInterval(() => {
+ if (window.location.href !== currentUrl) {
+ currentUrl = window.location.href;
+ setTimeout(injectCalButton, 500);
+ }
+ }, 1000);
+
+ // ========== Google Calendar Chip Integration ==========
+
+ /**
+ * Generate HTML email embed for Cal.com booking
+ * Based on the email embed feature in main Cal.com codebase
+ */
+ function generateEmailEmbedHTML(params: {
+ eventType: any;
+ username: string;
+ slots: any[];
+ duration: number;
+ timezone: string;
+ timezoneOffset: string;
+ }): string {
+ const { eventType, username, slots, duration, timezone, timezoneOffset } = params;
+
+ // Group slots by date
+ const slotsByDate: { [date: string]: any[] } = {};
+ slots.forEach((slot) => {
+ if (!slotsByDate[slot.isoDate]) {
+ slotsByDate[slot.isoDate] = [];
+ }
+ slotsByDate[slot.isoDate].push(slot);
+ });
+
+ // Generate time slot buttons HTML
+ const datesHTML = Object.keys(slotsByDate)
+ .sort()
+ .map((date) => {
+ const dateSlots = slotsByDate[date];
+ const formattedDate = dateSlots[0].date; // Already formatted like "Thu, 27 November"
+
+ const slotsHTML = dateSlots
+ .map((slot) => {
+ // URL-encode the timezone to handle special characters like "/"
+ const encodedTimezone = encodeURIComponent(timezone);
+ const bookingURL = `https://cal.com/${username}/${eventType.slug}?duration=${duration}&date=${slot.isoDate}&slot=${slot.isoTimestamp}&cal.tz=${encodedTimezone}`;
+
+ return `
+
+
+
+ `;
+ })
+ .join("");
+
+ return `
+
+
+
+
+
+ ${formattedDate}
+
+
+
+
+
+
+
+
+
+
+ `;
+ })
+ .join("");
+
+ // Complete HTML structure
+ return `
+
+
+ ${eventType.title}
+
+
+ Duration: ${duration} mins
+
+
+
+ Timezone: ${timezone} (${timezoneOffset})
+
+
+ ${datesHTML}
+
+
+ Powered by Cal.com
+
+
+ `;
+ }
+
+ /**
+ * Helper function to insert HTML into Gmail compose field
+ * @param html - The HTML content to insert
+ * @param targetComposeElement - Optional: The chip's compose element to ensure we insert in the correct window
+ */
+ function insertGmailHTML(html: string, targetComposeElement?: HTMLElement): boolean {
+ try {
+ // Validate input
+ if (!html || typeof html !== "string") {
+ console.warn("Cal.com: Invalid HTML to insert");
+ return false;
+ }
+
+ // If a target compose element is provided, find the compose body within its scope
+ let composeBody: Element | null = null;
+
+ if (targetComposeElement) {
+ const composeWindow =
+ targetComposeElement.closest('[role="dialog"]') ||
+ targetComposeElement.closest(".nH") ||
+ targetComposeElement.closest('div[contenteditable="true"]')?.parentElement;
+
+ if (composeWindow) {
+ composeBody =
+ composeWindow.querySelector('[role="textbox"][aria-label*="Message Body"]') ||
+ composeWindow.querySelector('[role="textbox"][g_editable="true"]') ||
+ composeWindow.querySelector('div[contenteditable="true"][role="textbox"]');
+ }
+ }
+
+ // Fallback: Try global selectors
+ if (!composeBody) {
+ composeBody =
+ document.querySelector('[role="textbox"][aria-label*="Message Body"]') ||
+ document.querySelector('[role="textbox"][g_editable="true"]') ||
+ document.querySelector('div[contenteditable="true"][role="textbox"]');
+ }
+
+ if (!composeBody) {
+ console.warn("Cal.com: Gmail compose field not found");
+ return false;
+ }
+
+ // Focus the compose body
+ try {
+ (composeBody as HTMLElement).focus();
+ } catch (focusError) {
+ console.warn("Cal.com: Failed to focus compose field:", focusError);
+ }
+
+ const selection = window.getSelection();
+ if (!selection || selection.rangeCount === 0) {
+ // No selection - append at end
+ try {
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = html;
+ composeBody.appendChild(tempDiv);
+ return true;
+ } catch (appendError) {
+ console.warn("Cal.com: Failed to append HTML:", appendError);
+ return false;
+ }
+ }
+
+ // Insert at cursor position
+ try {
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+
+ const tempDiv = document.createElement("div");
+ tempDiv.innerHTML = html;
+
+ // Insert all child nodes
+ const fragment = document.createDocumentFragment();
+ while (tempDiv.firstChild) {
+ fragment.appendChild(tempDiv.firstChild);
+ }
+
+ range.insertNode(fragment);
+ range.collapse(false);
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ // Trigger input events
+ (composeBody as HTMLElement).dispatchEvent(new Event("input", { bubbles: true }));
+ (composeBody as HTMLElement).dispatchEvent(new Event("change", { bubbles: true }));
+
+ return true;
+ } catch (insertError) {
+ console.warn("Cal.com: Failed to insert HTML at cursor:", insertError);
+ return false;
+ }
+ } catch (error) {
+ console.error("Cal.com: Critical error inserting HTML:", error);
+ return false;
+ }
+ }
+
+ /**
+ * Helper function to insert text into Gmail compose field
+ * @param text - The text to insert
+ * @param targetComposeElement - Optional: The chip's compose element to ensure we insert in the correct window
+ */
+ function insertGmailText(text: string, targetComposeElement?: HTMLElement): boolean {
+ try {
+ // Validate input
+ if (!text || typeof text !== "string") {
+ console.warn("Cal.com: Invalid text to insert");
+ return false;
+ }
+
+ // If a target compose element is provided, find the compose body within its scope
+ // Otherwise, fall back to the first compose field (legacy behavior)
+ let composeBody: Element | null = null;
+
+ if (targetComposeElement) {
+ // Find the compose window that contains the chip
+ const composeWindow =
+ targetComposeElement.closest('[role="dialog"]') ||
+ targetComposeElement.closest(".nH") ||
+ targetComposeElement.closest('div[contenteditable="true"]')?.parentElement;
+
+ if (composeWindow) {
+ // Look for compose body within this specific window
+ composeBody =
+ composeWindow.querySelector('[role="textbox"][aria-label*="Message Body"]') ||
+ composeWindow.querySelector('[role="textbox"][g_editable="true"]') ||
+ composeWindow.querySelector('div[contenteditable="true"][role="textbox"]');
+ }
+ }
+
+ // Fallback: Try global selectors if no target or if scoped search failed
+ if (!composeBody) {
+ composeBody =
+ document.querySelector('[role="textbox"][aria-label*="Message Body"]') ||
+ document.querySelector('[role="textbox"][g_editable="true"]') ||
+ document.querySelector('div[contenteditable="true"][role="textbox"]');
+ }
+
+ if (!composeBody) {
+ console.warn("Cal.com: Gmail compose field not found (structure may have changed)");
+ return false;
+ }
+
+ // Try to focus the compose body
+ try {
+ (composeBody as HTMLElement).focus();
+ } catch (focusError) {
+ console.warn("Cal.com: Failed to focus compose field:", focusError);
+ // Continue anyway - might still work
+ }
+
+ const selection = window.getSelection();
+ if (!selection || selection.rangeCount === 0) {
+ try {
+ const textNode = document.createTextNode(" " + text + " ");
+ composeBody.appendChild(textNode);
+ const range = document.createRange();
+ range.setStartAfter(textNode);
+ range.collapse(true);
+ selection?.removeAllRanges();
+ selection?.addRange(range);
+ return true;
+ } catch (appendError) {
+ console.warn("Cal.com: Failed to append text (fallback method):", appendError);
+ return false;
+ }
+ }
+
+ try {
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+ const textNode = document.createTextNode(" " + text + " ");
+ range.insertNode(textNode);
+ range.setStartAfter(textNode);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ composeBody.dispatchEvent(new Event("input", { bubbles: true }));
+ composeBody.dispatchEvent(new Event("change", { bubbles: true }));
+ return true;
+ } catch (insertError) {
+ console.warn("Cal.com: Failed to insert text at cursor:", insertError);
+ return false;
+ }
+ } catch (error) {
+ console.error(
+ "Cal.com: Critical error inserting text (Gmail structure may have changed):",
+ error
+ );
+ return false;
+ }
+ }
+
+ /**
+ * Helper function to show notification
+ * Fail silently if DOM manipulation fails (prevents breaking Gmail)
+ */
+ function showGmailNotification(message: string, type: "success" | "error"): void {
+ try {
+ const notification = document.createElement("div");
+ notification.style.cssText = `
+ position: fixed;
+ bottom: 80px;
+ right: 80px;
+ padding: 10px 12px;
+ background: ${type === "success" ? "#111827" : "#752522"};
+ color: white;
+ border: 1px solid #2b2b2b;
+ border-radius: 8px;
+ font-family: "Google Sans",Roboto,Arial,sans-serif;
+ font-size: 14px;
+ font-weight: 600;
+ z-index: 10000;
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ opacity: 0;
+ transform: translateY(10px);
+ transition: opacity 0.2s ease, transform 0.2s ease;
+ `;
+
+ if (type === "success") {
+ const icon = document.createElement("span");
+ icon.innerHTML = `
+
+
+ `;
+ icon.style.cssText =
+ "display: flex; align-items: center; justify-content: center; flex-shrink: 0;";
+ notification.appendChild(icon);
+ }
+
+ const text = document.createElement("span");
+ text.textContent = message;
+ notification.appendChild(text);
+
+ document.body.appendChild(notification);
+
+ requestAnimationFrame(() => {
+ try {
+ notification.style.opacity = "1";
+ notification.style.transform = "translateY(0)";
+ } catch (e) {
+ // Ignore animation errors
+ }
+ });
+
+ setTimeout(() => {
+ try {
+ notification.style.opacity = "0";
+ notification.style.transform = "translateY(10px)";
+ setTimeout(() => {
+ try {
+ notification.remove();
+ } catch (e) {
+ // Ignore removal errors
+ }
+ }, 200);
+ } catch (e) {
+ // Ignore animation errors
+ }
+ }, 3000);
+ } catch (error) {
+ // Silently fail - notifications are non-critical
+ console.warn("Cal.com: Failed to show notification:", error);
+ }
+ }
+
+ /**
+ * Auto-remove all Cal.com action bars before sending email
+ */
+ function setupAutoRemoveOnSend() {
+ try {
+ // Helper function to remove all action bars and marked Google chips
+ const removeAllActionBars = () => {
+ // Remove action bars
+ const allActionBars = document.querySelectorAll(".cal-companion-action-bar");
+ if (allActionBars.length > 0) {
+ console.log(`Cal.com: Removing ${allActionBars.length} action bar(s) before send`);
+ allActionBars.forEach((bar) => {
+ try {
+ // Call cleanup function to remove event listeners before removing DOM node
+ if ((bar as any).__cleanup) {
+ (bar as any).__cleanup();
+ }
+ bar.remove();
+ } catch (error) {
+ console.warn("Cal.com: Failed to remove action bar:", error);
+ }
+ });
+ }
+
+ // Remove Google chips that were marked for removal (user used Cal.com)
+ const markedChips = document.querySelectorAll(
+ '.gmail_chip[data-calcom-remove-on-send="true"]'
+ );
+ if (markedChips.length > 0) {
+ console.log(
+ `Cal.com: Removing ${markedChips.length} Google chip(s) before send (user used Cal.com)`
+ );
+ markedChips.forEach((chip) => {
+ try {
+ chip.remove();
+ } catch (error) {
+ console.warn("Cal.com: Failed to remove Google chip:", error);
+ }
+ });
+ }
+ };
+
+ // Method 1: Watch for clicks on Send button
+ document.addEventListener(
+ "click",
+ (e) => {
+ const target = e.target as HTMLElement;
+
+ // Check if the clicked element is a Send button
+ const isSendButton =
+ target.getAttribute("data-tooltip")?.includes("Send") ||
+ target.getAttribute("aria-label")?.includes("Send") ||
+ target.textContent?.trim() === "Send" ||
+ target.closest('[data-tooltip*="Send"]') ||
+ target.closest('[aria-label*="Send"]') ||
+ target
+ .closest('[role="button"][data-tooltip]')
+ ?.getAttribute("data-tooltip")
+ ?.includes("Send");
+
+ if (isSendButton) {
+ console.log("Cal.com: Send button clicked");
+ removeAllActionBars();
+ }
+ },
+ true
+ ); // Use capture phase
+
+ // Method 2: Watch for keyboard shortcuts (Ctrl+Enter / Cmd+Enter)
+ document.addEventListener(
+ "keydown",
+ (e) => {
+ const isCtrlOrCmd = e.ctrlKey || e.metaKey;
+ const isEnter = e.key === "Enter";
+
+ if (isCtrlOrCmd && isEnter) {
+ // Check if we're in a compose window
+ const activeElement = document.activeElement;
+ const isInCompose =
+ activeElement?.getAttribute("role") === "textbox" ||
+ activeElement?.getAttribute("contenteditable") === "true" ||
+ activeElement?.closest('[role="textbox"]');
+
+ if (isInCompose) {
+ console.log("Cal.com: Send keyboard shortcut detected (Ctrl/Cmd+Enter)");
+ removeAllActionBars();
+ }
+ }
+ },
+ true
+ );
+
+ // Note: Action bars are now overlays (like Grammarly), so they won't be included in emails.
+ // We keep the click and keyboard listeners for clean UI (removing overlays when sending).
+ // Removed the MutationObserver as it was too aggressive and removing action bars prematurely.
+
+ console.log("Cal.com: Auto-remove on send listeners added (click, keyboard)");
+ } catch (error) {
+ console.warn("Cal.com: Failed to setup auto-remove on send:", error);
+ }
+ }
+
+ /**
+ * Watch for Google Calendar scheduling chips and add Cal.com suggestion button
+ */
+ function watchForGoogleChips() {
+ try {
+ const observer = new MutationObserver((mutations) => {
+ try {
+ const chips = document.querySelectorAll(
+ ".gmail_chip.gmail_ad_hoc_v2_content:not([data-calcom-chip-processed])"
+ );
+
+ chips.forEach((chip) => {
+ try {
+ chip.setAttribute("data-calcom-chip-processed", "true");
+ handleGoogleChipDetected(chip as HTMLElement);
+ } catch (error) {
+ // Silently fail for individual chips to prevent breaking other chips
+ console.warn("Cal.com: Failed to process chip:", error);
+ }
+ });
+ } catch (error) {
+ // Silently fail to prevent Gmail UI from breaking
+ console.warn("Cal.com: Failed to detect chips:", error);
+ }
+ });
+
+ observer.observe(document.body, {
+ childList: true,
+ subtree: true,
+ });
+
+ // Also check for existing chips on page load
+ setTimeout(() => {
+ try {
+ const existingChips = document.querySelectorAll(
+ ".gmail_chip.gmail_ad_hoc_v2_content:not([data-calcom-chip-processed])"
+ );
+ existingChips.forEach((chip) => {
+ try {
+ chip.setAttribute("data-calcom-chip-processed", "true");
+ handleGoogleChipDetected(chip as HTMLElement);
+ } catch (error) {
+ console.warn("Cal.com: Failed to process existing chip:", error);
+ }
+ });
+ } catch (error) {
+ console.warn("Cal.com: Failed to find existing chips:", error);
+ }
+ }, 1000);
+ } catch (error) {
+ // Critical failure - log but don't break Gmail
+ console.error("Cal.com: Failed to initialize chip watcher:", error);
+ }
+ }
+
+ /**
+ * Handle when a Google Calendar chip is detected
+ */
+ function handleGoogleChipDetected(chipElement: HTMLElement) {
+ try {
+ console.log("Cal.com: handleGoogleChipDetected called");
+
+ // Validate chip element exists and is in DOM
+ if (!chipElement || !chipElement.isConnected) {
+ console.warn("Cal.com: Invalid or disconnected chip element");
+ return;
+ }
+
+ // Only show action bars in ACTIVE compose windows (not in sent/inbox emails)
+ // Check if chip is in a contenteditable area (compose window)
+ const composeBody = chipElement.closest('[contenteditable="true"]');
+
+ if (!composeBody) {
+ // Silently skip - chip not in compose area (likely in sent/inbox)
+ return;
+ }
+
+ const parsedData = parseGoogleChip(chipElement);
+
+ if (!parsedData || parsedData.slots.length === 0) {
+ // Silently skip - chip not fully loaded or invalid
+ return;
+ }
+
+ console.log(
+ `Cal.com: ✅ Google chip detected - ${parsedData.slots.length} slot${parsedData.slots.length > 1 ? "s" : ""} (${parsedData.detectedDuration}min)`
+ );
+
+ // Safely check for parent element
+ if (!chipElement.parentElement) {
+ return;
+ }
+
+ // Check if button already exists
+ const existingActionBar = chipElement.parentElement.querySelector(
+ ".cal-companion-action-bar"
+ );
+ const scheduleId = chipElement.getAttribute("data-ad-hoc-schedule-id");
+
+ if (existingActionBar) {
+ // Action bar exists - check if schedule ID or duration changed
+ const existingScheduleId = existingActionBar.getAttribute("data-schedule-id");
+ const existingDuration = existingActionBar.getAttribute("data-duration");
+
+ if (
+ existingScheduleId === scheduleId &&
+ existingDuration === String(parsedData.detectedDuration)
+ ) {
+ // Nothing changed, no need to recreate
+ return;
+ }
+ // Something changed - remove old action bar and create new one
+ console.log(`Cal.com: 🔄 Chip updated - ${parsedData.detectedDuration}min`);
+ try {
+ existingActionBar.remove();
+ } catch (e) {
+ // Silently ignore removal errors
+ }
+ }
+
+ // Watch for mutations on this chip to detect ANY changes
+ const observer = new MutationObserver(() => {
+ try {
+ const newScheduleId = chipElement.getAttribute("data-ad-hoc-schedule-id");
+ const actionBar = chipElement.parentElement?.querySelector(
+ ".cal-companion-action-bar"
+ );
+ const currentScheduleId = actionBar?.getAttribute("data-schedule-id");
+
+ // Check if schedule ID changed (this changes when time range or duration changes)
+ if (currentScheduleId && newScheduleId && currentScheduleId !== newScheduleId) {
+ console.log(`Cal.com: 🔄 Time range/duration changed`);
+ try {
+ actionBar?.remove();
+ // Recreate action bar with new data
+ handleGoogleChipDetected(chipElement);
+ } catch (e) {
+ // Silently ignore recreation errors
+ }
+ }
+ } catch (error) {
+ // Silently ignore observer errors - expected during DOM updates
+ }
+ });
+
+ try {
+ observer.observe(chipElement, {
+ childList: true,
+ subtree: true,
+ attributes: true,
+ attributeFilter: ["data-ad-hoc-v2-params"],
+ });
+ } catch (error) {
+ // Silently ignore observer setup errors
+ }
+
+ // Create our own action bar below the chip
+ const actionBar = document.createElement("div");
+ actionBar.className = "cal-companion-action-bar";
+ actionBar.setAttribute("contenteditable", "false"); // Make non-editable
+ actionBar.setAttribute("data-cal-companion", "true"); // Marker for our elements
+ actionBar.setAttribute("data-duration", String(parsedData.detectedDuration));
+ actionBar.setAttribute("data-slot-count", String(parsedData.slots.length));
+ if (scheduleId) {
+ actionBar.setAttribute("data-schedule-id", scheduleId);
+ }
+ actionBar.style.cssText = `
+ position: absolute;
+ z-index: 1000;
+ padding: 10px 14px;
+ background: #f8f9fa;
+ border: 1px solid #e0e0e0;
+ border-radius: 8px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ font-family: 'Google Sans', Roboto, Arial, sans-serif;
+ font-size: 14px;
+ width: 434px;
+ max-width: 100%;
+ box-sizing: border-box;
+ user-select: none;
+ pointer-events: auto;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ `;
+
+ // Cal.com icon with circular background
+ const icon = document.createElement("div");
+ icon.style.cssText = `
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #111827;
+ border-radius: 50%;
+ `;
+ icon.innerHTML = `
+
+
+ `;
+
+ // Text with duration indicator
+ const text = document.createElement("span");
+ text.textContent = `Suggest ${parsedData.detectedDuration}min Cal.com links`;
+ text.setAttribute("contenteditable", "false"); // Make text non-editable
+ text.style.cssText = `
+ color: #1f1f1f;
+ font-weight: 500;
+ flex: 1;
+ user-select: none;
+ `;
+
+ // Buttons container
+ const buttonsContainer = document.createElement("div");
+ buttonsContainer.style.cssText = `
+ display: flex;
+ gap: 8px;
+ flex-shrink: 0;
+ `;
+
+ // "Suggest Links" Button
+ const suggestButton = document.createElement("button");
+ suggestButton.className = "cal-companion-suggest-button";
+ suggestButton.textContent = "Suggest Links";
+ suggestButton.style.cssText = `
+ padding: 8px 16px;
+ background: #111827;
+ color: white;
+ border: none;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: background 0.2s ease;
+ font-family: 'Google Sans', Roboto, Arial, sans-serif;
+ `;
+
+ suggestButton.addEventListener("mouseenter", () => {
+ suggestButton.style.background = "#1f2937";
+ });
+
+ suggestButton.addEventListener("mouseleave", () => {
+ suggestButton.style.background = "#111827";
+ });
+
+ suggestButton.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ // Re-parse the chip to get fresh data (in case it changed)
+ const freshParsedData = parseGoogleChip(chipElement);
+ console.log(
+ "Cal.com: Suggest Links clicked, fresh parsed data:",
+ freshParsedData?.detectedDuration,
+ "min"
+ );
+ if (freshParsedData && freshParsedData.slots.length > 0) {
+ showCalcomSuggestionMenu(chipElement, freshParsedData);
+ } else {
+ console.log("Cal.com: Failed to parse fresh data or no slots found");
+ }
+ });
+
+ // "Insert Embed" Button
+ const embedButton = document.createElement("button");
+ embedButton.className = "cal-companion-embed-button";
+ embedButton.textContent = "Insert Embed";
+ embedButton.style.cssText = `
+ padding: 8px 16px;
+ background: white;
+ color: #111827;
+ border: 1px solid #111827;
+ border-radius: 6px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-family: 'Google Sans', Roboto, Arial, sans-serif;
+ `;
+
+ embedButton.addEventListener("mouseenter", () => {
+ embedButton.style.background = "#f8f9fa";
+ });
+
+ embedButton.addEventListener("mouseleave", () => {
+ embedButton.style.background = "white";
+ });
+
+ embedButton.addEventListener("click", async (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Re-parse the chip to get fresh data
+ const freshParsedData = parseGoogleChip(chipElement);
+ console.log(
+ "Cal.com: Insert Embed clicked, fresh parsed data:",
+ freshParsedData?.detectedDuration,
+ "min"
+ );
+
+ if (!freshParsedData || freshParsedData.slots.length === 0) {
+ showGmailNotification("No time slots found", "error");
+ return;
+ }
+
+ // Fetch event types to get the matching one
+ try {
+ // Disable button and show loading state with opacity
+ embedButton.disabled = true;
+ embedButton.style.opacity = "0.6";
+ embedButton.style.cursor = "not-allowed";
+
+ const response: any = await new Promise((resolve, reject) => {
+ chrome.runtime.sendMessage({ action: "fetch-event-types" }, (result) => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(chrome.runtime.lastError.message));
+ } else if (result && result.error) {
+ reject(new Error(result.error));
+ } else {
+ resolve(result);
+ }
+ });
+ });
+
+ const eventTypes = response?.data || (Array.isArray(response) ? response : []);
+ const matchingEventType = eventTypes.find(
+ (et: any) => et.lengthInMinutes === freshParsedData.detectedDuration
+ );
+
+ if (!matchingEventType) {
+ showGmailNotification(
+ `No ${freshParsedData.detectedDuration}min event type found`,
+ "error"
+ );
+ embedButton.disabled = false;
+ embedButton.style.opacity = "1";
+ embedButton.style.cursor = "pointer";
+ return;
+ }
+
+ const username = matchingEventType.users?.[0]?.username || "user";
+
+ // Generate HTML embed
+ const embedHTML = generateEmailEmbedHTML({
+ eventType: matchingEventType,
+ username: username,
+ slots: freshParsedData.slots,
+ duration: freshParsedData.detectedDuration,
+ timezone: freshParsedData.timezone,
+ timezoneOffset: freshParsedData.timezoneOffset,
+ });
+
+ // Insert HTML into Gmail
+ const inserted = insertGmailHTML(embedHTML, chipElement);
+
+ if (inserted) {
+ showGmailNotification("Cal.com embed inserted!", "success");
+ console.log("Cal.com: ✅ Email embed inserted successfully");
+
+ // Mark chip for removal on send (don't remove yet - keep it visible for user reference)
+ chipElement.setAttribute("data-calcom-remove-on-send", "true");
+ } else {
+ showGmailNotification("Failed to insert embed", "error");
+ }
+
+ embedButton.disabled = false;
+ embedButton.style.opacity = "1";
+ embedButton.style.cursor = "pointer";
+ } catch (error) {
+ console.error("Cal.com: Failed to insert embed:", error);
+
+ // Check if this is the "Extension context invalidated" error
+ const isContextInvalidated =
+ error instanceof Error && error.message.includes("Extension context invalidated");
+
+ if (isContextInvalidated) {
+ showGmailNotification("Extension reloaded - please reload Gmail", "error");
+ } else {
+ showGmailNotification("Failed to insert embed", "error");
+ }
+
+ embedButton.disabled = false;
+ embedButton.style.opacity = "1";
+ embedButton.style.cursor = "pointer";
+ }
+ });
+
+ buttonsContainer.appendChild(suggestButton);
+ buttonsContainer.appendChild(embedButton);
+
+ // Close button (×) to remove the action bar completely
+ const closeBtn = document.createElement("button");
+ closeBtn.className = "cal-companion-close-btn";
+ closeBtn.setAttribute("aria-label", "Close");
+ closeBtn.style.cssText = `
+ padding: 6px;
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.15s;
+ flex-shrink: 0;
+ color: #5f6368;
+ `;
+ closeBtn.innerHTML = `
+
+
+ `;
+
+ closeBtn.addEventListener("mouseenter", () => {
+ closeBtn.style.background = "#e8eaed";
+ });
+
+ closeBtn.addEventListener("mouseleave", () => {
+ closeBtn.style.background = "transparent";
+ });
+
+ closeBtn.addEventListener("click", (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ // Remove the action bar completely
+ try {
+ // Call cleanup function if it exists
+ if ((actionBar as any).__cleanup) {
+ (actionBar as any).__cleanup();
+ }
+ actionBar.remove();
+ } catch (error) {
+ // Silently ignore removal errors
+ }
+ });
+
+ // Assemble action bar
+ try {
+ actionBar.appendChild(icon);
+ actionBar.appendChild(text);
+ actionBar.appendChild(buttonsContainer);
+ actionBar.appendChild(closeBtn);
+
+ // Position the action bar as an overlay (like Grammarly)
+ // This ensures it never becomes part of the email body
+ const positionActionBar = () => {
+ try {
+ if (!document.body.contains(chipElement)) {
+ // Chip removed, clean up
+ actionBar.remove();
+ return;
+ }
+
+ const chipRect = chipElement.getBoundingClientRect();
+
+ // Position below the chip with 8px gap
+ const top = chipRect.bottom + window.scrollY + 8;
+ const left = chipRect.left + window.scrollX;
+
+ actionBar.style.top = `${top}px`;
+ actionBar.style.left = `${left}px`;
+ } catch (error) {
+ // Silently ignore positioning errors
+ }
+ };
+
+ // Before appending, clean up orphaned or duplicate action bars for THIS chip only
+ // (happens when Google changes duration - creates new chip, but old action bar still floating)
+ const existingOverlayBars = document.querySelectorAll(".cal-companion-action-bar");
+ existingOverlayBars.forEach((bar) => {
+ const barScheduleId = bar.getAttribute("data-schedule-id");
+
+ // Only remove action bars that:
+ // 1. Belong to THIS chip (same schedule ID) - we're about to create a new one
+ // 2. OR their chip no longer exists (orphaned)
+ if (barScheduleId === scheduleId) {
+ // This bar belongs to the current chip - remove it (we'll create a fresh one)
+ try {
+ if ((bar as any).__cleanup) {
+ (bar as any).__cleanup();
+ }
+ bar.remove();
+ } catch (e) {
+ // Ignore removal errors
+ }
+ } else {
+ // This bar belongs to a different chip - check if that chip still exists
+ try {
+ const chipForBar = document.querySelector(
+ `.gmail_chip.gmail_ad_hoc_v2_content[data-ad-hoc-schedule-id="${barScheduleId}"]`
+ );
+ if (!chipForBar) {
+ // Chip is gone, this is an orphaned action bar - remove it
+ if ((bar as any).__cleanup) {
+ (bar as any).__cleanup();
+ }
+ bar.remove();
+ }
+ // Else: chip exists, keep this action bar (belongs to another chip)
+ } catch (e) {
+ // Ignore errors when checking
+ }
+ }
+ });
+
+ // Append to document.body (outside email content, like Grammarly)
+ document.body.appendChild(actionBar);
+
+ // Initial positioning with slight delay to ensure chip is rendered
+ setTimeout(() => {
+ positionActionBar();
+ }, 100);
+
+ // Update position on scroll and resize
+ const updatePosition = () => {
+ if (document.body.contains(chipElement) && document.body.contains(actionBar)) {
+ positionActionBar();
+ } else {
+ // Chip removed, clean up
+ try {
+ actionBar.remove();
+ } catch (e) {
+ // Ignore
+ }
+ }
+ };
+
+ window.addEventListener("scroll", updatePosition, true);
+ window.addEventListener("resize", updatePosition);
+
+ // Store cleanup function
+ (actionBar as any).__cleanup = () => {
+ window.removeEventListener("scroll", updatePosition, true);
+ window.removeEventListener("resize", updatePosition);
+ };
+ } catch (error) {
+ console.error("Cal.com: Failed to create or insert action bar:", error);
+ // Clean up if something failed
+ try {
+ actionBar.remove();
+ } catch (e) {
+ // Ignore cleanup errors
+ }
+ }
+ } catch (error) {
+ // Catch-all to prevent breaking Gmail UI
+ console.error("Cal.com: Error handling Google chip:", error);
+ return;
+ }
+ }
+
+ /**
+ * Show Cal.com suggestion menu for Google Calendar chip - CENTERED FULL-SCREEN MODAL
+ */
+ async function showCalcomSuggestionMenu(chipElement: HTMLElement, parsedData: any) {
+ console.log(
+ "Cal.com: Opening menu for",
+ parsedData.detectedDuration,
+ "min with",
+ parsedData.slots.length,
+ "slots"
+ );
+
+ // Remove existing menu if any (to support reopening with new data)
+ const existingBackdrop = document.querySelector(".cal-companion-google-chip-backdrop");
+ if (existingBackdrop) {
+ console.log("Cal.com: Removing existing backdrop");
+ existingBackdrop.remove();
+ // Wait a tick to ensure DOM is updated before creating new menu
+ await new Promise((resolve) => setTimeout(resolve, 0));
+ }
+
+ // Create full-screen backdrop (like FullScreenModal in companion)
+ const backdrop = document.createElement("div");
+ backdrop.className = "cal-companion-google-chip-backdrop";
+ backdrop.style.cssText = `
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 2147483647;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(4px);
+ `;
+
+ // Create menu (centered modal content)
+ const menu = document.createElement("div");
+ menu.className = "cal-companion-google-chip-menu";
+ menu.style.cssText = `
+ width: 480px;
+ max-width: 90vw;
+ max-height: 80vh;
+ background: white;
+ border-radius: 16px;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ font-family: "Google Sans", Roboto, Arial, sans-serif;
+ pointer-events: auto;
+ `;
+
+ // Header
+ const header = document.createElement("div");
+ header.style.cssText = `
+ padding: 20px 24px;
+ border-bottom: 1px solid #e5e5ea;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ background: white;
+ flex-shrink: 0;
+ `;
+ header.innerHTML = `
+
+
📅 Suggest Cal.com Links
+
${parsedData.slots.length} time slot${parsedData.slots.length > 1 ? "s" : ""} • ${parsedData.detectedDuration}min each
+
+
+
+
+
+ No ${parsedData.detectedDuration}min Event Type Found
+
+
+ Google is suggesting ${parsedData.detectedDuration}-minute time slots, but you don't have any ${parsedData.detectedDuration}min event types configured.
+
+
+ Create ${parsedData.detectedDuration}min Event Type
+
+ `;
+ contentContainer.appendChild(noMatchDiv);
+
+ // Add click handler for create button
+ const createBtn = noMatchDiv.querySelector(".create-event-type-btn");
+ createBtn?.addEventListener("click", () => {
+ // Get username from any existing event type, or use a default
+ const username =
+ eventTypes.length > 0 ? eventTypes[0].users?.[0]?.username || "user" : "user";
+
+ const createUrl = `https://app.cal.com/event-types?dialog=new&eventPage=${username}`;
+ window.open(createUrl, "_blank");
+ showGmailNotification(
+ `Opening Cal.com to create ${parsedData.detectedDuration}min event type`,
+ "success"
+ );
+
+ console.log("Cal.com: Opening create URL:", createUrl);
+ });
+
+ createBtn?.addEventListener("mouseenter", (e) => {
+ (e.target as HTMLElement).style.backgroundColor = "#333";
+ });
+
+ createBtn?.addEventListener("mouseleave", (e) => {
+ (e.target as HTMLElement).style.backgroundColor = "#000";
+ });
+
+ return; // Don't show slots if no matching event types
+ }
+
+ // Event type selector (only show matching event types)
+ const selectorDiv = document.createElement("div");
+ selectorDiv.style.cssText =
+ "padding: 12px 16px; border-bottom: 1px solid #e5e5ea; background: #f8f9fa; position: relative; z-index: 5; pointer-events: auto;";
+
+ // Create label
+ const label = document.createElement("label");
+ label.style.cssText =
+ "font-size: 12px; color: #666; font-weight: 500; display: block; margin-bottom: 6px;";
+ label.textContent =
+ matchingEventTypes.length === 1
+ ? `Event Type (${parsedData.detectedDuration}min)`
+ : `Select ${parsedData.detectedDuration}min Event Type`;
+ selectorDiv.appendChild(label);
+
+ // Track selected event type
+ let selectedEventTypeIndex = 0;
+
+ if (matchingEventTypes.length === 1) {
+ // Single event type - just show it
+ const displayDiv = document.createElement("div");
+ displayDiv.style.cssText = `
+ padding: 10px 12px;
+ border: 1px solid #e5e5ea;
+ border-radius: 8px;
+ font-size: 14px;
+ background: white;
+ font-family: inherit;
+ color: #000;
+ font-weight: 500;
+ box-sizing: border-box;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ `;
+ displayDiv.textContent = matchingEventTypes[0].title;
+ selectorDiv.appendChild(displayDiv);
+ } else {
+ // Multiple event types - custom dropdown
+ const customDropdown = document.createElement("div");
+ customDropdown.className = "custom-event-type-dropdown";
+ customDropdown.style.cssText = "position: relative;";
+
+ // Selected display button
+ const selectedDisplay = document.createElement("div");
+ selectedDisplay.style.cssText = `
+ padding: 10px 12px;
+ border: 1px solid #e5e5ea;
+ border-radius: 8px;
+ font-size: 14px;
+ background: white;
+ font-family: inherit;
+ color: #000;
+ cursor: pointer;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: border-color 0.15s;
+ pointer-events: auto;
+ `;
+ selectedDisplay.innerHTML = `
+ ${matchingEventTypes[0].title} (${matchingEventTypes[0].lengthInMinutes}min)
+
+
+ `;
+
+ // Dropdown options container
+ const optionsContainer = document.createElement("div");
+ optionsContainer.style.cssText = `
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ margin-top: 4px;
+ background: white;
+ border: 1px solid #e5e5ea;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ max-height: 200px;
+ overflow-y: auto;
+ display: none;
+ z-index: 1000;
+ pointer-events: auto;
+ `;
+
+ // Create options
+ matchingEventTypes.forEach((et: any, index: number) => {
+ const option = document.createElement("div");
+ option.className = "dropdown-option";
+ option.style.cssText = `
+ padding: 10px 12px;
+ font-size: 14px;
+ color: #000;
+ cursor: pointer;
+ transition: background-color 0.1s;
+ border-bottom: ${index < matchingEventTypes.length - 1 ? "1px solid #f0f0f0" : "none"};
+ pointer-events: auto;
+ `;
+ option.textContent = `${et.title} (${et.lengthInMinutes}min)`;
+ option.setAttribute("data-index", index.toString());
+
+ // Hover effect
+ option.addEventListener("mouseenter", () => {
+ option.style.backgroundColor = "#f8f9fa";
+ });
+ option.addEventListener("mouseleave", () => {
+ option.style.backgroundColor = "white";
+ });
+
+ // Click to select
+ option.addEventListener("click", (e) => {
+ e.stopPropagation();
+ selectedEventTypeIndex = index;
+ const selectedText = selectedDisplay.querySelector(".selected-text");
+ if (selectedText) {
+ selectedText.textContent = `${et.title} (${et.lengthInMinutes}min)`;
+ }
+ optionsContainer.style.display = "none";
+ console.log("Cal.com: Event type changed to:", et.slug);
+ });
+
+ optionsContainer.appendChild(option);
+ });
+
+ // Toggle dropdown on click
+ selectedDisplay.addEventListener("click", (e) => {
+ e.stopPropagation();
+ const isOpen = optionsContainer.style.display === "block";
+ optionsContainer.style.display = isOpen ? "none" : "block";
+ selectedDisplay.style.borderColor = isOpen ? "#e5e5ea" : "#000";
+ });
+
+ // Hover effect on selected display
+ selectedDisplay.addEventListener("mouseenter", () => {
+ selectedDisplay.style.borderColor = "#000";
+ });
+ selectedDisplay.addEventListener("mouseleave", () => {
+ if (optionsContainer.style.display !== "block") {
+ selectedDisplay.style.borderColor = "#e5e5ea";
+ }
+ });
+
+ customDropdown.appendChild(selectedDisplay);
+ customDropdown.appendChild(optionsContainer);
+ selectorDiv.appendChild(customDropdown);
+
+ // Close dropdown when clicking outside (with cleanup)
+ const closeDropdown = (e: MouseEvent) => {
+ if (!customDropdown.contains(e.target as Node)) {
+ optionsContainer.style.display = "none";
+ selectedDisplay.style.borderColor = "#e5e5ea";
+ }
+ };
+ document.addEventListener("click", closeDropdown);
+
+ // Clean up listener when modal closes
+ backdrop.addEventListener(
+ "remove",
+ () => {
+ document.removeEventListener("click", closeDropdown);
+ },
+ { once: true }
+ );
+ }
+
+ contentContainer.appendChild(selectorDiv);
+
+ // Time slots list
+ const slotsContainer = document.createElement("div");
+ slotsContainer.style.cssText = "padding: 12px;";
+
+ parsedData.slots.forEach((slot: any, index: number) => {
+ const slotItem = document.createElement("div");
+ slotItem.style.cssText = `
+ padding: 14px;
+ margin: 6px 0;
+ border: 1px solid #e5e5ea;
+ border-radius: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: all 0.15s;
+ cursor: default;
+ background: white;
+ `;
+
+ slotItem.innerHTML = `
+
+
${slot.date}
+
${slot.startTime} – ${slot.endTime}
+
Insert Link
+ `;
+
+ // Add pointer events to slot item
+ slotItem.style.pointerEvents = "auto";
+
+ // Hover effect on entire slot item
+ slotItem.addEventListener("mouseenter", () => {
+ console.log("Cal.com: Mouse entered slot", index);
+ slotItem.style.borderColor = "#000";
+ slotItem.style.backgroundColor = "#f8f9fa";
+ const btn = slotItem.querySelector(".insert-slot-btn") as HTMLElement;
+ if (btn) btn.style.backgroundColor = "#333";
+ });
+
+ slotItem.addEventListener("mouseleave", () => {
+ slotItem.style.borderColor = "#e5e5ea";
+ slotItem.style.backgroundColor = "white";
+ const btn = slotItem.querySelector(".insert-slot-btn") as HTMLElement;
+ if (btn) btn.style.backgroundColor = "#000";
+ });
+
+ slotsContainer.appendChild(slotItem);
+ });
+
+ contentContainer.appendChild(slotsContainer);
+
+ // Add event listeners for insert buttons
+ const insertButtons = menu.querySelectorAll(".insert-slot-btn");
+
+ console.log("Cal.com: Found", insertButtons.length, "insert buttons");
+
+ insertButtons.forEach((btn) => {
+ btn.addEventListener("click", (e) => {
+ console.log("Cal.com: Insert button clicked!");
+ e.preventDefault();
+ e.stopPropagation();
+ const slotIndex = parseInt(btn.getAttribute("data-slot-index")!);
+ const slot = parsedData.slots[slotIndex];
+ console.log("Cal.com: Inserting link for slot", slotIndex, slot);
+
+ // Get selected event type from the tracked index
+ const selectedEventType = matchingEventTypes[selectedEventTypeIndex];
+ const selectedSlug = selectedEventType.slug;
+ const selectedUsername = selectedEventType.users?.[0]?.username || "user";
+
+ // Generate Cal.com URL with slot parameters
+ const baseUrl = `https://cal.com/${selectedUsername}/${selectedSlug}`;
+ const params = new URLSearchParams({
+ overlayCalendar: "true",
+ date: slot.isoDate,
+ slot: slot.isoTimestamp,
+ });
+ const calcomUrl = `${baseUrl}?${params.toString()}`;
+
+ console.log("Cal.com: Generated URL:", calcomUrl);
+
+ // Insert link into Gmail compose (pass chipElement to target the correct compose window)
+ const inserted = insertGmailText(calcomUrl, chipElement);
+
+ if (inserted) {
+ showGmailNotification("Cal.com link inserted!", "success");
+ backdrop.remove();
+
+ // Mark chip for removal on send (don't remove yet - keep it visible for user reference)
+ chipElement.setAttribute("data-calcom-remove-on-send", "true");
+ } else {
+ showGmailNotification("Failed to insert link", "error");
+ }
+ });
+ });
+ } catch (error) {
+ console.error("Error showing Cal.com suggestion menu:", error);
+ loadingDiv.remove();
+
+ // Show user-friendly error message
+ const errorDiv = document.createElement("div");
+ errorDiv.style.cssText = "padding: 20px 16px; text-align: center;";
+
+ const isContextInvalidated =
+ error instanceof Error && error.message.includes("Extension context invalidated");
+
+ errorDiv.innerHTML = `
+
+
+
+
+
+ ${isContextInvalidated ? "Extension Reloaded" : "Failed to Load"}
+
+
+ ${
+ isContextInvalidated
+ ? "The extension was updated. Please reload this page to continue."
+ : "Failed to load event types. Please try again."
+ }
+
+ ${
+ isContextInvalidated
+ ? `
+ Reload Page
+ `
+ : ""
+ }
+ `;
+
+ contentContainer.appendChild(errorDiv);
+
+ // Add reload handler if context invalidated
+ if (isContextInvalidated) {
+ const reloadBtn = errorDiv.querySelector(".reload-page-btn");
+ reloadBtn?.addEventListener("click", () => {
+ window.location.reload();
+ });
+ reloadBtn?.addEventListener("mouseenter", (e) => {
+ (e.target as HTMLElement).style.backgroundColor = "#ff5252";
+ });
+ reloadBtn?.addEventListener("mouseleave", (e) => {
+ (e.target as HTMLElement).style.backgroundColor = "#ff6b6b";
+ });
+ }
+ }
+ }
+
+ /**
+ * Parse Google Calendar scheduling chip
+ * Returns null if structure has changed or parsing fails (fail gracefully)
+ */
+ function parseGoogleChip(chipElement: HTMLElement): any {
+ try {
+ // Validate input
+ if (!chipElement || typeof chipElement.getAttribute !== "function") {
+ console.warn("Cal.com: Invalid chip element passed to parser");
+ return null;
+ }
+
+ // Get schedule ID - if this is missing, this might not be a valid chip
+ const scheduleId = chipElement.getAttribute("data-ad-hoc-schedule-id");
+
+ if (!scheduleId) {
+ // Silently return - this is likely not a fully-loaded chip
+ // (happens frequently during Gmail DOM updates)
+ return null;
+ }
+
+ console.log(
+ "Cal.com: Valid chip detected - Schedule ID:",
+ scheduleId?.slice(0, 20) + "..."
+ );
+
+ // Parse timezone (non-critical - fallback to UTC if structure changed)
+ let timezone = "UTC";
+ let timezoneOffset = "GMT+00:00";
+
+ try {
+ // First, try to get the IANA timezone from data-ad-hoc-v2-params
+ const paramsAttr = chipElement.getAttribute("data-ad-hoc-v2-params");
+ console.log("Cal.com: data-ad-hoc-v2-params:", paramsAttr);
+
+ if (paramsAttr) {
+ // The timezone is at the end of the params string, like: "Asia/Kolkata"
+ // Try multiple patterns as Gmail might format it differently
+ let tzMatch = paramsAttr.match(/"([^&]+)"\]/);
+
+ // Also try without HTML entities
+ if (!tzMatch) {
+ tzMatch = paramsAttr.match(/"([^"]+)"\]/);
+ }
+
+ // Also try with escaped quotes
+ if (!tzMatch) {
+ tzMatch = paramsAttr.match(/\\"([^\\]+)\\"\]/);
+ }
+
+ if (tzMatch && tzMatch[1]) {
+ timezone = tzMatch[1]; // e.g., "Asia/Kolkata"
+ console.log("Cal.com: ✅ Parsed IANA timezone from data attribute:", timezone);
+ } else {
+ console.warn("Cal.com: ⚠️ Failed to extract timezone from params attribute");
+ }
+ } else {
+ console.warn("Cal.com: ⚠️ No data-ad-hoc-v2-params attribute found");
+ }
+
+ // Also get the display timezone and offset from the UI text
+ const timezoneText = chipElement.querySelector("td")?.textContent?.trim() || "";
+ const timezoneMatch = timezoneText.match(/^(.+?)\s*-\s*(.+?)\s*\((.+?)\)$/);
+
+ if (timezoneMatch) {
+ timezoneOffset = timezoneMatch[3]?.trim() || "GMT+00:00";
+ console.log("Cal.com: Parsed timezone offset from UI:", timezoneOffset);
+ }
+ } catch (tzError) {
+ // Non-critical error - continue with default timezone
+ console.warn("Cal.com: Failed to parse timezone, using UTC:", tzError);
+ }
+
+ // Find all time slot links - critical for functionality
+ let slotLinks: Element[] = [];
+ try {
+ slotLinks = Array.from(chipElement.querySelectorAll("a[href*='slotStartTime']"));
+ } catch (error) {
+ console.warn("Cal.com: Failed to find slot links:", error);
+ return null;
+ }
+
+ if (slotLinks.length === 0) {
+ // Gmail structure might have changed or chip not fully loaded
+ return null;
+ }
+
+ const slots: any[] = [];
+ let detectedDuration = 60;
+
+ slotLinks.forEach((link) => {
+ try {
+ const href = (link as HTMLAnchorElement).href;
+ if (!href) return;
+
+ const url = new URL(href);
+
+ const slotStartTime = url.searchParams.get("slotStartTime");
+ const slotDurationMinutes = url.searchParams.get("slotDurationMinutes");
+
+ if (!slotStartTime || !slotDurationMinutes) return;
+
+ const durationMinutes = parseInt(slotDurationMinutes, 10);
+ if (isNaN(durationMinutes) || durationMinutes <= 0) return;
+
+ detectedDuration = durationMinutes;
+
+ const startTimestamp = parseInt(slotStartTime, 10);
+ if (isNaN(startTimestamp)) return;
+
+ const startDate = new Date(startTimestamp);
+ const endDate = new Date(startDate.getTime() + durationMinutes * 60 * 1000);
+
+ // Validate dates
+ if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) return;
+
+ const dateOptions: Intl.DateTimeFormatOptions = {
+ weekday: "short",
+ day: "numeric",
+ month: "long",
+ };
+ const timeOptions: Intl.DateTimeFormatOptions = {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ };
+
+ const date = startDate.toLocaleDateString("en-US", dateOptions);
+ const startTime = startDate.toLocaleTimeString("en-US", timeOptions).toLowerCase();
+ const endTime = endDate.toLocaleTimeString("en-US", timeOptions).toLowerCase();
+
+ const isoDate = startDate.toISOString().split("T")[0];
+ const isoTimestamp = startDate.toISOString();
+
+ slots.push({
+ date,
+ startTime,
+ endTime,
+ durationMinutes,
+ isoDate,
+ isoTimestamp,
+ googleUrl: href,
+ });
+ } catch (slotError) {
+ // Skip individual slot if it fails - don't break entire parsing
+ console.warn("Cal.com: Failed to parse individual slot:", slotError);
+ }
+ });
+
+ if (slots.length === 0) {
+ // No valid slots found - Gmail structure might have changed
+ return null;
+ }
+
+ console.log(
+ `Cal.com: ✅ Parsed chip - ${slots.length} slots, ${detectedDuration}min, timezone: ${timezone}`
+ );
+
+ return {
+ scheduleId,
+ timezone,
+ timezoneOffset,
+ slots,
+ detectedDuration,
+ };
+ } catch (error) {
+ // Critical error in parsing - fail gracefully without breaking Gmail
+ console.warn(
+ "Cal.com: Failed to parse Google chip (Gmail structure may have changed):",
+ error
+ );
+ return null;
+ }
+ }
+
+ // Start watching for Google Calendar chips
+ watchForGoogleChips();
+
+ // Setup auto-remove action bars before sending email
+ setupAutoRemoveOnSend();
+ }
+ },
+});
+
+function defineContentScript(config: { matches: string[]; main: () => void }) {
+ return config;
+}
diff --git a/companion/extension/public/icon-128.png b/companion/extension/public/icon-128.png
new file mode 100644
index 0000000000..6ad39d9bfb
Binary files /dev/null and b/companion/extension/public/icon-128.png differ
diff --git a/companion/extension/public/icon-16.png b/companion/extension/public/icon-16.png
new file mode 100644
index 0000000000..811fcdf3c4
Binary files /dev/null and b/companion/extension/public/icon-16.png differ
diff --git a/companion/extension/public/icon-48.png b/companion/extension/public/icon-48.png
new file mode 100644
index 0000000000..f570ab73d5
Binary files /dev/null and b/companion/extension/public/icon-48.png differ
diff --git a/companion/extension/public/icon.png b/companion/extension/public/icon.png
new file mode 100644
index 0000000000..2d352eca86
Binary files /dev/null and b/companion/extension/public/icon.png differ
diff --git a/companion/extension/public/manifest.json b/companion/extension/public/manifest.json
new file mode 100644
index 0000000000..9c3a63ef08
--- /dev/null
+++ b/companion/extension/public/manifest.json
@@ -0,0 +1,22 @@
+{
+ "manifest_version": 3,
+ "name": "Cal.com Companion",
+ "version": "1.7.0",
+ "description": "Your calendar companion for quick booking and scheduling",
+ "permissions": ["activeTab", "http://localhost:8081/*", "identity"],
+ "content_security_policy": {
+ "extension_pages": "script-src 'self'; object-src 'self'; frame-src 'self' http://localhost:8081;"
+ },
+ "action": {
+ "default_title": "Cal.com Companion"
+ },
+ "background": {
+ "service_worker": "background.js"
+ },
+ "content_scripts": [
+ {
+ "matches": [""],
+ "js": ["content-scripts/content.js"]
+ }
+ ]
+}
diff --git a/companion/extension/public/oauth/callback.html b/companion/extension/public/oauth/callback.html
new file mode 100644
index 0000000000..89188bb930
--- /dev/null
+++ b/companion/extension/public/oauth/callback.html
@@ -0,0 +1,10 @@
+
+
+
+ Cal.com OAuth Callback
+
+
+ Processing authentication...
+
+
diff --git a/companion/global.css b/companion/global.css
new file mode 100644
index 0000000000..28214b8222
--- /dev/null
+++ b/companion/global.css
@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ /* Force light color scheme for all web components */
+ :root {
+ color-scheme: light only;
+ }
+
+ html {
+ color-scheme: light;
+ }
+
+ * {
+ color-scheme: light;
+ }
+
+ input:focus {
+ --tw-ring-color: rgb(0 0 0);
+ --tw-border-opacity: 1;
+ border-color: rgb(0 0 0);
+ }
+}
diff --git a/companion/index.js b/companion/index.js
new file mode 100644
index 0000000000..80d3d998f1
--- /dev/null
+++ b/companion/index.js
@@ -0,0 +1 @@
+import "expo-router/entry";
diff --git a/companion/metro.config.js b/companion/metro.config.js
new file mode 100644
index 0000000000..b0963fe7f7
--- /dev/null
+++ b/companion/metro.config.js
@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./global.css" });
diff --git a/companion/nativewind-env.d.ts b/companion/nativewind-env.d.ts
new file mode 100644
index 0000000000..a13e3136bb
--- /dev/null
+++ b/companion/nativewind-env.d.ts
@@ -0,0 +1 @@
+/// ) | null =
+ null;
+
+// Refresh token function - will be set by AuthContext
+let refreshTokenFunction:
+ | ((refreshToken: string) => Promise<{ accessToken: string; refreshToken?: string }>)
+ | null = null;
+
+// Re-export types for backward compatibility
+export type {
+ EventType,
+ CreateEventTypeInput,
+ Booking,
+ BookingParticipationResult,
+ Schedule,
+ UserProfile,
+ ConferencingOption,
+ Webhook,
+ CreateWebhookInput,
+ UpdateWebhookInput,
+ PrivateLink,
+ CreatePrivateLinkInput,
+ UpdatePrivateLinkInput,
+};
+
+export const getBookingParticipation = (
+ booking: Booking,
+ userId?: number,
+ userEmail?: string
+): BookingParticipationResult => {
+ const normalizedUserEmail = userEmail?.toLowerCase();
+ const emailEq = (a?: string, b?: string) => a?.toLowerCase() === b?.toLowerCase();
+ const idEq = (a?: string | number, b?: string | number) =>
+ a !== undefined && b !== undefined && String(a) === String(b);
+
+ const isOrganizer =
+ !!booking.user &&
+ (idEq(booking.user.id, userId) || emailEq(booking.user.email, normalizedUserEmail));
+
+ const isHost =
+ Array.isArray(booking.hosts) &&
+ booking.hosts.some((host) => idEq(host.id, userId) || emailEq(host.email, normalizedUserEmail));
+
+ const isAttendee =
+ Array.isArray(booking.attendees) &&
+ booking.attendees.some(
+ (attendee) => idEq(attendee.id, userId) || emailEq(attendee.email, normalizedUserEmail)
+ );
+
+ const isParticipating = isOrganizer || isHost || isAttendee;
+
+ return { isOrganizer, isHost, isAttendee, isParticipating };
+};
+
+export class CalComAPIService {
+ private static userProfile: UserProfile | null = null;
+
+ /**
+ * Set OAuth access token for authentication
+ */
+ static setAccessToken(accessToken: string, refreshToken?: string): void {
+ authConfig.accessToken = accessToken;
+ if (refreshToken) {
+ authConfig.refreshToken = refreshToken;
+ }
+ }
+
+ /**
+ * Set refresh token function for automatic token refresh
+ */
+ static setRefreshTokenFunction(
+ refreshFn: (refreshToken: string) => Promise<{ accessToken: string; refreshToken?: string }>
+ ): void {
+ refreshTokenFunction = refreshFn;
+ }
+
+ /**
+ * Clear all authentication
+ */
+ static clearAuth(): void {
+ authConfig.accessToken = undefined;
+ authConfig.refreshToken = undefined;
+ tokenRefreshCallback = null;
+ refreshTokenFunction = null;
+ }
+
+ /**
+ * Set token refresh callback for OAuth token refresh
+ */
+ static setTokenRefreshCallback(
+ callback: (accessToken: string, refreshToken?: string) => Promise
+ ): void {
+ tokenRefreshCallback = callback;
+ }
+
+ /**
+ * Get current authentication header
+ */
+ private static getAuthHeader(): string {
+ if (authConfig.accessToken) {
+ return `Bearer ${authConfig.accessToken}`;
+ } else {
+ throw new Error("No authentication configured. Please sign in with OAuth.");
+ }
+ }
+
+ // Get current user profile
+ static async getCurrentUser(): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: UserProfile }>(
+ "/me",
+ {
+ headers: {
+ "cal-api-version": "2024-06-11",
+ },
+ },
+ "2024-06-11"
+ );
+ return response.data;
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ // Update current user profile
+ static async updateUserProfile(updates: {
+ email?: string;
+ name?: string;
+ timeFormat?: number;
+ defaultScheduleId?: number;
+ weekStart?: string;
+ timeZone?: string;
+ locale?: string;
+ avatarUrl?: string;
+ bio?: string;
+ metadata?: Record;
+ }): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: UserProfile }>(
+ "/me",
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-11",
+ },
+ body: JSON.stringify(updates),
+ },
+ "2024-06-11"
+ );
+
+ if (response && response.data) {
+ // Update cached profile
+ this.userProfile = response.data;
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update user profile API");
+ } catch (error) {
+ console.error("updateUserProfile error:", error);
+ throw error;
+ }
+ }
+
+ // Get and cache user profile
+ static async getUserProfile(): Promise {
+ if (this.userProfile) {
+ return this.userProfile;
+ }
+
+ this.userProfile = await this.getCurrentUser();
+ return this.userProfile;
+ }
+
+ // Get cached username or fetch if not available
+ static async getUsername(): Promise {
+ const profile = await this.getUserProfile();
+ return profile.username;
+ }
+
+ // Build shareable link for event type
+ static async buildEventTypeLink(eventTypeSlug: string): Promise {
+ const username = await this.getUsername();
+ return `https://cal.com/${username}/${eventTypeSlug}`;
+ }
+
+ // Clear cached profile (useful for logout)
+ static clearUserProfile(): void {
+ this.userProfile = null;
+ }
+
+ // Test function for bookings API specifically
+ static async testRawBookingsAPI(): Promise {
+ try {
+ const url = `${API_BASE_URL}/bookings?status=upcoming&status=unconfirmed&limit=50`;
+
+ const response = await fetch(url, {
+ headers: {
+ Authorization: this.getAuthHeader(),
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-08-13",
+ },
+ });
+
+ const responseText = await response.text();
+
+ try {
+ const responseJson = JSON.parse(responseText);
+ } catch (parseError) {}
+ } catch (error) {}
+ }
+
+ private static async makeRequest(
+ endpoint: string,
+ options: RequestInit = {},
+ apiVersion: string = "2024-08-13",
+ isRetry: boolean = false
+ ): Promise {
+ const url = `${API_BASE_URL}${endpoint}`;
+
+ const response = await fetch(url, {
+ ...options,
+ headers: {
+ Authorization: this.getAuthHeader(),
+ "Content-Type": "application/json",
+ "cal-api-version": apiVersion,
+ ...options.headers,
+ },
+ });
+
+ if (!response.ok) {
+ const errorBody = await response.text();
+
+ // Parse error for better user messages
+ let errorMessage = response.statusText;
+
+ try {
+ const errorJson = JSON.parse(errorBody);
+ errorMessage = errorJson?.error?.message || errorJson?.message || response.statusText;
+ } catch (parseError) {
+ // If JSON parsing fails, use the raw error body
+ errorMessage = errorBody || response.statusText;
+ }
+
+ // Handle specific error cases
+ if (response.status === 401) {
+ if (!isRetry && authConfig.refreshToken && refreshTokenFunction && tokenRefreshCallback) {
+ try {
+ const newTokens = await refreshTokenFunction(authConfig.refreshToken);
+
+ authConfig.accessToken = newTokens.accessToken;
+ if (newTokens.refreshToken) {
+ authConfig.refreshToken = newTokens.refreshToken;
+ }
+
+ // Notify AuthContext to update stored tokens
+ await tokenRefreshCallback(newTokens.accessToken, newTokens.refreshToken);
+
+ // Retry the original request with the new token
+ return this.makeRequest(endpoint, options, apiVersion, true);
+ } catch (refreshError) {
+ console.error("Token refresh failed:", refreshError);
+ this.clearAuth();
+ throw new Error("Authentication failed. Please sign in again.");
+ }
+ }
+
+ if (errorMessage.includes("expired")) {
+ throw new Error("Your authentication has expired. Please sign in again.");
+ }
+ throw new Error("Authentication failed. Please check your credentials.");
+ }
+
+ throw new Error(`API Error: ${errorMessage}`);
+ }
+
+ return response.json();
+ }
+
+ // Delete an event type
+ static async deleteEventType(eventTypeId: number): Promise {
+ try {
+ console.log(`Deleting event type with ID: ${eventTypeId}`);
+ await this.makeRequest(
+ `/event-types/${eventTypeId}`,
+ {
+ method: "DELETE",
+ },
+ "2024-06-14"
+ );
+ console.log("Delete completed");
+ } catch (error) {
+ console.error("Delete API error:", error);
+ throw error;
+ }
+ }
+
+ // Create an event type
+ static async createEventType(input: CreateEventTypeInput): Promise {
+ try {
+ console.log("Creating event type with input:", JSON.stringify(input, null, 2));
+
+ const response = await this.makeRequest<{ status: string; data: EventType }>(
+ "/event-types",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-14",
+ },
+ body: JSON.stringify(input),
+ },
+ "2024-06-14"
+ );
+
+ if (response && response.data) {
+ console.log("Event type created successfully:", response.data);
+ return response.data;
+ }
+
+ throw new Error("Invalid response from create event type API");
+ } catch (error) {
+ console.error("createEventType error:", error);
+ throw error;
+ }
+ }
+
+ // Cancel a booking
+ static async cancelBooking(bookingUid: string, reason?: string): Promise {
+ try {
+ const body: { reason?: string } = {};
+ if (reason) {
+ body.reason = reason;
+ }
+
+ await this.makeRequest(`/bookings/${bookingUid}/cancel`, {
+ method: "POST",
+ body: JSON.stringify(body),
+ });
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ // Reschedule a booking
+ static async rescheduleBooking(
+ bookingUid: string,
+ input: {
+ start: string; // ISO 8601 datetime string
+ reschedulingReason?: string;
+ }
+ ): Promise {
+ try {
+ console.log(`Rescheduling booking ${bookingUid} to:`, input.start);
+
+ const response = await this.makeRequest<{ status: string; data: Booking }>(
+ `/bookings/${bookingUid}/reschedule`,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-08-13",
+ },
+ body: JSON.stringify(input),
+ },
+ "2024-08-13"
+ );
+
+ if (response && response.data) {
+ console.log("Booking rescheduled successfully:", response.data);
+ return response.data;
+ }
+
+ throw new Error("Invalid response from reschedule booking API");
+ } catch (error) {
+ console.error("rescheduleBooking error:", error);
+ throw error;
+ }
+ }
+
+ static async getEventTypes(): Promise {
+ try {
+ // Get current user to extract username
+ let username: string | undefined;
+ try {
+ const currentUser = await this.getCurrentUser();
+ // Extract username from response
+ if (currentUser?.username) {
+ username = currentUser.username;
+ }
+ } catch (error) {}
+
+ // Build query string with username if available
+ const params = new URLSearchParams();
+ if (username) {
+ params.append("username", username);
+ }
+
+ const queryString = params.toString();
+ const endpoint = `/event-types${queryString ? `?${queryString}` : ""}`;
+
+ const response = await this.makeRequest(endpoint, {}, "2024-06-14");
+
+ // Handle different possible response structures
+ let eventTypesArray: EventType[] = [];
+
+ if (Array.isArray(response)) {
+ eventTypesArray = response;
+ } else if (response && typeof response === "object") {
+ if (response.data && Array.isArray(response.data)) {
+ eventTypesArray = response.data;
+ } else if (response.eventTypes && Array.isArray(response.eventTypes)) {
+ eventTypesArray = response.eventTypes;
+ } else if (response.items && Array.isArray(response.items)) {
+ eventTypesArray = response.items;
+ } else if (response.data && typeof response.data === "object") {
+ if (response.data.eventTypes && Array.isArray(response.data.eventTypes)) {
+ eventTypesArray = response.data.eventTypes;
+ } else if (response.data.items && Array.isArray(response.data.items)) {
+ eventTypesArray = response.data.items;
+ } else {
+ const keys = Object.keys(response.data);
+ if (keys.length > 0) {
+ eventTypesArray = Object.values(response.data).filter(
+ (item): item is EventType => item && typeof item === "object" && "id" in item
+ ) as EventType[];
+ }
+ }
+ } else {
+ const possibleArrays = Object.values(response).filter((val) => Array.isArray(val));
+ if (possibleArrays.length > 0) {
+ eventTypesArray = possibleArrays[0] as EventType[];
+ }
+ }
+ }
+
+ return eventTypesArray;
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ static async getBookingByUid(bookingUid: string): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Booking }>(
+ `/bookings/${bookingUid}`,
+ {
+ headers: {
+ "cal-api-version": "2024-08-13",
+ },
+ },
+ "2024-08-13"
+ );
+ console.log("getBookingByUid raw response:", JSON.stringify(response, null, 2));
+ if (response && response.data) {
+ console.log("getBookingByUid booking data:", JSON.stringify(response.data, null, 2));
+ console.log("getBookingByUid user field:", response.data.user);
+ console.log("getBookingByUid hosts field:", response.data.hosts);
+ console.log("getBookingByUid attendees field:", response.data.attendees);
+ return response.data;
+ }
+ throw new Error("Invalid response from get booking API");
+ } catch (error) {
+ console.error("getBookingByUid error:", error);
+ throw error;
+ }
+ }
+
+ static async getBookings(filters?: {
+ status?: string[];
+ fromDate?: string;
+ toDate?: string;
+ eventTypeId?: number;
+ limit?: number;
+ offset?: number;
+ }): Promise {
+ try {
+ // Build query parameters
+ const params = new URLSearchParams();
+
+ if (filters?.status?.length) {
+ filters.status.forEach((status) => params.append("status", status));
+ }
+ if (filters?.fromDate) {
+ params.append("fromDate", filters.fromDate);
+ }
+ if (filters?.toDate) {
+ params.append("toDate", filters.toDate);
+ }
+ if (filters?.eventTypeId) {
+ params.append("eventTypeId", filters.eventTypeId.toString());
+ }
+ if (filters?.limit) {
+ params.append("limit", filters.limit.toString());
+ }
+ if (filters?.offset) {
+ params.append("offset", filters.offset.toString());
+ }
+
+ const queryString = params.toString();
+ const endpoint = `/bookings${queryString ? `?${queryString}` : ""}`;
+
+ const response = await this.makeRequest(endpoint);
+
+ // Handle different possible response structures (same logic as event types)
+ let bookingsArray: Booking[] = [];
+
+ if (Array.isArray(response)) {
+ bookingsArray = response;
+ } else if (response && typeof response === "object") {
+ if (response.data && Array.isArray(response.data)) {
+ bookingsArray = response.data;
+ } else if (response.bookings && Array.isArray(response.bookings)) {
+ bookingsArray = response.bookings;
+ } else if (response.items && Array.isArray(response.items)) {
+ bookingsArray = response.items;
+ } else if (response.data && typeof response.data === "object") {
+ if (response.data.bookings && Array.isArray(response.data.bookings)) {
+ bookingsArray = response.data.bookings;
+ } else if (response.data.items && Array.isArray(response.data.items)) {
+ bookingsArray = response.data.items;
+ } else {
+ // Convert object values to array as last resort
+ const keys = Object.keys(response.data);
+ if (keys.length > 0) {
+ bookingsArray = Object.values(response.data).filter(
+ (item): item is Booking =>
+ item && typeof item === "object" && ("id" in item || "uid" in item)
+ ) as Booking[];
+ }
+ }
+ } else {
+ // Try to extract any arrays from the response
+ const possibleArrays = Object.values(response).filter((val) => Array.isArray(val));
+ if (possibleArrays.length > 0) {
+ bookingsArray = possibleArrays[0] as Booking[];
+ }
+ }
+ }
+
+ // Get current user to filter bookings
+ let currentUser;
+ try {
+ currentUser = await this.getCurrentUser();
+ } catch (error) {
+ return bookingsArray;
+ }
+
+ // Extract user info from response
+ let userId: number | undefined;
+ let userEmail: string | undefined;
+
+ if (currentUser) {
+ userId = currentUser.id;
+ userEmail = currentUser.email;
+ }
+
+ // Filter bookings to only show ones where the current user is participating
+ const userBookings = bookingsArray.filter((booking) => {
+ const { isOrganizer, isHost, isAttendee, isParticipating } = getBookingParticipation(
+ booking,
+ userId,
+ userEmail
+ );
+
+ return isParticipating;
+ });
+
+ return userBookings;
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ // Get all schedules
+ static async getSchedules(): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Schedule[] }>(
+ "/schedules",
+ {
+ headers: {
+ "cal-api-version": "2024-06-11", // Override version for schedules
+ },
+ },
+ "2024-06-11"
+ );
+
+ let schedulesArray: Schedule[] = [];
+
+ // Handle response structure: { status: "success", data: [...] }
+ if (
+ response &&
+ response.status === "success" &&
+ response.data &&
+ Array.isArray(response.data)
+ ) {
+ schedulesArray = response.data;
+ } else if (Array.isArray(response)) {
+ // Fallback: response might be array directly
+ schedulesArray = response;
+ } else if (response && response.data && Array.isArray(response.data)) {
+ // Fallback: response.data might be array
+ schedulesArray = response.data;
+ }
+
+ return schedulesArray;
+ } catch (error) {
+ throw error;
+ }
+ }
+
+ // Create a new schedule
+ static async createSchedule(input: {
+ name: string;
+ timeZone: string;
+ isDefault?: boolean;
+ availability?: Array<{
+ days: string[]; // e.g., ["Monday", "Tuesday"]
+ startTime: string; // e.g., "09:00"
+ endTime: string; // e.g., "17:00"
+ }>;
+ overrides?: Array<{
+ date: string; // e.g., "2024-05-20"
+ startTime: string; // e.g., "12:00"
+ endTime: string; // e.g., "14:00"
+ }>;
+ }): Promise {
+ try {
+ console.log("Creating schedule with input:", JSON.stringify(input, null, 2));
+
+ const response = await this.makeRequest<{ status: string; data: Schedule }>(
+ "/schedules",
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-11",
+ },
+ body: JSON.stringify(input),
+ },
+ "2024-06-11"
+ );
+
+ if (response && response.data) {
+ console.log("Schedule created successfully:", response.data);
+ return response.data;
+ }
+
+ throw new Error("Invalid response from create schedule API");
+ } catch (error) {
+ console.error("createSchedule error:", error);
+ throw error;
+ }
+ }
+
+ // Get specific schedule by ID
+ static async getScheduleById(scheduleId: number): Promise {
+ try {
+ const response = await this.makeRequest(
+ `/schedules/${scheduleId}`,
+ {
+ headers: {
+ "cal-api-version": "2024-06-11", // Override version for schedules
+ },
+ },
+ "2024-06-11"
+ );
+
+ console.log("getScheduleById raw response:", JSON.stringify(response, null, 2));
+
+ if (response && response.data) {
+ console.log("Returning schedule data:", response.data);
+ return response.data;
+ }
+
+ // Sometimes the response might be the schedule directly
+ if (response && response.id) {
+ console.log("Returning schedule directly:", response);
+ return response;
+ }
+
+ console.log("No schedule data found in response");
+ return null;
+ } catch (error) {
+ console.error("getScheduleById error:", error);
+ throw error;
+ }
+ }
+
+ // Get conferencing options
+ static async getConferencingOptions(): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: ConferencingOption[] }>(
+ "/conferencing"
+ );
+
+ if (response && response.data && Array.isArray(response.data)) {
+ return response.data;
+ }
+
+ return [];
+ } catch (error) {
+ console.error("getConferencingOptions error:", error);
+ throw error;
+ }
+ }
+
+ // Get a single event type by ID
+ static async getEventTypeById(eventTypeId: number): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: EventType }>(
+ `/event-types/${eventTypeId}`,
+ {},
+ "2024-06-14"
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ return null;
+ } catch (error) {
+ // Handle 404 errors gracefully - resource doesn't exist or user doesn't have access
+ if (error instanceof Error) {
+ // Check if error message contains 404 status code
+ const statusMatch = error.message.match(/API Error: (\d+)/);
+ if (statusMatch && statusMatch[1] === "404") {
+ console.warn(`Event type ${eventTypeId} not found`);
+ return null;
+ }
+ }
+ console.error("getEventTypeById error:", error);
+ throw error;
+ }
+ }
+
+ // Update an event type
+ static async updateEventType(
+ eventTypeId: number,
+ updates: Partial
+ ): Promise {
+ try {
+ console.log(`Updating event type ${eventTypeId} with:`, JSON.stringify(updates, null, 2));
+
+ const response = await this.makeRequest<{ status: string; data: EventType }>(
+ `/event-types/${eventTypeId}`,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-14",
+ },
+ body: JSON.stringify(updates),
+ },
+ "2024-06-14"
+ );
+
+ if (response && response.data) {
+ console.log("Event type updated successfully:", response.data);
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update event type API");
+ } catch (error) {
+ console.error("updateEventType error:", error);
+ throw error;
+ }
+ }
+
+ // Update a schedule
+ static async updateSchedule(
+ scheduleId: number,
+ updates: {
+ isDefault?: boolean;
+ name?: string;
+ timeZone?: string;
+ availability?: Array<{
+ days: string[]; // Day names like "Monday", "Tuesday"
+ startTime: string; // Format: "09:00"
+ endTime: string; // Format: "10:00"
+ }>;
+ overrides?: Array<{
+ date: string; // Format: "2024-05-20"
+ startTime: string; // Format: "12:00"
+ endTime: string; // Format: "14:00"
+ }>;
+ }
+ ): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Schedule }>(
+ `/schedules/${scheduleId}`,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ "cal-api-version": "2024-06-11",
+ },
+ body: JSON.stringify(updates),
+ },
+ "2024-06-11"
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update schedule API");
+ } catch (error) {
+ console.error("updateSchedule error:", error);
+ throw error;
+ }
+ }
+
+ // Duplicate a schedule
+ static async duplicateSchedule(scheduleId: number): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Schedule }>(
+ `/atoms/schedules/${scheduleId}/duplicate`,
+ {
+ method: "POST",
+ headers: {
+ "cal-api-version": "2024-06-11",
+ },
+ },
+ "2024-06-11"
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from duplicate schedule API");
+ } catch (error) {
+ console.error("duplicateSchedule error:", error);
+ throw error;
+ }
+ }
+
+ // Delete a schedule
+ static async deleteSchedule(scheduleId: number): Promise {
+ try {
+ await this.makeRequest<{ status: string }>(
+ `/schedules/${scheduleId}`,
+ {
+ method: "DELETE",
+ headers: {
+ "cal-api-version": "2024-06-11",
+ },
+ },
+ "2024-06-11"
+ );
+ } catch (error) {
+ console.error("deleteSchedule error:", error);
+ throw error;
+ }
+ }
+
+ // ============================================
+ // WEBHOOKS
+ // ============================================
+
+ // Get all global webhooks
+ static async getWebhooks(): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook[] }>("/webhooks");
+
+ if (response && response.data && Array.isArray(response.data)) {
+ return response.data;
+ }
+
+ return [];
+ } catch (error) {
+ console.error("getWebhooks error:", error);
+ throw error;
+ }
+ }
+
+ // Create a global webhook
+ static async createWebhook(input: CreateWebhookInput): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook }>("/webhooks", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(input),
+ });
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from create webhook API");
+ } catch (error) {
+ console.error("createWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // Update a global webhook
+ static async updateWebhook(webhookId: string, updates: UpdateWebhookInput): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook }>(
+ `/webhooks/${webhookId}`,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(updates),
+ }
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update webhook API");
+ } catch (error) {
+ console.error("updateWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // Delete a global webhook
+ static async deleteWebhook(webhookId: string): Promise {
+ try {
+ await this.makeRequest(`/webhooks/${webhookId}`, {
+ method: "DELETE",
+ });
+ } catch (error) {
+ console.error("deleteWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // Get webhooks for a specific event type
+ static async getEventTypeWebhooks(eventTypeId: number): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook[] }>(
+ `/event-types/${eventTypeId}/webhooks`
+ );
+
+ if (response && response.data && Array.isArray(response.data)) {
+ return response.data;
+ }
+
+ return [];
+ } catch (error) {
+ console.error("getEventTypeWebhooks error:", error);
+ throw error;
+ }
+ }
+
+ // Create a webhook for a specific event type
+ static async createEventTypeWebhook(
+ eventTypeId: number,
+ input: CreateWebhookInput
+ ): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook }>(
+ `/event-types/${eventTypeId}/webhooks`,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(input),
+ }
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from create event type webhook API");
+ } catch (error) {
+ console.error("createEventTypeWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // Update an event type webhook
+ static async updateEventTypeWebhook(
+ eventTypeId: number,
+ webhookId: string,
+ updates: UpdateWebhookInput
+ ): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: Webhook }>(
+ `/event-types/${eventTypeId}/webhooks/${webhookId}`,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(updates),
+ }
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update event type webhook API");
+ } catch (error) {
+ console.error("updateEventTypeWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // Delete an event type webhook
+ static async deleteEventTypeWebhook(eventTypeId: number, webhookId: string): Promise {
+ try {
+ await this.makeRequest(`/event-types/${eventTypeId}/webhooks/${webhookId}`, {
+ method: "DELETE",
+ });
+ } catch (error) {
+ console.error("deleteEventTypeWebhook error:", error);
+ throw error;
+ }
+ }
+
+ // ============================================
+ // PRIVATE LINKS
+ // ============================================
+
+ // Get all private links for an event type
+ static async getEventTypePrivateLinks(eventTypeId: number): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: PrivateLink[] }>(
+ `/event-types/${eventTypeId}/private-links`
+ );
+
+ if (response && response.data && Array.isArray(response.data)) {
+ return response.data;
+ }
+
+ return [];
+ } catch (error) {
+ console.error("getEventTypePrivateLinks error:", error);
+ throw error;
+ }
+ }
+
+ // Create a private link for an event type
+ static async createEventTypePrivateLink(
+ eventTypeId: number,
+ input: CreatePrivateLinkInput = {}
+ ): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: PrivateLink }>(
+ `/event-types/${eventTypeId}/private-links`,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(input),
+ }
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from create private link API");
+ } catch (error) {
+ console.error("createEventTypePrivateLink error:", error);
+ throw error;
+ }
+ }
+
+ // Update a private link
+ static async updateEventTypePrivateLink(
+ eventTypeId: number,
+ linkId: number,
+ updates: UpdatePrivateLinkInput
+ ): Promise {
+ try {
+ const response = await this.makeRequest<{ status: string; data: PrivateLink }>(
+ `/event-types/${eventTypeId}/private-links/${linkId}`,
+ {
+ method: "PATCH",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(updates),
+ }
+ );
+
+ if (response && response.data) {
+ return response.data;
+ }
+
+ throw new Error("Invalid response from update private link API");
+ } catch (error) {
+ console.error("updateEventTypePrivateLink error:", error);
+ throw error;
+ }
+ }
+
+ // Delete a private link
+ static async deleteEventTypePrivateLink(eventTypeId: number, linkId: number): Promise {
+ try {
+ await this.makeRequest(`/event-types/${eventTypeId}/private-links/${linkId}`, {
+ method: "DELETE",
+ });
+ } catch (error) {
+ console.error("deleteEventTypePrivateLink error:", error);
+ throw error;
+ }
+ }
+}
diff --git a/companion/services/oauthService.ts b/companion/services/oauthService.ts
new file mode 100644
index 0000000000..40d68757e5
--- /dev/null
+++ b/companion/services/oauthService.ts
@@ -0,0 +1,496 @@
+/// {
+ try {
+ const base64Hash = await Crypto.digestStringAsync(
+ Crypto.CryptoDigestAlgorithm.SHA256,
+ codeVerifier,
+ { encoding: Crypto.CryptoEncoding.BASE64 }
+ );
+
+ return base64Hash.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+ } catch (error) {
+ console.error("Failed to generate code challenge:", error);
+ throw new Error("Failed to generate OAuth code challenge");
+ }
+ }
+
+ private generateRandomBase64Url(): string {
+ const bytes = new Uint8Array(Crypto.getRandomBytes(32));
+
+ const base64 =
+ typeof btoa !== "undefined" ? btoa(String.fromCharCode(...bytes)) : fromByteArray(bytes);
+
+ return base64.replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+ }
+
+ private buildAuthorizationUrl(codeChallenge: string, state: string): string {
+ const params = new URLSearchParams({
+ client_id: this.config.clientId,
+ response_type: "code",
+ redirect_uri: this.config.redirectUri,
+ state: state,
+ code_challenge: codeChallenge,
+ code_challenge_method: "S256",
+ });
+
+ return `${this.config.calcomBaseUrl}/auth/oauth2/authorize?${params.toString()}`;
+ }
+
+ async startAuthorizationFlow(): Promise {
+ try {
+ const { codeChallenge, state } = await this.generatePKCEParams();
+
+ // Web only: check for stored callback with state-specific keys to prevent race conditions
+ if (Platform.OS === "web" && typeof window !== "undefined") {
+ const storedCode = window.localStorage.getItem(`oauth_callback_code_${state}`);
+ const storedState = window.localStorage.getItem(`oauth_callback_state_${state}`);
+
+ if (storedCode && storedState) {
+ // CSRF protection: verify state matches
+ if (storedState !== state) {
+ window.localStorage.removeItem(`oauth_callback_code_${state}`);
+ window.localStorage.removeItem(`oauth_callback_state_${state}`);
+ throw new Error("Invalid state parameter - possible CSRF attack");
+ }
+
+ window.localStorage.removeItem(`oauth_callback_code_${state}`);
+ window.localStorage.removeItem(`oauth_callback_state_${state}`);
+
+ return await this.exchangeCodeForTokens(storedCode, state);
+ }
+ }
+
+ // Note: State stored in background script (iframe may not have chrome.storage access)
+
+ const authResult = await this.getAuthorizationResult(codeChallenge, state);
+ if (authResult.type === "success") {
+ const code = authResult.params?.code || authResult.params?.authorizationCode;
+ const returnedState = authResult.params?.state;
+
+ if (returnedState !== state) {
+ throw new Error("Invalid state parameter - possible CSRF attack");
+ }
+
+ if (!code) {
+ throw new Error("No authorization code received");
+ }
+
+ return await this.exchangeCodeForTokens(code, state);
+ }
+
+ if (authResult.type === "error") {
+ const errorDescription =
+ authResult.params?.error_description ||
+ ("error" in authResult ? authResult.error?.message : undefined) ||
+ "Unknown error";
+ throw new Error(`OAuth error: ${errorDescription}`);
+ }
+
+ if (authResult.type === "cancel") {
+ throw new Error("OAuth flow was cancelled by user");
+ }
+
+ throw new Error("OAuth flow failed or was dismissed");
+ } catch (error) {
+ console.error("OAuth authorization error:", error);
+ throw error;
+ }
+ }
+
+ // Detect browser extension environment using reliable indicators
+ private isBrowserExtension(): boolean {
+ if (Platform.OS !== "web" || typeof window === "undefined") {
+ return false;
+ }
+
+ if (typeof chrome !== "undefined" && chrome.runtime?.id) {
+ return true;
+ }
+
+ if (window.location.protocol === "chrome-extension:") {
+ return true;
+ }
+
+ // Extension content script injects companion app as iframe
+ if (window.parent !== window) {
+ try {
+ const parentOrigin = window.parent.location.origin;
+ const currentOrigin = window.location.origin;
+
+ if (parentOrigin !== currentOrigin && window.location.hostname === "localhost") {
+ return true;
+ }
+ } catch {
+ // Cross-origin access blocked - expected for extension iframes
+ if (window.location.hostname === "localhost") {
+ return true;
+ }
+ }
+ }
+
+ return false;
+ }
+
+ private async launchExtensionAuthFlow(authUrl: string): Promise {
+ return new Promise((resolve, reject) => {
+ if (typeof chrome !== "undefined" && chrome.identity) {
+ chrome.identity.launchWebAuthFlow(
+ {
+ url: authUrl,
+ interactive: true,
+ },
+ (responseUrl) => {
+ if (chrome.runtime.lastError) {
+ reject(new Error(`OAuth flow failed: ${chrome.runtime.lastError.message}`));
+ } else if (responseUrl) {
+ resolve(responseUrl);
+ } else {
+ reject(new Error("OAuth flow cancelled or failed"));
+ }
+ }
+ );
+ return;
+ }
+
+ // Iframe: communicate with parent window
+ if (window.parent !== window) {
+ let timeoutId: NodeJS.Timeout | null = null;
+
+ const messageHandler = (event: MessageEvent) => {
+ // Security: only accept messages from parent
+ if (event.source !== window.parent) {
+ return;
+ }
+
+ if (event.data.type === "cal-extension-oauth-result") {
+ window.removeEventListener("message", messageHandler);
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+
+ if (event.data.success) {
+ resolve(event.data.responseUrl);
+ } else {
+ console.error("OAuth flow failed:", event.data.error);
+ reject(new Error(event.data.error || "OAuth flow failed"));
+ }
+ }
+ };
+
+ window.addEventListener("message", messageHandler);
+
+ window.parent.postMessage(
+ {
+ type: "cal-extension-oauth-request",
+ authUrl: authUrl,
+ },
+ "*"
+ );
+
+ timeoutId = setTimeout(() => {
+ console.error("OAuth flow timeout - no response from extension");
+ window.removeEventListener("message", messageHandler);
+ reject(new Error("OAuth flow timeout - no response from extension"));
+ }, 30000);
+ } else {
+ reject(new Error("Chrome extension context not detected"));
+ }
+ });
+ }
+
+ private async getAuthorizationResult(
+ codeChallenge: string,
+ state: string
+ ): Promise }> {
+ const authUrl = this.buildAuthorizationUrl(codeChallenge, state);
+
+ const isExtension = this.isBrowserExtension();
+
+ if (isExtension) {
+ try {
+ const responseUrl = await this.launchExtensionAuthFlow(authUrl);
+ const params = this.parseCallbackUrl(responseUrl);
+ return { type: "success" as const, params };
+ } catch (error) {
+ console.error("Extension OAuth flow failed:", error);
+ return { type: "error", params: { error: error.message } } as {
+ type: string;
+ params: Record;
+ };
+ }
+ } else if (Platform.OS === "web") {
+ const discovery = await this.getDiscoveryEndpoints();
+ const request = new AuthSession.AuthRequest({
+ clientId: this.config.clientId,
+ redirectUri: this.config.redirectUri,
+ responseType: AuthSession.ResponseType.Code,
+ state: state,
+ codeChallenge: codeChallenge,
+ codeChallengeMethod: AuthSession.CodeChallengeMethod.S256,
+ });
+
+ return await request.promptAsync(discovery);
+ } else {
+ const result = await WebBrowser.openAuthSessionAsync(authUrl, this.config.redirectUri);
+
+ if (result.type === "success") {
+ const params = this.parseCallbackUrl(result.url);
+ return { type: "success" as const, params };
+ }
+
+ return { type: result.type, params: {} } as { type: string; params: Record };
+ }
+ }
+
+ private async getDiscoveryEndpoints(): Promise {
+ try {
+ const discovery = await AuthSession.fetchDiscoveryAsync(
+ `${this.config.calcomBaseUrl}/.well-known/openid_configuration`
+ );
+ return discovery;
+ } catch {
+ return {
+ authorizationEndpoint: `${this.config.calcomBaseUrl}/auth/oauth2/authorize`,
+ tokenEndpoint: `${this.config.calcomBaseUrl}/api/auth/oauth/token`,
+ } as AuthSession.DiscoveryDocument;
+ }
+ }
+
+ private parseCallbackUrl(url: string): Record {
+ const urlObj = new URL(url);
+ const params: Record = {};
+
+ urlObj.searchParams.forEach((value, key) => {
+ params[key] = value;
+ });
+
+ if (Object.keys(params).length === 0 && urlObj.hash) {
+ const hashParams = new URLSearchParams(urlObj.hash.substring(1));
+ hashParams.forEach((value, key) => {
+ params[key] = value;
+ });
+ }
+
+ return params;
+ }
+
+ private async exchangeCodeForTokens(code: string, state?: string): Promise {
+ if (!this.codeVerifier) {
+ throw new Error("No code verifier available");
+ }
+
+ // Extension: use APIs to avoid CORS
+ if (this.isBrowserExtension() && window.parent !== window) {
+ return await this.exchangeTokensViaExtension(code, state);
+ }
+
+ const tokenEndpoint = `${this.config.calcomBaseUrl}/api/auth/oauth/token`;
+
+ const body = new URLSearchParams();
+ body.append("grant_type", "authorization_code");
+ body.append("client_id", this.config.clientId);
+ body.append("code", code);
+ body.append("redirect_uri", this.config.redirectUri);
+ body.append("code_verifier", this.codeVerifier);
+
+ const response = await fetch(tokenEndpoint, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ Accept: "application/json",
+ },
+ body: body.toString(),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ console.error("Token exchange error response:", errorData);
+
+ try {
+ const errorJson = JSON.parse(errorData);
+ console.error("Parsed error:", errorJson);
+ } catch {
+ console.error("Could not parse error response as JSON");
+ }
+
+ throw new Error(`Token exchange failed: ${response.status} ${errorData}`);
+ }
+
+ const tokenData = await response.json();
+
+ const tokens: OAuthTokens = {
+ accessToken: tokenData.access_token,
+ refreshToken: tokenData.refresh_token,
+ tokenType: tokenData.token_type || "Bearer",
+ expiresAt: tokenData.expires_in ? Date.now() + tokenData.expires_in * 1000 : undefined,
+ scope: tokenData.scope,
+ };
+
+ return tokens;
+ }
+
+ private async exchangeTokensViaExtension(code: string, state?: string): Promise {
+ return new Promise((resolve, reject) => {
+ let timeoutId: NodeJS.Timeout | null = null;
+
+ const messageHandler = (event: MessageEvent) => {
+ // Security: only accept messages from parent
+ if (event.source !== window.parent) {
+ return;
+ }
+
+ if (event.data.type === "cal-extension-token-exchange-result") {
+ window.removeEventListener("message", messageHandler);
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+
+ if (event.data.success) {
+ resolve(event.data.tokens);
+ } else {
+ console.error("Token exchange failed via extension:", event.data.error);
+ reject(new Error(event.data.error || "Token exchange failed"));
+ }
+ }
+ };
+
+ window.addEventListener("message", messageHandler);
+
+ window.parent.postMessage(
+ {
+ type: "cal-extension-token-exchange-request",
+ tokenRequest: {
+ grant_type: "authorization_code",
+ client_id: this.config.clientId,
+ code: code,
+ redirect_uri: this.config.redirectUri,
+ code_verifier: this.codeVerifier,
+ },
+ state: state, // CSRF validation in background script
+ tokenEndpoint: `${this.config.calcomBaseUrl}/api/auth/oauth/token`,
+ },
+ "*"
+ );
+
+ timeoutId = setTimeout(() => {
+ window.removeEventListener("message", messageHandler);
+ reject(new Error("Token exchange timeout"));
+ }, 30000);
+ });
+ }
+
+ async refreshAccessToken(refreshToken: string): Promise {
+ const tokenEndpoint = `${this.config.calcomBaseUrl}/api/auth/oauth/refreshToken`;
+
+ const body = new URLSearchParams({
+ grant_type: "refresh_token",
+ client_id: this.config.clientId,
+ refresh_token: refreshToken,
+ });
+
+ const response = await fetch(tokenEndpoint, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/x-www-form-urlencoded",
+ Accept: "application/json",
+ },
+ body: body.toString(),
+ });
+
+ if (!response.ok) {
+ const errorData = await response.text();
+ throw new Error(`Token refresh failed: ${response.status} ${errorData}`);
+ }
+
+ const tokenData = await response.json();
+
+ const tokens: OAuthTokens = {
+ accessToken: tokenData.access_token,
+ refreshToken: tokenData.refresh_token || refreshToken,
+ tokenType: tokenData.token_type || "Bearer",
+ expiresAt: tokenData.expires_in ? Date.now() + tokenData.expires_in * 1000 : undefined,
+ scope: tokenData.scope,
+ };
+
+ return tokens;
+ }
+
+ isTokenExpired(tokens: OAuthTokens): boolean {
+ if (!tokens.expiresAt) {
+ return false;
+ }
+ // 5-minute buffer before expiry
+ return Date.now() >= tokens.expiresAt - 5 * 60 * 1000;
+ }
+ clearPKCEParams(): void {
+ this.codeVerifier = null;
+ this.state = null;
+ }
+}
+
+export function createCalComOAuthService(overrides: Partial = {}): CalComOAuthService {
+ let defaultRedirectUri: string;
+
+ const defaultConfig: OAuthConfig = {
+ clientId: process.env.EXPO_PUBLIC_CALCOM_OAUTH_CLIENT_ID || "",
+ redirectUri: process.env.EXPO_PUBLIC_CALCOM_OAUTH_REDIRECT_URI,
+ calcomBaseUrl: "https://app.cal.com",
+ ...overrides,
+ };
+
+ if (!defaultConfig.clientId) {
+ throw new Error(
+ "OAuth client ID is required. Set EXPO_PUBLIC_CALCOM_OAUTH_CLIENT_ID environment variable."
+ );
+ }
+
+ return new CalComOAuthService(defaultConfig);
+}
diff --git a/companion/services/types/bookings.types.ts b/companion/services/types/bookings.types.ts
new file mode 100644
index 0000000000..69eddfd0ab
--- /dev/null
+++ b/companion/services/types/bookings.types.ts
@@ -0,0 +1,64 @@
+export interface Booking {
+ id: number;
+ uid: string;
+ title: string;
+ description?: string;
+ startTime: string;
+ endTime: string;
+ start?: string;
+ end?: string;
+ eventTypeId: number;
+ eventType?: {
+ id: number;
+ title: string;
+ slug: string;
+ };
+ hosts?: Array<{
+ id?: number | string;
+ name?: string;
+ email?: string;
+ username?: string;
+ timeZone?: string;
+ }>;
+ user?: {
+ id: number;
+ email: string;
+ name: string;
+ timeZone: string;
+ };
+ attendees?: Array<{
+ id?: number | string;
+ email: string;
+ name: string;
+ timeZone: string;
+ noShow?: boolean;
+ }>;
+ status: "ACCEPTED" | "PENDING" | "CANCELLED" | "REJECTED";
+ paid?: boolean;
+ payment?: Array<{
+ id: number;
+ success: boolean;
+ paymentOption: string;
+ }>;
+ rescheduled?: boolean;
+ fromReschedule?: string;
+ recurringEventId?: string;
+ recurringBookingUid?: string;
+ smsReminderNumber?: string;
+ location?: string;
+ cancellationReason?: string;
+ rejectionReason?: string;
+ responses?: Record;
+}
+
+export interface GetBookingsResponse {
+ status: "success";
+ data: Booking[];
+}
+
+export interface BookingParticipationResult {
+ isOrganizer: boolean;
+ isHost: boolean;
+ isAttendee: boolean;
+ isParticipating: boolean;
+}
diff --git a/companion/services/types/event-types.types.ts b/companion/services/types/event-types.types.ts
new file mode 100644
index 0000000000..a83610c03c
--- /dev/null
+++ b/companion/services/types/event-types.types.ts
@@ -0,0 +1,288 @@
+// Event Type Creation/Update Types
+export interface BookingLimitsCount {
+ day?: number;
+ week?: number;
+ month?: number;
+ year?: number;
+}
+
+export interface BookingLimitsDuration {
+ day?: number;
+ week?: number;
+ month?: number;
+ year?: number;
+}
+
+export interface BookerActiveBookingsLimit {
+ count: number;
+}
+
+export interface BusinessDaysWindow {
+ type: "businessDays";
+ value: number;
+ rolling?: boolean;
+ rollingWindow?: number;
+}
+
+export interface CalendarDaysWindow {
+ type: "calendarDays";
+ value: number;
+ rolling?: boolean;
+ rollingWindow?: number;
+}
+
+export interface RangeWindow {
+ type: "range";
+ value: [string, string]; // ISO date strings
+}
+
+export type BookingWindow =
+ | BusinessDaysWindow
+ | CalendarDaysWindow
+ | RangeWindow
+ | { disabled: true };
+
+export interface BookerLayouts {
+ enabledLayouts: Array<"month_view" | "week_view" | "column_view">;
+ defaultLayout: "month_view" | "week_view" | "column_view";
+}
+
+export interface ConfirmationPolicy {
+ noticeThreshold?: {
+ count: number;
+ unit: "hours" | "minutes";
+ };
+}
+
+export interface Recurrence {
+ interval: number;
+ occurrences: number;
+ frequency: "daily" | "weekly" | "monthly" | "yearly";
+}
+
+export interface Seats {
+ seatsPerTimeSlot?: number;
+ showAttendeeInfo?: boolean;
+ showAvailabilityCount?: boolean;
+ seatsShowAvailabilityCount?: boolean;
+}
+
+export interface EventTypeColor {
+ lightEventTypeColor?: string;
+ darkEventTypeColor?: string;
+}
+
+export interface EmailSettings {
+ additionalGuestsEmails?: string[];
+}
+
+// Booking Field Types
+export interface BaseBookingField {
+ name: string;
+ type: string;
+ label?: string;
+ placeholder?: string;
+ required?: boolean;
+ hidden?: boolean;
+}
+
+export interface NameDefaultField extends BaseBookingField {
+ type: "name";
+ variant?: "fullName" | "firstAndLastName";
+}
+
+export interface EmailDefaultField extends BaseBookingField {
+ type: "email";
+}
+
+export interface PhoneField extends BaseBookingField {
+ type: "phone";
+}
+
+export interface AddressField extends BaseBookingField {
+ type: "address";
+}
+
+export interface TextField extends BaseBookingField {
+ type: "text";
+}
+
+export interface NumberField extends BaseBookingField {
+ type: "number";
+}
+
+export interface TextAreaField extends BaseBookingField {
+ type: "textarea";
+}
+
+export interface SelectField extends BaseBookingField {
+ type: "select" | "multiselect";
+ options?: Array<{ label: string; value: string }>;
+}
+
+export interface CheckboxField extends BaseBookingField {
+ type: "checkbox";
+}
+
+export interface RadioField extends BaseBookingField {
+ type: "radio" | "radioInput";
+ options?: Array<{ label: string; value: string }>;
+}
+
+export interface BooleanField extends BaseBookingField {
+ type: "boolean";
+}
+
+export type BookingField =
+ | NameDefaultField
+ | EmailDefaultField
+ | PhoneField
+ | AddressField
+ | TextField
+ | NumberField
+ | TextAreaField
+ | SelectField
+ | CheckboxField
+ | RadioField
+ | BooleanField;
+
+export interface EventType {
+ id: number;
+ title: string;
+ slug: string;
+ description?: string;
+ length: number; // Deprecated: use lengthInMinutes instead
+ lengthInMinutes?: number; // API returns this field
+ lengthInMinutesOptions?: number[];
+
+ // Locations
+ locations?: Array<{
+ type: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ integration?: string;
+ credentialId?: number;
+ public?: boolean;
+ }>;
+
+ // Pricing
+ price?: number;
+ currency?: string;
+
+ // Basic settings
+ disableGuests?: boolean;
+ lockTimeZoneToggleOnBookingPage?: boolean;
+ requiresConfirmation?: boolean;
+ requiresBookerEmailVerification?: boolean;
+ hideCalendarNotes?: boolean;
+ successRedirectUrl?: string;
+ forwardParamsSuccessRedirect?: boolean;
+
+ // Schedule and buffers
+ scheduleId?: number;
+ slotInterval?: number;
+ minimumBookingNotice?: number;
+ beforeEventBuffer?: number;
+ afterEventBuffer?: number;
+
+ // Limits
+ bookingLimitsCount?: BookingLimitsCount | { disabled: true };
+ bookingLimitsDuration?: BookingLimitsDuration | { disabled: true };
+ bookerActiveBookingsLimit?: BookerActiveBookingsLimit | { disabled: true };
+ onlyShowFirstAvailableSlot?: boolean;
+ bookingWindow?: BookingWindow;
+ offsetStart?: number;
+
+ // Advanced
+ bookerLayouts?: BookerLayouts;
+ confirmationPolicy?: ConfirmationPolicy | { disabled: true };
+
+ // Recurring
+ recurrence?: Recurrence | { disabled: true };
+
+ // Seats
+ seats?: Seats | { disabled: true };
+
+ // Customization
+ bookingFields?: BookingField[];
+ hidden?: boolean;
+ eventTypeColor?: EventTypeColor;
+
+ // Ownership
+ userId?: number;
+ teamId?: number;
+ hosts?: Array<{
+ userId: number;
+ isFixed: boolean;
+ }>;
+
+ // Metadata
+ metadata?: Record;
+}
+
+export interface CreateEventTypeInput {
+ // Basic fields
+ title: string;
+ slug: string;
+ description?: string;
+ lengthInMinutes: number;
+ lengthInMinutesOptions?: number[];
+
+ // Locations
+ locations?: Array<{
+ type: string;
+ address?: string;
+ link?: string;
+ phone?: string;
+ integration?: string;
+ credentialId?: number;
+ public?: boolean;
+ }>;
+
+ // Schedule
+ scheduleId?: number;
+
+ // Booking settings
+ disableGuests?: boolean;
+ slotInterval?: number;
+ minimumBookingNotice?: number;
+ beforeEventBuffer?: number;
+ afterEventBuffer?: number;
+
+ // Limits
+ bookingLimitsCount?: BookingLimitsCount | { disabled: true };
+ bookingLimitsDuration?: BookingLimitsDuration | { disabled: true };
+ bookerActiveBookingsLimit?: BookerActiveBookingsLimit | { disabled: true };
+ onlyShowFirstAvailableSlot?: boolean;
+
+ // Booking window
+ bookingWindow?: BookingWindow;
+
+ // Advanced settings
+ offsetStart?: number;
+ bookerLayouts?: BookerLayouts;
+ confirmationPolicy?: ConfirmationPolicy | { disabled: true };
+ recurrence?: Recurrence | { disabled: true };
+ seats?: Seats | { disabled: true };
+
+ // Customization
+ bookingFields?: BookingField[];
+ hidden?: boolean;
+ eventTypeColor?: EventTypeColor;
+ emailSettings?: EmailSettings;
+
+ // Additional fields
+ requiresConfirmation?: boolean;
+ requiresBookerEmailVerification?: boolean;
+ hideCalendarNotes?: boolean;
+ lockTimeZoneToggleOnBookingPage?: boolean;
+ successRedirectUrl?: string;
+ forwardParamsSuccessRedirect?: boolean;
+ metadata?: Record;
+}
+
+export interface GetEventTypesResponse {
+ status: "success";
+ data: EventType[];
+}
diff --git a/companion/services/types/index.ts b/companion/services/types/index.ts
new file mode 100644
index 0000000000..29169f1296
--- /dev/null
+++ b/companion/services/types/index.ts
@@ -0,0 +1,7 @@
+// Re-export all types for easy importing
+export * from "./event-types.types";
+export * from "./bookings.types";
+export * from "./schedules.types";
+export * from "./users.types";
+export * from "./webhooks.types";
+export * from "./private-links.types";
diff --git a/companion/services/types/private-links.types.ts b/companion/services/types/private-links.types.ts
new file mode 100644
index 0000000000..1b224f8701
--- /dev/null
+++ b/companion/services/types/private-links.types.ts
@@ -0,0 +1,25 @@
+// Private Link Types
+export interface PrivateLink {
+ id: number;
+ link: string;
+ enabled: boolean;
+ eventTypeId: number;
+}
+
+export interface CreatePrivateLinkInput {
+ enabled?: boolean;
+}
+
+export interface UpdatePrivateLinkInput {
+ enabled?: boolean;
+}
+
+export interface GetPrivateLinksResponse {
+ status: string;
+ data: PrivateLink[];
+}
+
+export interface GetPrivateLinkResponse {
+ status: string;
+ data: PrivateLink;
+}
diff --git a/companion/services/types/schedules.types.ts b/companion/services/types/schedules.types.ts
new file mode 100644
index 0000000000..be64af6f53
--- /dev/null
+++ b/companion/services/types/schedules.types.ts
@@ -0,0 +1,31 @@
+export interface ScheduleAvailability {
+ days: string[];
+ startTime: string;
+ endTime: string;
+}
+
+export interface ScheduleOverride {
+ date: string;
+ startTime: string;
+ endTime: string;
+}
+
+export interface Schedule {
+ id: number;
+ ownerId: number;
+ name: string;
+ timeZone: string;
+ availability: ScheduleAvailability[];
+ isDefault: boolean;
+ overrides: ScheduleOverride[];
+}
+
+export interface GetSchedulesResponse {
+ status: "success";
+ data: Schedule[];
+}
+
+export interface GetScheduleResponse {
+ status: "success";
+ data: Schedule | null;
+}
diff --git a/companion/services/types/users.types.ts b/companion/services/types/users.types.ts
new file mode 100644
index 0000000000..aa1b92896f
--- /dev/null
+++ b/companion/services/types/users.types.ts
@@ -0,0 +1,35 @@
+export interface UserProfile {
+ id: number;
+ username: string;
+ name: string;
+ email: string;
+ bio?: string;
+ avatarUrl?: string;
+ timeZone?: string;
+ weekStart?: string;
+ timeFormat?: number;
+ defaultScheduleId?: number;
+ locale?: string;
+ organizationId?: number;
+ organization?: {
+ id: number;
+ isPlatform: boolean;
+ };
+ metadata?: Record;
+ brandColor?: string;
+ darkBrandColor?: string;
+ theme?: string;
+}
+
+export interface ConferencingOption {
+ id: number;
+ type: string;
+ userId: number | null;
+ teamId: number | null;
+ appId: string | null;
+ subscriptionId: number | null;
+ paymentStatus: string | null;
+ billingCycleStart: string | null;
+ invalid: boolean;
+ delegationCredentialId: string | null;
+}
diff --git a/companion/services/types/webhooks.types.ts b/companion/services/types/webhooks.types.ts
new file mode 100644
index 0000000000..30b47e673b
--- /dev/null
+++ b/companion/services/types/webhooks.types.ts
@@ -0,0 +1,36 @@
+// Webhook Types
+export interface Webhook {
+ id: string;
+ subscriberUrl: string;
+ eventTriggers: string[];
+ active: boolean;
+ payloadTemplate?: string;
+ secret?: string;
+ eventTypeId?: number;
+}
+
+export interface CreateWebhookInput {
+ subscriberUrl: string;
+ eventTriggers: string[];
+ active?: boolean;
+ payloadTemplate?: string;
+ secret?: string;
+}
+
+export interface UpdateWebhookInput {
+ subscriberUrl?: string;
+ eventTriggers?: string[];
+ active?: boolean;
+ payloadTemplate?: string;
+ secret?: string;
+}
+
+export interface GetWebhooksResponse {
+ status: string;
+ data: Webhook[];
+}
+
+export interface GetWebhookResponse {
+ status: string;
+ data: Webhook;
+}
diff --git a/companion/services/webAuth.ts b/companion/services/webAuth.ts
new file mode 100644
index 0000000000..0f05dd13b4
--- /dev/null
+++ b/companion/services/webAuth.ts
@@ -0,0 +1,192 @@
+import { Platform } from "react-native";
+
+export interface WebSessionInfo {
+ isLoggedIn: boolean;
+ accessToken?: string;
+ refreshToken?: string;
+ userInfo?: any;
+}
+
+export class WebAuthService {
+ // Check if running on web
+ static isWeb(): boolean {
+ return Platform.OS === "web";
+ }
+
+ // Get cookies from the browser
+ static getCookies(): { [key: string]: string } {
+ if (!this.isWeb()) return {};
+
+ const cookies: { [key: string]: string } = {};
+ if (typeof document !== "undefined") {
+ document.cookie.split(";").forEach((cookie) => {
+ const [name, value] = cookie.trim().split("=");
+ if (name && value) {
+ cookies[name] = decodeURIComponent(value);
+ }
+ });
+ }
+ return cookies;
+ }
+
+ // Check for Cal.com session cookies
+ static async checkCalComSession(): Promise {
+ if (!this.isWeb()) {
+ return { isLoggedIn: false };
+ }
+
+ try {
+ // Check for common Cal.com session cookies
+ const cookies = this.getCookies();
+
+ // Look for Cal.com authentication cookies
+ // Common patterns: next-auth.session-token, __Secure-next-auth.session-token, etc.
+ const sessionCookieNames = [
+ "next-auth.session-token",
+ "__Secure-next-auth.session-token",
+ "__Host-next-auth.session-token",
+ "next-auth.csrf-token",
+ "cal-session",
+ "session-token",
+ ];
+
+ const foundSessionCookie = sessionCookieNames.find((name) => cookies[name]);
+
+ if (foundSessionCookie) {
+ // Try to validate the session with Cal.com API
+ const sessionInfo = await this.validateWebSession();
+ return sessionInfo;
+ }
+
+ return { isLoggedIn: false };
+ } catch (error) {
+ return { isLoggedIn: false };
+ }
+ }
+
+ // Validate web session by calling Cal.com API with cookies
+ static async validateWebSession(): Promise {
+ if (!this.isWeb()) {
+ return { isLoggedIn: false };
+ }
+
+ try {
+ // First try to call the NextAuth session endpoint
+ const sessionResponse = await fetch("https://app.cal.com/api/auth/session", {
+ method: "GET",
+ credentials: "include", // Include cookies
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ if (sessionResponse.ok) {
+ const sessionData = await sessionResponse.json();
+
+ if (sessionData && sessionData.user) {
+ // User is logged in via web session
+ return {
+ isLoggedIn: true,
+ userInfo: sessionData.user,
+ };
+ }
+ }
+
+ // Try the internal Cal.com me endpoint (this might work with cookies)
+ const meResponse = await fetch("https://app.cal.com/api/me", {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ if (meResponse.ok) {
+ const userData = await meResponse.json();
+
+ if (userData && (userData.id || userData.user || userData.data)) {
+ return {
+ isLoggedIn: true,
+ userInfo: userData.user || userData.data || userData,
+ };
+ }
+ }
+
+ // Try to check if user is logged in by attempting to access a protected page
+ const dashboardResponse = await fetch("https://app.cal.com/api/trpc/viewer.me", {
+ method: "GET",
+ credentials: "include",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ if (dashboardResponse.ok) {
+ const dashboardData = await dashboardResponse.json();
+
+ if (dashboardData && dashboardData.result && dashboardData.result.data) {
+ return {
+ isLoggedIn: true,
+ userInfo: dashboardData.result.data,
+ };
+ }
+ }
+
+ return { isLoggedIn: false };
+ } catch (error) {
+ return { isLoggedIn: false };
+ }
+ }
+
+ // Try to get API tokens from web session
+ static async getTokensFromWebSession(): Promise<{ accessToken?: string; refreshToken?: string }> {
+ if (!this.isWeb()) {
+ return {};
+ }
+
+ try {
+ // Some Cal.com implementations might expose tokens via specific endpoints
+ // This is a fallback approach - in practice, web sessions might not expose tokens directly
+
+ // Check localStorage/sessionStorage for any stored tokens
+ if (typeof window !== "undefined") {
+ const localStorage = window.localStorage;
+ const sessionStorage = window.sessionStorage;
+
+ const possibleTokenKeys = [
+ "cal-access-token",
+ "cal-auth-token",
+ "next-auth.token",
+ "auth-token",
+ "access-token",
+ ];
+
+ for (const key of possibleTokenKeys) {
+ const localToken = localStorage.getItem(key);
+ const sessionToken = sessionStorage.getItem(key);
+
+ if (localToken || sessionToken) {
+ return {
+ accessToken: localToken || sessionToken || undefined,
+ };
+ }
+ }
+ }
+
+ return {};
+ } catch (error) {
+ return {};
+ }
+ }
+
+ // Redirect to Cal.com web login instead of using WebView
+ static redirectToWebLogin(): void {
+ if (!this.isWeb()) return;
+
+ // For web, redirect directly to Cal.com login
+ const currentUrl = window.location.href;
+ const loginUrl = `https://app.cal.com/auth/signin?callbackUrl=${encodeURIComponent(currentUrl)}`;
+
+ window.location.href = loginUrl;
+ }
+}
diff --git a/companion/tailwind.config.js b/companion/tailwind.config.js
new file mode 100644
index 0000000000..6288219191
--- /dev/null
+++ b/companion/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+ presets: [require("nativewind/preset")],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/companion/tsconfig.json b/companion/tsconfig.json
new file mode 100644
index 0000000000..b365f86f06
--- /dev/null
+++ b/companion/tsconfig.json
@@ -0,0 +1,6 @@
+{
+ "compilerOptions": {
+ "types": ["nativewind/types"]
+ },
+ "extends": "expo/tsconfig.base"
+}
diff --git a/companion/utils/defaultLocations.ts b/companion/utils/defaultLocations.ts
new file mode 100644
index 0000000000..94e99129cf
--- /dev/null
+++ b/companion/utils/defaultLocations.ts
@@ -0,0 +1,97 @@
+/**
+ * Default location types that are available alongside conferencing apps
+ * These match the pattern from packages/app-store/locations.ts
+ */
+
+export enum DefaultLocationType {
+ AttendeeInPerson = "attendeeInPerson",
+ InPerson = "inPerson",
+ Phone = "phone",
+ UserPhone = "userPhone",
+ Link = "link",
+ Conferencing = "conferencing",
+ SomewhereElse = "somewhereElse",
+}
+
+export type DefaultLocation = {
+ type: DefaultLocationType;
+ label: string;
+ iconUrl: string;
+ category: "in person" | "conferencing" | "other" | "phone";
+ organizerInputType?: "text" | "phone" | null;
+ organizerInputPlaceholder?: string;
+ organizerInputLabel?: string;
+ messageForOrganizer?: string;
+};
+
+/**
+ * Default locations available in Cal.com
+ * Icons are served from https://app.cal.com/{iconPath}
+ */
+export const defaultLocations: DefaultLocation[] = [
+ {
+ type: DefaultLocationType.AttendeeInPerson,
+ label: "In Person (Attendee Address)",
+ iconUrl: "https://app.cal.com/map-pin-dark.svg",
+ category: "in person",
+ },
+ {
+ type: DefaultLocationType.SomewhereElse,
+ label: "Custom Attendee Location",
+ iconUrl: "https://app.cal.com/message-pin.svg",
+ category: "other",
+ },
+ {
+ type: DefaultLocationType.InPerson,
+ label: "In Person (Organizer Address)",
+ iconUrl: "https://app.cal.com/map-pin-dark.svg",
+ category: "in person",
+ organizerInputType: "text",
+ organizerInputPlaceholder: "Enter address or place",
+ organizerInputLabel: "Address",
+ messageForOrganizer: "Provide an Address or Place",
+ },
+ {
+ type: DefaultLocationType.Link,
+ label: "Link Meeting",
+ iconUrl: "https://app.cal.com/link.svg",
+ category: "other",
+ organizerInputType: "text",
+ organizerInputPlaceholder: "https://meet.example.com/join/123456",
+ organizerInputLabel: "Meeting Link",
+ messageForOrganizer: "Provide a Meeting Link",
+ },
+ {
+ type: DefaultLocationType.Phone,
+ label: "Attendee Phone Number",
+ iconUrl: "https://app.cal.com/phone.svg",
+ category: "phone",
+ organizerInputType: null,
+ messageForOrganizer: "Cal will ask your invitee to enter a phone number before scheduling.",
+ },
+ {
+ type: DefaultLocationType.UserPhone,
+ label: "Organizer Phone Number",
+ iconUrl: "https://app.cal.com/phone.svg",
+ category: "phone",
+ organizerInputType: "phone",
+ organizerInputPlaceholder: "Enter phone number",
+ organizerInputLabel: "Phone Number",
+ messageForOrganizer: "Provide your phone number with country code",
+ },
+];
+
+/**
+ * Get icon URL for a default location type
+ */
+export function getDefaultLocationIconUrl(locationType: string): string | null {
+ const location = defaultLocations.find((loc) => loc.type === locationType);
+ return location ? location.iconUrl : null;
+}
+
+/**
+ * Check if a location type is a default location (not a conferencing app)
+ */
+export function isDefaultLocation(locationType: string): boolean {
+ return defaultLocations.some((loc) => loc.type === locationType);
+}
diff --git a/companion/utils/getAppIconUrl.ts b/companion/utils/getAppIconUrl.ts
new file mode 100644
index 0000000000..21d316c794
--- /dev/null
+++ b/companion/utils/getAppIconUrl.ts
@@ -0,0 +1,123 @@
+/**
+ * Maps conferencing app types or appIds to their icon URLs.
+ * Icons are publicly accessible at: https://app.cal.com/app-store/{dirName}/icon.svg
+ */
+
+const APP_TYPE_TO_DIR_NAME: Record = {
+ // Video conferencing apps
+ zoom_video: "zoomvideo",
+ google_video: "googlevideo",
+ office365_video: "office365video",
+ teams_video: "office365video",
+ daily_video: "dailyvideo",
+ jitsi_video: "jitsivideo",
+ huddle01_video: "huddle01video",
+ tandem_video: "tandemvideo",
+ whereby_video: "whereby",
+ webex_video: "webex",
+ sylapsvideo_video: "sylapsvideo",
+ shimmervideo_video: "shimmervideo",
+ riverside_video: "riverside",
+ roam_video: "roam",
+ ping_video: "ping",
+ mirotalk_video: "mirotalk",
+ nextcloudtalk_conferencing: "nextcloudtalk",
+ jelly_conferencing: "jelly",
+ "horizon-workrooms_video": "horizon-workrooms",
+ "element-call_conferencing": "element-call",
+ eightxeight_video: "eightxeight",
+ discord_video: "discord",
+ dialpad_video: "dialpad",
+ demodesk_video: "demodesk",
+ campfire_video: "campfire",
+ facetime_video: "facetime",
+ whatsapp_video: "whatsapp",
+ telegram_video: "telegram",
+ skype_video: "skype",
+ signal_video: "signal",
+ sirius_video: "sirius_video",
+ sirius_video_video: "sirius_video", // Handle double _video suffix
+ salesroom_video: "salesroom",
+};
+
+const APP_ID_TO_DIR_NAME: Record = {
+ zoom: "zoomvideo",
+ "google-meet": "googlevideo",
+ msteams: "office365video",
+ office365: "office365video",
+ teams: "office365video",
+ "cal-video": "dailyvideo",
+ "daily-video": "dailyvideo",
+ daily: "dailyvideo",
+ jitsi: "jitsivideo",
+ huddle01: "huddle01video",
+ tandem: "tandemvideo",
+ whereby: "whereby",
+ webex: "webex",
+ sylapsvideo: "sylapsvideo",
+ shimmervideo: "shimmervideo",
+ riverside: "riverside",
+ roam: "roam",
+ ping: "ping",
+ mirotalk: "mirotalk",
+ nextcloudtalk: "nextcloudtalk",
+ jelly: "jelly",
+ "horizon-workrooms": "horizon-workrooms",
+ "element-call": "element-call",
+ eightxeight: "eightxeight",
+ discord: "discord",
+ dialpad: "dialpad",
+ demodesk: "demodesk",
+ campfire: "campfire",
+ facetime: "facetime",
+ whatsapp: "whatsapp",
+ telegram: "telegram",
+ skype: "skype",
+ signal: "signal",
+ sirius_video: "sirius_video",
+ salesroom: "salesroom",
+};
+
+/**
+ * Generates the icon URL for a conferencing app based on its type or appId.
+ * Uses publicly available icons from https://app.cal.com/app-store/{dirName}/icon.svg
+ * Special cases are handled (e.g., Google Meet uses logo.webp)
+ *
+ * @param type - The credential type (e.g., "zoom_video", "google_video")
+ * @param appId - The app identifier (e.g., "zoom", "google-meet")
+ * @returns The full icon URL or null if the app is not found
+ *
+ * @example
+ * getAppIconUrl("zoom_video", "zoom") // "https://app.cal.com/app-store/zoomvideo/icon.svg"
+ * getAppIconUrl("google_video", "google-meet") // "https://app.cal.com/app-store/googlevideo/logo.webp"
+ */
+export function getAppIconUrl(type: string, appId: string | null): string | null {
+ let dirName: string | null = null;
+ let iconFileName = "icon.svg";
+
+ // Try to find by appId first (more specific)
+ if (appId && APP_ID_TO_DIR_NAME[appId]) {
+ dirName = APP_ID_TO_DIR_NAME[appId];
+ } else if (APP_TYPE_TO_DIR_NAME[type]) {
+ // Fallback to type
+ dirName = APP_TYPE_TO_DIR_NAME[type];
+ }
+
+ if (!dirName) {
+ return null;
+ }
+
+ // Special cases for icon file names
+ if (appId === "google-meet" || type === "google_video") {
+ // Google Meet uses logo.webp instead of icon.svg
+ iconFileName = "logo.webp";
+ } else if (appId === "riverside" || type === "riverside_video") {
+ // Riverside uses icon-dark.svg
+ iconFileName = "icon-dark.svg";
+ } else if (appId === "sirius_video" || type === "sirius_video" || type === "sirius_video_video") {
+ // Sirius Video uses icon-dark.svg
+ iconFileName = "icon-dark.svg";
+ }
+
+ return `https://app.cal.com/app-store/${dirName}/${iconFileName}`;
+}
diff --git a/companion/utils/gmail-google-chip-parser.ts b/companion/utils/gmail-google-chip-parser.ts
new file mode 100644
index 0000000000..1989103b80
--- /dev/null
+++ b/companion/utils/gmail-google-chip-parser.ts
@@ -0,0 +1,155 @@
+/**
+ * Parser for Google Calendar scheduling chips in Gmail
+ * Extracts time slots from the Gmail ad-hoc scheduling chip
+ */
+
+export interface GoogleTimeSlot {
+ date: string; // "Wed, 26 November"
+ startTime: string; // "3:30 pm"
+ endTime: string; // "4:30 pm"
+ durationMinutes: number; // 60
+ isoDate: string; // "2025-11-27"
+ isoTimestamp: string; // "2025-11-27T05:30:00.000Z"
+ googleUrl: string; // Original Google Calendar URL
+}
+
+export interface ParsedGoogleChip {
+ scheduleId: string;
+ timezone: string; // "Asia/Kolkata"
+ timezoneOffset: string; // "GMT+05:30"
+ slots: GoogleTimeSlot[];
+ detectedDuration: number; // 15, 30, 45, or 60
+}
+
+/**
+ * Parse Google Calendar scheduling chip from Gmail
+ */
+export function parseGoogleChip(chipElement: HTMLElement): ParsedGoogleChip | null {
+ try {
+ // 1. Get schedule ID from data attribute
+ const scheduleId = chipElement.getAttribute("data-ad-hoc-schedule-id");
+ if (!scheduleId) {
+ console.warn("No schedule ID found in Google chip");
+ return null;
+ }
+
+ // 2. Parse timezone - first try to get IANA timezone from data attribute
+ let timezone = "UTC";
+ let timezoneOffset = "GMT+00:00";
+
+ // Try to get IANA timezone from data-ad-hoc-v2-params
+ const paramsAttr = chipElement.getAttribute("data-ad-hoc-v2-params");
+ if (paramsAttr) {
+ // The timezone is at the end of the params string, like: "Asia/Kolkata"
+ // Try multiple patterns as Gmail might format it differently
+ let tzMatch = paramsAttr.match(/"([^&]+)"\]/);
+
+ // Also try without HTML entities
+ if (!tzMatch) {
+ tzMatch = paramsAttr.match(/"([^"]+)"\]/);
+ }
+
+ // Also try with escaped quotes
+ if (!tzMatch) {
+ tzMatch = paramsAttr.match(/\\"([^\\]+)\\"\]/);
+ }
+
+ if (tzMatch && tzMatch[1]) {
+ timezone = tzMatch[1]; // e.g., "Asia/Kolkata"
+ }
+ }
+
+ // Also get the display timezone offset from the UI text
+ const timezoneText = chipElement.querySelector("td")?.textContent?.trim() || "";
+ const timezoneMatch = timezoneText.match(/^(.+?)\s*-\s*(.+?)\s*\((.+?)\)$/);
+
+ if (timezoneMatch) {
+ timezoneOffset = timezoneMatch[3].trim(); // e.g., "GMT+05:30"
+ }
+
+ // 3. Find all time slot links
+ const slotLinks = Array.from(chipElement.querySelectorAll("a[href*='slotStartTime']"));
+
+ if (slotLinks.length === 0) {
+ console.warn("No time slot links found in Google chip");
+ return null;
+ }
+
+ const slots: GoogleTimeSlot[] = [];
+ let detectedDuration = 60; // Default
+
+ slotLinks.forEach((link) => {
+ const href = (link as HTMLAnchorElement).href;
+ const url = new URL(href);
+
+ // Extract parameters
+ const slotStartTime = url.searchParams.get("slotStartTime");
+ const slotDurationMinutes = url.searchParams.get("slotDurationMinutes");
+
+ if (!slotStartTime || !slotDurationMinutes) {
+ return;
+ }
+
+ const durationMinutes = parseInt(slotDurationMinutes, 10);
+ detectedDuration = durationMinutes; // Use the duration from slots
+
+ // Convert Unix timestamp (milliseconds) to Date
+ const startDate = new Date(parseInt(slotStartTime, 10));
+ const endDate = new Date(startDate.getTime() + durationMinutes * 60 * 1000);
+
+ // Format date and time using the chip's timezone for consistency
+ const dateOptions: Intl.DateTimeFormatOptions = {
+ weekday: "short",
+ day: "numeric",
+ month: "long",
+ timeZone: timezone, // Use chip's timezone
+ };
+ const timeOptions: Intl.DateTimeFormatOptions = {
+ hour: "numeric",
+ minute: "2-digit",
+ hour12: true,
+ timeZone: timezone, // Use chip's timezone
+ };
+
+ const date = startDate.toLocaleDateString("en-US", dateOptions);
+ const startTime = startDate
+ .toLocaleTimeString("en-US", timeOptions)
+ .toLowerCase()
+ .replace(/\s/g, " ");
+ const endTime = endDate
+ .toLocaleTimeString("en-US", timeOptions)
+ .toLowerCase()
+ .replace(/\s/g, " ");
+
+ // ISO format for Cal.com
+ const isoDate = startDate.toISOString().split("T")[0]; // "2025-11-27"
+ const isoTimestamp = startDate.toISOString(); // "2025-11-27T05:30:00.000Z"
+
+ slots.push({
+ date,
+ startTime,
+ endTime,
+ durationMinutes,
+ isoDate,
+ isoTimestamp,
+ googleUrl: href,
+ });
+ });
+
+ if (slots.length === 0) {
+ console.warn("No valid slots parsed from Google chip");
+ return null;
+ }
+
+ return {
+ scheduleId,
+ timezone,
+ timezoneOffset,
+ slots,
+ detectedDuration,
+ };
+ } catch (error) {
+ console.error("Error parsing Google chip:", error);
+ return null;
+ }
+}
diff --git a/companion/utils/parsers/event-type-parsers.ts b/companion/utils/parsers/event-type-parsers.ts
new file mode 100644
index 0000000000..61d30a6e05
--- /dev/null
+++ b/companion/utils/parsers/event-type-parsers.ts
@@ -0,0 +1,29 @@
+/**
+ * Helper functions to parse form values into API-compatible formats
+ */
+
+export const parseBufferTime = (buffer: string): number => {
+ const match = buffer.match(/(\d+)/);
+ return match ? parseInt(match[1]) : 0;
+};
+
+export const parseMinimumNotice = (value: string, unit: string): number => {
+ const val = parseInt(value) || 0;
+ if (unit === "Hours") return val * 60;
+ if (unit === "Days") return val * 24 * 60;
+ return val; // Minutes
+};
+
+export const parseFrequencyUnit = (unit: string): string | null => {
+ const normalized = unit.toLowerCase();
+ if (normalized.includes("day")) return "day";
+ if (normalized.includes("week")) return "week";
+ if (normalized.includes("month")) return "month";
+ if (normalized.includes("year")) return "year";
+ return null;
+};
+
+export const parseSlotInterval = (interval: string): number => {
+ const match = interval.match(/(\d+)/);
+ return match ? parseInt(match[1]) : 0;
+};
diff --git a/companion/utils/slugify.ts b/companion/utils/slugify.ts
new file mode 100644
index 0000000000..26704f4077
--- /dev/null
+++ b/companion/utils/slugify.ts
@@ -0,0 +1,33 @@
+// forDisplayingInput is used to allow user to type "-" at the end and not replace with empty space.
+// For eg:- "test-slug" is the slug user wants to set but while typing "test-" would get replace to "test" because of replace(/-+$/, "")
+
+export const slugify = (str: string, forDisplayingInput?: boolean) => {
+ if (!str) {
+ return "";
+ }
+
+ const s = str
+ .toLowerCase() // Convert to lowercase
+ .trim() // Remove whitespace from both sides
+ .normalize("NFD") // Normalize to decomposed form for handling accents
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ .replace(/\p{Diacritic}/gu, "") // Remove any diacritics (accents) from characters
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ .replace(/[^.\p{L}\p{N}\p{Zs}\p{Emoji}]+/gu, "-") // Replace any non-alphanumeric characters (including Unicode and except "." period) with a dash
+ .replace(/[\s_#]+/g, "-") // Replace whitespace, # and underscores with a single dash
+ .replace(/^-+/, "") // Remove dashes from start
+ .replace(/\.{2,}/g, ".") // Replace consecutive periods with a single period
+ .replace(/^\.+/, "") // Remove periods from the start
+ .replace(
+ /([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g,
+ ""
+ ) // Removes emojis
+ .replace(/\s+/g, " ")
+ .replace(/-+/g, "-"); // Replace consecutive dashes with a single dash
+
+ return forDisplayingInput ? s : s.replace(/-+$/, "").replace(/\.*$/, ""); // Remove dashes and period from end
+};
+
+export default slugify;
diff --git a/companion/wxt.config.ts b/companion/wxt.config.ts
new file mode 100644
index 0000000000..f93e8dea94
--- /dev/null
+++ b/companion/wxt.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig } from "wxt";
+
+export default defineConfig({
+ srcDir: "extension",
+ entrypointsDir: "entrypoints",
+ publicDir: "extension/public",
+ outDir: ".output",
+ manifest: {
+ name: "Cal.com Companion",
+ version: "1.7.0",
+ description: "Your calendar companion for quick booking and scheduling",
+ permissions: ["activeTab", "storage", "identity"],
+ host_permissions: [
+ "http://localhost:8081/*",
+ "https://api.cal.com/*",
+ "https://app.cal.com/*",
+ "https://mail.google.com/*",
+ ],
+ content_security_policy: {
+ extension_pages:
+ "script-src 'self'; object-src 'self'; frame-src 'self' http://localhost:8081;",
+ },
+ action: {
+ default_title: "Cal.com Companion",
+ default_icon: {
+ "16": "icon-16.png",
+ "48": "icon-48.png",
+ "128": "icon-128.png",
+ },
+ },
+ icons: {
+ "16": "icon-16.png",
+ "48": "icon-48.png",
+ "128": "icon-128.png",
+ },
+ },
+ vite: () => ({
+ resolve: {
+ alias: {
+ "react-native": "react-native-web",
+ },
+ },
+ define: {
+ global: "globalThis",
+ __DEV__: JSON.stringify(false),
+ // Expose environment variables to the extension
+ "import.meta.env.EXPO_PUBLIC_CALCOM_OAUTH_CLIENT_ID": JSON.stringify(
+ process.env.EXPO_PUBLIC_CALCOM_OAUTH_CLIENT_ID
+ ),
+ "import.meta.env.EXPO_PUBLIC_CALCOM_OAUTH_REDIRECT_URI": JSON.stringify(
+ process.env.EXPO_PUBLIC_CALCOM_OAUTH_REDIRECT_URI
+ ),
+ },
+ optimizeDeps: {
+ include: ["react-native-web"],
+ esbuildOptions: {
+ loader: {
+ ".js": "jsx",
+ },
+ },
+ },
+ }),
+});