feature/IO-3228-Notifications-1.6-and-Deprecations

- See Ticket for full details (Notifications restrictions, AntD deprecations)

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

@@ -1,11 +1,11 @@
 import { Virtuoso } from "react-virtuoso";
-import { Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
+import { Alert, Badge, Button, Space, Spin, Switch, Tooltip, Typography } from "antd";
 import { CheckCircleFilled, CheckCircleOutlined, EyeFilled, EyeOutlined } from "@ant-design/icons";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import "./notification-center.styles.scss";
 import day from "../../utils/day.js";
-import { forwardRef, useRef, useEffect } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
 
 const { Text, Title } = Typography;
@@ -26,7 +26,8 @@ const NotificationCenterComponent = forwardRef(
       markAllRead,
       loadMore,
       onNotificationClick,
-      unreadCount
+      unreadCount,
+      isEmployee
     },
     ref
   ) => {
@@ -93,7 +94,12 @@ const NotificationCenterComponent = forwardRef(
                 ) : (
                   <EyeOutlined className="notification-toggle-icon" />
                 )}
-                <Switch checked={showUnreadOnly} onChange={(checked) => toggleUnreadOnly(checked)} size="small" />
+                <Switch
+                  checked={showUnreadOnly}
+                  onChange={(checked) => toggleUnreadOnly(checked)}
+                  size="small"
+                  disabled={!isEmployee}
+                />
               </Space>
             </Tooltip>
             <Tooltip title={t("notifications.labels.mark-all-read")}>
@@ -106,14 +112,20 @@ const NotificationCenterComponent = forwardRef(
             </Tooltip>
           </div>
         </div>
-        <Virtuoso
-          ref={virtuosoRef}
-          style={{ height: "400px", width: "100%" }}
-          data={notifications}
-          totalCount={notifications.length}
-          endReached={loadMore}
-          itemContent={renderNotification}
-        />
+        {!isEmployee ? (
+          <div style={{ padding: 10 }}>
+            <Alert message={t("notifications.labels.employee-notification")} type="warning" />
+          </div>
+        ) : (
+          <Virtuoso
+            ref={virtuosoRef}
+            style={{ height: "400px", width: "100%" }}
+            data={notifications}
+            totalCount={notifications.length}
+            endReached={loadMore}
+            itemContent={renderNotification}
+          />
+        )}
       </div>
     );
   }

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

@@ -4,9 +4,10 @@ import { connect } from "react-redux";
 import NotificationCenterComponent from "./notification-center.component";
 import { GET_NOTIFICATIONS } from "../../graphql/notifications.queries";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors.js";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors.js";
 import day from "../../utils/day.js";
 import { INITIAL_NOTIFICATIONS, useSocket } from "../../contexts/SocketIO/useSocket.js";
+import { useIsEmployee } from "../../utils/useIsEmployee.js";
 
 // This will be used to poll for notifications when the socket is disconnected
 const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
@@ -17,17 +18,18 @@ const NOTIFICATION_POLL_INTERVAL_SECONDS = 60;
  * @param onClose
  * @param bodyshop
  * @param unreadCount
+ * @param currentUser
  * @returns {JSX.Element}
  * @constructor
  */
-const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }) => {
+const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount, currentUser }) => {
   const [showUnreadOnly, setShowUnreadOnly] = useState(false);
   const [notifications, setNotifications] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const { isConnected, markNotificationRead, markAllNotificationsRead } = useSocket();
   const notificationRef = useRef(null);
-
   const userAssociationId = bodyshop?.associations?.[0]?.id;
+  const isEmployee = useIsEmployee(bodyshop, currentUser);
 
   const baseWhereClause = useMemo(() => {
     return { associationid: { _eq: userAssociationId } };
@@ -51,7 +53,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
     fetchPolicy: "cache-and-network",
     notifyOnNetworkStatusChange: true,
     pollInterval: isConnected ? 0 : day.duration(NOTIFICATION_POLL_INTERVAL_SECONDS, "seconds").asMilliseconds(),
-    skip: !userAssociationId,
+    skip: !userAssociationId || !isEmployee,
     onError: (err) => {
       console.error(`Error polling Notifications: ${err?.message || ""}`);
       setTimeout(() => refetch(), day.duration(2, "seconds").asMilliseconds());
@@ -71,7 +73,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
   }, [visible, onClose]);
 
   useEffect(() => {
-    if (data?.notifications) {
+    if (data?.notifications && isEmployee) {
       const processedNotifications = data.notifications
         .map((notif) => {
           let scenarioText;
@@ -101,11 +103,13 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
         })
         .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
       setNotifications(processedNotifications);
+    } else if (!isEmployee) {
+      setNotifications([]); // Clear notifications if not an employee
     }
-  }, [data]);
+  }, [data, isEmployee]);
 
   const loadMore = useCallback(() => {
-    if (!queryLoading && data?.notifications.length) {
+    if (!queryLoading && data?.notifications.length && isEmployee) {
       setIsLoading(true); // Show spinner during fetchMore
       fetchMore({
         variables: { offset: data.notifications.length, where: whereClause },
@@ -121,13 +125,14 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
         })
         .finally(() => setIsLoading(false)); // Hide spinner when done
     }
-  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause]);
+  }, [data?.notifications?.length, fetchMore, queryLoading, whereClause, isEmployee]);
 
   const handleToggleUnreadOnly = (value) => {
     setShowUnreadOnly(value);
   };
 
   const handleMarkAllRead = useCallback(() => {
+    if (!isEmployee) return; // Do nothing if not an employee
     setIsLoading(true);
     markAllNotificationsRead()
       .then(() => {
@@ -147,7 +152,7 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
       })
       .catch((e) => console.error(`Error marking all notifications read: ${e?.message || ""}`))
       .finally(() => setIsLoading(false));
-  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly]);
+  }, [markAllNotificationsRead, userAssociationId, showUnreadOnly, isEmployee]);
 
   const handleNotificationClick = useCallback(
     (notificationId) => {
@@ -170,17 +175,18 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
   );
 
   useEffect(() => {
-    if (visible && !isConnected) {
+    if (visible && !isConnected && isEmployee) {
       setIsLoading(true);
       refetch()
         .catch((err) => console.error(`Error re-fetching notifications: ${err?.message || ""}`))
         .finally(() => setIsLoading(false));
     }
-  }, [visible, isConnected, refetch]);
+  }, [visible, isConnected, refetch, isEmployee]);
 
   return (
     <NotificationCenterComponent
       ref={notificationRef}
+      isEmployee={isEmployee}
       visible={visible}
       onClose={onClose}
       notifications={notifications}
@@ -196,7 +202,8 @@ const NotificationCenterContainer = ({ visible, onClose, bodyshop, unreadCount }
 };
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
+  currentUser: selectCurrentUser
 });
 
 export default connect(mapStateToProps, null)(NotificationCenterContainer);