enhance booking and contract notification systems

- Added detailed logging for socket connection events in useBookingWindowSocket.
- Introduced new notification types for contract status and schedule updates.
- Updated notification visuals to include new icons for contract status.
- Enhanced notification href resolution for contract status and schedule updates.
- Implemented booking lifecycle notifier service for customer and staff notifications.
- Created contract notifier service for managing contract lifecycle notifications.
- Added end-to-end tests for booking window socket functionality.
This commit is contained in:
Marshal
2026-07-06 21:03:08 +00:00
parent 8bd00ea78a
commit 05b13e84a8
38 changed files with 1450 additions and 95 deletions

View File

@@ -35,6 +35,18 @@ export function useBookingWindowSocket(enabled: boolean = true) {
withCredentials: true,
});
// Deliberate console breadcrumbs: "live updates not arriving" is only
// diagnosable from the browser when connect/reject outcomes are visible.
socket.on("connect", () =>
console.debug("[booking-windows] socket connected", socket.id),
);
socket.on("connect_error", (err) =>
console.warn("[booking-windows] socket connect failed:", err.message),
);
socket.on("disconnect", (reason) =>
console.debug("[booking-windows] socket disconnected:", reason),
);
socket.on(
BOOKING_WINDOW_WS_EVENTS.PHASE,
(_event: BookingWindowPhaseEvent) => {

View File

@@ -1,6 +1,6 @@
import { NotificationType } from "@edr/types";
import type { NotificationItemData, NotificationVisual } from "@edr/ui-common";
import { Bell, ClipboardCheck, Inbox, Wallet } from "lucide-react";
import { Bell, ClipboardCheck, FileSignature, Inbox, Wallet } from "lucide-react";
const ICON_SIZE = 17;
@@ -19,6 +19,8 @@ export function resolveNotificationVisual(
return { icon: <Wallet size={ICON_SIZE} />, color: "teal" };
case NotificationType.CLEARANCE_REVIEW:
return { icon: <ClipboardCheck size={ICON_SIZE} />, color: "orange" };
case NotificationType.CONTRACT_STATUS:
return { icon: <FileSignature size={ICON_SIZE} />, color: "indigo" };
default:
return { icon: <Bell size={ICON_SIZE} />, color: "edr-green" };
}
@@ -39,14 +41,32 @@ export function resolveNotificationHref(
if (item.link) return item.link;
const data = item.data ?? {};
switch (item.type) {
case NotificationType.REQUEST_SUBMITTED:
case NotificationType.REQUEST_SUBMITTED: {
const bookingId = asId(data.bookingId);
if (bookingId) return `/dashboard/booking-requests/${bookingId}`;
const contractId = asId(data.contractId);
if (contractId) return `/dashboard/contract-requests/${contractId}`;
return "/dashboard/booking-requests";
}
case NotificationType.PAYMENT_RECEIVED: {
const bookingId = asId(data.bookingId);
if (bookingId) return `/dashboard/bookings/${bookingId}/clearance`;
const id = asId(data.customerId);
return id ? `/dashboard/customers/${id}` : "/dashboard/customers";
}
case NotificationType.CLEARANCE_REVIEW:
case NotificationType.CLEARANCE_REVIEW: {
const bookingId = asId(data.bookingId);
if (bookingId) return `/dashboard/bookings/${bookingId}/clearance`;
const contractId = asId(data.contractId);
if (contractId) return `/dashboard/contracts/clearance/${contractId}`;
return "/dashboard/arrival-queue";
}
case NotificationType.CONTRACT_STATUS: {
const contractId = asId(data.contractId);
return contractId
? `/dashboard/contract-requests/${contractId}`
: "/dashboard/contract-requests";
}
default:
return null;
}