@dialiq/calendar-component 1.1.2 → 1.1.3

package/dist/index.js

@@ -7400,6 +7400,17 @@ const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awa
     }
     return response.json();
 });
+const deleteMeeting = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
+    const baseUrl = apiBaseUrl || getBaseUrl();
+    const response = yield fetch(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`, {
+        method: 'DELETE',
+    });
+    if (!response.ok) {
+        const error = yield response.json();
+        throw new Error(error.error || 'Failed to delete meeting');
+    }
+    return response.json();
+});
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -7541,20 +7552,48 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
                     React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
 };
 
-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";
+var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\n\n.booking-details-modal {\n  max-width: 500px;\n}\n\n.detail-section {\n  padding: 12px 0;\n  border-bottom: 1px solid #e9ecef;\n}\n\n.detail-section:last-child {\n  border-bottom: none;\n}\n\n.detail-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n\n.detail-row:last-child {\n  margin-bottom: 0;\n}\n\n.detail-row.full-width {\n  flex-direction: column;\n}\n\n.detail-label {\n  font-weight: 500;\n  color: #6c757d;\n  font-size: 14px;\n  min-width: 100px;\n}\n\n.detail-label-muted {\n  color: #adb5bd;\n  font-size: 12px;\n}\n\n.detail-value {\n  font-weight: 500;\n  color: #212529;\n  font-size: 14px;\n  text-align: right;\n}\n\n.detail-value-muted {\n  color: #adb5bd;\n  font-size: 12px;\n  font-family: monospace;\n}\n\n.detail-description {\n  margin: 8px 0 0 0;\n  color: #495057;\n  font-size: 14px;\n  line-height: 1.5;\n  white-space: pre-wrap;\n}\n\n.participants-list {\n  margin: 8px 0 0 0;\n  padding-left: 20px;\n  list-style-type: disc;\n}\n\n.participant-item {\n  color: #495057;\n  font-size: 14px;\n  margin-bottom: 4px;\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-delete-btn {\n  background: none;\n  border: none;\n  color: #dc3545;\n  cursor: pointer;\n  padding: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: background-color 0.2s;\n}\n\n.modal-delete-btn:hover:not(:disabled) {\n  background: #f8d7da;\n}\n\n.modal-delete-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.delete-confirm-box {\n  background: #fff3cd;\n  border: 1px solid #ffc107;\n  border-radius: 4px;\n  padding: 16px;\n  margin-bottom: 16px;\n}\n\n.delete-confirm-box p {\n  margin: 0 0 12px 0;\n  font-size: 14px;\n  color: #856404;\n}\n\n.delete-confirm-actions {\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n}\n\n.modal-btn-danger {\n  background: #dc3545;\n  color: #ffffff;\n}\n\n.modal-btn-danger:hover:not(:disabled) {\n  background: #bb2d3b;\n}\n\n@media (max-width: 576px) {\n  .booking-details-modal {\n    max-width: 100%;\n  }\n\n  .detail-row {\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  .detail-value {\n    text-align: left;\n  }\n}\n";
 styleInject(css_248z$1);
 
-const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
+const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [showConfirm, setShowConfirm] = React.useState(false);
+    const [deleting, setDeleting] = React.useState(false);
+    const [error, setError] = React.useState(null);
     const startMoment = moment$1(booking.start).tz(timezone);
     const endMoment = moment$1(booking.end).tz(timezone);
     const durationMinutes = endMoment.diff(startMoment, 'minutes');
+    const handleDelete = () => __awaiter(void 0, void 0, void 0, function* () {
+        setDeleting(true);
+        setError(null);
+        try {
+            yield deleteMeeting(businessId, booking.meeting_id, apiBaseUrl);
+            onBookingDeleted();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to delete meeting');
+            setDeleting(false);
+        }
+    });
     return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
         React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
             React.createElement("div", { className: "modal-header" },
                 React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
-                React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
+                React.createElement("div", { className: "modal-header-actions" },
+                    React.createElement("button", { className: "modal-delete-btn", onClick: () => setShowConfirm(true), title: "Delete meeting", disabled: deleting },
+                        React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                            React.createElement("polyline", { points: "3 6 5 6 21 6" }),
+                            React.createElement("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+                            React.createElement("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+                            React.createElement("line", { x1: "14", y1: "11", x2: "14", y2: "17" }))),
+                    React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7"))),
             React.createElement("div", { className: "modal-body" },
+                error && React.createElement("div", { className: "modal-error" }, error),
+                showConfirm && (React.createElement("div", { className: "delete-confirm-box" },
+                    React.createElement("p", null, "Are you sure you want to delete this meeting?"),
+                    React.createElement("div", { className: "delete-confirm-actions" },
+                        React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: () => setShowConfirm(false), disabled: deleting }, "Cancel"),
+                        React.createElement("button", { className: "modal-btn modal-btn-danger", onClick: handleDelete, disabled: deleting }, deleting ? 'Deleting...' : 'Delete')))),
                 React.createElement("div", { className: "detail-section" },
                     React.createElement("div", { className: "detail-row" },
                         React.createElement("span", { className: "detail-label" }, "Date:"),
@@ -8116,7 +8155,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
         loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
         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 }))),
         showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
-        selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
+        selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, businessId: businessId, apiBaseUrl: apiBaseUrl, onClose: () => setSelectedBooking(null), onBookingDeleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                setSelectedBooking(null);
+                yield fetchBookings();
+            }) }))));
 };
 
 exports.Calendar = Calendar;