Updated production note display. IO-495

client/src/components/jobs-detail-header/jobs-detail-header.component.jsx

@@ -1,11 +1,12 @@
 import { PrinterFilled } from "@ant-design/icons";
 import { Button, Divider, PageHeader, Tag } from "antd";
-import React from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { setModalContext } from "../../redux/modals/modals.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import JobEmployeeAssignments from "../job-employee-assignments/job-employee-assignments.container";
 import JobsChangeStatus from "../jobs-change-status/jobs-change-status.component";
@@ -18,6 +19,7 @@ import "./jobs-detail-header.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly,
+  bodyshop: selectBodyshop,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -32,9 +34,16 @@ export function JobsDetailHeader({
   refetch,
   loading,
   form,
+  bodyshop,
 }) {
   const { t } = useTranslation();
 
+  const jobInPostProduction = useMemo(() => {
+    return bodyshop.md_ro_statuses.post_production_statuses.includes(
+      job.status
+    );
+  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);
+
   const menuExtra = (
     <div className="imex-flex-row">
       <JobsChangeStatus job={job} />
@@ -92,10 +101,10 @@ export function JobsDetailHeader({
       extra={menuExtra}
     >
       <div style={{ display: "flex", justifyContent: "flex-end" }}>
-        {job.inproduction && (
+        {(job.inproduction || jobInPostProduction) && (
           <>
             <div style={{ display: "flex", flex: 1 }}>
-              <div style={{ width: "20%" }}>
+              <div style={{ marginRight: "2rem" }}>
                 {t("jobs.fields.production_vars.note")}
               </div>
               <ProductionListColumnProductionNote record={job} />