meeting-scheduler-npm-package 1.0.9 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/MeetingScheduler.css +1 -1
- package/dist/index.cjs.js +15 -4
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +15 -4
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -5
package/dist/index.esm.js
CHANGED
|
@@ -682,24 +682,35 @@ const MeetingScheduler = ({ apiBaseUrl: propApiBase, defaultAvailabilityId = 5,
|
|
|
682
682
|
setSelectedSlot(null);
|
|
683
683
|
fetchSlots(d);
|
|
684
684
|
};
|
|
685
|
+
const handleInputChange = (e) => {
|
|
686
|
+
setFormData((prev) => (Object.assign(Object.assign({}, prev), { [e.target.name]: e.target.value })));
|
|
687
|
+
};
|
|
685
688
|
const days = getDaysInMonth(currentMonth);
|
|
686
689
|
const isFormValid = formData.name &&
|
|
687
690
|
formData.email &&
|
|
688
691
|
formData.phone &&
|
|
689
692
|
!!selectedSlot &&
|
|
690
693
|
!loading;
|
|
691
|
-
return (jsxRuntimeExports.jsxs("div", { className: "meeting-scheduler-wrapper", children: [jsxRuntimeExports.jsx("div", { className: "h-28 mb-4" }), jsxRuntimeExports.jsxs("div", { className: "max-w-[1280px] mx-auto", children: [jsxRuntimeExports.jsxs("div", { className: "header-section", children: [jsxRuntimeExports.jsx("div", { className: "badge", children: "
|
|
694
|
+
return (jsxRuntimeExports.jsxs("div", { className: "meeting-scheduler-wrapper", children: [jsxRuntimeExports.jsx("div", { className: "h-28 mb-4" }), jsxRuntimeExports.jsxs("div", { className: "max-w-[1280px] mx-auto", children: [jsxRuntimeExports.jsxs("div", { className: "header-section", children: [jsxRuntimeExports.jsx("div", { className: "badge", children: "Example Meeting" }), jsxRuntimeExports.jsx("h1", { className: "title", children: "30 Minute Meeting" }), jsxRuntimeExports.jsxs("div", { className: "meta", children: [jsxRuntimeExports.jsxs("div", { className: "meta-item", children: [jsxRuntimeExports.jsx(Clock, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "30 min" })] }), jsxRuntimeExports.jsxs("div", { className: "meta-item", children: [jsxRuntimeExports.jsx(FileText, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "Web conferencing details provided upon confirmation" })] }), jsxRuntimeExports.jsxs("div", { className: "meta-item", children: [jsxRuntimeExports.jsx(Globe, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: timezone.replace("_", " ") })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "main-grid", children: [jsxRuntimeExports.jsxs("div", { className: "calendar-section", children: [jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h2", { className: "section-title", children: "Select a Date & Time" }), jsxRuntimeExports.jsx("p", { className: "subtitle", children: "Choose your preferred date and time slot" }), jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsxs("div", { className: "month-nav", children: [jsxRuntimeExports.jsx("button", { onClick: () => {
|
|
692
695
|
if (!isCurrentMonth) {
|
|
693
696
|
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
|
|
694
697
|
}
|
|
695
698
|
}, disabled: isCurrentMonth, className: "nav-button", children: jsxRuntimeExports.jsx(IoIosArrowBack, {}) }), jsxRuntimeExports.jsx("span", { className: "month-title", children: currentMonth.toLocaleDateString("en-US", { month: "long", year: "numeric" }) }), jsxRuntimeExports.jsx("button", { onClick: () => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1)), className: "nav-button", children: jsxRuntimeExports.jsx(IoIosArrowForward, {}) })] }), jsxRuntimeExports.jsx("div", { className: "weekdays", children: daysOfWeek.map((day) => (jsxRuntimeExports.jsx("div", { className: "weekday", children: day }, day))) }), jsxRuntimeExports.jsx("div", { className: "calendar-days", children: days.map((day, idx) => {
|
|
696
|
-
|
|
697
|
-
|
|
699
|
+
if (!day) {
|
|
700
|
+
return jsxRuntimeExports.jsx("div", { className: "day-button disabled" }, idx);
|
|
701
|
+
}
|
|
702
|
+
const isPast = isPastDate(day);
|
|
703
|
+
const isSelected = (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toDateString()) === day.toDateString();
|
|
704
|
+
return (jsxRuntimeExports.jsx("button", { disabled: isPast, onClick: () => !isPast && handleDateClick(day), className: `
|
|
705
|
+
day-button
|
|
706
|
+
${isSelected ? "selected" : ""}
|
|
707
|
+
${isPast ? "past" : ""}
|
|
708
|
+
`, children: day.getDate() }, idx));
|
|
698
709
|
}) })] })] }), jsxRuntimeExports.jsxs("div", { className: "time-panel", children: [jsxRuntimeExports.jsx("h3", { className: "selected-date-title", 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: "time-list", children: [availableSlots.map((slot, i) => {
|
|
699
710
|
const isTooSoon = isSlotTooSoon(slot.start_utc);
|
|
700
711
|
const isDisabled = slot.is_booked || isTooSoon;
|
|
701
712
|
return (jsxRuntimeExports.jsxs("button", { disabled: isDisabled, onClick: () => setSelectedSlot(slot), className: `time-button ${selectedSlot === slot ? "selected" : ""} ${isDisabled ? "disabled" : ""}`, children: [formatTimeTo12Hour(slot.start_local), " - ", formatTimeTo12Hour(slot.end_local), isTooSoon && " (Too early)"] }, i));
|
|
702
|
-
}), availableSlots.length === 0 && jsxRuntimeExports.jsx("p", { className: "no-slots", children: "No slots available for this date." })] })) : (jsxRuntimeExports.
|
|
713
|
+
}), availableSlots.length === 0 && jsxRuntimeExports.jsx("p", { className: "no-slots", children: "No slots available for this date." })] })) : (jsxRuntimeExports.jsx("div", { className: "text-center py-20 text-gray-400", children: jsxRuntimeExports.jsx("p", { children: "Please select a date to view available times" }) }))] })] }), jsxRuntimeExports.jsx("div", { className: "space-y-2", children: jsxRuntimeExports.jsxs("div", { className: "form-section", children: [jsxRuntimeExports.jsx("h2", { className: "form-title", children: "Enter Details" }), selectedDate && selectedSlot && (jsxRuntimeExports.jsxs("div", { className: "preview-box", children: [jsxRuntimeExports.jsxs("div", { className: "preview-item preview-date", children: [jsxRuntimeExports.jsx(Calendar, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { className: "font-semibold", children: formatDateHeader(selectedDate) })] }), jsxRuntimeExports.jsxs("div", { className: "preview-item preview-time", 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", { className: "form-group", children: [jsxRuntimeExports.jsxs("label", { className: "label", 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: "input" })] }), jsxRuntimeExports.jsxs("div", { className: "form-group", children: [jsxRuntimeExports.jsxs("label", { className: "label", 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: "input" })] }), jsxRuntimeExports.jsxs("div", { className: "form-group", children: [jsxRuntimeExports.jsxs("label", { className: "label", 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: "input" })] }), jsxRuntimeExports.jsxs("div", { className: "form-group", children: [jsxRuntimeExports.jsxs("label", { className: "label", 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: "textarea" })] }), jsxRuntimeExports.jsx("button", { type: "button", onClick: handleScheduleClick, disabled: !isFormValid || loading, className: `submit-button ${isFormValid && !loading ? "enabled" : "disabled"}`, children: loading ? "Processing..." : "Schedule Event" })] })] }) })] })] })] }));
|
|
703
714
|
};
|
|
704
715
|
|
|
705
716
|
export { MeetingScheduler };
|