IO-3031 Appointment Schedule View Day

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.vscode/settings.json

@@ -8,5 +8,18 @@
       "pattern": "**/IMEX.xml",
       "systemId": "logs/IMEX.xsd"
     }
+  ],
+  "cSpell.words": [
+    "antd",
+    "appointmentconfirmation",
+    "appt",
+    "bodyshop",
+    "IMEX",
+    "labhrs",
+    "larhrs",
+    "ownr",
+    "promanager",
+    "smartscheduling",
+    "touchtime"
   ]
 }

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,4 +1,4 @@
-import { DatePicker } from "antd";
+import { DatePicker, Space, TimePicker } from "antd";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ const DateTimePicker = ({
   onlyFuture,
   onlyToday,
   isDateOnly = false,
+  isSeparatedTime = false,
   bodyshop,
   ...restProps
 }) => {
@@ -87,24 +88,57 @@ const DateTimePicker = ({
 
   return (
     <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      <DatePicker
-        showTime={
-          isDateOnly
-            ? false
-            : {
-                format: "hh:mm a",
-                minuteStep: 15,
-                defaultValue: dayjs(dayjs(), "HH:mm:ss")
-              }
-        }
-        format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
-        value={value ? dayjs(value) : null}
-        onChange={handleChange}
-        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-        onBlur={onBlur || handleBlur}
-        disabledDate={handleDisabledDate}
-        {...restProps}
-      />
+      {isSeparatedTime && (
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <DatePicker
+            showTime={false}
+            format="MM/DD/YYYY"
+            value={value ? dayjs(value) : null}
+            onChange={handleChange}
+            placeholder={t("general.labels.date")}
+            onBlur={handleBlur}
+            disabledDate={handleDisabledDate}
+            isDateOnly={true}
+            {...restProps}
+          />
+          {value && (
+            <TimePicker
+              format="hh:mm a"
+              minuteStep={15}
+              defaultOpenValue={dayjs(value)
+                .hour(dayjs().hour())
+                .minute(Math.floor(dayjs().minute() / 15) * 15)
+                .second(0)}
+              onChange={(value) => {
+                handleChange(value);
+                onBlur();
+              }}
+              placeholder={t("general.labels.time")}
+              {...restProps}
+            />
+          )}
+        </Space>
+      )}
+      {!isSeparatedTime && (
+        <DatePicker
+          showTime={
+            isDateOnly
+              ? false
+              : {
+                  format: "hh:mm a",
+                  minuteStep: 15,
+                  defaultValue: dayjs(dayjs(), "HH:mm:ss")
+                }
+          }
+          format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
+          value={value ? dayjs(value) : null}
+          onChange={handleChange}
+          placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
+          onBlur={onBlur || handleBlur}
+          disabledDate={handleDisabledDate}
+          {...restProps}
+        />
+      )}
     </div>
   );
 };
@@ -116,7 +150,8 @@ DateTimePicker.propTypes = {
   id: PropTypes.string,
   onlyFuture: PropTypes.bool,
   onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool
+  isDateOnly: PropTypes.bool,
+  isSeparatedTime: PropTypes.bool
 };
 
 export default connect(mapStateToProps, null)(DateTimePicker);

client/src/components/schedule-job-modal/schedule-job-modal.component.jsx

@@ -1,6 +1,5 @@
 import { Button, Col, Form, Input, Row, Select, Space, Switch, Typography } from "antd";
 import axios from "axios";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,13 +7,14 @@ import { createStructuredSelector } from "reselect";
 import { calculateScheduleLoad } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -84,7 +84,7 @@ export function ScheduleJobModalComponent({
               }
             ]}
           >
-            <DateTimePicker onBlur={handleDateBlur} onlyFuture />
+            <DateTimePicker onBlur={handleDateBlur} onlyFuture isSeparatedTime />
           </Form.Item>
           <Form.Item
             name="scheduled_completion"

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,80 @@ 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 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;

client/src/translations/en_us/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "Sunday",
         "text": "Text",
         "thursday": "Thursday",
+        "time": "Select Time",
         "total": "Total",
         "totals": "Totals",
         "tuesday": "Tuesday",

client/src/translations/es/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "",
         "text": "",
         "thursday": "",
+        "time": "",
         "total": "",
         "totals": "",
         "tuesday": "",

client/src/translations/fr/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "",
         "text": "",
         "thursday": "",
+        "time": "",
         "total": "",
         "totals": "",
         "tuesday": "",

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;