meeting-scheduler-npm-package 1.0.5 → 1.0.6

package/dist/components/MeetingScheduler.d.ts

@@ -1,11 +1,4 @@
 import React from "react";
-export interface Slot {
-    start_local: string;
-    end_local: string;
-    start_utc: string;
-    end_utc: string;
-    is_booked: boolean;
-}
 export interface FormData {
     name: string;
     email: string;
@@ -13,14 +6,12 @@ export interface FormData {
     message: string;
 }
 export interface MeetingSchedulerProps {
-    userId?: string | number;
-    availabilityId?: string | number;
-    authToken?: string;
-    email?: string;
-    password?: string;
-    apiBase: string;
-    onSuccess?: () => void;
-    onError?: (err: string) => void;
+    apiBaseUrl?: string;
+    defaultAvailabilityId?: number;
+    defaultUserId?: number;
+    initialMonth?: Date;
+    onBookingSuccess?: (data: any) => void;
+    onBookingError?: (error: any) => void;
 }
 declare const MeetingScheduler: React.FC<MeetingSchedulerProps>;
 export default MeetingScheduler;

package/dist/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var lucideReact = require('lucide-react');
 
 var jsxRuntime = {exports: {}};
 
@@ -488,156 +489,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] = React.useState(new Date());
+const MeetingScheduler = ({ apiBaseUrl: propApiBase, defaultAvailabilityId = 5, defaultUserId = 1, initialMonth, onBookingSuccess, onBookingError, }) => {
+    const API_BASE = propApiBase;
+    // ────────────────────────────────────────────────
+    // State
+    // ────────────────────────────────────────────────
+    const [currentMonth, setCurrentMonth] = React.useState(initialMonth || new Date(2026, 0, 1));
     const [selectedDate, setSelectedDate] = React.useState(null);
     const [availableSlots, setAvailableSlots] = React.useState([]);
     const [selectedSlot, setSelectedSlot] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
-    const [timezone, setTimezone] = React.useState("UTC");
     const [formData, setFormData] = React.useState({
         name: "",
         email: "",
         phone: "",
         message: "",
     });
-    /* ============ Timezone ============ */
+    const [timezone, setTimezone] = React.useState("UTC");
+    // Detect user timezone
     React.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(lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.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(lucideReact.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.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" })] })] })] })] })] })] }));
 };
 
 exports.MeetingScheduler = MeetingScheduler;