Merged in feature/IO-3026-Enhanced-Notifications (pull request #1906)

Feature/IO-3026 Enhanced Notifications

client/src/contexts/SocketIO/useSocket.js

@@ -1,8 +1,9 @@
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import SocketIO from "socket.io-client";
 import { auth } from "../../firebase/firebase.utils";
 import { store } from "../../redux/store";
-import { setWssStatus } from "../../redux/application/application.actions";
+import { addAlerts, setWssStatus } from "../../redux/application/application.actions";
+
 const useSocket = (bodyshop) => {
   const socketRef = useRef(null);
   const [clientId, setClientId] = useState(null);
@@ -31,6 +32,14 @@ const useSocket = (bodyshop) => {
           socketRef.current = socketInstance;
 
           const handleBodyshopMessage = (message) => {
+            if (!message || !message?.type) return;
+
+            switch (message.type) {
+              case "alert-update":
+                store.dispatch(addAlerts(message.payload));
+                break;
+            }
+
             if (!import.meta.env.DEV) return;
             console.log(`Received message for bodyshop ${bodyshop.id}:`, message);
           };
@@ -39,22 +48,22 @@ const useSocket = (bodyshop) => {
             console.log("Socket connected:", socketInstance.id);
             socketInstance.emit("join-bodyshop-room", bodyshop.id);
             setClientId(socketInstance.id);
-            store.dispatch(setWssStatus("connected"))
+            store.dispatch(setWssStatus("connected"));
           };
 
           const handleReconnect = (attempt) => {
             console.log(`Socket reconnected after ${attempt} attempts`);
-            store.dispatch(setWssStatus("connected"))
+            store.dispatch(setWssStatus("connected"));
           };
 
           const handleConnectionError = (err) => {
             console.error("Socket connection error:", err);
-            store.dispatch(setWssStatus("error"))
+            store.dispatch(setWssStatus("error"));
           };
 
           const handleDisconnect = () => {
             console.log("Socket disconnected");
-            store.dispatch(setWssStatus("disconnected"))
+            store.dispatch(setWssStatus("disconnected"));
           };
 
           socketInstance.on("connect", handleConnect);

client/src/pages/manage/manage.page.component.jsx

@@ -1,4 +1,4 @@
-import { FloatButton, Layout, Spin } from "antd";
+import { FloatButton, Layout, notification, Spin } from "antd";
 // import preval from "preval.macro";
 import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -21,11 +21,12 @@ import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-st
 import { requestForToken } from "../../firebase/firebase.utils";
 import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
-
 import UpdateAlert from "../../components/update-alert/update-alert.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
 import "./manage.page.styles.scss";
 import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
+import { selectAlerts } from "../../redux/application/application.selectors.js";
+import { addAlerts } from "../../redux/application/application.actions.js";
 
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
@@ -104,16 +105,126 @@ const { Content, Footer } = Layout;
 
 const mapStateToProps = createStructuredSelector({
   conflict: selectInstanceConflict,
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  alerts: selectAlerts
 });
 
-const mapDispatchToProps = (dispatch) => ({});
+const ALERT_FILE_URL = InstanceRenderManager({
+  imex: "https://images.imex.online/alerts/alerts-imex.json",
+  rome: "https://images.imex.online/alerts/alerts-rome.json"
+});
 
-export function Manage({ conflict, bodyshop }) {
+const mapDispatchToProps = (dispatch) => ({
+  setAlerts: (alerts) => dispatch(addAlerts(alerts))
+});
+
+export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
   const { socket, clientId } = useContext(SocketContext);
 
+  // State to track displayed alerts
+  const [displayedAlertIds, setDisplayedAlertIds] = useState([]);
+
+  // Fetch displayed alerts from localStorage on mount
+  useEffect(() => {
+    const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
+    setDisplayedAlertIds(displayedAlerts);
+  }, []);
+
+  // Fetch alerts from the JSON file and dispatch to Redux store
+  useEffect(() => {
+    const fetchAlerts = async () => {
+      try {
+        const response = await fetch(ALERT_FILE_URL);
+        const fetchedAlerts = await response.json();
+        setAlerts(fetchedAlerts);
+      } catch (error) {
+        console.error("Error fetching alerts:", error);
+      }
+    };
+
+    fetchAlerts();
+  }, []);
+
+  // Use useEffect to watch for new alerts
+  useEffect(() => {
+    if (alerts && Object.keys(alerts).length > 0) {
+      // Convert the alerts object into an array
+      const alertArray = Object.values(alerts);
+
+      // Filter out alerts that have already been dismissed
+      const newAlerts = alertArray.filter((alert) => !displayedAlertIds.includes(alert.id));
+
+      newAlerts.forEach((alert) => {
+        // Display the notification
+        notification.open({
+          key: "notification-alerts-" + alert.id,
+          message: alert.message,
+          description: alert.description,
+          type: alert.type || "info",
+          duration: 0,
+          placement: "bottomRight",
+          closable: true,
+          onClose: () => {
+            // When the notification is closed, update displayed alerts state and localStorage
+            setDisplayedAlertIds((prevIds) => {
+              const updatedIds = [...prevIds, alert.id];
+              localStorage.setItem("displayedAlerts", JSON.stringify(updatedIds));
+              return updatedIds;
+            });
+          }
+        });
+      });
+    }
+  }, [alerts, displayedAlertIds]);
+
+  // useEffect(() => {
+  //   const fetchAlerts = async () => {
+  //     try {
+  //       const response = await fetch(ALERT_FILE_URL);
+  //
+  //       // Check if the response is OK (status in the range 200-299)
+  //       if (!response.ok) {
+  //         console.error(`Network response was not ok: ${response.status} ${response.statusText}`);
+  //         return; // Exit the function early since we can't proceed
+  //       }
+  //
+  //       const alerts = await response.json();
+  //
+  //       // Check if alerts is an array
+  //       if (!Array.isArray(alerts)) {
+  //         console.error("Alerts data is not an array");
+  //         return;
+  //       }
+  //
+  //       const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
+  //       const alertsNotDisplayed = alerts.filter((alert) => !displayedAlerts.includes(alert.id));
+  //
+  //       // Display notifications for alerts not yet displayed
+  //       alertsNotDisplayed.forEach((alert) => {
+  //         // Update localStorage immediately to prevent duplicate notifications
+  //         displayedAlerts.push(alert.id);
+  //         localStorage.setItem("displayedAlerts", JSON.stringify(displayedAlerts));
+  //
+  //         notification.open({
+  //           key: "notification-alerts-" + alert.id,
+  //           message: alert.message,
+  //           description: alert.description,
+  //           type: alert.type || "info",
+  //           duration: 0,
+  //           placement: "bottomRight",
+  //           closable: true
+  //         });
+  //       });
+  //     } catch (error) {
+  //       console.error("Error fetching alerts:", error);
+  //     }
+  //   };
+  //
+  //   fetchAlerts();
+  // }, []);
+
   useEffect(() => {
     const widgetId = InstanceRenderManager({
       imex: "IABVNO4scRKY11XBQkNr",

client/src/redux/application/application.actions.js

@@ -67,6 +67,12 @@ export const setUpdateAvailable = (isUpdateAvailable) => ({
   type: ApplicationActionTypes.SET_UPDATE_AVAILABLE,
   payload: isUpdateAvailable
 });
+
+export const addAlerts = (alerts) => ({
+  type: ApplicationActionTypes.ADD_ALERTS,
+  payload: alerts
+});
+
 export const setWssStatus = (status) => ({
   type: ApplicationActionTypes.SET_WSS_STATUS,
   payload: status

client/src/redux/application/application.reducer.js

@@ -15,7 +15,8 @@ const INITIAL_STATE = {
     error: null
   },
   jobReadOnly: false,
-  partnerVersion: null
+  partnerVersion: null,
+  alerts: {}
 };
 
 const applicationReducer = (state = INITIAL_STATE, action) => {
@@ -91,6 +92,18 @@ const applicationReducer = (state = INITIAL_STATE, action) => {
     case ApplicationActionTypes.SET_WSS_STATUS: {
       return { ...state, wssStatus: action.payload };
     }
+
+    case ApplicationActionTypes.ADD_ALERTS: {
+      const newAlertsMap = { ...state.alerts };
+
+      action.payload.alerts.forEach((alert) => {
+        newAlertsMap[alert.id] = alert;
+      });
+      return {
+        ...state,
+        alerts: newAlertsMap
+      };
+    }
     default:
       return state;
   }

client/src/redux/application/application.selectors.js

@@ -23,3 +23,4 @@ export const selectOnline = createSelector([selectApplication], (application) =>
 export const selectProblemJobs = createSelector([selectApplication], (application) => application.problemJobs);
 export const selectUpdateAvailable = createSelector([selectApplication], (application) => application.updateAvailable);
 export const selectWssStatus = createSelector([selectApplication], (application) => application.wssStatus);
+export const selectAlerts = createSelector([selectApplication], (application) => application.alerts);

client/src/redux/application/application.types.js

@@ -13,6 +13,7 @@ const ApplicationActionTypes = {
   INSERT_AUDIT_TRAIL: "INSERT_AUDIT_TRAIL",
   SET_PROBLEM_JOBS: "SET_PROBLEM_JOBS",
   SET_UPDATE_AVAILABLE: "SET_UPDATE_AVAILABLE",
-  SET_WSS_STATUS: "SET_WSS_STATUS"
+  SET_WSS_STATUS: "SET_WSS_STATUS",
+  ADD_ALERTS: "ADD_ALERTS"
 };
 export default ApplicationActionTypes;

server/alerts/alertcheck.js

@@ -0,0 +1,76 @@
+const axios = require("axios");
+const _ = require("lodash");
+const { default: InstanceMgr } = require("../utils/instanceMgr"); // For deep object comparison
+
+// Constants
+const ALERTS_REDIS_KEY = "alerts_data"; // The key under which we'll store alerts in Redis
+const GLOBAL_SOCKET_ID = "global"; // Use 'global' as a socketId to store global data
+
+const ALERT_FILE_URL = InstanceMgr({
+  imex: "https://images.imex.online/alerts/alerts-imex.json",
+  rome: "https://images.imex.online/alerts/alerts-rome.json"
+});
+
+const alertCheck = async (req, res) => {
+  // Access Redis helper functions
+  const { ioRedis, logger } = req;
+  const { getSessionData, setSessionData } = req.sessionUtils;
+
+  try {
+    // Get the JSON Alert file from the server
+    const response = await axios.get(ALERT_FILE_URL);
+    const currentAlerts = response.data;
+    // Retrieve stored alerts from Redis using a global socketId
+    const storedAlerts = await getSessionData(GLOBAL_SOCKET_ID, ALERTS_REDIS_KEY);
+    if (!storedAlerts) {
+      // Alerts not in Redis, store them
+      await setSessionData(GLOBAL_SOCKET_ID, ALERTS_REDIS_KEY, currentAlerts);
+      logger.logger.debug("Alerts added to Redis for the first time.");
+
+      // Emit to clients
+      if (ioRedis) {
+        ioRedis.emit("bodyshop-message", {
+          type: "alert-update",
+          payload: currentAlerts
+        });
+        logger.logger.debug("Alerts emitted to clients for the first time.");
+      } else {
+        logger.log("Socket.IO instance not found. (1)", "error");
+      }
+
+      return res.status(200).send("Alerts added to Redis and emitted to clients.");
+    } else {
+      // Alerts are in Redis, compare them
+      if (!_.isEqual(currentAlerts, storedAlerts)) {
+        // Alerts are different, update Redis and emit to clients
+        await setSessionData(GLOBAL_SOCKET_ID, ALERTS_REDIS_KEY, currentAlerts);
+        logger.logger.debug("Alerts updated in Redis.");
+
+        // Emit the new alerts to all connected clients
+        if (ioRedis) {
+          ioRedis.emit("bodyshop-message", {
+            type: "alert-update",
+            payload: currentAlerts
+          });
+          logger.logger.debug("Alerts emitted to clients after update.");
+        } else {
+          logger.log("Socket.IO instance not found. (2)", "error");
+        }
+
+        return res.status(200).send("Alerts updated in Redis and emitted to clients.");
+      } else {
+        return res.status(200).send("No changes in alerts.");
+      }
+    }
+  } catch (error) {
+    logger.log("Error in alertCheck:", "error", null, null, {
+      error: {
+        message: error.message,
+        stack: error.stack
+      }
+    });
+    return res.status(500).send("Internal server error.");
+  }
+};
+
+module.exports = { alertCheck };

server/routes/miscellaneousRoutes.js

@@ -12,6 +12,7 @@ const validateFirebaseIdTokenMiddleware = require("../middleware/validateFirebas
 const withUserGraphQLClientMiddleware = require("../middleware/withUserGraphQLClientMiddleware");
 const { taskAssignedEmail, tasksRemindEmail } = require("../email/tasksEmails");
 const { canvastest } = require("../render/canvas-handler");
+const { alertCheck } = require("../alerts/alertcheck");
 
 //Test route to ensure Express is responding.
 router.get("/test", async function (req, res) {
@@ -53,4 +54,7 @@ router.post("/taskHandler", validateFirebaseIdTokenMiddleware, taskHandler.taskH
 // Canvas Test
 router.post("/canvastest", validateFirebaseIdTokenMiddleware, canvastest);
 
+// Alert Check
+router.post("/alertcheck", eventAuthorizationMiddleware, alertCheck);
+
 module.exports = router;