@dialiq/calendar-component 1.1.0 → 1.1.2
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/BookingDetailsModal.d.ts +11 -0
- package/dist/BookingDetailsModal.d.ts.map +1 -0
- package/dist/Calendar.d.ts.map +1 -1
- package/dist/api.d.ts +3 -3
- package/dist/api.d.ts.map +1 -1
- package/dist/components/CalendarHeader.d.ts +0 -1
- package/dist/components/CalendarHeader.d.ts.map +1 -1
- package/dist/components/MonthView.d.ts.map +1 -1
- package/dist/components/TimeGrid.d.ts.map +1 -1
- package/dist/index.esm.js +92 -60
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +92 -60
- package/dist/index.js.map +1 -1
- package/dist/types.d.ts +1 -0
- package/dist/types.d.ts.map +1 -1
- package/package.json +48 -48
package/dist/index.js
CHANGED
|
@@ -7357,11 +7357,14 @@ const createBooking = (businessId, booking, apiBaseUrl) => __awaiter(void 0, voi
|
|
|
7357
7357
|
}
|
|
7358
7358
|
return response.json();
|
|
7359
7359
|
});
|
|
7360
|
-
const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7360
|
+
const getResourceSchedule = (businessId, resourceId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7361
7361
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7362
7362
|
const url = new URL(`${baseUrl}/businesses/${businessId}/schedules/${resourceId}`);
|
|
7363
7363
|
url.searchParams.append('start_date', startDate);
|
|
7364
7364
|
url.searchParams.append('end_date', endDate);
|
|
7365
|
+
if (timezone) {
|
|
7366
|
+
url.searchParams.append('timezone', timezone);
|
|
7367
|
+
}
|
|
7365
7368
|
const response = yield fetch(url.toString());
|
|
7366
7369
|
if (!response.ok) {
|
|
7367
7370
|
const error = yield response.json();
|
|
@@ -7369,11 +7372,14 @@ const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBase
|
|
|
7369
7372
|
}
|
|
7370
7373
|
return response.json();
|
|
7371
7374
|
});
|
|
7372
|
-
const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7375
|
+
const getAllBookings = (businessId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7373
7376
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7374
7377
|
const url = new URL(`${baseUrl}/businesses/${businessId}/bookings`);
|
|
7375
7378
|
url.searchParams.append('start_date', startDate);
|
|
7376
7379
|
url.searchParams.append('end_date', endDate);
|
|
7380
|
+
if (timezone) {
|
|
7381
|
+
url.searchParams.append('timezone', timezone);
|
|
7382
|
+
}
|
|
7377
7383
|
const response = yield fetch(url.toString());
|
|
7378
7384
|
if (!response.ok) {
|
|
7379
7385
|
const error = yield response.json();
|
|
@@ -7381,9 +7387,13 @@ const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter
|
|
|
7381
7387
|
}
|
|
7382
7388
|
return response.json();
|
|
7383
7389
|
});
|
|
7384
|
-
const getMeetingDetails = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7390
|
+
const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7385
7391
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7386
|
-
const
|
|
7392
|
+
const url = new URL(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`);
|
|
7393
|
+
if (timezone) {
|
|
7394
|
+
url.searchParams.append('timezone', timezone);
|
|
7395
|
+
}
|
|
7396
|
+
const response = yield fetch(url.toString());
|
|
7387
7397
|
if (!response.ok) {
|
|
7388
7398
|
const error = yield response.json();
|
|
7389
7399
|
throw new Error(error.error || 'Failed to fetch meeting details');
|
|
@@ -7418,8 +7428,8 @@ function styleInject(css, ref) {
|
|
|
7418
7428
|
}
|
|
7419
7429
|
}
|
|
7420
7430
|
|
|
7421
|
-
var css_248z$
|
|
7422
|
-
styleInject(css_248z$
|
|
7431
|
+
var css_248z$2 = ".modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: #ffffff;\r\n border-radius: 8px;\r\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n width: 100%;\r\n max-width: 500px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 20px;\r\n border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n font-size: 20px;\r\n font-weight: 600;\r\n color: #212529;\r\n}\r\n\r\n.modal-close-btn {\r\n background: none;\r\n border: none;\r\n font-size: 32px;\r\n line-height: 1;\r\n color: #6c757d;\r\n cursor: pointer;\r\n padding: 0;\r\n width: 32px;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n background: #e9ecef;\r\n color: #212529;\r\n}\r\n\r\n.modal-body {\r\n padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 12px;\r\n padding: 20px;\r\n border-top: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-error {\r\n background: #f8d7da;\r\n color: #842029;\r\n padding: 12px;\r\n border-radius: 4px;\r\n margin-bottom: 16px;\r\n font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: #212529;\r\n margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1px solid #ced4da;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-family: inherit;\r\n color: #212529;\r\n transition: border-color 0.2s;\r\n box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n outline: none;\r\n border-color: #0d6efd;\r\n box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n font-size: 12px;\r\n color: #6c757d;\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n padding: 10px 20px;\r\n border: none;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n background: #0d6efd;\r\n color: #ffffff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n background: #0b5ed7;\r\n}\r\n\r\n.modal-btn-secondary {\r\n background: #6c757d;\r\n color: #ffffff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n background: #5c636a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .modal-content {\r\n max-width: 100%;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n}\r\n";
|
|
7432
|
+
styleInject(css_248z$2);
|
|
7423
7433
|
|
|
7424
7434
|
const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
7425
7435
|
const [title, setTitle] = React.useState('');
|
|
@@ -7437,7 +7447,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7437
7447
|
const dayName = start.format('dddd');
|
|
7438
7448
|
const businessDay = businessHours[dayName];
|
|
7439
7449
|
if (!businessDay)
|
|
7440
|
-
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7450
|
+
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7441
7451
|
// Based on provided JSON, all days are present. If missing, maybe assume open.
|
|
7442
7452
|
if (businessDay.isClosed) {
|
|
7443
7453
|
throw new Error(`Business is closed on ${dayName}`);
|
|
@@ -7477,8 +7487,8 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7477
7487
|
validateBusinessHours(startDateTime, endDateTime);
|
|
7478
7488
|
const booking = yield createBooking(businessId, {
|
|
7479
7489
|
participants: participantList,
|
|
7480
|
-
start: startDateTime.
|
|
7481
|
-
end: endDateTime.
|
|
7490
|
+
start: startDateTime.format(),
|
|
7491
|
+
end: endDateTime.format(),
|
|
7482
7492
|
metadata: {
|
|
7483
7493
|
title: title || 'Untitled Meeting',
|
|
7484
7494
|
description,
|
|
@@ -7531,6 +7541,54 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7531
7541
|
React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
|
|
7532
7542
|
};
|
|
7533
7543
|
|
|
7544
|
+
var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: #6c757d;\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: #212529;\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: #495057;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
|
|
7545
|
+
styleInject(css_248z$1);
|
|
7546
|
+
|
|
7547
|
+
const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
|
|
7548
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7549
|
+
const startMoment = moment$1(booking.start).tz(timezone);
|
|
7550
|
+
const endMoment = moment$1(booking.end).tz(timezone);
|
|
7551
|
+
const durationMinutes = endMoment.diff(startMoment, 'minutes');
|
|
7552
|
+
return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
|
|
7553
|
+
React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
|
|
7554
|
+
React.createElement("div", { className: "modal-header" },
|
|
7555
|
+
React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
|
|
7556
|
+
React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
|
|
7557
|
+
React.createElement("div", { className: "modal-body" },
|
|
7558
|
+
React.createElement("div", { className: "detail-section" },
|
|
7559
|
+
React.createElement("div", { className: "detail-row" },
|
|
7560
|
+
React.createElement("span", { className: "detail-label" }, "Date:"),
|
|
7561
|
+
React.createElement("span", { className: "detail-value" }, startMoment.format('dddd, MMMM D, YYYY'))),
|
|
7562
|
+
React.createElement("div", { className: "detail-row" },
|
|
7563
|
+
React.createElement("span", { className: "detail-label" }, "Time:"),
|
|
7564
|
+
React.createElement("span", { className: "detail-value" },
|
|
7565
|
+
startMoment.format('h:mm A'),
|
|
7566
|
+
" - ",
|
|
7567
|
+
endMoment.format('h:mm A'))),
|
|
7568
|
+
React.createElement("div", { className: "detail-row" },
|
|
7569
|
+
React.createElement("span", { className: "detail-label" }, "Duration:"),
|
|
7570
|
+
React.createElement("span", { className: "detail-value" }, durationMinutes >= 60
|
|
7571
|
+
? `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`
|
|
7572
|
+
: `${durationMinutes} minutes`))),
|
|
7573
|
+
((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.description) && (React.createElement("div", { className: "detail-section" },
|
|
7574
|
+
React.createElement("div", { className: "detail-row full-width" },
|
|
7575
|
+
React.createElement("span", { className: "detail-label" }, "Description:"),
|
|
7576
|
+
React.createElement("p", { className: "detail-description" }, booking.metadata.description)))),
|
|
7577
|
+
((booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) || (booking.room || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.room))) && (React.createElement("div", { className: "detail-section" },
|
|
7578
|
+
(booking.staff || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.staff)) && (React.createElement("div", { className: "detail-row" },
|
|
7579
|
+
React.createElement("span", { className: "detail-label" }, "Staff:"),
|
|
7580
|
+
React.createElement("span", { className: "detail-value" }, booking.staff || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.staff)))),
|
|
7581
|
+
(booking.room || ((_g = booking.metadata) === null || _g === void 0 ? void 0 : _g.room)) && (React.createElement("div", { className: "detail-row" },
|
|
7582
|
+
React.createElement("span", { className: "detail-label" }, "Room:"),
|
|
7583
|
+
React.createElement("span", { className: "detail-value" }, booking.room || ((_h = booking.metadata) === null || _h === void 0 ? void 0 : _h.room)))))),
|
|
7584
|
+
React.createElement("div", { className: "detail-section" },
|
|
7585
|
+
React.createElement("div", { className: "detail-row" },
|
|
7586
|
+
React.createElement("span", { className: "detail-label detail-label-muted" }, "Meeting ID:"),
|
|
7587
|
+
React.createElement("span", { className: "detail-value detail-value-muted" }, booking.meeting_id)))),
|
|
7588
|
+
React.createElement("div", { className: "modal-footer" },
|
|
7589
|
+
React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: onClose }, "Close")))));
|
|
7590
|
+
};
|
|
7591
|
+
|
|
7534
7592
|
const getWeekDays = (currentDate, view, businessHours) => {
|
|
7535
7593
|
const startOfWeek = currentDate.clone().startOf('week');
|
|
7536
7594
|
const days = [];
|
|
@@ -7658,7 +7716,7 @@ const isMobile = () => {
|
|
|
7658
7716
|
return false;
|
|
7659
7717
|
};
|
|
7660
7718
|
|
|
7661
|
-
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday,
|
|
7719
|
+
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, dateRangeText, }) => {
|
|
7662
7720
|
const mobile = isMobile();
|
|
7663
7721
|
return (React.createElement("div", { className: "calendar-header" },
|
|
7664
7722
|
React.createElement("div", { className: "calendar-title-section" },
|
|
@@ -7668,12 +7726,11 @@ const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious,
|
|
|
7668
7726
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
|
|
7669
7727
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
|
|
7670
7728
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
|
|
7671
|
-
React.createElement("
|
|
7672
|
-
|
|
7673
|
-
|
|
7674
|
-
|
|
7675
|
-
|
|
7676
|
-
React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
|
|
7729
|
+
React.createElement("div", { className: "calendar-navigation" },
|
|
7730
|
+
React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
|
|
7731
|
+
React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
|
|
7732
|
+
React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
|
|
7733
|
+
React.createElement("span", { className: "calendar-current-month" }, dateRangeText)))));
|
|
7677
7734
|
};
|
|
7678
7735
|
|
|
7679
7736
|
const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
|
|
@@ -7697,7 +7754,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7697
7754
|
days.forEach(day => {
|
|
7698
7755
|
const dayName = day.format('dddd');
|
|
7699
7756
|
const dayHours = businessHours[dayName];
|
|
7700
|
-
console.log('Day:', dayName, 'Hours:', dayHours);
|
|
7701
7757
|
if (!(dayHours === null || dayHours === void 0 ? void 0 : dayHours.isClosed) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.openTime) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.closeTime)) {
|
|
7702
7758
|
const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7703
7759
|
const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
@@ -7708,7 +7764,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7708
7764
|
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7709
7765
|
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7710
7766
|
const duration = closeMinutes - openMinutes;
|
|
7711
|
-
console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
|
|
7712
7767
|
if (openMinutes < closeMinutes && duration > maxDuration) {
|
|
7713
7768
|
maxDuration = duration;
|
|
7714
7769
|
longestDayOpen = openMinutes;
|
|
@@ -7716,7 +7771,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7716
7771
|
}
|
|
7717
7772
|
}
|
|
7718
7773
|
});
|
|
7719
|
-
console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
|
|
7720
7774
|
if (maxDuration === 0) {
|
|
7721
7775
|
return {
|
|
7722
7776
|
displayStart: 0,
|
|
@@ -7850,7 +7904,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7850
7904
|
visibleBookings
|
|
7851
7905
|
.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'))
|
|
7852
7906
|
.map(booking => {
|
|
7853
|
-
var _a
|
|
7907
|
+
var _a;
|
|
7854
7908
|
const pos = dayPositions.get(booking.meeting_id);
|
|
7855
7909
|
if (!pos)
|
|
7856
7910
|
return null;
|
|
@@ -7870,21 +7924,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7870
7924
|
React.createElement("div", { className: "event-time" },
|
|
7871
7925
|
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7872
7926
|
" - ",
|
|
7873
|
-
moment$1(booking.end).tz(timezone).format('h:mm A')))
|
|
7874
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7875
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7876
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7877
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7878
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7879
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7880
|
-
" - ",
|
|
7881
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7882
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7883
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7884
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7885
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7886
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7887
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7927
|
+
moment$1(booking.end).tz(timezone).format('h:mm A')))));
|
|
7888
7928
|
})));
|
|
7889
7929
|
})))));
|
|
7890
7930
|
};
|
|
@@ -7912,7 +7952,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7912
7952
|
isClosed && React.createElement("span", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7913
7953
|
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7914
7954
|
dayBookings.slice(0, 3).map((booking) => {
|
|
7915
|
-
var _a
|
|
7955
|
+
var _a;
|
|
7916
7956
|
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-booking ${booking.className || ''}`, onClick: (e) => {
|
|
7917
7957
|
e.stopPropagation();
|
|
7918
7958
|
if (onBookingClick) {
|
|
@@ -7920,21 +7960,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7920
7960
|
}
|
|
7921
7961
|
} },
|
|
7922
7962
|
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7923
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')
|
|
7924
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7925
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7926
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7927
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7928
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7929
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7930
|
-
" - ",
|
|
7931
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7932
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7933
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7934
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7935
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7936
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7937
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7963
|
+
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')));
|
|
7938
7964
|
}),
|
|
7939
7965
|
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7940
7966
|
"+",
|
|
@@ -7950,7 +7976,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7950
7976
|
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
7951
7977
|
};
|
|
7952
7978
|
|
|
7953
|
-
var css_248z = ".calendar-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n
|
|
7979
|
+
var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
|
|
7954
7980
|
styleInject(css_248z);
|
|
7955
7981
|
|
|
7956
7982
|
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
@@ -7961,6 +7987,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7961
7987
|
const [error, setError] = React.useState(null);
|
|
7962
7988
|
const [showCreateModal, setShowCreateModal] = React.useState(false);
|
|
7963
7989
|
const [selectedDate, setSelectedDate] = React.useState(null);
|
|
7990
|
+
const [selectedBooking, setSelectedBooking] = React.useState(null);
|
|
7964
7991
|
// Mobile responsiveness logic
|
|
7965
7992
|
React.useEffect(() => {
|
|
7966
7993
|
const handleResize = () => {
|
|
@@ -8004,10 +8031,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8004
8031
|
}
|
|
8005
8032
|
let fetchedBookings;
|
|
8006
8033
|
if (resourceId) {
|
|
8007
|
-
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8034
|
+
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8008
8035
|
}
|
|
8009
8036
|
else {
|
|
8010
|
-
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8037
|
+
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8011
8038
|
}
|
|
8012
8039
|
setBookings(fetchedBookings);
|
|
8013
8040
|
}
|
|
@@ -8062,6 +8089,13 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8062
8089
|
onBookingCreate(booking);
|
|
8063
8090
|
}
|
|
8064
8091
|
});
|
|
8092
|
+
const handleInternalBookingClick = (booking) => {
|
|
8093
|
+
setSelectedBooking(booking);
|
|
8094
|
+
// Also call the external callback if provided
|
|
8095
|
+
if (onBookingClick) {
|
|
8096
|
+
onBookingClick(booking);
|
|
8097
|
+
}
|
|
8098
|
+
};
|
|
8065
8099
|
const getHeaderDateFormat = () => {
|
|
8066
8100
|
const current = moment$1(currentDate).tz(timezone);
|
|
8067
8101
|
if (currentView === 'month') {
|
|
@@ -8077,14 +8111,12 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8077
8111
|
}
|
|
8078
8112
|
};
|
|
8079
8113
|
return (React.createElement("div", { className: "calendar-container" },
|
|
8080
|
-
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday,
|
|
8081
|
-
setSelectedDate(moment$1().tz(timezone).toDate());
|
|
8082
|
-
setShowCreateModal(true);
|
|
8083
|
-
}, dateRangeText: getHeaderDateFormat() }),
|
|
8114
|
+
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, dateRangeText: getHeaderDateFormat() }),
|
|
8084
8115
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
8085
8116
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
8086
|
-
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick:
|
|
8087
|
-
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours }))
|
|
8117
|
+
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onDateClick: handleDateClick, businessHours: businessHours })) : (React.createElement(TimeGrid, { currentDate: currentDate, view: currentView, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onTimeSlotClick: handleDateClick, businessHours: businessHours }))),
|
|
8118
|
+
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
|
|
8119
|
+
selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
|
|
8088
8120
|
};
|
|
8089
8121
|
|
|
8090
8122
|
exports.Calendar = Calendar;
|