{
+ handleCloseModal();
+ setIsWidgetOpen(false);
+ });
+
+ const userProfile = publicSlots?.user;
+ const eventType = publicSlots?.eventType;
+ const slotsData = publicSlots?.slots || {};
+
+ // Widget state
+ const [isWidgetOpen, setIsWidgetOpen] = useState(false);
+
+ // Calendar state
+ const [currentDate, setCurrentDate] = useState(new Date());
+ const [selectedDate, setSelectedDate] = useState(null);
+
+ // Modal state (for booking confirmation)
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectedSlot, setSelectedSlot] = useState<{
+ date: Date;
+ slot: TimeSlot;
+ } | null>(null);
+ const [formData, setFormData] = useState({
+ email: "",
+ name: "",
+ });
+ const [formErrors, setFormErrors] = useState({
+ email: "",
+ name: "",
+ });
+
+ // Helper function to convert date to CET timezone string (YYYY-MM-DD)
+ const formatDateToCET = (date: Date): string => {
+ return date.toLocaleDateString("sv-SE", { timeZone: "Europe/Paris" });
+ };
+
+ // Helper function to get current date in CET timezone
+ const getCurrentDateInCET = (): Date => {
+ const now = new Date();
+ const cetTime = new Date(now.toLocaleString("en-US", { timeZone: "Europe/Paris" }));
+ return cetTime;
+ };
+
+ // Get available time slots for a specific date
+ const getAvailableSlots = (date: Date): TimeSlot[] => {
+ const dateStr = formatDateToCET(date);
+ return slotsData[dateStr]?.filter((slot) => slot.available) || [];
+ };
+
+ // Check if a date has any available slots
+ const hasAvailableSlots = (date: Date): boolean => {
+ const dateStr = formatDateToCET(date);
+ return slotsData[dateStr]?.some((slot) => slot.available) || false;
+ };
+
+ // Calendar helper functions
+ const getDaysInMonth = (date: Date) => {
+ const year = date.getFullYear();
+ const month = date.getMonth();
+
+ // Create first day of month and get its day of week in CET
+ const firstDayStr = `${year}-${String(month + 1).padStart(2, "0")}-01`;
+ const firstDay = new Date(`${firstDayStr}T12:00:00`);
+ const firstDayOfWeekInCET = new Date(
+ firstDay.toLocaleString("en-US", { timeZone: "Europe/Paris" })
+ ).getDay();
+
+ // Adjust for Monday as first day of week
+ const mondayStartingDay = firstDayOfWeekInCET === 0 ? 6 : firstDayOfWeekInCET - 1;
+
+ // Get number of days in month
+ const lastDay = new Date(year, month + 1, 0);
+ const daysInMonth = lastDay.getDate();
+
+ const days = [];
+
+ // Add empty cells for days before the first day of the month
+ for (let i = 0; i < mondayStartingDay; i++) {
+ days.push(null);
+ }
+
+ // Add all days of the month
+ for (let day = 1; day <= daysInMonth; day++) {
+ const dayStr = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(
+ 2,
+ "0"
+ )}`;
+ days.push(new Date(`${dayStr}T12:00:00`));
+ }
+
+ return days;
+ };
+
+ const navigateMonth = (direction: "prev" | "next") => {
+ setCurrentDate((prev) => {
+ const newDate = new Date(prev);
+ if (direction === "prev") {
+ newDate.setMonth(prev.getMonth() - 1);
+ } else {
+ newDate.setMonth(prev.getMonth() + 1);
+ }
+ return newDate;
+ });
+ };
+
+ const isToday = (date: Date) => {
+ const todayInCET = getCurrentDateInCET();
+ const todayStr = formatDateToCET(todayInCET);
+ const dateStr = formatDateToCET(date);
+ return dateStr === todayStr;
+ };
+
+ const isPastDate = (date: Date) => {
+ const todayInCET = getCurrentDateInCET();
+ const todayStr = formatDateToCET(todayInCET);
+ const dateStr = formatDateToCET(date);
+ return dateStr < todayStr;
+ };
+
+ const formatMonthYear = (date: Date) => {
+ return date.toLocaleDateString("fr-FR", { month: "long", year: "numeric" });
+ };
+
+ const formatDuration = (minutes: number) => {
+ if (minutes < 60) {
+ return `${minutes} min`;
+ }
+ const hours = Math.floor(minutes / 60);
+ const remainingMinutes = minutes % 60;
+ if (remainingMinutes === 0) {
+ return `${hours}h`;
+ }
+ return `${hours}h ${remainingMinutes}min`;
+ };
+
+ // Modal and form handlers
+ const handleSlotClick = (date: Date, slot: TimeSlot) => {
+ setSelectedSlot({ date, slot });
+ setIsModalOpen(true);
+ setFormData({ email: "", name: "" });
+ setFormErrors({ email: "", name: "" });
+ };
+
+ const handleCloseModal = () => {
+ setIsModalOpen(false);
+ setSelectedSlot(null);
+ setFormData({ email: "", name: "" });
+ setFormErrors({ email: "", name: "" });
+ };
+
+ const validateForm = () => {
+ const errors = { email: "", name: "" };
+ let isValid = true;
+
+ if (!formData.email.trim()) {
+ errors.email = "L'adresse email est requise";
+ isValid = false;
+ } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+ errors.email = "Veuillez entrer une adresse email valide";
+ isValid = false;
+ }
+
+ if (!formData.name.trim()) {
+ errors.name = "Le nom est requis";
+ isValid = false;
+ }
+
+ setFormErrors(errors);
+ return isValid;
+ };
+
+ // Calculate end time based on start time and duration
+ const calculateEndTime = (startTime: string, durationMinutes: number): string => {
+ if (!startTime) return "";
+
+ const [hours, minutes] = startTime.split(":").map(Number);
+ const startDate = new Date();
+ startDate.setHours(hours, minutes, 0, 0);
+
+ const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
+
+ return endDate.toTimeString().slice(0, 5); // Format as HH:MM
+ };
+
+ const handleSubmitIfNotLoggedIn = async () => {
+ if (validateForm()) {
+ const { session: sessionFromSignUp } = await signUpWithoutPassword({
+ email: formData.email,
+ name: formData.name,
+ });
+
+ const startTime = selectedSlot?.slot.time || "";
+ const duration = eventType?.duration || 60; // duration in minutes
+ const endTime = calculateEndTime(startTime, duration);
+
+ await createTabloWithOwner({
+ name: eventType?.name || "",
+ status: "todo",
+ owner_short_id: shortUserId || "",
+ event: {
+ description: eventType?.description || "",
+ end_time: endTime || "",
+ start_date: selectedSlot?.slot.date || "",
+ start_time: selectedSlot?.slot.time || "",
+ title: eventType?.name || "",
+ } as EventInsertInTablo,
+ access_token: sessionFromSignUp?.access_token || "",
+ });
+
+ handleCloseModal();
+ setIsWidgetOpen(false);
+ }
+ };
+
+ const handleSubmitIfLoggedIn = async () => {
+ if (user) {
+ const startTime = selectedSlot?.slot.time || "";
+ const duration = eventType?.duration || 60; // duration in minutes
+ const endTime = calculateEndTime(startTime, duration);
+
+ await createTabloWithOwner({
+ name: eventType?.name || "",
+ status: "todo",
+ owner_short_id: shortUserId || "",
+ event: {
+ description: eventType?.description || "",
+ end_time: endTime || "",
+ start_date: selectedSlot?.slot.date || "",
+ start_time: selectedSlot?.slot.time || "",
+ title: eventType?.name || "",
+ } as EventInsertInTablo,
+ access_token: session?.access_token || "",
+ });
+
+ handleCloseModal();
+ setIsWidgetOpen(false);
+ }
+ };
+
+ if (isLoadingSlots) {
+ return (
+
+
+
+
+
+
+
+
+);
diff --git a/apps/external/src/routes.tsx b/apps/external/src/routes.tsx
new file mode 100644
index 0000000..311d609
--- /dev/null
+++ b/apps/external/src/routes.tsx
@@ -0,0 +1,12 @@
+import { Route, Routes } from "react-router-dom";
+import { EmbeddedBookingPage } from "./EmbeddedBookingPage";
+import { FloatingBookingWidget } from "./FloatingBookingWidget";
+
+export default function AppRoutes() {
+ return (
+
+
+ );
+}
diff --git a/ui/src/vite-env.d.ts b/apps/external/src/vite-env.d.ts
similarity index 100%
rename from ui/src/vite-env.d.ts
rename to apps/external/src/vite-env.d.ts
diff --git a/apps/external/tsconfig.json b/apps/external/tsconfig.json
new file mode 100644
index 0000000..d6100fa
--- /dev/null
+++ b/apps/external/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+ "baseUrl": ".",
+ "paths": {
+ "@xtablo/ui": ["../../packages/ui/src"],
+ "@xtablo/ui/*": ["../../packages/ui/src/*"],
+ "@xtablo/shared": ["../../packages/shared/src"],
+ "@xtablo/shared/*": ["../../packages/shared/src/*"]
+ }
+ },
+ "include": ["src"],
+ "references": []
+}
diff --git a/apps/external/tsconfig.tsbuildinfo b/apps/external/tsconfig.tsbuildinfo
new file mode 100644
index 0000000..bf0b063
--- /dev/null
+++ b/apps/external/tsconfig.tsbuildinfo
@@ -0,0 +1 @@
+{"root":["./src/custommodal.tsx","./src/embeddedbookingpage.tsx","./src/floatingbookingwidget.tsx","./src/loadingspinner.tsx","./src/userstoreprovider.tsx","./src/main.tsx","./src/routes.tsx","./src/vite-env.d.ts","./src/lib/api.ts","./src/lib/supabase.ts"],"version":"5.9.3"}
\ No newline at end of file
diff --git a/apps/external/vite.config.ts b/apps/external/vite.config.ts
new file mode 100644
index 0000000..7c8420c
--- /dev/null
+++ b/apps/external/vite.config.ts
@@ -0,0 +1,26 @@
+///
+
+ );
+ }
+
+ return (
+
+
+
+
+ {/* Floating Button */}
+
+ {selectedSlot && (
+
+
+ );
+}
diff --git a/ui/src/components/LoadingSpinner.tsx b/apps/external/src/LoadingSpinner.tsx
similarity index 100%
rename from ui/src/components/LoadingSpinner.tsx
rename to apps/external/src/LoadingSpinner.tsx
diff --git a/ui/src/providers/UserStoreProvider.tsx b/apps/external/src/UserStoreProvider.tsx
similarity index 91%
rename from ui/src/providers/UserStoreProvider.tsx
rename to apps/external/src/UserStoreProvider.tsx
index 2d0d573..876625d 100644
--- a/ui/src/providers/UserStoreProvider.tsx
+++ b/apps/external/src/UserStoreProvider.tsx
@@ -1,10 +1,10 @@
import { useQuery } from "@tanstack/react-query";
-import { LoadingSpinner } from "@ui/components/LoadingSpinner";
-import { useSession } from "@ui/contexts/SessionContext";
-import { api } from "@ui/lib/api";
-import { Tables } from "@ui/types/database.types";
+import { useSession } from "@xtablo/shared/contexts/SessionContext";
+import { Tables } from "@xtablo/shared/types/database.types";
import React from "react";
import { createStore, StoreApi, useStore } from "zustand";
+import { LoadingSpinner } from "./LoadingSpinner";
+import { api } from "./lib/api";
export type User = Tables<"profiles"> & {
streamToken: string | null;
diff --git a/apps/external/src/lib/api.ts b/apps/external/src/lib/api.ts
new file mode 100644
index 0000000..e00027f
--- /dev/null
+++ b/apps/external/src/lib/api.ts
@@ -0,0 +1,3 @@
+import { buildApi } from "@xtablo/shared";
+
+export const api = buildApi(import.meta.env.VITE_API_URL);
diff --git a/apps/external/src/lib/supabase.ts b/apps/external/src/lib/supabase.ts
new file mode 100644
index 0000000..99c2e17
--- /dev/null
+++ b/apps/external/src/lib/supabase.ts
@@ -0,0 +1,10 @@
+import { createSupabaseClient } from "@xtablo/shared";
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+ throw new Error("Missing Supabase environment variables");
+}
+
+export const supabase = createSupabaseClient(supabaseUrl, supabaseAnonKey);
diff --git a/ui/src/main.css b/apps/external/src/main.css
similarity index 99%
rename from ui/src/main.css
rename to apps/external/src/main.css
index 125ddee..a896ff7 100644
--- a/ui/src/main.css
+++ b/apps/external/src/main.css
@@ -301,8 +301,7 @@
transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
}
100% {
- transform: translate(-50%, -50%) rotate(360deg) translateX(150px)
- rotate(-360deg);
+ transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
}
}
@@ -311,8 +310,7 @@
transform: translate(-50%, -50%) rotate(0deg) translateX(200px) rotate(0deg);
}
100% {
- transform: translate(-50%, -50%) rotate(-360deg) translateX(200px)
- rotate(360deg);
+ transform: translate(-50%, -50%) rotate(-360deg) translateX(200px) rotate(360deg);
}
}
@@ -321,8 +319,7 @@
transform: translate(-50%, -50%) rotate(0deg) translateX(100px) rotate(0deg);
}
100% {
- transform: translate(-50%, -50%) rotate(360deg) translateX(100px)
- rotate(-360deg);
+ transform: translate(-50%, -50%) rotate(360deg) translateX(100px) rotate(-360deg);
}
}
@@ -500,8 +497,7 @@
transform: translate(-50%, -50%) rotate(0deg) translateX(250px) rotate(0deg);
}
100% {
- transform: translate(-50%, -50%) rotate(360deg) translateX(250px)
- rotate(-360deg);
+ transform: translate(-50%, -50%) rotate(360deg) translateX(250px) rotate(-360deg);
}
}
@@ -510,8 +506,7 @@
transform: translate(-50%, -50%) rotate(0deg) translateX(120px) rotate(0deg);
}
100% {
- transform: translate(-50%, -50%) rotate(-360deg) translateX(120px)
- rotate(360deg);
+ transform: translate(-50%, -50%) rotate(-360deg) translateX(120px) rotate(360deg);
}
}
diff --git a/apps/external/src/main.tsx b/apps/external/src/main.tsx
new file mode 100644
index 0000000..c79e82d
--- /dev/null
+++ b/apps/external/src/main.tsx
@@ -0,0 +1,26 @@
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@xtablo/shared";
+import { ThemeProvider } from "@xtablo/shared/contexts/ThemeContext";
+import { Toaster } from "@xtablo/ui/components/sonner";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter as Router } from "react-router-dom";
+import AppRoutes from "./routes";
+
+import "@xtablo/ui/styles/globals.css";
+import "./main.css";
+
+createRoot(document.getElementById("external-root")!).render(
+
+
+
+
+ {/* Floating Widget Popup */}
+ {isWidgetOpen && (
+
+ {/* Header */}
+
+ )}
+
+ {/* Booking Modal */}
+
+
+
+ {/* Event Info */}
+ {(eventType?.duration || eventType?.location) && (
+
+ {(userProfile as { name: string; avatar_url?: string })?.avatar_url ? (
+ 
+ ) : (
+
+
+
+
+ )}
+
+
+ + {eventType?.name || "Type d'événement"} +
++ {userProfile?.name || "Professionnel"} +
+
+
+ )}
+
+ {/* Calendar and Slots */}
+
+ {eventType?.duration && (
+
+
+
+ )}
+ {eventType?.location && (
+
+
+ )}
+
+ {/* Calendar */}
+
+
+ {/* Footer */}
+
+
+
+ {/* Time Slots */}
+ {selectedDate && (
+
+
+ {formatMonthYear(currentDate)}
+
+
+
+ {/* Calendar Grid */}
+
+
+
+
+
+ {["L", "M", "M", "J", "V", "S", "D"].map((day, i) => (
+
+
+
+ {day}
+
+ ))}
+
+ {getDaysInMonth(currentDate).map((date, index) => (
+
+
+ {date ? (
+
+ ) : (
+
+ )}
+
+ ))}
+
+
+ Créneaux disponibles
+
+
+ {selectedDate.toLocaleDateString("fr-FR", {
+ weekday: "long",
+ day: "numeric",
+ month: "long",
+ })}
+
+
+
+ )}
+
+ {!selectedDate && (
+
+ {getAvailableSlots(selectedDate).map((slot, index) => (
+
+ ))}
+
+ {getAvailableSlots(selectedDate).length === 0 && (
+
+
+
+ Aucun créneau disponible
+
+
+ )}
+
+
+ Sélectionnez une date pour voir les créneaux disponibles
+
+
+ )}
+
+
+ Powered by{" "}
+
+ XTablo
+
+
+
+
+
+ )}
+
+
+
+ {selectedSlot.date.toLocaleDateString("fr-FR", {
+ weekday: "long",
+ day: "numeric",
+ month: "long",
+ })}
+
+
+
+ {selectedSlot.slot.time}
+
+
+
+
+
+
+ setFormData((prev) => ({ ...prev, name: e.target.value }))}
+ disabled={!!user}
+ />
+ {formErrors.name &&
+
+
+
+ setFormData((prev) => ({ ...prev, email: e.target.value }))}
+ disabled={!!user}
+ />
+ {formErrors.email &&
+
+ {!user && (
+
+
+ Un compte sera créé avec ces informations pour gérer votre réservation.
+
+
+ )}
+
+
+
+
+
+
+