feature/IO-3096-GlobalNotifications - Checkpoint

client/src/components/notification-center/notification-center.component.jsx

@@ -22,7 +22,6 @@ const NotificationCenterComponent = ({
   const { t } = useTranslation();
 
   const renderNotification = (index, notification) => {
-    console.log("Rendering notification at index:", index, notification);
     return (
       <List.Item
         key={`${notification.id}-${index}`}
@@ -58,12 +57,10 @@ const NotificationCenterComponent = ({
     );
   };
 
-  console.log("NotificationCenterComponent render:", { notifications, loading, error, showUnreadOnly });
-
   return (
     <div className={`notification-center ${visible ? "visible" : ""}`}>
       <div className="notification-header">
-        <h3>{t("notifications.labels.new-notification-title")}</h3>
+        <h3>{t("notifications.labels.notification-center")}</h3>
         <div className="notification-controls">
           <Checkbox checked={showUnreadOnly} onChange={(e) => toggleUnreadOnly(e.target.checked)}>
             {t("notifications.labels.show-unread-only")}

client/src/components/notification-center/notification-center.styles.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 64px;
   right: 0;
-  width: 600px;
+  //width: 600px;
   background: #fff; /* White background, Ant’s default */
   color: rgba(0, 0, 0, 0.85); /* Primary text color in Ant 5 */
   border: 1px solid #d9d9d9; /* Neutral gray border */

client/src/contexts/SocketIO/socketContext.jsx

@@ -42,7 +42,6 @@ export const SocketProvider = ({ children, bodyshop }) => {
             break;
         }
         if (!import.meta.env.DEV) return;
-        console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
       };
 
       const handleConnect = () => {
@@ -50,7 +49,6 @@ export const SocketProvider = ({ children, bodyshop }) => {
         setClientId(socketInstance.id);
         setIsConnected(true);
         store.dispatch(setWssStatus("connected"));
-        console.log("Socket connected, ID:", socketInstance.id);
       };
 
       const handleReconnect = () => {
@@ -87,24 +85,19 @@ export const SocketProvider = ({ children, bodyshop }) => {
       };
 
       const handleNotification = (data) => {
-        const { jobId, bodyShopId, notificationId, associationId, notifications } = data;
+        const { jobId, jobRoNumber, notificationId, associationId, notifications } = data;
-        console.log("Socket Notification Received (ID:", notificationId, "):", {
-          jobId,
-          bodyShopId,
-          associationId,
-          notifications
-        });
 
         const newNotification = {
           __typename: "notifications",
           id: notificationId,
           jobid: jobId,
-          associationid: associationId || null,
+          associationid: associationId,
           scenario_text: JSON.stringify(notifications.map((notif) => notif.body)),
           fcm_text: notifications.map((notif) => notif.body).join(". ") + ".",
           scenario_meta: JSON.stringify(notifications.map((notif) => notif.variables || {})),
           created_at: new Date(notifications[0].timestamp).toISOString(),
-          read: null
+          read: null,
+          job: { ro_number: jobRoNumber }
         };
 
         try {
@@ -122,13 +115,15 @@ export const SocketProvider = ({ children, bodyshop }) => {
                     scenario_meta
                     created_at
                     read
+                    job {
+                      ro_number
+                    }
                   }
                 }
               `
             })?.notifications || [];
 
           if (existingNotifications.some((n) => n.id === newNotification.id)) {
-            console.log("Duplicate notification detected, skipping:", notificationId);
             return;
           }
 
@@ -145,6 +140,9 @@ export const SocketProvider = ({ children, bodyshop }) => {
                   scenario_meta
                   created_at
                   read
+                  job {
+                    ro_number
+                  }
                 }
               }
             `,
@@ -156,15 +154,12 @@ export const SocketProvider = ({ children, bodyshop }) => {
             broadcast: true
           });
 
-          console.log("Cache updated with new notification:", newNotification);
-
           client.cache.modify({
             id: "ROOT_QUERY",
             fields: {
               notifications_aggregate(existing = { aggregate: { count: 0 } }) {
                 const isUnread = newNotification.read === null;
                 const countChange = isUnread ? 1 : 0;
-                console.log("Updating unread count from socket:", existing.aggregate.count + countChange);
                 return {
                   ...existing,
                   aggregate: {
@@ -199,7 +194,6 @@ export const SocketProvider = ({ children, bodyshop }) => {
       socketInstance.on("disconnect", handleDisconnect);
       socketInstance.on("bodyshop-message", handleBodyshopMessage);
       socketInstance.on("message", (message) => {
-        console.log("Raw socket message:", message);
         try {
           if (typeof message === "string" && message.startsWith("42")) {
             const parsedMessage = JSON.parse(message.slice(2));

server/notifications/queues/appQueue.js

@@ -77,11 +77,11 @@ const loadAppQueue = async ({ pubClient, logger, redisHelpers, ioRedis }) => {
     const addWorker = new Worker(
       "notificationsAdd",
       async (job) => {
-        const { jobId, key, variables, recipients, body } = job.data;
+        const { jobId, key, variables, recipients, body, jobRoNumber } = job.data;
         logger.logger.info(`Adding notifications for jobId ${jobId}`);
 
         const redisKeyPrefix = `app:notifications:${jobId}`;
-        const notification = { key, variables, body, timestamp: Date.now() };
+        const notification = { key, variables, body, jobRoNumber, timestamp: Date.now() };
 
         for (const recipient of recipients) {
           const { user } = recipient;
@@ -206,14 +206,17 @@ const loadAppQueue = async ({ pubClient, logger, redisHelpers, ioRedis }) => {
 
               for (const [bodyShopId, notifications] of Object.entries(bodyShopData)) {
                 const notificationId = notificationIdMap.get(`${user}:${bodyShopId}`);
+                const jobRoNumber = notifications[0]?.jobRoNumber;
+
                 if (userMapping && userMapping[bodyShopId]?.socketIds) {
                   userMapping[bodyShopId].socketIds.forEach((socketId) => {
                     ioRedis.to(socketId).emit("notification", {
                       jobId,
+                      jobRoNumber,
                       bodyShopId,
                       notifications,
                       notificationId,
-                      associationId // now included in the emit payload
+                      associationId
                     });
                   });
                   logger.logger.info(
@@ -281,10 +284,10 @@ const dispatchAppsToQueue = async ({ appsToDispatch, logger }) => {
   const appQueue = getQueue();
 
   for (const app of appsToDispatch) {
-    const { jobId, bodyShopId, key, variables, recipients, body } = app;
+    const { jobId, bodyShopId, key, variables, recipients, body, jobRoNumber } = app;
     await appQueue.add(
       "add-notification",
-      { jobId, bodyShopId, key, variables, recipients, body },
+      { jobId, bodyShopId, key, variables, recipients, body, jobRoNumber },
       { jobId: `${jobId}:${Date.now()}` }
     );
     logger.logger.info(`Added notification to queue for jobId ${jobId} with ${recipients.length} recipients`);

server/notifications/scenarioBuilders.js

@@ -24,6 +24,7 @@ const alternateTransportChangedBuilder = (data) => {
     app: {
       jobId: data.jobId,
       bodyShopId: data.bodyShopId,
+      jobRoNumber: data.jobRoNumber,
       key: "notifications.job.alternateTransportChanged",
       body, // Same as email body
       variables: {
@@ -54,6 +55,7 @@ const billPostedHandler = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.billPosted",
       body,
@@ -85,6 +87,7 @@ const criticalPartsStatusChangedBuilder = (data) => {
     app: {
       jobId: data.jobId,
       bodyShopId: data.bodyShopId,
+      jobRoNumber: data.jobRoNumber,
       key: "notifications.job.criticalPartsStatusChanged",
       body,
       variables: {
@@ -116,6 +119,7 @@ const intakeDeliveryChecklistCompletedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.checklistCompleted",
       body,
@@ -147,6 +151,7 @@ const jobAssignedToMeBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.assigned",
       body,
@@ -177,6 +182,7 @@ const jobsAddedToProductionBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.addedToProduction",
       body,
@@ -205,6 +211,7 @@ const jobStatusChangeBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.statusChanged",
       body,
@@ -236,6 +243,7 @@ const newMediaAddedReassignedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.newMediaAdded",
       body,
@@ -264,6 +272,7 @@ const newNoteAddedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.newNoteAdded",
       body,
@@ -294,6 +303,7 @@ const newTimeTicketPostedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.newTimeTicketPosted",
       body,
@@ -322,6 +332,7 @@ const partMarkedBackOrderedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.partBackOrdered",
       body,
@@ -353,6 +364,7 @@ const paymentCollectedCompletedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.paymentCollected",
       body,
@@ -383,6 +395,7 @@ const scheduledDatesChangedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.scheduledDatesChanged",
       body,
@@ -418,6 +431,7 @@ const supplementImportedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: "notifications.job.supplementImported",
       body,
@@ -448,6 +462,7 @@ const tasksUpdatedCreatedBuilder = (data) => {
   const result = {
     app: {
       jobId: data.jobId,
+      jobRoNumber: data.jobRoNumber,
       bodyShopId: data.bodyShopId,
       key: data.isNew ? "notifications.job.taskCreated" : "notifications.job.taskUpdated",
       body,