meeting-scheduler-npm-package 1.0.5 → 1.0.7

package/dist/index.esm.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { Clock, FileText, Globe, Calendar } from 'lucide-react';
 
 var jsxRuntime = {exports: {}};
 
@@ -486,156 +487,237 @@ function IoIosArrowBack (props) {
   return GenIcon({"attr":{"viewBox":"0 0 512 512"},"child":[{"tag":"path","attr":{"d":"M294.1 256L167 129c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.3 34 0L345 239c9.1 9.1 9.3 23.7.7 33.1L201.1 417c-4.7 4.7-10.9 7-17 7s-12.3-2.3-17-7c-9.4-9.4-9.4-24.6 0-33.9l127-127.1z"},"child":[]}]})(props);
 }
 
-const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-const MeetingScheduler = ({ userId = 1, availabilityId = 1, authToken: propAuthToken, email = "superadmin1@example.com", password = "password", apiBase, onSuccess, onError, }) => {
-    const [currentMonth, setCurrentMonth] = useState(new Date());
+const MeetingScheduler = ({ apiBaseUrl: propApiBase, defaultAvailabilityId = 5, defaultUserId = 1, initialMonth, onBookingSuccess, onBookingError, }) => {
+    const API_BASE = propApiBase;
+    // ────────────────────────────────────────────────
+    // State
+    // ────────────────────────────────────────────────
+    const [currentMonth, setCurrentMonth] = useState(initialMonth || new Date(2026, 0, 1));
     const [selectedDate, setSelectedDate] = useState(null);
     const [availableSlots, setAvailableSlots] = useState([]);
     const [selectedSlot, setSelectedSlot] = useState(null);
     const [loading, setLoading] = useState(false);
-    const [timezone, setTimezone] = useState("UTC");
     const [formData, setFormData] = useState({
         name: "",
         email: "",
         phone: "",
         message: "",
     });
-    /* ============ Timezone ============ */
+    const [timezone, setTimezone] = useState("UTC");
+    // Detect user timezone
     useEffect(() => {
-        setTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+        const detected = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        setTimezone(detected);
     }, []);
-    /* ============ Helpers ============ */
-    const handleInputChange = (e) => {
-        setFormData(Object.assign(Object.assign({}, formData), { [e.target.name]: e.target.value }));
-    };
-    const formatTime = (value) => {
-        const time = value.split(" ")[1];
-        let [h, m] = time.split(":").map(Number);
-        const ampm = h >= 12 ? "PM" : "AM";
-        h = h % 12 || 12;
-        return `${h}:${m.toString().padStart(2, "0")} ${ampm}`;
+    // ────────────────────────────────────────────────
+    // Helpers
+    // ────────────────────────────────────────────────
+    const formatTimeTo12Hour = (dateTimeStr) => {
+        if (!dateTimeStr)
+            return "";
+        const timePart = dateTimeStr.split(" ")[1];
+        let [hours, minutes] = timePart.split(":").map(Number);
+        const ampm = hours >= 12 ? "PM" : "AM";
+        hours = hours % 12;
+        hours = hours || 12;
+        return `${hours}:${minutes.toString().padStart(2, "0")} ${ampm}`;
     };
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     const isPastDate = (date) => date <= today;
-    /* ============ Auth ============ */
+    const isSlotTooSoon = (slotStartUtc) => {
+        const slotTime = new Date(slotStartUtc);
+        const oneHourFromNow = new Date();
+        oneHourFromNow.setHours(oneHourFromNow.getHours() + 1);
+        return slotTime < oneHourFromNow;
+    };
+    const daysOfWeek = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+    const getDaysInMonth = (date) => {
+        const year = date.getFullYear();
+        const month = date.getMonth();
+        const firstDay = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const days = [];
+        for (let i = 0; i < firstDay; i++)
+            days.push(null);
+        for (let i = 1; i <= daysInMonth; i++)
+            days.push(new Date(year, month, i));
+        return days;
+    };
+    const formatDateHeader = (date) => date.toLocaleDateString("en-US", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+    });
+    const isCurrentMonth = currentMonth.getMonth() === new Date().getMonth() &&
+        currentMonth.getFullYear() === new Date().getFullYear();
+    // ────────────────────────────────────────────────
+    // API Calls
+    // ────────────────────────────────────────────────
     const getAuthToken = async () => {
         var _a;
-        if (propAuthToken)
-            return propAuthToken;
         const existing = localStorage.getItem("auth_token");
         if (existing)
             return existing;
         try {
-            const res = await fetch(`${apiBase}/v1/user/login`, {
+            const res = await fetch(`${API_BASE}/v1/user/login`, {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ email, password }),
+                body: JSON.stringify({
+                    email: "superadmin1@example.com",
+                    password: "password",
+                }),
             });
             const data = await res.json();
             const token = data.token || data.access_token || ((_a = data.data) === null || _a === void 0 ? void 0 : _a.token);
-            if (token)
+            if (token) {
                 localStorage.setItem("auth_token", token);
-            return token || null;
+                return token;
+            }
+            return null;
         }
-        catch (_b) {
+        catch (err) {
+            console.error("Auth login failed", err);
             return null;
         }
     };
-    /* ============ API ============ */
     const fetchSlots = async (date) => {
+        if (!API_BASE) {
+            console.warn("API_BASE not provided");
+            return;
+        }
         setLoading(true);
         const token = await getAuthToken();
         if (!token) {
-            onError === null || onError === void 0 ? void 0 : onError("Authentication failed");
+            // Swal.fire("Error", "Authentication failed.", "error");
             setLoading(false);
             return;
         }
         const yyyy = date.getFullYear();
         const mm = String(date.getMonth() + 1).padStart(2, "0");
         const dd = String(date.getDate()).padStart(2, "0");
+        const dateStr = `${yyyy}-${mm}-${dd}`;
         try {
-            const res = await fetch(`${apiBase}/v1/meeting-schedule/check-schedule/${yyyy}-${mm}-${dd}?timezone=${timezone}`, { headers: { Authorization: `Bearer ${token}` } });
+            const res = await fetch(`${API_BASE}/v1/meeting-schedule/check-schedule/${dateStr}?timezone=${timezone}`, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
+                },
+            });
             const data = await res.json();
             setAvailableSlots(data.slots || []);
         }
-        catch (_a) {
-            onError === null || onError === void 0 ? void 0 : onError("Failed to fetch slots");
+        catch (err) {
+            console.error("fetchSlots error:", err);
         }
         finally {
             setLoading(false);
         }
     };
-    const handleBooking = async () => {
-        if (!selectedSlot)
+    const handleScheduleClick = async () => {
+        if (!selectedSlot || !API_BASE)
             return;
         setLoading(true);
         const token = await getAuthToken();
         if (!token) {
-            onError === null || onError === void 0 ? void 0 : onError("Authentication failed");
+            // Swal.fire("Error", "Authentication failed.", "error");
             setLoading(false);
             return;
         }
+        const payload = {
+            user_id: defaultUserId,
+            availability_id: defaultAvailabilityId,
+            visitor: {
+                name: formData.name,
+                email: formData.email,
+                phone: formData.phone,
+                timezone,
+            },
+            start: selectedSlot.start_local,
+            end: selectedSlot.end_local,
+            message: formData.message,
+        };
         try {
-            const res = await fetch(`${apiBase}/v1/meeting-schedule/book-schedule`, {
+            const res = await fetch(`${API_BASE}/v1/meeting-schedule/book-schedule`, {
                 method: "POST",
                 headers: {
-                    "Content-Type": "application/json",
                     Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
                 },
-                body: JSON.stringify({
-                    user_id: userId,
-                    availability_id: availabilityId,
-                    visitor: Object.assign(Object.assign({}, formData), { timezone }),
-                    start: selectedSlot.start_local,
-                    end: selectedSlot.end_local,
-                }),
+                body: JSON.stringify(payload),
             });
-            if (!res.ok)
-                throw new Error();
-            // Swal.fire("Success", "Meeting booked!", "success");
-            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
-            setFormData({ name: "", email: "", phone: "", message: "" });
-            setSelectedDate(null);
-            setSelectedSlot(null);
-            setAvailableSlots([]);
+            if (res.ok) {
+                // Swal.fire({
+                //   icon: "success",
+                //   title: "Meeting Scheduled!",
+                //   text: `A confirmation email has been sent to ${formData.email}`,
+                //   confirmButtonColor: "#F66117",
+                // });
+                // Reset
+                setFormData({ name: "", email: "", phone: "", message: "" });
+                setSelectedDate(null);
+                setSelectedSlot(null);
+                setAvailableSlots([]);
+                onBookingSuccess === null || onBookingSuccess === void 0 ? void 0 : onBookingSuccess(payload);
+            }
+            else {
+                throw new Error("Booking failed");
+            }
         }
-        catch (_a) {
-            onError === null || onError === void 0 ? void 0 : onError("Booking failed");
-            // Swal.fire("Error", "Booking failed.", "error");
+        catch (err) {
+            // Swal.fire("Error", "Failed to book meeting.", "error");
+            onBookingError === null || onBookingError === void 0 ? void 0 : onBookingError(err);
         }
         finally {
             setLoading(false);
         }
     };
-    /* ============ Calendar ============ */
-    const getDaysInMonth = () => {
-        const year = currentMonth.getFullYear();
-        const month = currentMonth.getMonth();
-        const firstDay = new Date(year, month, 1).getDay();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        const days = [];
-        for (let i = 0; i < firstDay; i++)
-            days.push(null);
-        for (let i = 1; i <= daysInMonth; i++)
-            days.push(new Date(year, month, i));
-        return days;
+    // ────────────────────────────────────────────────
+    // Handlers
+    // ────────────────────────────────────────────────
+    const handleDateClick = (d) => {
+        if (isPastDate(d))
+            return;
+        setSelectedDate(d);
+        setSelectedSlot(null);
+        fetchSlots(d);
+    };
+    const handleInputChange = (e) => {
+        setFormData((prev) => (Object.assign(Object.assign({}, prev), { [e.target.name]: e.target.value })));
     };
-    const isFormValid = formData.name && formData.email && formData.phone && selectedSlot;
-    /* ============ JSX ============ */
-    return (jsxRuntimeExports.jsxs("div", { className: "bg-white p-6 rounded-xl shadow-md", children: [jsxRuntimeExports.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Schedule a Meeting" }), jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxRuntimeExports.jsx("button", { onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1)), children: jsxRuntimeExports.jsx(IoIosArrowBack, {}) }), jsxRuntimeExports.jsx("span", { className: "font-semibold", children: currentMonth.toLocaleDateString("en-US", {
-                            month: "long",
-                            year: "numeric",
-                        }) }), jsxRuntimeExports.jsx("button", { onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)), children: jsxRuntimeExports.jsx(IoIosArrowForward, {}) })] }), jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-7 gap-2 mb-4", children: [daysOfWeek.map((d) => (jsxRuntimeExports.jsx("div", { className: "text-center text-xs font-semibold", children: d }, d))), getDaysInMonth().map((day, i) => (jsxRuntimeExports.jsx("button", { disabled: !day || isPastDate(day), onClick: () => {
-                            if (day) {
-                                setSelectedDate(day);
-                                fetchSlots(day);
-                            }
-                        }, className: `p-2 rounded ${(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toDateString()) === (day === null || day === void 0 ? void 0 : day.toDateString())
-                            ? "bg-orange-500 text-white"
-                            : "hover:bg-gray-100"}`, children: day === null || day === void 0 ? void 0 : day.getDate() }, i)))] }), selectedDate && (jsxRuntimeExports.jsx("div", { className: "space-y-2 mb-4", children: availableSlots.map((slot, i) => (jsxRuntimeExports.jsxs("button", { disabled: slot.is_booked, onClick: () => setSelectedSlot(slot), className: `w-full p-2 rounded ${selectedSlot === slot
-                        ? "bg-orange-500 text-white"
-                        : "bg-gray-100"}`, children: [formatTime(slot.start_local), " \u2013", " ", formatTime(slot.end_local)] }, i))) })), jsxRuntimeExports.jsx("input", { name: "name", placeholder: "Name", className: "w-full mb-2 p-2 border rounded", value: formData.name, onChange: handleInputChange }), jsxRuntimeExports.jsx("input", { name: "email", placeholder: "Email", className: "w-full mb-2 p-2 border rounded", value: formData.email, onChange: handleInputChange }), jsxRuntimeExports.jsx("input", { name: "phone", placeholder: "Phone", className: "w-full mb-2 p-2 border rounded", value: formData.phone, onChange: handleInputChange }), jsxRuntimeExports.jsx("button", { disabled: !isFormValid || loading, onClick: handleBooking, className: "w-full bg-orange-500 text-white p-3 rounded disabled:opacity-50", children: loading ? "Booking..." : "Confirm Booking" })] }));
+    const days = getDaysInMonth(currentMonth);
+    const isFormValid = formData.name &&
+        formData.email &&
+        formData.phone &&
+        !!selectedSlot &&
+        !loading;
+    return (jsxRuntimeExports.jsxs("div", { className: "md:px-8 pb-10 bg-gradient-to-r from-[#EFF6FF] via-[#EEF2FF] to-[#FAF5FF] px-2 min-h-screen", children: [jsxRuntimeExports.jsx("div", { className: "h-28 mb-4" }), jsxRuntimeExports.jsxs("div", { className: "max-w-[1280px] mx-auto", children: [jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-r from-[#F56218] via-[#F54900] to-[#FBAA02] rounded-2xl p-6 mb-5 shadow-lg text-white", children: [jsxRuntimeExports.jsx("div", { className: "text-sm mb-1 bg-[#FFFFFF33] rounded-[34px] w-[170px] px-2 py-1 text-center", children: "Betopia Meeting" }), jsxRuntimeExports.jsx("h1", { className: "text-2xl md:text-3xl xl:text-[36px] font-semibold mb-2", children: "30 Minute Meeting" }), jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap gap-4 text-sm", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-lg md:text-xl", children: [jsxRuntimeExports.jsx(Clock, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "30 min" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-lg md:text-xl", children: [jsxRuntimeExports.jsx(FileText, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "Web conferencing details provided upon confirmation" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-lg md:text-xl", children: [jsxRuntimeExports.jsx(Globe, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: timezone.replace("_", " ") })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "grid gap-6 xl:grid-cols-[845px_410px]", children: [jsxRuntimeExports.jsxs("div", { className: "grid md:grid-cols-2 gap-6 bg-white rounded-2xl p-6 shadow-md", children: [jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h2", { className: "text-2xl md:text-3xl xl:text-[36px] font-semibold mb-2 text-[#1E2939]", children: "Select a Date & Time" }), jsxRuntimeExports.jsx("p", { className: "text-[#6A7282] text-sm md:text-base mb-5", children: "Choose your preferred date and time slot" }), jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between mb-4", children: [jsxRuntimeExports.jsx("button", { onClick: () => {
+                                                                    if (!isCurrentMonth) {
+                                                                        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
+                                                                    }
+                                                                }, disabled: isCurrentMonth, className: `p-2 rounded-lg transition-colors ${isCurrentMonth
+                                                                    ? "text-gray-300 cursor-not-allowed"
+                                                                    : "hover:bg-gray-100 text-gray-700"}`, children: jsxRuntimeExports.jsx(IoIosArrowBack, {}) }), jsxRuntimeExports.jsx("span", { className: "font-semibold text-[#1E2939]", children: currentMonth.toLocaleDateString("en-US", {
+                                                                    month: "long",
+                                                                    year: "numeric",
+                                                                }) }), jsxRuntimeExports.jsx("button", { onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)), className: "p-2 hover:bg-gray-100 rounded-lg", children: jsxRuntimeExports.jsx(IoIosArrowForward, {}) })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2 mb-2", children: daysOfWeek.map((day) => (jsxRuntimeExports.jsx("div", { className: "text-center text-xs font-semibold text-[#4F39F6] p-2", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-7 gap-2", children: days.map((day, idx) => {
+                                                            const isPast = day ? isPastDate(day) : false;
+                                                            return (jsxRuntimeExports.jsx("button", { disabled: !day || isPast, onClick: () => day && handleDateClick(day), className: `p-3 text-center rounded-lg transition-all ${!day ? "invisible" : ""} ${(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toDateString()) === (day === null || day === void 0 ? void 0 : day.toDateString())
+                                                                    ? "bg-gradient-to-b from-[#F66117] to-[#FBAA02] text-white font-bold"
+                                                                    : isPast
+                                                                        ? "text-gray-300 cursor-not-allowed"
+                                                                        : "hover:bg-gray-100"}`, children: day === null || day === void 0 ? void 0 : day.getDate() }, idx));
+                                                        }) })] })] }), jsxRuntimeExports.jsxs("div", { className: "md:pl-6", children: [jsxRuntimeExports.jsx("h3", { className: "font-semibold mb-3 md:mt-[22%]", children: selectedDate ? formatDateHeader(selectedDate) : "Select a date first" }), loading ? (jsxRuntimeExports.jsx("div", { className: "animate-pulse space-y-2", children: [1, 2, 3, 4, 5].map((i) => (jsxRuntimeExports.jsx("div", { className: "h-12 bg-gray-100 rounded-lg w-full" }, i))) })) : selectedDate ? (jsxRuntimeExports.jsxs("div", { className: "space-y-2 max-h-[400px] overflow-y-auto pr-2", children: [availableSlots.map((slot, i) => {
+                                                        const isTooSoon = isSlotTooSoon(slot.start_utc);
+                                                        const isDisabled = slot.is_booked || isTooSoon;
+                                                        return (jsxRuntimeExports.jsxs("button", { disabled: isDisabled, onClick: () => setSelectedSlot(slot), className: `w-full p-3 rounded-lg text-left transition-all ${selectedSlot === slot
+                                                                ? "bg-[#F66117] text-white font-semibold"
+                                                                : isDisabled
+                                                                    ? "bg-gray-50 text-gray-300 cursor-not-allowed"
+                                                                    : "bg-gray-50 hover:bg-gray-100"}`, children: [formatTimeTo12Hour(slot.start_local), " -", " ", formatTimeTo12Hour(slot.end_local), isTooSoon && " (Too early)"] }, i));
+                                                    }), availableSlots.length === 0 && (jsxRuntimeExports.jsx("p", { className: "text-gray-400 text-center py-10", children: "No slots available for this date." }))] })) : (jsxRuntimeExports.jsxs("div", { className: "text-center py-20 text-gray-400", children: [jsxRuntimeExports.jsx("div", { className: "w-[48px] mx-auto mb-3 opacity-50", children: jsxRuntimeExports.jsx(Calendar, { size: 48 }) }), jsxRuntimeExports.jsx("p", { children: "Please select a date to view available times" })] }))] })] }), jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-2xl p-6 shadow-md h-fit", children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-6", children: "Enter Details" }), selectedDate && selectedSlot && (jsxRuntimeExports.jsxs("div", { className: "bg-gradient-to-r from-[#EEF2FF] to-[#FAF5FF] border border-blue-200 rounded-lg p-4 mb-[22px]", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[#432DD7] mb-1", children: [jsxRuntimeExports.jsx(Calendar, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { className: "font-semibold", children: formatDateHeader(selectedDate) })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-[#8200DB]", children: [jsxRuntimeExports.jsx(Clock, { size: 16 }), " ", jsxRuntimeExports.jsxs("span", { className: "font-semibold", children: [formatTimeTo12Hour(selectedSlot.start_local), " -", " ", formatTimeTo12Hour(selectedSlot.end_local)] })] })] })), jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-2", children: [jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("path", { d: "M12.6693 14V12.6667C12.6693 11.9594 12.3883 11.2811 11.8882 10.781C11.3881 10.281 10.7098 10 10.0026 10H6.0026C5.29536 10 4.61708 10.281 4.11699 10.781C3.61689 11.2811 3.33594 11.9594 3.33594 12.6667V14", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("path", { d: "M8.0026 7.33333C9.47536 7.33333 10.6693 6.13943 10.6693 4.66667C10.6693 3.19391 9.47536 2 8.0026 2C6.52984 2 5.33594 3.19391 5.33594 4.66667C5.33594 6.13943 6.52984 7.33333 8.0026 7.33333Z", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" })] }), "Name *"] }), jsxRuntimeExports.jsx("input", { type: "text", name: "name", value: formData.name, onChange: handleInputChange, placeholder: "John Doe", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-[#F66117]" })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-2", children: [jsxRuntimeExports.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsxRuntimeExports.jsx("path", { d: "M13.3359 2.66797H2.66927C1.93289 2.66797 1.33594 3.26492 1.33594 4.0013V12.0013C1.33594 12.7377 1.93289 13.3346 2.66927 13.3346H13.3359C14.0723 13.3346 14.6693 12.7377 14.6693 12.0013V4.0013C14.6693 3.26492 14.0723 2.66797 13.3359 2.66797Z", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntimeExports.jsx("path", { d: "M14.6693 4.66797L8.68927 8.46797C8.48345 8.59692 8.24548 8.66531 8.0026 8.66531C7.75973 8.66531 7.52176 8.59692 7.31594 8.46797L1.33594 4.66797", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" })] }), "Email *"] }), jsxRuntimeExports.jsx("input", { type: "email", name: "email", value: formData.email, onChange: handleInputChange, placeholder: "john@example.com", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-[#F66117]" })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-2", children: [jsxRuntimeExports.jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M13.9228 10.6147V12.6147C13.9236 12.8004 13.8855 12.9841 13.8111 13.1543C13.7368 13.3244 13.6277 13.4771 13.4909 13.6026C13.354 13.7281 13.1925 13.8237 13.0166 13.8832C12.8408 13.9427 12.6544 13.9647 12.4695 13.948C10.418 13.7251 8.44747 13.0241 6.71614 11.9014C5.10536 10.8778 3.7397 9.51215 2.71614 7.90137C1.58946 6.16217 0.888302 4.18203 0.669474 2.12137C0.652814 1.93701 0.674724 1.75121 0.733807 1.57578C0.792891 1.40036 0.887854 1.23916 1.01265 1.10245C1.13745 0.965735 1.28934 0.856506 1.45867 0.781715C1.62799 0.706923 1.81103 0.668208 1.99614 0.668033H3.99614C4.31968 0.664849 4.63334 0.779419 4.87865 0.990389C5.12396 1.20136 5.28419 1.49433 5.32947 1.8147C5.41389 2.45474 5.57044 3.08318 5.79614 3.68803C5.88584 3.92665 5.90525 4.18598 5.85208 4.43529C5.79891 4.6846 5.67538 4.91344 5.49614 5.0947L4.64947 5.94137C5.59851 7.6104 6.98044 8.99233 8.64947 9.94137L9.49614 9.0947C9.6774 8.91546 9.90624 8.79193 10.1556 8.73876C10.4049 8.68559 10.6642 8.705 10.9028 8.7947C11.5077 9.0204 12.1361 9.17695 12.7761 9.26137C13.1 9.30705 13.3957 9.47017 13.6072 9.7197C13.8186 9.96922 13.9309 10.2878 13.9228 10.6147Z", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }), "Phone *"] }), jsxRuntimeExports.jsx("input", { type: "tel", name: "phone", value: formData.phone, onChange: handleInputChange, placeholder: "+1 (555) 000-0000", className: "w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-[#F66117]" })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("label", { className: "flex items-center gap-2 text-sm font-medium mb-2", children: [jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntimeExports.jsx("path", { d: "M14 10C14 10.3536 13.8595 10.6928 13.6095 10.9428C13.3594 11.1929 13.0203 11.3333 12.6667 11.3333H4.66667L2 14V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H12.6667C13.0203 2 13.3594 2.14048 13.6095 2.39052C13.8595 2.64057 14 2.97971 14 3.33333V10Z", stroke: "#4F39F6", strokeWidth: "1.33333", strokeLinecap: "round", strokeLinejoin: "round" }) }), "Additional Notes"] }), jsxRuntimeExports.jsx("textarea", { name: "message", value: formData.message, onChange: handleInputChange, rows: 2, placeholder: "Please share anything that will help prepare for our meeting...", className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-[#F66117]" })] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleScheduleClick, disabled: !isFormValid, className: `w-full p-4 rounded-lg font-semibold transition-all ${isFormValid
+                                                    ? "bg-gradient-to-r from-[#F56116] to-[#FBA702] text-white hover:opacity-90"
+                                                    : "bg-[#E5E7EB] text-[#99A1AF] cursor-not-allowed"}`, children: loading ? "Processing..." : "Schedule Event" }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-600 text-center", children: "By proceeding, you confirm that you have read and agree to" }), jsxRuntimeExports.jsxs("p", { className: "text-xs text-gray-600 text-center", children: [jsxRuntimeExports.jsx("a", { href: "/terms-conditions", className: "text-[14px] text-[#4F39F6]", children: "Terms of Use" }), " ", "and", " ", jsxRuntimeExports.jsx("a", { href: "/cookie-policy", className: "text-[14px] text-[#4F39F6]", children: "Cookie policy" })] })] })] })] })] })] }));
 };
 
 export { MeetingScheduler };