diff --git a/client/src/App/App.jsx b/client/src/App/App.jsx index 90f3237cd..53854a43f 100644 --- a/client/src/App/App.jsx +++ b/client/src/App/App.jsx @@ -48,6 +48,8 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline const { t } = useTranslation(); const navigate = useNavigate(); + const scenarioNotificationsOn = client?.getTreatment("Realtime_Notifications_UI") === "on"; + useEffect(() => { if (!navigator.onLine) { setOnline(false); @@ -201,7 +203,12 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline path="/manage/*" element={ - + @@ -213,7 +220,12 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline path="/tech/*" element={ - + diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx index 175e4785e..1e0c91ec6 100644 --- a/client/src/components/header/header.component.jsx +++ b/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 ? ( - - ) : ( - - - - ), - onClick: handleNotificationClick - } - ]; + const notificationItem = scenarioNotificationsOn + ? [ + { + key: "notifications", + id: "header-notifications", + icon: unreadLoading ? ( + + ) : ( + + + + ), + onClick: handleNotificationClick + } + ] + : []; return ( @@ -688,17 +691,21 @@ function Header({ background: "transparent" }} /> - + {scenarioNotificationsOn && ( + + )} - setNotificationVisible(false)} /> + {scenarioNotificationsOn && ( + setNotificationVisible(false)} /> + )} ); } diff --git a/client/src/components/profile-my/profile-my.component.jsx b/client/src/components/profile-my/profile-my.component.jsx index 0a8624360..43e36033c 100644 --- a/client/src/components/profile-my/profile-my.component.jsx +++ b/client/src/components/profile-my/profile-my.component.jsx @@ -9,6 +9,7 @@ import { logImEXEvent, updateCurrentPassword } from "../../firebase/firebase.uti import LayoutFormRow from "../layout-form-row/layout-form-row.component"; import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; import NotificationSettingsForm from "./notification-settings.component.jsx"; +import { useSocket } from "../../contexts/SocketIO/socketContext.jsx"; const mapStateToProps = createStructuredSelector({ currentUser: selectCurrentUser @@ -22,6 +23,7 @@ export default connect( )(function ProfileMyComponent({ currentUser, updateUserDetails }) { const { t } = useTranslation(); const notification = useNotification(); + const { scenarioNotificationsOn } = useSocket(); const handleFinish = (values) => { logImEXEvent("profile_update"); @@ -117,9 +119,11 @@ export default connect( - - - + {scenarioNotificationsOn && ( + + + + )} ); }); diff --git a/client/src/contexts/SocketIO/socketContext.jsx b/client/src/contexts/SocketIO/socketContext.jsx index ef644d1ef..3a4e8b6e1 100644 --- a/client/src/contexts/SocketIO/socketContext.jsx +++ b/client/src/contexts/SocketIO/socketContext.jsx @@ -17,7 +17,17 @@ const SocketContext = createContext(null); const INITIAL_NOTIFICATIONS = 10; -const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => { +/** + * Socket Provider - Scenario Notifications / Web Socket related items. + * @param children + * @param bodyshop + * @param navigate + * @param currentUser + * @param scenarioNotificationsOn + * @returns {JSX.Element} + * @constructor + */ +const SocketProvider = ({ children, bodyshop, navigate, currentUser, scenarioNotificationsOn }) => { const socketRef = useRef(null); const [clientId, setClientId] = useState(null); const [isConnected, setIsConnected] = useState(false); @@ -191,6 +201,11 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => { }; const handleNotification = (data) => { + // Scenario Notifications have been disabled, bail. + if (!scenarioNotificationsOn) { + return; + } + const { jobId, jobRoNumber, notificationId, associationId, notifications } = data; if (associationId !== userAssociationId) return; @@ -295,6 +310,11 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => { }; const handleSyncNotificationRead = ({ notificationId, timestamp }) => { + // Scenario Notifications have been disabled, bail. + if (!scenarioNotificationsOn) { + return; + } + try { const notificationRef = client.cache.identify({ __typename: "notifications", @@ -336,6 +356,11 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => { }; const handleSyncAllNotificationsRead = ({ timestamp }) => { + // Scenario Notifications have been disabled, bail. + if (!scenarioNotificationsOn) { + return; + } + try { const queryVars = { limit: INITIAL_NOTIFICATIONS, @@ -436,7 +461,8 @@ const SocketProvider = ({ children, bodyshop, navigate, currentUser }) => { clientId, isConnected, markNotificationRead, - markAllNotificationsRead + markAllNotificationsRead, + scenarioNotificationsOn }} > {children} diff --git a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx index 4f8a1458b..f00551443 100644 --- a/client/src/pages/jobs-detail/jobs-detail.page.component.jsx +++ b/client/src/pages/jobs-detail/jobs-detail.page.component.jsx @@ -57,6 +57,7 @@ import dayjs from "../../utils/day"; import UndefinedToNull from "../../utils/undefinedtonull"; import { useNotification } from "../../contexts/Notifications/notificationContext.jsx"; import JobWatcherToggle from "./job-watcher-toggle.component.jsx"; +import { useSocket } from "../../contexts/SocketIO/socketContext.jsx"; const mapStateToProps = createStructuredSelector({ bodyshop: selectBodyshop, @@ -103,6 +104,7 @@ export function JobsDetailPage({ nextFetchPolicy: "network-only" }); const notification = useNotification(); + const { scenarioNotificationsOn } = useSocket(); useEffect(() => { //form.setFieldsValue(transormJobToForm(job)); @@ -323,7 +325,7 @@ export function JobsDetailPage({ title={ - + {scenarioNotificationsOn && } {job.ro_number || t("general.labels.na")} }