feature/IO-3096-GlobalNotifications - Checkpoint - Splits are now in place

client/src/components/header/header.component.jsx

@@ -93,10 +93,11 @@ function Header({
   });
 
   const { t } = useTranslation();
-  const { isConnected } = useSocket();
+  const { isConnected, scenarioNotificationsOn } = useSocket();
   const [notificationVisible, setNotificationVisible] = useState(false);
 
   const userAssociationId = bodyshop?.associations?.[0]?.id;
+
   const {
     data: unreadData,
     refetch: refetchUnread,
@@ -105,7 +106,7 @@ function Header({
     variables: { associationid: userAssociationId },
     fetchPolicy: "network-only",
     pollInterval: isConnected ? 0 : day.duration(60, "seconds").asMilliseconds(),
-    skip: !userAssociationId
+    skip: !userAssociationId || !scenarioNotificationsOn
   });
 
   const unreadCount = unreadData?.notifications_aggregate?.aggregate?.count ?? 0;
@@ -647,20 +648,22 @@ function Header({
   ];
 
   // Notifications item (always on the right)
-  const notificationItem = [
-    {
-      key: "notifications",
-      id: "header-notifications",
-      icon: unreadLoading ? (
-        <Spin size="small" />
-      ) : (
-        <Badge count={unreadCount}>
-          <BellFilled />
-        </Badge>
-      ),
-      onClick: handleNotificationClick
-    }
-  ];
+  const notificationItem = scenarioNotificationsOn
+    ? [
+        {
+          key: "notifications",
+          id: "header-notifications",
+          icon: unreadLoading ? (
+            <Spin size="small" />
+          ) : (
+            <Badge count={unreadCount}>
+              <BellFilled />
+            </Badge>
+          ),
+          onClick: handleNotificationClick
+        }
+      ]
+    : [];
 
   return (
     <Layout.Header style={{ padding: 0, background: "#001529" }}>
@@ -688,17 +691,21 @@ function Header({
             background: "transparent"
           }}
         />
-        <Menu
-          mode="horizontal"
-          theme="dark"
-          selectedKeys={[selectedHeader]}
-          onClick={handleMenuClick}
-          subMenuCloseDelay={0.3}
-          items={notificationItem}
-          style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
-        />
+        {scenarioNotificationsOn && (
+          <Menu
+            mode="horizontal"
+            theme="dark"
+            selectedKeys={[selectedHeader]}
+            onClick={handleMenuClick}
+            subMenuCloseDelay={0.3}
+            items={notificationItem}
+            style={{ flex: "0 0 auto", minWidth: 0, borderBottom: "none", background: "transparent" }}
+          />
+        )}
       </div>
-      <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
+      {scenarioNotificationsOn && (
+        <NotificationCenterContainer visible={notificationVisible} onClose={() => setNotificationVisible(false)} />
+      )}
     </Layout.Header>
   );
 }