@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
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Booking } from './types';
|
|
3
|
+
import './BookingDetailsModal.css';
|
|
4
|
+
interface BookingDetailsModalProps {
|
|
5
|
+
booking: Booking;
|
|
6
|
+
timezone: string;
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
}
|
|
9
|
+
declare const BookingDetailsModal: React.FC<BookingDetailsModalProps>;
|
|
10
|
+
export default BookingDetailsModal;
|
|
11
|
+
//# sourceMappingURL=BookingDetailsModal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyF3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
|
package/dist/Calendar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAQjD,OAAO,gBAAgB,CAAC;AAIxB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+NrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/dist/api.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Booking, CreateBookingRequest } from './types';
|
|
2
2
|
export declare const createBooking: (businessId: string, booking: CreateBookingRequest, apiBaseUrl?: string) => Promise<Booking>;
|
|
3
|
-
export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
4
|
-
export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
5
|
-
export declare const getMeetingDetails: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<Booking>;
|
|
3
|
+
export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
4
|
+
export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
|
|
5
|
+
export declare const getMeetingDetails: (businessId: string, meetingId: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking>;
|
|
6
6
|
//# sourceMappingURL=api.d.ts.map
|
package/dist/api.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAejB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgEjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthView.d.ts","sourceRoot":"","sources":["../../src/components/MonthView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAExD,UAAU,cAAc;IACpB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"MonthView.d.ts","sourceRoot":"","sources":["../../src/components/MonthView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAExD,UAAU,cAAc;IACpB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC3C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAyFvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,
|
|
1
|
+
{"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuRrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -7355,11 +7355,14 @@ const createBooking = (businessId, booking, apiBaseUrl) => __awaiter(void 0, voi
|
|
|
7355
7355
|
}
|
|
7356
7356
|
return response.json();
|
|
7357
7357
|
});
|
|
7358
|
-
const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7358
|
+
const getResourceSchedule = (businessId, resourceId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7359
7359
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7360
7360
|
const url = new URL(`${baseUrl}/businesses/${businessId}/schedules/${resourceId}`);
|
|
7361
7361
|
url.searchParams.append('start_date', startDate);
|
|
7362
7362
|
url.searchParams.append('end_date', endDate);
|
|
7363
|
+
if (timezone) {
|
|
7364
|
+
url.searchParams.append('timezone', timezone);
|
|
7365
|
+
}
|
|
7363
7366
|
const response = yield fetch(url.toString());
|
|
7364
7367
|
if (!response.ok) {
|
|
7365
7368
|
const error = yield response.json();
|
|
@@ -7367,11 +7370,14 @@ const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBase
|
|
|
7367
7370
|
}
|
|
7368
7371
|
return response.json();
|
|
7369
7372
|
});
|
|
7370
|
-
const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7373
|
+
const getAllBookings = (businessId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7371
7374
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7372
7375
|
const url = new URL(`${baseUrl}/businesses/${businessId}/bookings`);
|
|
7373
7376
|
url.searchParams.append('start_date', startDate);
|
|
7374
7377
|
url.searchParams.append('end_date', endDate);
|
|
7378
|
+
if (timezone) {
|
|
7379
|
+
url.searchParams.append('timezone', timezone);
|
|
7380
|
+
}
|
|
7375
7381
|
const response = yield fetch(url.toString());
|
|
7376
7382
|
if (!response.ok) {
|
|
7377
7383
|
const error = yield response.json();
|
|
@@ -7379,9 +7385,13 @@ const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter
|
|
|
7379
7385
|
}
|
|
7380
7386
|
return response.json();
|
|
7381
7387
|
});
|
|
7382
|
-
const getMeetingDetails = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7388
|
+
const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
|
|
7383
7389
|
const baseUrl = apiBaseUrl || getBaseUrl();
|
|
7384
|
-
const
|
|
7390
|
+
const url = new URL(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`);
|
|
7391
|
+
if (timezone) {
|
|
7392
|
+
url.searchParams.append('timezone', timezone);
|
|
7393
|
+
}
|
|
7394
|
+
const response = yield fetch(url.toString());
|
|
7385
7395
|
if (!response.ok) {
|
|
7386
7396
|
const error = yield response.json();
|
|
7387
7397
|
throw new Error(error.error || 'Failed to fetch meeting details');
|
|
@@ -7416,8 +7426,8 @@ function styleInject(css, ref) {
|
|
|
7416
7426
|
}
|
|
7417
7427
|
}
|
|
7418
7428
|
|
|
7419
|
-
var css_248z$
|
|
7420
|
-
styleInject(css_248z$
|
|
7429
|
+
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";
|
|
7430
|
+
styleInject(css_248z$2);
|
|
7421
7431
|
|
|
7422
7432
|
const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
7423
7433
|
const [title, setTitle] = useState('');
|
|
@@ -7435,7 +7445,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7435
7445
|
const dayName = start.format('dddd');
|
|
7436
7446
|
const businessDay = businessHours[dayName];
|
|
7437
7447
|
if (!businessDay)
|
|
7438
|
-
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7448
|
+
return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
|
|
7439
7449
|
// Based on provided JSON, all days are present. If missing, maybe assume open.
|
|
7440
7450
|
if (businessDay.isClosed) {
|
|
7441
7451
|
throw new Error(`Business is closed on ${dayName}`);
|
|
@@ -7475,8 +7485,8 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7475
7485
|
validateBusinessHours(startDateTime, endDateTime);
|
|
7476
7486
|
const booking = yield createBooking(businessId, {
|
|
7477
7487
|
participants: participantList,
|
|
7478
|
-
start: startDateTime.
|
|
7479
|
-
end: endDateTime.
|
|
7488
|
+
start: startDateTime.format(),
|
|
7489
|
+
end: endDateTime.format(),
|
|
7480
7490
|
metadata: {
|
|
7481
7491
|
title: title || 'Untitled Meeting',
|
|
7482
7492
|
description,
|
|
@@ -7529,6 +7539,54 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
|
|
|
7529
7539
|
React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
|
|
7530
7540
|
};
|
|
7531
7541
|
|
|
7542
|
+
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";
|
|
7543
|
+
styleInject(css_248z$1);
|
|
7544
|
+
|
|
7545
|
+
const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
|
|
7546
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
7547
|
+
const startMoment = moment$1(booking.start).tz(timezone);
|
|
7548
|
+
const endMoment = moment$1(booking.end).tz(timezone);
|
|
7549
|
+
const durationMinutes = endMoment.diff(startMoment, 'minutes');
|
|
7550
|
+
return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
|
|
7551
|
+
React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
|
|
7552
|
+
React.createElement("div", { className: "modal-header" },
|
|
7553
|
+
React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
|
|
7554
|
+
React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
|
|
7555
|
+
React.createElement("div", { className: "modal-body" },
|
|
7556
|
+
React.createElement("div", { className: "detail-section" },
|
|
7557
|
+
React.createElement("div", { className: "detail-row" },
|
|
7558
|
+
React.createElement("span", { className: "detail-label" }, "Date:"),
|
|
7559
|
+
React.createElement("span", { className: "detail-value" }, startMoment.format('dddd, MMMM D, YYYY'))),
|
|
7560
|
+
React.createElement("div", { className: "detail-row" },
|
|
7561
|
+
React.createElement("span", { className: "detail-label" }, "Time:"),
|
|
7562
|
+
React.createElement("span", { className: "detail-value" },
|
|
7563
|
+
startMoment.format('h:mm A'),
|
|
7564
|
+
" - ",
|
|
7565
|
+
endMoment.format('h:mm A'))),
|
|
7566
|
+
React.createElement("div", { className: "detail-row" },
|
|
7567
|
+
React.createElement("span", { className: "detail-label" }, "Duration:"),
|
|
7568
|
+
React.createElement("span", { className: "detail-value" }, durationMinutes >= 60
|
|
7569
|
+
? `${Math.floor(durationMinutes / 60)}h ${durationMinutes % 60}m`
|
|
7570
|
+
: `${durationMinutes} minutes`))),
|
|
7571
|
+
((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.description) && (React.createElement("div", { className: "detail-section" },
|
|
7572
|
+
React.createElement("div", { className: "detail-row full-width" },
|
|
7573
|
+
React.createElement("span", { className: "detail-label" }, "Description:"),
|
|
7574
|
+
React.createElement("p", { className: "detail-description" }, booking.metadata.description)))),
|
|
7575
|
+
((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" },
|
|
7576
|
+
(booking.staff || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.staff)) && (React.createElement("div", { className: "detail-row" },
|
|
7577
|
+
React.createElement("span", { className: "detail-label" }, "Staff:"),
|
|
7578
|
+
React.createElement("span", { className: "detail-value" }, booking.staff || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.staff)))),
|
|
7579
|
+
(booking.room || ((_g = booking.metadata) === null || _g === void 0 ? void 0 : _g.room)) && (React.createElement("div", { className: "detail-row" },
|
|
7580
|
+
React.createElement("span", { className: "detail-label" }, "Room:"),
|
|
7581
|
+
React.createElement("span", { className: "detail-value" }, booking.room || ((_h = booking.metadata) === null || _h === void 0 ? void 0 : _h.room)))))),
|
|
7582
|
+
React.createElement("div", { className: "detail-section" },
|
|
7583
|
+
React.createElement("div", { className: "detail-row" },
|
|
7584
|
+
React.createElement("span", { className: "detail-label detail-label-muted" }, "Meeting ID:"),
|
|
7585
|
+
React.createElement("span", { className: "detail-value detail-value-muted" }, booking.meeting_id)))),
|
|
7586
|
+
React.createElement("div", { className: "modal-footer" },
|
|
7587
|
+
React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: onClose }, "Close")))));
|
|
7588
|
+
};
|
|
7589
|
+
|
|
7532
7590
|
const getWeekDays = (currentDate, view, businessHours) => {
|
|
7533
7591
|
const startOfWeek = currentDate.clone().startOf('week');
|
|
7534
7592
|
const days = [];
|
|
@@ -7656,7 +7714,7 @@ const isMobile = () => {
|
|
|
7656
7714
|
return false;
|
|
7657
7715
|
};
|
|
7658
7716
|
|
|
7659
|
-
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday,
|
|
7717
|
+
const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, dateRangeText, }) => {
|
|
7660
7718
|
const mobile = isMobile();
|
|
7661
7719
|
return (React.createElement("div", { className: "calendar-header" },
|
|
7662
7720
|
React.createElement("div", { className: "calendar-title-section" },
|
|
@@ -7666,12 +7724,11 @@ const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious,
|
|
|
7666
7724
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
|
|
7667
7725
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
|
|
7668
7726
|
React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
|
|
7669
|
-
React.createElement("
|
|
7670
|
-
|
|
7671
|
-
|
|
7672
|
-
|
|
7673
|
-
|
|
7674
|
-
React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
|
|
7727
|
+
React.createElement("div", { className: "calendar-navigation" },
|
|
7728
|
+
React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
|
|
7729
|
+
React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
|
|
7730
|
+
React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
|
|
7731
|
+
React.createElement("span", { className: "calendar-current-month" }, dateRangeText)))));
|
|
7675
7732
|
};
|
|
7676
7733
|
|
|
7677
7734
|
const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
|
|
@@ -7695,7 +7752,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7695
7752
|
days.forEach(day => {
|
|
7696
7753
|
const dayName = day.format('dddd');
|
|
7697
7754
|
const dayHours = businessHours[dayName];
|
|
7698
|
-
console.log('Day:', dayName, 'Hours:', dayHours);
|
|
7699
7755
|
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)) {
|
|
7700
7756
|
const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
|
|
7701
7757
|
const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
|
|
@@ -7706,7 +7762,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7706
7762
|
const openMinutes = openTime.hours() * 60 + openTime.minutes();
|
|
7707
7763
|
const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
|
|
7708
7764
|
const duration = closeMinutes - openMinutes;
|
|
7709
|
-
console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
|
|
7710
7765
|
if (openMinutes < closeMinutes && duration > maxDuration) {
|
|
7711
7766
|
maxDuration = duration;
|
|
7712
7767
|
longestDayOpen = openMinutes;
|
|
@@ -7714,7 +7769,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7714
7769
|
}
|
|
7715
7770
|
}
|
|
7716
7771
|
});
|
|
7717
|
-
console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
|
|
7718
7772
|
if (maxDuration === 0) {
|
|
7719
7773
|
return {
|
|
7720
7774
|
displayStart: 0,
|
|
@@ -7848,7 +7902,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7848
7902
|
visibleBookings
|
|
7849
7903
|
.filter(b => moment$1(b.start).tz(timezone).isSame(day, 'day'))
|
|
7850
7904
|
.map(booking => {
|
|
7851
|
-
var _a
|
|
7905
|
+
var _a;
|
|
7852
7906
|
const pos = dayPositions.get(booking.meeting_id);
|
|
7853
7907
|
if (!pos)
|
|
7854
7908
|
return null;
|
|
@@ -7868,21 +7922,7 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
|
|
|
7868
7922
|
React.createElement("div", { className: "event-time" },
|
|
7869
7923
|
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7870
7924
|
" - ",
|
|
7871
|
-
moment$1(booking.end).tz(timezone).format('h:mm A')))
|
|
7872
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7873
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7874
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7875
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7876
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7877
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7878
|
-
" - ",
|
|
7879
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7880
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7881
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7882
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7883
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7884
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7885
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7925
|
+
moment$1(booking.end).tz(timezone).format('h:mm A')))));
|
|
7886
7926
|
})));
|
|
7887
7927
|
})))));
|
|
7888
7928
|
};
|
|
@@ -7910,7 +7950,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7910
7950
|
isClosed && React.createElement("span", { className: "calendar-closed-label-small" }, "Closed")),
|
|
7911
7951
|
React.createElement("div", { className: "calendar-cell-bookings" },
|
|
7912
7952
|
dayBookings.slice(0, 3).map((booking) => {
|
|
7913
|
-
var _a
|
|
7953
|
+
var _a;
|
|
7914
7954
|
return (React.createElement("div", { key: booking.meeting_id, className: `calendar-booking ${booking.className || ''}`, onClick: (e) => {
|
|
7915
7955
|
e.stopPropagation();
|
|
7916
7956
|
if (onBookingClick) {
|
|
@@ -7918,21 +7958,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7918
7958
|
}
|
|
7919
7959
|
} },
|
|
7920
7960
|
React.createElement("span", { className: "calendar-booking-time" }, moment$1(booking.start).tz(timezone).format('HH:mm')),
|
|
7921
|
-
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')
|
|
7922
|
-
React.createElement("div", { className: "event-tooltip" },
|
|
7923
|
-
React.createElement("div", { className: "tooltip-title" }, ((_b = booking.metadata) === null || _b === void 0 ? void 0 : _b.title) || 'Untitled'),
|
|
7924
|
-
React.createElement("div", { className: "tooltip-row" },
|
|
7925
|
-
React.createElement("span", { className: "tooltip-label" }, "Time:"),
|
|
7926
|
-
React.createElement("span", { className: "tooltip-value" },
|
|
7927
|
-
moment$1(booking.start).tz(timezone).format('h:mm A'),
|
|
7928
|
-
" - ",
|
|
7929
|
-
moment$1(booking.end).tz(timezone).format('h:mm A'))),
|
|
7930
|
-
(booking.staff || ((_c = booking.metadata) === null || _c === void 0 ? void 0 : _c.staff)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7931
|
-
React.createElement("span", { className: "tooltip-label" }, "Staff:"),
|
|
7932
|
-
React.createElement("span", { className: "tooltip-value" }, booking.staff || ((_d = booking.metadata) === null || _d === void 0 ? void 0 : _d.staff)))),
|
|
7933
|
-
(booking.room || ((_e = booking.metadata) === null || _e === void 0 ? void 0 : _e.room)) && (React.createElement("div", { className: "tooltip-row" },
|
|
7934
|
-
React.createElement("span", { className: "tooltip-label" }, "Room:"),
|
|
7935
|
-
React.createElement("span", { className: "tooltip-value" }, booking.room || ((_f = booking.metadata) === null || _f === void 0 ? void 0 : _f.room)))))));
|
|
7961
|
+
React.createElement("span", { className: "calendar-booking-title" }, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled')));
|
|
7936
7962
|
}),
|
|
7937
7963
|
dayBookings.length > 3 && (React.createElement("div", { className: "calendar-booking-more" },
|
|
7938
7964
|
"+",
|
|
@@ -7948,7 +7974,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
|
|
|
7948
7974
|
React.createElement("div", { className: "calendar-body" }, rows)));
|
|
7949
7975
|
};
|
|
7950
7976
|
|
|
7951
|
-
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
|
|
7977
|
+
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}";
|
|
7952
7978
|
styleInject(css_248z);
|
|
7953
7979
|
|
|
7954
7980
|
const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
|
|
@@ -7959,6 +7985,7 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
7959
7985
|
const [error, setError] = useState(null);
|
|
7960
7986
|
const [showCreateModal, setShowCreateModal] = useState(false);
|
|
7961
7987
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
7988
|
+
const [selectedBooking, setSelectedBooking] = useState(null);
|
|
7962
7989
|
// Mobile responsiveness logic
|
|
7963
7990
|
useEffect(() => {
|
|
7964
7991
|
const handleResize = () => {
|
|
@@ -8002,10 +8029,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8002
8029
|
}
|
|
8003
8030
|
let fetchedBookings;
|
|
8004
8031
|
if (resourceId) {
|
|
8005
|
-
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8032
|
+
fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8006
8033
|
}
|
|
8007
8034
|
else {
|
|
8008
|
-
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
|
|
8035
|
+
fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
|
|
8009
8036
|
}
|
|
8010
8037
|
setBookings(fetchedBookings);
|
|
8011
8038
|
}
|
|
@@ -8060,6 +8087,13 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8060
8087
|
onBookingCreate(booking);
|
|
8061
8088
|
}
|
|
8062
8089
|
});
|
|
8090
|
+
const handleInternalBookingClick = (booking) => {
|
|
8091
|
+
setSelectedBooking(booking);
|
|
8092
|
+
// Also call the external callback if provided
|
|
8093
|
+
if (onBookingClick) {
|
|
8094
|
+
onBookingClick(booking);
|
|
8095
|
+
}
|
|
8096
|
+
};
|
|
8063
8097
|
const getHeaderDateFormat = () => {
|
|
8064
8098
|
const current = moment$1(currentDate).tz(timezone);
|
|
8065
8099
|
if (currentView === 'month') {
|
|
@@ -8075,14 +8109,12 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
|
|
|
8075
8109
|
}
|
|
8076
8110
|
};
|
|
8077
8111
|
return (React.createElement("div", { className: "calendar-container" },
|
|
8078
|
-
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday,
|
|
8079
|
-
setSelectedDate(moment$1().tz(timezone).toDate());
|
|
8080
|
-
setShowCreateModal(true);
|
|
8081
|
-
}, dateRangeText: getHeaderDateFormat() }),
|
|
8112
|
+
React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, dateRangeText: getHeaderDateFormat() }),
|
|
8082
8113
|
error && React.createElement("div", { className: "calendar-error" }, error),
|
|
8083
8114
|
loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
|
|
8084
|
-
React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick:
|
|
8085
|
-
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours }))
|
|
8115
|
+
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 }))),
|
|
8116
|
+
showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
|
|
8117
|
+
selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
|
|
8086
8118
|
};
|
|
8087
8119
|
|
|
8088
8120
|
export { Calendar, createBooking, getAllBookings, getMeetingDetails, getResourceSchedule };
|