meeting-scheduler-npm-package 1.0.6 → 1.0.8
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/README.md +1 -0
- package/dist/MeetingScheduler.css +1 -0
- package/dist/components/MeetingScheduler.d.ts +1 -0
- package/dist/index.cjs.js +6 -24
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +6 -24
- package/dist/index.esm.js.map +1 -1
- package/package.json +39 -8
package/README.md
CHANGED
|
@@ -12,6 +12,7 @@ A reusable React / Next.js meeting scheduler component.
|
|
|
12
12
|
|
|
13
13
|
```tsx
|
|
14
14
|
import { MeetingScheduler } from "meeting-scheduler-npm-package";
|
|
15
|
+
import 'meeting-scheduler-npm-package/MeetingScheduler.css';
|
|
15
16
|
|
|
16
17
|
export default function Page() {
|
|
17
18
|
return <MeetingScheduler />;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.meeting-scheduler-wrapper{background:linear-gradient(90deg,#eff6ff,#eef2ff,#faf5ff);min-height:100vh;padding:0 8px 40px}@media (min-width:768px){.meeting-scheduler-wrapper{padding-left:32px;padding-right:32px}}.header-section{background:linear-gradient(90deg,#f56218,#f54900,#fbaa02);border-radius:16px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);color:#fff;margin-bottom:20px;padding:24px}.badge{background:hsla(0,0%,100%,.2);border-radius:9999px;display:inline-block;font-size:.875rem;margin-bottom:4px;padding:4px 16px;text-align:center;width:170px}.title{font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.title{font-size:1.875rem}}@media (min-width:1280px){.title{font-size:2.25rem}}.meta{display:flex;flex-wrap:wrap;font-size:.875rem;gap:16px}.meta-item{align-items:center;display:flex;font-size:1.125rem;gap:8px}@media (min-width:768px){.meta-item{font-size:1.25rem}}.main-grid{display:grid;gap:24px}@media (min-width:1280px){.main-grid{grid-template-columns:845px 410px}}.calendar-section{background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);display:grid;gap:24px;padding:24px}@media (min-width:768px){.calendar-section{grid-template-columns:1fr 1fr}}.section-title{color:#1e2939;font-size:1.5rem;font-weight:600;margin-bottom:8px}@media (min-width:768px){.section-title{font-size:1.875rem}}@media (min-width:1280px){.section-title{font-size:2.25rem}}.subtitle{color:#6a7282;font-size:.875rem;margin-bottom:20px}@media (min-width:768px){.subtitle{font-size:1rem}}.month-nav{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.month-title{color:#1e2939;font-weight:600}.nav-button{border-radius:8px;padding:8px;transition:background-color .2s}.nav-button:hover:not(:disabled){background:#f3f4f6}.nav-button:disabled{color:#d1d5db;cursor:not-allowed}.weekdays{display:grid;gap:8px;grid-template-columns:repeat(7,1fr);margin-bottom:8px}.weekday{color:#4f39f6;font-size:.75rem;font-weight:600;padding:8px;text-align:center}.calendar-days{display:grid;gap:8px;grid-template-columns:repeat(7,1fr)}.day-button{background:transparent;border:none;border-radius:8px;cursor:pointer;padding:12px;text-align:center;transition:all .2s}.day-button:hover{background:#f3f4f6}.day-button.selected{background:linear-gradient(180deg,#f66117,#fbaa02);color:#fff;font-weight:700}.day-button.past{color:#d1d5db;cursor:not-allowed}.day-button:disabled{visibility:hidden}.time-panel{padding-left:0}@media (min-width:768px){.time-panel{padding-left:24px}}.selected-date-title{font-weight:600;margin-bottom:12px;margin-top:5.5rem}.time-list{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;padding-right:8px}.time-button{background:#f9fafb;border:none;border-radius:8px;cursor:pointer;padding:12px;text-align:left;transition:all .2s;width:100%}.time-button.selected{background:#f66117;color:#fff;font-weight:600}.time-button:hover:not(.selected):not(:disabled){background:#f3f4f6}.time-button:disabled{background:#f3f4f6;color:#d1d5db;cursor:not-allowed}.no-slots{color:#9ca3af;padding:40px 0;text-align:center}.form-section{align-self:flex-start;background:#fff;border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);padding:24px}.form-title{font-size:1.25rem;font-weight:600;margin-bottom:24px}.preview-box{background:linear-gradient(90deg,#eef2ff,#faf5ff);border:1px solid #bfdbfe;border-radius:8px;margin-bottom:22px;padding:16px}.preview-item{align-items:center;display:flex;gap:8px;margin-bottom:4px}.preview-date{color:#432dd7;font-weight:600}.preview-time{color:#8200db;font-weight:600}.form-group,.label{margin-bottom:8px}.label{align-items:center;display:flex;font-size:.875rem;font-weight:500;gap:8px}.input,.textarea{border:1px solid #d1d5db;border-radius:8px;font-size:1rem;outline:none;padding:8px 12px;transition:ring .2s;width:100%}.input:focus,.textarea:focus{border-color:#f66117;box-shadow:0 0 0 1px #f66117}.textarea{min-height:80px;padding:12px;resize:vertical}.submit-button{border:none;border-radius:8px;cursor:pointer;font-weight:600;padding:16px;transition:opacity .2s;width:100%}.submit-button.enabled{background:linear-gradient(90deg,#f56116,#fba702);color:#fff}.submit-button.enabled:hover{opacity:.9}.submit-button.disabled{background:#e5e7eb;color:#99a1af;cursor:not-allowed}.terms-text{color:#4b5563;font-size:.75rem;margin-top:8px;text-align:center}.terms-link{color:#4f39f6;font-size:.875rem;text-decoration:underline}
|
package/dist/index.cjs.js
CHANGED
|
@@ -684,42 +684,24 @@ const MeetingScheduler = ({ apiBaseUrl: propApiBase, defaultAvailabilityId = 5,
|
|
|
684
684
|
setSelectedSlot(null);
|
|
685
685
|
fetchSlots(d);
|
|
686
686
|
};
|
|
687
|
-
const handleInputChange = (e) => {
|
|
688
|
-
setFormData((prev) => (Object.assign(Object.assign({}, prev), { [e.target.name]: e.target.value })));
|
|
689
|
-
};
|
|
690
687
|
const days = getDaysInMonth(currentMonth);
|
|
691
688
|
const isFormValid = formData.name &&
|
|
692
689
|
formData.email &&
|
|
693
690
|
formData.phone &&
|
|
694
691
|
!!selectedSlot &&
|
|
695
692
|
!loading;
|
|
696
|
-
return (jsxRuntimeExports.jsxs("div", { className: "
|
|
693
|
+
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: "Betopia 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(lucideReact.Clock, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "30 min" })] }), jsxRuntimeExports.jsxs("div", { className: "meta-item", children: [jsxRuntimeExports.jsx(lucideReact.FileText, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { children: "Web conferencing details provided upon confirmation" })] }), jsxRuntimeExports.jsxs("div", { className: "meta-item", children: [jsxRuntimeExports.jsx(lucideReact.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: () => {
|
|
697
694
|
if (!isCurrentMonth) {
|
|
698
695
|
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
|
|
699
696
|
}
|
|
700
|
-
}, disabled: isCurrentMonth, className:
|
|
701
|
-
? "text-gray-300 cursor-not-allowed"
|
|
702
|
-
: "hover:bg-gray-100 text-gray-700"}`, children: jsxRuntimeExports.jsx(IoIosArrowBack, {}) }), jsxRuntimeExports.jsx("span", { className: "font-semibold text-[#1E2939]", children: currentMonth.toLocaleDateString("en-US", {
|
|
703
|
-
month: "long",
|
|
704
|
-
year: "numeric",
|
|
705
|
-
}) }), 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) => {
|
|
697
|
+
}, 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) => {
|
|
706
698
|
const isPast = day ? isPastDate(day) : false;
|
|
707
|
-
return (jsxRuntimeExports.jsx("button", { disabled: !day || isPast, onClick: () => day && handleDateClick(day), className: `
|
|
708
|
-
|
|
709
|
-
: isPast
|
|
710
|
-
? "text-gray-300 cursor-not-allowed"
|
|
711
|
-
: "hover:bg-gray-100"}`, children: day === null || day === void 0 ? void 0 : day.getDate() }, idx));
|
|
712
|
-
}) })] })] }), 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) => {
|
|
699
|
+
return (jsxRuntimeExports.jsx("button", { disabled: !day || isPast, onClick: () => day && handleDateClick(day), className: `day-button ${(selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toDateString()) === (day === null || day === void 0 ? void 0 : day.toDateString()) ? "selected" : ""} ${isPast ? "past" : ""} ${!day ? "disabled" : ""}`, children: day === null || day === void 0 ? void 0 : day.getDate() }, idx));
|
|
700
|
+
}) })] })] }), 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) => {
|
|
713
701
|
const isTooSoon = isSlotTooSoon(slot.start_utc);
|
|
714
702
|
const isDisabled = slot.is_booked || isTooSoon;
|
|
715
|
-
return (jsxRuntimeExports.jsxs("button", { disabled: isDisabled, onClick: () => setSelectedSlot(slot), className: `
|
|
716
|
-
|
|
717
|
-
: isDisabled
|
|
718
|
-
? "bg-gray-50 text-gray-300 cursor-not-allowed"
|
|
719
|
-
: "bg-gray-50 hover:bg-gray-100"}`, children: [formatTimeTo12Hour(slot.start_local), " -", " ", formatTimeTo12Hour(slot.end_local), isTooSoon && " (Too early)"] }, i));
|
|
720
|
-
}), 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
|
|
721
|
-
? "bg-gradient-to-r from-[#F56116] to-[#FBA702] text-white hover:opacity-90"
|
|
722
|
-
: "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" })] })] })] })] })] })] }));
|
|
703
|
+
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));
|
|
704
|
+
}), availableSlots.length === 0 && jsxRuntimeExports.jsx("p", { className: "no-slots", 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: "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(lucideReact.Calendar, { size: 16 }), " ", jsxRuntimeExports.jsx("span", { className: "font-semibold", children: formatDateHeader(selectedDate) })] }), jsxRuntimeExports.jsxs("div", { className: "preview-item preview-time", 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.jsx("button", { type: "button", onClick: handleScheduleClick, disabled: !isFormValid || loading, className: `submit-button ${isFormValid && !loading ? "enabled" : "disabled"}`, children: loading ? "Processing..." : "Schedule Event" }), jsxRuntimeExports.jsx("p", { className: "terms-text", children: "By proceeding, you confirm that you have read and agree to" }), jsxRuntimeExports.jsxs("p", { className: "terms-text", children: [jsxRuntimeExports.jsx("a", { href: "/terms-conditions", className: "terms-link", children: "Terms of Use" }), " and", " ", jsxRuntimeExports.jsx("a", { href: "/cookie-policy", className: "terms-link", children: "Cookie policy" })] })] })] })] })] })] }));
|
|
723
705
|
};
|
|
724
706
|
|
|
725
707
|
exports.MeetingScheduler = MeetingScheduler;
|