IO-3166-Global-Notifications-Part-2: checkpoint

client/src/components/job-detail-cards/job-detail-cards.component.jsx

@@ -21,6 +21,8 @@ import JobDetailCardsInsuranceComponent from "./job-detail-cards.insurance.compo
 import JobDetailCardsNotesComponent from "./job-detail-cards.notes.component";
 import JobDetailCardsPartsComponent from "./job-detail-cards.parts.component";
 import JobDetailCardsTotalsComponent from "./job-detail-cards.totals.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -37,6 +39,7 @@ const span = {
 };
 
 export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
+  const { scenarioNotificationsOn } = useSocket();
   const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
     .filter((screen) => !!screen[1])
     .slice(-1)[0];
@@ -78,7 +81,12 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
       {data ? (
         <Card
           title={
-            <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>{data.jobs_by_pk.ro_number || t("general.labels.na")}</Link>
+            <Space>
+              {scenarioNotificationsOn && <JobWatcherToggleContainer job={data.jobs_by_pk} />}
+              <Link to={`/manage/jobs/${data.jobs_by_pk.id}`}>
+                {data.jobs_by_pk.ro_number || t("general.labels.na")}
+              </Link>
+            </Space>
           }
           extra={
             <Space wrap>
@@ -122,7 +130,11 @@ export function JobDetailCards({ bodyshop, setPrintCenterContext }) {
             </Col>
             {!bodyshop.uselocalmediaserver && (
               <Col {...span}>
-                <JobDetailCardsDocumentsComponent loading={loading} data={data ? data.jobs_by_pk : null} bodyshop={bodyshop} />
+                <JobDetailCardsDocumentsComponent
+                  loading={loading}
+                  data={data ? data.jobs_by_pk : null}
+                  bodyshop={bodyshop}
+                />
               </Col>
             )}
             <Col {...span}>