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}>

client/src/components/production-list-detail/production-list-detail.component.jsx

@@ -27,6 +27,8 @@ import ScoreboardAddButton from "../job-scoreboard-add-button/job-scoreboard-add
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
 import ProductionRemoveButton from "../production-remove-button/production-remove-button.component";
+import JobWatcherToggleContainer from "../job-watcher-toggle/job-watcher-toggle.container.jsx";
+import { useSocket } from "../../contexts/SocketIO/useSocket.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -41,6 +43,7 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
   const search = queryString.parse(useLocation().search);
   const history = useNavigate();
   const { selected } = search;
+  const { scenarioNotificationsOn } = useSocket();
 
   const { t } = useTranslation();
   const theJob = jobs.find((j) => j.id === selected) || {};
@@ -60,7 +63,12 @@ export function ProductionListDetail({ bodyshop, jobs, setPrintCenterContext, te
     <Drawer
       title={
         <PageHeader
-          title={theJob.ro_number}
+          title={
+            <Space>
+              {!technician && scenarioNotificationsOn && <JobWatcherToggleContainer job={theJob} />}
+              {theJob.ro_number}
+            </Space>
+          }
           extra={
             <Space wrap>
               {!technician ? <ProductionRemoveButton jobId={theJob.id} /> : null}