Merged in feature/IO-3103-Ant5-Notifications (pull request #2071)

feature/IO-3103-Ant5-Notifications

client/package-lock.json

@@ -66,7 +66,6 @@
         "react-resizable": "^3.0.5",
         "react-router-dom": "^6.26.2",
         "react-sticky": "^6.0.3",
-        "react-virtualized": "^9.22.5",
         "react-virtuoso": "^4.10.4",
         "recharts": "^2.12.7",
         "redux": "^5.0.1",
@@ -6422,6 +6421,7 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "license": "MIT",
       "dependencies": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -6430,7 +6430,8 @@
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+      "license": "MIT"
     },
     "node_modules/backo2": {
       "version": "1.0.2",
@@ -7363,7 +7364,8 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
-      "hasInstallScript": true
+      "hasInstallScript": true,
+      "license": "MIT"
     },
     "node_modules/core-js-compat": {
       "version": "3.37.1",
@@ -14276,6 +14278,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/react-drag-listview/-/react-drag-listview-2.0.0.tgz",
       "integrity": "sha512-7Apx/1Xt4qu+JHHP0rH6aLgZgS7c2MX8ocHVGCi03KfeIWEu0t14MhT3boQKM33l5eJrE/IWfExFTvoYq22fsg==",
+      "license": "MIT",
       "dependencies": {
         "babel-runtime": "^6.26.0",
         "prop-types": "^15.5.8"
@@ -14596,23 +14599,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-virtualized": {
-      "version": "9.22.5",
-      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
-      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "clsx": "^1.0.4",
-        "dom-helpers": "^5.1.3",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.4"
-      },
-      "peerDependencies": {
-        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-virtuoso": {
       "version": "4.10.4",
       "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.10.4.tgz",

client/package.json

@@ -65,7 +65,6 @@
     "react-resizable": "^3.0.5",
     "react-router-dom": "^6.26.2",
     "react-sticky": "^6.0.3",
-    "react-virtualized": "^9.22.5",
     "react-virtuoso": "^4.10.4",
     "recharts": "^2.12.7",
     "redux": "^5.0.1",

client/src/App/App.jsx

@@ -22,6 +22,7 @@ import Eula from "../components/eula/eula.component";
 import InstanceRenderMgr from "../utils/instanceRenderMgr";
 import ProductFruitsWrapper from "./ProductFruitsWrapper.jsx";
 import { SocketProvider } from "../contexts/SocketIO/socketContext.jsx";
+import { NotificationProvider } from "../contexts/Notifications/notificationContext.jsx";
 
 const ResetPassword = lazy(() => import("../pages/reset-password/reset-password.component"));
 const ManagePage = lazy(() => import("../pages/manage/manage.page.container"));
@@ -145,84 +146,85 @@ export function App({ bodyshop, checkUserSession, currentUser, online, setOnline
           rome: "9BkbEseqNqxw8jUH"
         })}
       />
-
+      <NotificationProvider>
-      <Routes>
+        <Routes>
-        <Route
+          <Route
-          path="*"
+            path="*"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <LandingPage />
+                <LandingPage />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/signin"
+            path="/signin"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <SignInPage />
+                <SignInPage />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/resetpassword"
+            path="/resetpassword"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <ResetPassword />
+                <ResetPassword />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/csi/:surveyId"
+            path="/csi/:surveyId"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <CsiPage />
+                <CsiPage />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/disclaimer"
+            path="/disclaimer"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <DisclaimerPage />
+                <DisclaimerPage />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/mp/:paymentIs"
+            path="/mp/:paymentIs"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <MobilePaymentContainer />
+                <MobilePaymentContainer />
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        />
+          />
-        <Route
+          <Route
-          path="/manage/*"
+            path="/manage/*"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
+                  <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
+                </SocketProvider>
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        >
+          >
-          <Route path="*" element={<ManagePage />} />
+            <Route path="*" element={<ManagePage />} />
-        </Route>
+          </Route>
-        <Route
+          <Route
-          path="/tech/*"
+            path="/tech/*"
-          element={
+            element={
-            <ErrorBoundary>
+              <ErrorBoundary>
-              <SocketProvider bodyshop={bodyshop}>
+                <SocketProvider bodyshop={bodyshop}>
-                <PrivateRoute isAuthorized={currentUser.authorized} />
+                  <PrivateRoute isAuthorized={currentUser.authorized} />
-              </SocketProvider>
+                </SocketProvider>
-            </ErrorBoundary>
+              </ErrorBoundary>
-          }
+            }
-        >
+          >
-          <Route path="*" element={<TechPageContainer />} />
+            <Route path="*" element={<TechPageContainer />} />
-        </Route>
+          </Route>
-        <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
+          <Route path="/edit/*" element={<PrivateRoute isAuthorized={currentUser.authorized} />}>
-          <Route path="*" element={<DocumentEditorContainer />} />
+            <Route path="*" element={<DocumentEditorContainer />} />
-        </Route>
+          </Route>
-      </Routes>
+        </Routes>
+      </NotificationProvider>
     </Suspense>
   );
 }

client/src/components/allocations-assignment/allocations-assignment.container.jsx

@@ -3,7 +3,7 @@ import AllocationsAssignmentComponent from "./allocations-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
-import { notification } from "antd";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function AllocationsAssignmentContainer({ jobLineId, hours, refetch }) {
   const visibilityState = useState(false);
@@ -14,6 +14,7 @@ export default function AllocationsAssignmentContainer({ jobLineId, hours, refet
     employeeid: null
   });
   const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+  const notification = useNotification();
 
   const handleAssignment = () => {
     insertAllocation({ variables: { alloc: { ...assignment } } })

client/src/components/allocations-bulk-assignment/allocations-bulk-assignment.container.jsx

@@ -3,7 +3,7 @@ import AllocationsBulkAssignment from "./allocations-bulk-assignment.component";
 import { useMutation } from "@apollo/client";
 import { INSERT_ALLOCATION } from "../../graphql/allocations.queries";
 import { useTranslation } from "react-i18next";
-import { notification } from "antd";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }) {
   const visibilityState = useState(false);
@@ -12,6 +12,7 @@ export default function AllocationsBulkAssignmentContainer({ jobLines, refetch }
     employeeid: null
   });
   const [insertAllocation] = useMutation(INSERT_ALLOCATION);
+  const notification = useNotification();
 
   const handleAssignment = () => {
     const allocs = jobLines.reduce((acc, value) => {

client/src/components/allocations-employee-label/allocations-employee-label.container.jsx

@@ -2,12 +2,13 @@ import React from "react";
 import { useMutation } from "@apollo/client";
 import { DELETE_ALLOCATION } from "../../graphql/allocations.queries";
 import AllocationsLabelComponent from "./allocations-employee-label.component";
-import { notification } from "antd";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function AllocationsLabelContainer({ allocation, refetch }) {
   const [deleteAllocation] = useMutation(DELETE_ALLOCATION);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const handleClick = (e) => {
     e.preventDefault();

client/src/components/bill-delete-button/bill-delete-button.component.jsx

@@ -1,6 +1,6 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_BILL } from "../../graphql/bills.queries";
@@ -9,6 +9,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
@@ -21,6 +22,7 @@ export function BillDeleteButton({ bill, jobid, callback, insertAuditTrail }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteBill] = useMutation(DELETE_BILL);
+  const notification = useNotification();
 
   const handleDelete = async () => {
     setLoading(true);

client/src/components/bill-enter-modal/bill-enter-modal.container.jsx

@@ -1,6 +1,6 @@
 import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Checkbox, Form, Modal, notification, Space } from "antd";
+import { Button, Checkbox, Form, Modal, Space } from "antd";
 import _ from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,7 @@ import BillFormContainer from "../bill-form/bill-form.container";
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import { handleUpload as handleLocalUpload } from "../documents-local-upload/documents-local-upload.utility";
 import { handleUpload } from "../documents-upload/documents-upload.utility";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   billEnterModal: selectBillEnterModal,
@@ -49,6 +50,7 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
   const [generateLabel, setGenerateLabel] = useLocalStorage("enter_bill_generate_label", false);
+  const notification = useNotification();
 
   const {
     treatments: { Enhanced_Payroll }
@@ -291,7 +293,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               jobid: values.jobid,
               invoice_number: remainingValues.invoice_number,
               vendorid: remainingValues.vendorid
-            }
+            },
+            notification
           });
         });
       } else {
@@ -305,7 +308,8 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
               billId: billId,
               tagsArray: null,
               callback: null
-            }
+            },
+            notification
           );
         });
       }
@@ -325,7 +329,9 @@ function BillEnterModalContainer({ billEnterModal, toggleModalVisible, bodyshop,
           }
         },
         {},
-        "p"
+        "p",
+        null,
+        notification
       );
     }
 

client/src/components/bill-form/bill-form.lines.component.jsx

@@ -473,7 +473,7 @@ export function BillEnterModalLinesComponent({
                 valuePropName: "checked",
                 initialValue: InstanceRenderManager({
                   imex: true,
-                  rome: false,
+                  rome: false
                 }),
                 name: [field.name, "applicable_taxes", "federal"]
               };
@@ -625,11 +625,15 @@ const EditableCell = ({
   wrapper,
   ...restProps
 }) => {
+  const propsFinal = formItemProps && formItemProps(record);
+  if (propsFinal && "key" in propsFinal) {
+    delete propsFinal.key;
+  }
   if (additional)
     return (
       <td {...restProps}>
         <div size="small">
-          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...(formItemProps && formItemProps(record))}>
+          <Form.Item name={dataIndex} labelCol={{ span: 0 }} {...propsFinal}>
             {(formInput && formInput(record, record.name)) || children}
           </Form.Item>
           {additional && additional(record, record.name)}
@@ -640,7 +644,7 @@ const EditableCell = ({
     return (
       <wrapper>
         <td {...restProps}>
-          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...(formItemProps && formItemProps(record))}>
+          <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
             {(formInput && formInput(record, record.name)) || children}
           </Form.Item>
         </td>
@@ -648,7 +652,7 @@ const EditableCell = ({
     );
   return (
     <td {...restProps}>
-      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...(formItemProps && formItemProps(record))}>
+      <Form.Item labelCol={{ span: 0 }} name={dataIndex} {...propsFinal}>
         {(formInput && formInput(record, record.name)) || children}
       </Form.Item>
     </td>

client/src/components/bill-mark-exported-button/bill-mark-exported-button.component.jsx

@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { selectAuthLevel, selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function BillMarkExportedButton({ currentUser, bodyshop, authLevel, bill
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const [updateBill] = useMutation(gql`
     mutation UPDATE_BILL($billId: uuid!) {

client/src/components/bill-print-button/bill-print-button.component.jsx

@@ -3,11 +3,13 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function BillPrintButton({ billid }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const Templates = TemplateList("job_special");
+  const notification = useNotification();
 
   const submitHandler = async () => {
     setLoading(true);
@@ -20,7 +22,9 @@ export default function BillPrintButton({ billid }) {
           }
         },
         {},
-        "p"
+        "p",
+        null,
+        notification
       );
     } catch (e) {
       console.warn("Warning: Error generating a document.");

client/src/components/bill-reexport-button/bill-reexport-button.component.jsx

@@ -1,5 +1,5 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectAuthLevel, selectBodyshop } from "../../redux/user/user.selectors";
 import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -21,6 +22,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(BillMarkForReexportB
 export function BillMarkForReexportButton({ bodyshop, authLevel, bill }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const [updateBill] = useMutation(gql`
     mutation UPDATE_BILL($billId: uuid!) {

client/src/components/billline-add-inventory/billline-add-inventory.component.jsx

@@ -1,6 +1,6 @@
 import { FileAddFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Tooltip } from "antd";
+import { Button, Tooltip } from "antd";
 import { t } from "i18next";
 import dayjs from "./../../utils/day";
 import React, { useState } from "react";
@@ -11,6 +11,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { CalculateBillTotal } from "../bill-form/bill-form.totals.utility";
 import queryString from "query-string";
 import { useLocation } from "react-router-dom";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,6 +26,7 @@ export function BilllineAddInventory({ currentUser, bodyshop, billline, disabled
   const [loading, setLoading] = useState(false);
   const { billid } = queryString.parse(useLocation().search);
   const [insertInventoryLine] = useMutation(INSERT_INVENTORY_AND_CREDIT);
+  const notification = useNotification();
 
   const addToInventory = async () => {
     setLoading(true);

client/src/components/ca-bc-etf-table-modal/ca-bc-etf-table-modal.container.jsx

@@ -9,6 +9,7 @@ import { selectCaBcEtfTableConvert } from "../../redux/modals/modals.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import CaBcEtfTableModalComponent from "./ca-bc-etf-table.modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   caBcEtfTableModal: selectCaBcEtfTableConvert
@@ -25,6 +26,7 @@ export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisi
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const EtfTemplate = TemplateList("special").ca_bc_etf_table;
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     logImEXEvent("ca_bc_etf_table_parse");
@@ -53,7 +55,9 @@ export function ContractsFindModalContainer({ caBcEtfTableModal, toggleModalVisi
         }
       },
       {},
-      values.sendby === "email" ? "e" : "p"
+      values.sendby === "email" ? "e" : "p",
+      null,
+      notification
     );
     setLoading(false);
   };

client/src/components/card-payment-modal/card-payment-modal.component.jsx

@@ -1,6 +1,6 @@
 import { CopyFilled, DeleteFilled } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Col, Form, Input, message, notification, Row, Space, Spin, Statistic } from "antd";
+import { Button, Card, Col, Form, Input, message, Row, Space, Spin, Statistic } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +15,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobSearchSelectComponent from "../job-search-select/job-search-select.component";
 import { getCurrentUser } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   cardPaymentModal: selectCardPayment,
@@ -48,6 +49,7 @@ const CardPaymentModalComponent = ({
   const [loading, setLoading] = useState(false);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const [, { data, refetch, queryLoading }] = useLazyQuery(QUERY_RO_AND_OWNER_BY_JOB_PKS, {
     variables: { jobids: [context.jobid] },

client/src/components/chat-label/chat-label.component.jsx

@@ -1,6 +1,6 @@
 import { PlusOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Input, notification, Spin, Tag, Tooltip } from "antd";
+import { Input, Spin, Tag, Tooltip } from "antd";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_CONVERSATION_LABEL } from "../../graphql/conversations.queries";
@@ -8,6 +8,7 @@ import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors.js";
 import { connect } from "react-redux";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export function ChatLabel({ conversation, bodyshop }) {
   const [editing, setEditing] = useState(false);
   const [value, setValue] = useState(conversation.label);
   const { socket } = useContext(SocketContext);
+  const notification = useNotification();
 
   const { t } = useTranslation();
   const [updateLabel] = useMutation(UPDATE_CONVERSATION_LABEL);

client/src/components/chat-open-button/chat-open-button.component.jsx

@@ -1,4 +1,3 @@
-import { notification } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import React, { useContext } from "react";
 import { useTranslation } from "react-i18next";
@@ -10,6 +9,7 @@ import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { searchingForConversation } from "../../redux/messaging/messaging.selectors";
 import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -23,6 +23,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ChatOpenButton({ bodyshop, searchingForConversation, phone, jobid, openChatByPhone }) {
   const { t } = useTranslation();
   const { socket } = useContext(SocketContext);
+  const notification = useNotification();
 
   if (!phone) return <></>;
 

client/src/components/chat-print-button/chat-print-button.component.jsx

@@ -6,6 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { setEmailOptions } from "../../redux/email/email.actions";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({});
 
@@ -15,6 +16,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function ChatPrintButton({ conversation }) {
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const generateDocument = (type) => {
     setLoading(true);
@@ -27,7 +29,8 @@ export function ChatPrintButton({ conversation }) {
         subject: TemplateList("messaging").conversation_list.subject
       },
       type,
-      conversation.id
+      conversation.id,
+      notification
     ).catch((e) => {
       console.warn("Something went wrong generating a document.");
     });

client/src/components/contract-convert-to-ro/contract-convert-to-ro.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, InputNumber, notification, Popover, Radio, Select, Space } from "antd";
+import { Button, Form, InputNumber, Popover, Radio, Select, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
 import React, { useState } from "react";
@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import { INSERT_NEW_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -25,6 +26,7 @@ export function ContractConvertToRo({ bodyshop, currentUser, contract, disabled
   const [loading, setLoading] = useState(false);
   const [insertJob] = useMutation(INSERT_NEW_JOB);
   const history = useNavigate();
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     setLoading(true);

client/src/components/contract-form/contract-form-job-prefill.component.jsx

@@ -1,12 +1,14 @@
 import { useLazyQuery } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { GET_JOB_FOR_CC_CONTRACT } from "../../graphql/jobs.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function ContractCreateJobPrefillComponent({ jobId, form }) {
   const [call, { loading, error, data }] = useLazyQuery(GET_JOB_FOR_CC_CONTRACT);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const handleClick = () => {
     call({ variables: { id: jobId } });

client/src/components/courtesy-car-return-modal/courtesy-car-return-modal.container.jsx

@@ -1,4 +1,4 @@
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import CourtesyCarReturnModalComponent from "./courtesy-car-return-modal.compone
 import dayjs from "../../utils/day";
 import { RETURN_CONTRACT } from "../../graphql/cccontracts.queries";
 import { useMutation } from "@apollo/client";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   courtesyCarReturnModal: selectCourtesyCarReturn,
@@ -26,6 +27,8 @@ export function CCReturnModalContainer({ courtesyCarReturnModal, toggleModalVisi
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [updateContract] = useMutation(RETURN_CONTRACT);
+  const notification = useNotification();
+
   const handleFinish = (values) => {
     setLoading(true);
     updateContract({

client/src/components/courtesy-cars-list/courtesy-cars-list.component.jsx

@@ -10,6 +10,7 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import { alphaSort } from "../../utils/sorters";
 import useLocalStorage from "../../utils/useLocalStorage";
 import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [state, setState] = useState({
@@ -18,6 +19,7 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
   const [searchText, setSearchText] = useState("");
   const [filter, setFilter] = useLocalStorage("filter_courtesy_cars_list", null);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const columns = [
     {
@@ -64,8 +66,8 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
         },
         {
           text: t("courtesycars.status.unavailable"),
-          value: "courtesycars.status.unavailable",
+          value: "courtesycars.status.unavailable"
-        },
+        }
       ],
       onFilter: (value, record) => record.status === value,
       sortOrder: state.sortedInfo.columnKey === "status" && state.sortedInfo.order,
@@ -239,7 +241,9 @@ export default function CourtesyCarsList({ loading, courtesycars, refetch }) {
             }
           },
           {},
-          "p"
+          "p",
+          null,
+          notification
         )
     }
   ];

client/src/components/dashboard-grid/dashboard-grid.component.jsx

@@ -1,6 +1,6 @@
 import Icon, { SyncOutlined } from "@ant-design/icons";
 import { gql, useMutation, useQuery } from "@apollo/client";
-import { Button, Dropdown, notification, Space } from "antd";
+import { Button, Dropdown, Space } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 import i18next from "i18next";
 import _ from "lodash";
@@ -46,6 +46,7 @@ import JobLifecycleDashboardComponent, {
 } from "../dashboard-components/job-lifecycle/job-lifecycle-dashboard.component";
 import "./dashboard-grid.styles.scss";
 import { GenerateDashboardData } from "./dashboard-grid.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const ResponsiveReactGridLayout = WidthProvider(Responsive);
 
@@ -64,6 +65,7 @@ export function DashboardGridComponent({ currentUser, bodyshop }) {
       ? bodyshop.associations[0].user.dashboardlayout
       : { items: [], layout: {}, layouts: [] })
   });
+  const notification = useNotification();
 
   const { loading, error, data, refetch } = useQuery(createDashboardQuery(state), {
     fetchPolicy: "network-only",

client/src/components/document-editor/document-editor.component.jsx

@@ -9,6 +9,7 @@ import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selecto
 import { handleUpload } from "../documents-upload/documents-upload.utility";
 import { GenerateSrcUrl } from "../jobs-documents-gallery/job-documents.utility";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -24,6 +25,7 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
   const [uploaded, setuploaded] = useState(false);
   const markerArea = useRef(null);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const triggerUpload = useCallback(
     async (dataUrl) => {
@@ -45,10 +47,11 @@ export function DocumentEditorComponent({ currentUser, bodyshop, document }) {
           //billId: billId,
           tagsArray: ["edited"]
           //callback: callbackAfterUpload,
-        }
+        },
+        notification
       );
     },
-    [bodyshop, currentUser, document]
+    [bodyshop, currentUser, document, notification]
   );
 
   useEffect(() => {

client/src/components/documents-local-upload/documents-local-upload.component.jsx

@@ -9,6 +9,7 @@ import { handleUpload } from "./documents-local-upload.utility";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -27,6 +28,8 @@ export function DocumentsLocalUploadComponent({
 }) {
   const [fileList, setFileList] = useState([]);
   const { t } = useTranslation();
+  const notification = useNotification();
+
   const handleDone = (uid) => {
     setTimeout(() => {
       setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
@@ -53,7 +56,8 @@ export function DocumentsLocalUploadComponent({
             vendorid,
             invoice_number,
             callback: callbackAfterUpload
-          }
+          },
+          notification
         })
       }
       {...(!allowAllTypes && {

client/src/components/documents-local-upload/documents-local-upload.utility.js

@@ -2,10 +2,9 @@ import cleanAxios from "../../utils/CleanAxios";
 import { store } from "../../redux/store";
 import { addMediaForJob } from "../../redux/media/media.actions";
 import normalizeUrl from "normalize-url";
-import { notification } from "antd";
 import i18n from "i18next";
 
-export const handleUpload = async ({ ev, context }) => {
+export const handleUpload = async ({ ev, context, notification }) => {
   const { onError, onSuccess, onProgress, file } = ev;
   const { jobid, invoice_number, vendorid, callbackAfterUpload } = context;
 
@@ -43,11 +42,15 @@ export const handleUpload = async ({ ev, context }) => {
     }
   } else {
     onSuccess && onSuccess(file);
-    notification.open({
+    if (notification) {
-      type: "success",
+      notification.open({
-      key: "docuploadsuccess",
+        type: "success",
-      message: i18n.t("documents.successes.insert")
+        key: "docuploadsuccess",
-    });
+        message: i18n.t("documents.successes.insert")
+      });
+    } else {
+      console.error("No notification context found in document local upload utility.");
+    }
     store.dispatch(
       addMediaForJob({
         jobid,

client/src/components/documents-upload/documents-upload.component.jsx

@@ -1,5 +1,5 @@
 import { UploadOutlined } from "@ant-design/icons";
-import { notification, Progress, Result, Space, Upload } from "antd";
+import { Progress, Result, Space, Upload } from "antd";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import formatBytes from "../../utils/formatbytes";
 import { handleUpload } from "./documents-upload.utility";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -28,6 +29,7 @@ export function DocumentsUploadComponent({
 }) {
   const { t } = useTranslation();
   const [fileList, setFileList] = useState([]);
+  const notification = useNotification();
 
   const pct = useMemo(() => {
     return parseInt((totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100);
@@ -76,14 +78,18 @@ export function DocumentsUploadComponent({
         return true;
       }}
       customRequest={(ev) =>
-        handleUpload(ev, {
+        handleUpload(
-          bodyshop: bodyshop,
+          ev,
-          uploaded_by: currentUser.email,
+          {
-          jobId: jobId,
+            bodyshop: bodyshop,
-          billId: billId,
+            uploaded_by: currentUser.email,
-          tagsArray: tagsArray,
+            jobId: jobId,
-          callback: callbackAfterUpload
+            billId: billId,
-        })
+            tagsArray: tagsArray,
+            callback: callbackAfterUpload
+          },
+          notification
+        )
       }
       accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
       // showUploadList={false}

client/src/components/documents-upload/documents-upload.utility.js

@@ -1,4 +1,3 @@
-import { notification } from "antd";
 import axios from "axios";
 import i18n from "i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -14,7 +13,7 @@ import { store } from "../../redux/store";
 var cleanAxios = axios.create();
 cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);
 
-export const handleUpload = (ev, context) => {
+export const handleUpload = (ev, context, notification) => {
   logImEXEvent("document_upload", { filetype: ev.file.type });
 
   const { onError, onSuccess, onProgress } = ev;
@@ -24,10 +23,20 @@ export const handleUpload = (ev, context) => {
 
   let key = `${bodyshop.id}/${jobId}/${replaceAccents(fileName).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}`;
   let extension = fileName.split(".").pop();
-  uploadToCloudinary(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context);
+  uploadToCloudinary(key, extension, ev.file.type, ev.file, onError, onSuccess, onProgress, context, notification);
 };
 
-export const uploadToCloudinary = async (key, extension, fileType, file, onError, onSuccess, onProgress, context) => {
+export const uploadToCloudinary = async (
+  key,
+  extension,
+  fileType,
+  file,
+  onError,
+  onSuccess,
+  onProgress,
+  context,
+  notification
+) => {
   const { bodyshop, jobId, billId, uploaded_by, callback, tagsArray } = context;
 
   //Set variables for getting the signed URL.

client/src/components/email-overlay/email-overlay.container.jsx

@@ -1,4 +1,4 @@
-import { Button, Divider, Form, Modal, notification, Space } from "antd";
+import { Button, Divider, Form, Modal, Space } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { EmailSettings } from "../../utils/TemplateConstants";
 import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import EmailOverlayComponent from "./email-overlay.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   modalVisible: selectEmailVisible,
@@ -36,6 +37,7 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
     pdf: null
   });
   const [selectedMedia, setSelectedMedia] = useState([]);
+  const notification = useNotification();
 
   const defaultEmailFrom = {
     from: {
@@ -109,7 +111,14 @@ export function EmailOverlayContainer({ emailConfig, modalVisible, toggleEmailOv
   const render = async () => {
     logImEXEvent("email_render_template", { template: emailConfig.template });
     setLoading(true);
-    let { html, pdf, filename } = await RenderTemplate(emailConfig.template, bodyshop, true);
+    let { html, pdf, filename } = await RenderTemplate(
+      emailConfig.template,
+      bodyshop,
+      true,
+      false,
+      false,
+      notification
+    );
 
     const response = await axios.post("/render/inlinecss", {
       html: html,

client/src/components/email-test/email-test-component.jsx

@@ -8,6 +8,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import dayjs from "../../utils/day";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser
@@ -19,6 +20,7 @@ const mapDispatchToProps = (dispatch) => ({
 
 export function EmailTestComponent({ currentUser, setEmailOptions }) {
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const handleFinish = (values) => {
     GenerateDocument(
@@ -40,7 +42,9 @@ export function EmailTestComponent({ currentUser, setEmailOptions }) {
       {
         to: values.to
       },
-      values.email ? "e" : "p"
+      values.email ? "e" : "p",
+      null,
+      notification
     );
   };
 

client/src/components/eula/eula.component.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Button, Card, Checkbox, Col, Form, Input, Modal, notification, Row } from "antd";
+import { Button, Card, Checkbox, Col, Form, Input, Modal, Row } from "antd";
 import Markdown from "react-markdown";
 import { createStructuredSelector } from "reselect";
 import { selectCurrentEula, selectCurrentUser } from "../../redux/user/user.selectors";
@@ -12,6 +12,7 @@ import dayjs from "../../utils/day";
 
 import "./eula.styles.scss";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [formReady, setFormReady] = useState(false);
@@ -20,7 +21,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
   const [form] = Form.useForm();
   const markdownCardRef = useRef(null);
   const { t } = useTranslation();
-  const [api, contextHolder] = notification.useNotification();
+  const notification = useNotification();
 
   const handleScroll = useCallback(
     (e) => {
@@ -75,7 +76,7 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
       });
       acceptEula();
     } catch (err) {
-      api.error({
+      notification.error({
         message: t("eula.errors.acceptance.message"),
         description: t("eula.errors.acceptance.description"),
         placement: "bottomRight",
@@ -91,7 +92,6 @@ const Eula = ({ currentEula, currentUser, acceptEula }) => {
 
   return (
     <>
-      {contextHolder}
       <Modal
         title={t("eula.titles.modal")}
         className="eula-modal"

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

@@ -400,7 +400,8 @@ function Header({
           label: <Link to="/manage/jobs/new">{t("menus.header.newjob")}</Link>
         },
         {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider"
         },
         {
           key: "alljobs",
@@ -409,7 +410,8 @@ function Header({
           label: <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
         },
         {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider2"
         },
         {
           key: "productionlist",
@@ -432,7 +434,8 @@ function Header({
         },
 
         {
-          type: "divider"
+          type: "divider",
+          id: "header-jobs-divider3"
         },
         {
           key: "scoreboard",
@@ -556,6 +559,7 @@ function Header({
       children: [
         {
           key: "createTask",
+          id: "header-create-task",
           icon: <PlusCircleOutlined />,
           label: t("menus.header.create_task"),
           onClick: () => {
@@ -567,11 +571,13 @@ function Header({
         },
         {
           key: "mytasks",
+          id: "header-my-tasks",
           icon: <FaTasks />,
           label: <Link to="/manage/tasks/mytasks">{t("menus.header.my_tasks")}</Link>
         },
         {
           key: "all_tasks",
+          id: "header-all-tasks",
           icon: <FaTasks />,
           label: <Link to="/manage/tasks/alltasks">{t("menus.header.all_tasks")}</Link>
         }
@@ -667,6 +673,7 @@ function Header({
           ? [
               {
                 key: "rescue",
+                id: "header-rescue",
                 icon: <Icon component={CarFilled} />,
                 label: t("menus.header.rescueme"),
                 onClick: () => {
@@ -730,6 +737,7 @@ function Header({
       id: "header-recent",
       children: recentItems.map((i, idx) => ({
         key: idx,
+        id: `header-recent-${idx}`,
         label: <Link to={i.url}>{i.label}</Link>
       }))
     }

client/src/components/inventory-line-delete/inventory-line-delete.component.jsx

@@ -1,15 +1,17 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_INVENTORY_LINE } from "../../graphql/inventory.queries";
 import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function InventoryLineDelete({ inventoryline, disabled, refetch }) {
   const [loading, setLoading] = useState(false);
   const { t } = useTranslation();
   const [deleteInventoryLine] = useMutation(DELETE_INVENTORY_LINE);
+  const notification = useNotification();
 
   const handleDelete = async () => {
     setLoading(true);

client/src/components/inventory-upsert-modal/inventory-upsert-modal.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectInventoryUpsert } from "../../redux/modals/modals.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InventoryUpsertModal from "./inventory-upsert-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function InventoryUpsertModalContainer({ currentUser, bodyshop, inventory
   const { t } = useTranslation();
   const [insertInventory] = useMutation(INSERT_INVENTORY_LINE);
   const [updateInventoryLine] = useMutation(UPDATE_INVENTORY_LINE);
+  const notification = useNotification();
 
   const { open, context, actions } = inventoryUpsertModal;
   const { existingInventory } = context;

client/src/components/job-3rd-party-modal/job-3rd-party-modal.component.jsx

@@ -11,6 +11,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import VendorSearchSelect from "../vendor-search-select/vendor-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -30,6 +31,7 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+  const notification = useNotification();
 
   const showModal = () => {
     form.setFieldsValue({
@@ -59,7 +61,9 @@ export function Jobd3RdPartyModal({ bodyshop, jobId, job, technician }) {
         context: restVals
       },
       { subject: TemplateList("job_special").special_thirdpartypayer.subject },
-      sendtype
+      sendtype,
+      null,
+      notification
     );
   };
 

client/src/components/job-at-change/job-at-change.component.jsx

@@ -4,9 +4,10 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, notification } from "antd";
+import { Dropdown } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -18,6 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function JobAltTransportChange({ bodyshop, job }) {
   const [updateJob] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const onClick = async ({ key }) => {
     const result = await updateJob({

client/src/components/job-at-change/schedule-event.color.component.jsx

@@ -4,9 +4,10 @@ import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { Dropdown, notification } from "antd";
+import { Dropdown } from "antd";
 import { DownOutlined } from "@ant-design/icons";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -18,6 +19,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function ScheduleEventColor({ bodyshop, event }) {
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const onClick = async ({ key }) => {
     const result = await updateAppointment({

client/src/components/job-at-change/schedule-event.component.jsx

@@ -1,6 +1,6 @@
 import { AlertFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select, Space } from "antd";
+import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
 import queryString from "query-string";
 import React, { useContext, useState } from "react";
@@ -25,6 +25,7 @@ import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -51,6 +52,7 @@ export function ScheduleEventComponent({
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [title, setTitle] = useState(event.title);
   const { socket } = useContext(SocketContext);
+  const notification = useNotification();
 
   const blockContent = (
     <Space direction="vertical" wrap>
@@ -127,7 +129,9 @@ export function ScheduleEventComponent({
           <DataLabel label={t("jobs.fields.ownr_ph2")}>
             <ChatOpenButton phone={event.job && event.job.ownr_ph2} jobid={event.job.id} />
           </DataLabel>
-          <DataLabel hideIfNull label={t("jobs.fields.loss_of_use")}>{(event.job && event.job.loss_of_use) || ""}</DataLabel>
+          <DataLabel hideIfNull label={t("jobs.fields.loss_of_use")}>
+            {(event.job && event.job.loss_of_use) || ""}
+          </DataLabel>
           <DataLabel label={t("jobs.fields.alt_transport")}>
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
@@ -181,7 +185,8 @@ export function ScheduleEventComponent({
                         subject: Template.subject
                       },
                       "e",
-                      event.job && event.job.id
+                      event.job && event.job.id,
+                      notification
                     );
                   }
                 },

client/src/components/job-at-change/schedule-event.container.jsx

@@ -1,5 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { notification } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { useDispatch } from "react-redux";
@@ -9,12 +8,15 @@ import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import ScheduleEventComponent from "./schedule-event.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function ScheduleEventContainer({ bodyshop, event, refetch }) {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
   const handleCancel = async ({ id, lost_sale_reason }) => {
     logImEXEvent("schedule_cancel_appt");
 

client/src/components/job-at-change/schedule-event.note.component.jsx

@@ -1,6 +1,6 @@
 import { EditFilled, SaveFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Input, notification, Space } from "antd";
+import { Button, Input, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DataLabel from "../data-label/data-label.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -22,6 +23,7 @@ export function ScheduleEventNote({ event }) {
   const [loading, setLoading] = useState(false);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const toggleEdit = async () => {
     if (editing) {

client/src/components/job-calculate-totals/job-calculate-totals.component.jsx

@@ -1,11 +1,13 @@
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import Axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobCalculateTotals({ job, disabled, refetch }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const handleCalculate = async () => {
     try {

client/src/components/job-checklist/components/job-checklist-form/job-checklist-form.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, Input, notification, Switch } from "antd";
+import { Button, Card, Form, Input, Switch } from "antd";
 import queryString from "query-string";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -16,6 +16,7 @@ import AuditTrailMapping from "../../../../utils/AuditTrailMappings";
 import dayjs from "../../../../utils/day";
 import ConfigFormComponents from "../../../config-form-components/config-form-components.component";
 import DateTimePicker from "../../../form-date-time-picker/form-date-time-picker.component";
+import { useNotification } from "../../../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -32,6 +33,7 @@ export function JobChecklistForm({ insertAuditTrail, formItems, bodyshop, curren
   const [markAptArrived] = useMutation(MARK_APPOINTMENT_ARRIVED);
   const [markLatestAptArrived] = useMutation(MARK_LATEST_APPOINTMENT_ARRIVED);
   const [updateOwner] = useMutation(UPDATE_OWNER);
+  const notification = useNotification();
 
   const { jobId } = useParams();
   const history = useNavigate();

client/src/components/job-checklist/components/job-checklist-template-list/job-checklist-template-list.component.jsx

@@ -6,12 +6,14 @@ import { useParams } from "react-router-dom";
 import { logImEXEvent } from "../../../../firebase/firebase.utils";
 import { GenerateDocument, GenerateDocuments } from "../../../../utils/RenderTemplate";
 import { TemplateList } from "../../../../utils/TemplateConstants";
+import { useNotification } from "../../../../contexts/Notifications/notificationContext.jsx";
 const TemplateListGenerated = TemplateList();
 
 export default function JobIntakeTemplateList({ templates }) {
   const { jobId } = useParams();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const renderTemplate = async (templateKey) => {
     setLoading(true);
@@ -23,7 +25,9 @@ export default function JobIntakeTemplateList({ templates }) {
         variables: { id: jobId }
       },
       {},
-      "p"
+      "p",
+      null,
+      notification
     );
     setLoading(false);
   };
@@ -35,7 +39,8 @@ export default function JobIntakeTemplateList({ templates }) {
     await GenerateDocuments(
       templates.map((key) => {
         return { name: key, variables: { id: jobId } };
-      })
+      }),
+      notification
     );
     setLoading(false);
   };

client/src/components/job-create-iou/job-create-iou.component.jsx

@@ -1,6 +1,6 @@
 import { useApolloClient } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { UPDATE_JOB_LINES_IOU } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { CreateIouForJob } from "../jobs-detail-header-actions/jobs-detail-header-actions.duplicate.util";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -27,6 +28,7 @@ export function JobCreateIOU({ bodyshop, currentUser, job, selectedJobLines, tec
   const [loading, setLoading] = useState(false);
   const client = useApolloClient();
   const history = useNavigate();
+  const notification = useNotification();
 
   const {
     treatments: { IOU_Tracking }

client/src/components/job-detail-lines/job-lines-part-price-change.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Tooltip } from "antd";
+import { Button, Form, Popover, Tooltip } from "antd";
 import axios from "axios";
 import { t } from "i18next";
 import React, { useState } from "react";
@@ -11,6 +11,7 @@ import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import CurrencyFormItemComponent from "../form-items-formatted/currency-form-item.component";
 import JobLineConvertToLabor from "../job-line-convert-to-labor/job-line-convert-to-labor.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician
@@ -20,6 +21,7 @@ const mapDispatchToProps = (dispatch) => ({});
 export function JobLinesPartPriceChange({ job, line, refetch, technician }) {
   const [loading, setLoading] = useState(false);
   const [updatePartPrice] = useMutation(UPDATE_LINE_PPC);
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     try {

client/src/components/job-employee-assignments/job-employee-assignments.container.jsx

@@ -1,5 +1,4 @@
 import { useMutation } from "@apollo/client";
-import { notification } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -10,6 +9,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -23,6 +23,7 @@ export function JobEmployeeAssignmentsContainer({ job, refetch, insertAuditTrail
   const { t } = useTranslation();
   const [updateJob] = useMutation(UPDATE_JOB_ASSIGNMENTS);
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const handleAdd = async (assignment) => {
     setLoading(true);

client/src/components/job-line-bulk-assign/job-line-bulk-assign.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Space } from "antd";
+import { Button, Form, Popover, Select, Space } from "antd";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -10,6 +10,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -36,6 +37,7 @@ export function JoblineBulkAssign({
 
   const { t } = useTranslation();
   const [assignLines] = useMutation(UPDATE_LINE_BULK_ASSIGN);
+  const notification = useNotification();
 
   const handleConvert = async (values) => {
     try {

client/src/components/job-line-convert-to-labor/job-line-convert-to-labor.component.jsx

@@ -1,6 +1,6 @@
 import { ClockCircleOutlined } from "@ant-design/icons";
 import { useApolloClient } from "@apollo/client";
-import { Button, Card, Form, notification, Popover, Select, Space, Tooltip } from "antd";
+import { Button, Card, Form, Popover, Select, Space, Tooltip } from "antd";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -13,6 +13,7 @@ import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   technician: selectTechnician
@@ -29,6 +30,7 @@ export function JobLineConvertToLabor({ children, jobline, job, insertAuditTrail
   const [form] = Form.useForm();
   const [visibility, setVisibility] = useState(false);
   const client = useApolloClient();
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     const { mod_lbr_ty } = values;

client/src/components/job-line-dispatch-button/job-line-dispatch-button.component.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Select, Space } from "antd";
+import { Button, Form, Popover, Select, Space } from "antd";
 import dayjs from "../../utils/day";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,7 +26,6 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobLineDispatchButto
 export function JobLineDispatchButton({
   setSelectedLines,
   selectedLines,
-
   bodyshop,
   jobRO,
   job,
@@ -40,6 +40,7 @@ export function JobLineDispatchButton({
   });
   const { t } = useTranslation();
   const [dispatchLines] = useMutation(INSERT_PARTS_DISPATCH);
+  const notification = useNotification();
 
   const handleConvert = async (values) => {
     try {
@@ -80,7 +81,9 @@ export function JobLineDispatchButton({
             }
           },
           {},
-          "p"
+          "p",
+          null,
+          notification
         );
       }
       setVisible(false);

client/src/components/job-line-location-popup/job-line-location-popup.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { notification, Select, Space } from "antd";
+import { Select, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -22,6 +23,7 @@ export function JobLineLocationPopup({ bodyshop, jobline, disabled }) {
   const [location, setLocation] = useState(jobline.location);
   const [updateJob] = useMutation(UPDATE_JOB_LINE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   useEffect(() => {
     if (editing) setLocation(jobline.location);

client/src/components/job-line-note-popup/job-line-note-popup.component.jsx

@@ -1,10 +1,11 @@
 import { FieldTimeOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Input, notification } from "antd";
+import { Input } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobLineNotePopup({ jobline, disabled }) {
   const [editing, setEditing] = useState(false);
@@ -12,6 +13,7 @@ export default function JobLineNotePopup({ jobline, disabled }) {
   const [note, setNote] = useState(jobline.note);
   const [updateJob] = useMutation(UPDATE_JOB_LINE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   useEffect(() => {
     if (editing) setNote(jobline.notes);

client/src/components/job-line-status-popup/job-line-status-popup.component.jsx

@@ -1,4 +1,4 @@
-import { notification, Select } from "antd";
+import { Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB_LINE } from "../../graphql/jobs-lines.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -22,6 +23,7 @@ export function JobLineStatusPopup({ bodyshop, jobline, disabled }) {
   const [status, setStatus] = useState(jobline.status);
   const [updateJob] = useMutation(UPDATE_JOB_LINE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   useEffect(() => {
     if (editing) setStatus(jobline.status);

client/src/components/job-line-team-assignment/job-line-team-assignmnent.component.jsx

@@ -1,4 +1,4 @@
-import { notification, Select } from "antd";
+import { Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
@@ -9,6 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -24,6 +25,7 @@ export function JoblineTeamAssignment({ bodyshop, jobline, disabled, jobId, inse
   const [assignedTeam, setAssignedTeam] = useState(jobline.assigned_team);
   const [updateJob] = useMutation(UPDATE_JOB_LINE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   useEffect(() => {
     if (editing) setAssignedTeam(jobline.assigned_team);

client/src/components/job-lines-upsert-modal/job-lines-upsert-modal.container.jsx

@@ -1,6 +1,5 @@
 import { useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { notification } from "antd";
 import Axios from "axios";
 import Dinero from "dinero.js";
 import React, { useState } from "react";
@@ -14,6 +13,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CriticalPartsScan from "../../utils/criticalPartsScan";
 import UndefinedToNull from "../../utils/undefinedtonull";
 import JobLinesUpdsertModal from "./job-lines-upsert-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   jobLineEditModal: selectJobLineEditModal,
@@ -31,6 +31,7 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
     names: ["CriticalPartsScanning"],
     splitKey: bodyshop.imexshopid
   });
+  const notification = useNotification();
 
   const { t } = useTranslation();
   const [insertJobLine] = useMutation(INSERT_NEW_JOB_LINE);
@@ -115,7 +116,7 @@ function JobLinesUpsertModalContainer({ jobLineEditModal, toggleModalVisible, bo
       toggleModalVisible();
     }
     if (CriticalPartsScanning.treatment === "on") {
-      CriticalPartsScan(jobLineEditModal.context.jobid);
+      CriticalPartsScan(jobLineEditModal.context.jobid, notification);
     }
     setLoading(false);
   };

client/src/components/job-remove-from-parst-queue/job-remove-from-parts-queue.component.jsx

@@ -1,14 +1,15 @@
 import { useMutation } from "@apollo/client";
-import { Checkbox, notification, Space, Spin } from "antd";
+import { Checkbox, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobRemoveFromPartsQueue({ checked, jobId }) {
   const [updateJob] = useMutation(UPDATE_JOB);
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const handleChange = async (e) => {
     setLoading(true);

client/src/components/job-scoreboard-add-button/job-scoreboard-add-button.component.jsx

@@ -1,6 +1,6 @@
 import { CheckCircleOutlined } from "@ant-design/icons";
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Button, Card, Form, InputNumber, notification, Popover, Space } from "antd";
+import { Button, Card, Form, InputNumber, Popover, Space } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -17,6 +17,7 @@ import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component.j
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -33,6 +34,7 @@ export function ScoreboardAddButton({ bodyshop, job, disabled, ...otherBtnProps
   const [form] = Form.useForm();
   const [visibility, setVisibility] = useState(false);
   const [callQuery, { loading: entryLoading, data: entryData }] = useLazyQuery(QUERY_SCOREBOARD_ENTRY);
+  const notification = useNotification();
 
   useEffect(() => {
     if (visibility) {

client/src/components/job-send-parts-price-change/job-send-parts-price-change.component.jsx

@@ -1,11 +1,14 @@
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobSendPartPriceChangeComponent({ job, disabled }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
+
   const handleClick = async () => {
     setLoading(true);
     try {

client/src/components/job-totals-table/jobs-totals.cash-discount-display.component.jsx

@@ -1,4 +1,4 @@
-import { notification, Spin } from "antd";
+import { Spin } from "antd";
 import axios from "axios";
 import Dinero from "dinero.js";
 import React, { useCallback, useEffect, useState } from "react";
@@ -6,6 +6,8 @@ import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
 });
@@ -15,6 +17,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobTotalsCashDiscoun
 export function JobTotalsCashDiscount({ bodyshop, amountDinero }) {
   const [loading, setLoading] = useState(true);
   const [fee, setFee] = useState(0);
+  const notification = useNotification();
 
   const fetchData = useCallback(async () => {
     if (amountDinero && bodyshop) {
@@ -47,7 +50,7 @@ export function JobTotalsCashDiscount({ bodyshop, amountDinero }) {
         setLoading(false);
       }
     }
-  }, [amountDinero, bodyshop]);
+  }, [amountDinero, bodyshop, notification]);
 
   useEffect(() => {
     fetchData();

client/src/components/jobs-admin-change-status/jobs-admin-change.status.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, notification } from "antd";
+import { Button, Dropdown } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import { UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsAdminStatus);
 
 export function JobsAdminStatus({ insertAuditTrail, bodyshop, job }) {
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
   const updateJobStatus = (status) => {

client/src/components/jobs-admin-class/jobs-admin-class.component.jsx

@@ -1,11 +1,12 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popconfirm, Select } from "antd";
+import { Button, Form, Popconfirm, Select } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export function JobsAdminClass({ bodyshop, job }) {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     setLoading(true);

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { DateTimeFormat } from "./../../utils/DateFormatter";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -36,6 +37,7 @@ export function JobsAdminDatesChange({ insertAuditTrail, job }) {
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     setLoading(true);

client/src/components/jobs-admin-delete-intake/jobs-admin-delete-intake.component.jsx

@@ -1,13 +1,15 @@
 import { useMutation } from "@apollo/client";
-import { Button, Space, notification } from "antd";
+import { Button, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { DELETE_DELIVERY_CHECKLIST, DELETE_INTAKE_CHECKLIST } from "../../graphql/jobs.queries";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobAdminDeleteIntake({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const [deleteIntake] = useMutation(DELETE_INTAKE_CHECKLIST);
   const [deleteDelivery] = useMutation(DELETE_DELIVERY_CHECKLIST);
@@ -50,7 +52,7 @@ export default function JobAdminDeleteIntake({ job }) {
 
   const InstanceRender = InstanceRenderManager({
     imex: true,
-    rome: "USE_IMEX",
+    rome: "USE_IMEX"
   });
 
   return InstanceRender ? (

client/src/components/jobs-admin-mark-reexport/jobs-admin-mark-reexport.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Space, notification } from "antd";
+import { Button, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import dayjs from "../../utils/day";
@@ -10,6 +10,7 @@ import { MARK_JOB_AS_EXPORTED, MARK_JOB_AS_UNINVOICED, MARK_JOB_FOR_REEXPORT } f
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -24,6 +25,7 @@ export function JobAdminMarkReexport({ insertAuditTrail, bodyshop, currentUser,
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const [markJobForReexport] = useMutation(MARK_JOB_FOR_REEXPORT);
   const [markJobExported] = useMutation(MARK_JOB_AS_EXPORTED);

client/src/components/jobs-admin-owner-reassociate/jobs-admin-owner-reassociate.component.jsx

@@ -1,15 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import OwnerSearchSelect from "../owner-search-select/owner-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobAdminOwnerReassociate({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
   const handleFinish = async (values) => {
     setLoading(true);
     const result = await updateJob({

client/src/components/jobs-admin-remove-ar/jobs-admin-remove-ar.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { notification, Switch } from "antd";
+import { Switch } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -7,6 +7,7 @@ import { createStructuredSelector } from "reselect";
 import { UPDATE_REMOVE_FROM_AR } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({});
 const mapDispatchToProps = (dispatch) => ({
@@ -19,6 +20,7 @@ export function JobsAdminRemoveAR({ insertAuditTrail, job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [switchValue, setSwitchValue] = useState(job.remove_from_ar);
+  const notification = useNotification();
 
   const [mutationUpdateRemoveFromAR] = useMutation(UPDATE_REMOVE_FROM_AR);
 

client/src/components/jobs-admin-unvoid/jobs-admin-unvoid.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +8,7 @@ import { UNVOID_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -22,6 +23,7 @@ export function JobsAdminUnvoid({ insertAuditTrail, bodyshop, job, currentUser }
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [mutationUnvoidJob] = useMutation(UNVOID_JOB);
+  const notification = useNotification();
 
   const handleUpdate = async (values) => {
     setLoading(true);

client/src/components/jobs-admin-vehicle-reassociate/jobs-admin-vehicle-reassociate.component.jsx

@@ -1,15 +1,18 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification } from "antd";
+import { Button, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import VehicleSearchSelect from "../vehicle-search-select/vehicle-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function JobAdminOwnerReassociate({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [updateJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
+
   const handleFinish = async (values) => {
     setLoading(true);
     const result = await updateJob({

client/src/components/jobs-available-scan/jobs-available-scan.component.jsx

@@ -1,5 +1,5 @@
 import { DownloadOutlined, SyncOutlined } from "@ant-design/icons";
-import { Button, Card, Input, notification, Space, Table } from "antd";
+import { Button, Card, Input, Space, Table } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectPartnerVersion } from "../../redux/application/application.selectors";
 import { alphaSort } from "../../utils/sorters";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -26,6 +27,7 @@ export function JobsAvailableScan({ partnerVersion, refetch }) {
     filteredInfo: { text: "" }
   });
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });

client/src/components/jobs-available-table/jobs-available-table.component.jsx

@@ -1,6 +1,6 @@
 import { DeleteFilled, DownloadOutlined, PlusCircleFilled, SyncOutlined } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Alert, Button, Card, Input, notification, Space, Table } from "antd";
+import { Alert, Button, Card, Input, Space, Table } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { TimeAgoFormatter } from "../../utils/DateFormatter";
 import { alphaSort } from "../../utils/sorters";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -29,6 +30,7 @@ export function JobsAvailableComponent({ bodyshop, loading, data, refetch, addJo
     sortedInfo: {},
     filteredInfo: { text: "" }
   });
+  const notification = useNotification();
 
   const handleTableChange = (pagination, filters, sorter) => {
     setState({ ...state, filteredInfo: filters, sortedInfo: sorter });

client/src/components/jobs-available-table/jobs-available-table.container.jsx

@@ -1,6 +1,6 @@
 import { gql, useApolloClient, useLazyQuery, useMutation, useQuery } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Col, Row, notification } from "antd"; //import { Button, Col, Row, notification } from "antd";
+import { Col, Row } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
@@ -33,6 +33,7 @@ import OwnerFindModalContainer from "../owner-find-modal/owner-find-modal.contai
 import { GetSupplementDelta } from "./jobs-available-supplement.estlines.util";
 import HeaderFields from "./jobs-available-supplement.headerfields";
 import JobsAvailableTableComponent from "./jobs-available-table.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -50,6 +51,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
     names: ["CriticalPartsScanning"],
     splitKey: bodyshop.imexshopid
   });
+  const notification = useNotification();
 
   const { loading, error, data, refetch } = useQuery(QUERY_AVAILABLE_JOBS, {
     fetchPolicy: "network-only",
@@ -175,7 +177,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
       });
 
       if (CriticalPartsScanning.treatment === "on") {
-        CriticalPartsScan(r.data.insert_jobs.returning[0].id);
+        CriticalPartsScan(r.data.insert_jobs.returning[0].id, notification);
       }
       notification["success"]({
         message: t("jobs.successes.created"),
@@ -277,7 +279,7 @@ export function JobsAvailableContainer({ bodyshop, currentUser, insertAuditTrail
       setPartsQueueToggle(bodyshop.md_functionality_toggles.parts_queue_toggle);
 
       if (CriticalPartsScanning.treatment === "on") {
-        CriticalPartsScan(updateResult.data.update_jobs.returning[0].id);
+        CriticalPartsScan(updateResult.data.update_jobs.returning[0].id, notification);
       }
       if (updateResult.errors) {
         //error while inserting

client/src/components/jobs-change-status/jobs-change-status.component.jsx

@@ -1,6 +1,6 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useMutation } from "@apollo/client";
-import { Button, Dropdown, notification } from "antd";
+import { Button, Dropdown } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -25,6 +26,8 @@ export function JobsChangeStatus({ job, bodyshop, jobRO, insertAuditTrail }) {
   const [availableStatuses, setAvailableStatuses] = useState([]);
   const [otherStages, setOtherStages] = useState([]);
   const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
+  const notification = useNotification();
+
   const updateJobStatus = (status) => {
     mutationUpdateJobstatus({
       variables: { jobId: job.id, status: status }

client/src/components/jobs-close-export-button/jobs-close-export-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -48,6 +49,7 @@ export function JobsCloseExportButton({
   const [updateJob] = useMutation(UPDATE_JOB);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const handleQbxml = async () => {
     //Check if it's a CDK setup.

client/src/components/jobs-convert-button/jobs-convert-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, Input, notification, Popover, Select, Space, Switch } from "antd";
+import { Button, Form, Input, Popover, Select, Space, Switch } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +11,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -27,6 +28,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
   const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const handleConvert = async ({ employee_csr, category, ...values }) => {
     if (parentFormIsFieldsTouched()) {

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.addtoproduction.util.jsx

@@ -1,4 +1,3 @@
-import { notification } from "antd";
 import i18n from "i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
@@ -6,7 +5,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { store } from "../../redux/store";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 
-export default function AddToProduction(apolloClient, jobId, completionCallback, remove = false) {
+export default function AddToProduction(apolloClient, jobId, completionCallback, remove = false, notification) {
   logImEXEvent("job_add_to_production");
 
   //get a list of all fields on the job

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

@@ -1,7 +1,7 @@
 import { DownCircleFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation } from "@apollo/client";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
-import { Button, Card, Dropdown, Form, Input, Modal, notification, Popconfirm, Popover, Select, Space } from "antd";
+import { Button, Card, Dropdown, Form, Input, Modal, Popconfirm, Popover, Select, Space } from "antd";
 import axios from "axios";
 import parsePhoneNumber from "libphonenumber-js";
 import React, { useContext, useMemo, useState } from "react";
@@ -31,6 +31,7 @@ import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
 import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
 import JobsDetailHeaderActionsToggleProduction from "./jobs-detail-header-actions.toggle-production";
 import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -128,6 +129,7 @@ export function JobsDetailHeaderActions({
   const [voidJob] = useMutation(VOID_JOB);
   const [cancelAllAppointments] = useMutation(CANCEL_APPOINTMENTS_BY_JOB_ID);
   const { socket } = useContext(SocketContext);
+  const notification = useNotification();
 
   const {
     treatments: { ImEXPay }
@@ -822,14 +824,14 @@ export function JobsDetailHeaderActions({
           id: "job-actions-removefromproduction",
           disabled: !job.converted,
           label: t("jobs.actions.removefromproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch, true)
+          onClick: () => AddToProduction(client, job.id, refetch, true, notification)
         }
       : {
           key: "addtoproduction",
           id: "job-actions-addtoproduction",
           disabled: !job.converted,
           label: t("jobs.actions.addtoproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch)
+          onClick: () => AddToProduction(client, job.id, refetch, notification)
         }
   );
 

client/src/components/jobs-detail-header-actions/jobs-detail-header-actions.toggle-production.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Space } from "antd";
+import { Button, Form, Popover, Space } from "antd";
 import dayjs from "dayjs";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -12,6 +12,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser,
@@ -28,6 +29,7 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
   const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   useEffect(() => {
     //Figure out what scenario were in, populate accodingly

client/src/components/jobs-documents-gallery/jobs-document-gallery.reassign.component.jsx

@@ -1,5 +1,5 @@
 import { useApolloClient } from "@apollo/client";
-import { Button, Form, notification, Popover, Space } from "antd";
+import { Button, Form, Popover, Space } from "antd";
 import axios from "axios";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import { createStructuredSelector } from "reselect";
 import { GET_DOC_SIZE_BY_JOB } from "../../graphql/documents.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobSearchSelect from "../job-search-select/job-search-select.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -20,6 +21,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsGallery
 export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages, callback }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const selectedImages = useMemo(() => {
     return [

client/src/components/jobs-documents-gallery/jobs-documents-gallery.delete.component.jsx

@@ -1,13 +1,15 @@
 import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
 export default function JobsDocumentsDeleteButton({ galleryImages, deletionCallback }) {
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const imagesToDelete = [
     ...galleryImages.images.filter((image) => image.isSelected),

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.delete.component.jsx

@@ -1,5 +1,5 @@
 import { QuestionCircleOutlined } from "@ant-design/icons";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
@@ -10,6 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { getJobMedia } from "../../redux/media/media.actions";
 import { selectAllMedia } from "../../redux/media/media.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   allMedia: selectAllMedia,
@@ -23,6 +24,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsLocalDe
 
 export function JobsDocumentsLocalDeleteButton({ bodyshop, getJobMedia, allMedia, jobid }) {
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const [loading, setLoading] = useState(false);
 

client/src/components/jobs-export-all-button/jobs-export-all-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
@@ -13,6 +13,7 @@ import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -47,6 +48,7 @@ export function JobsExportAllButton({
   const { t } = useTranslation();
   const [updateJob] = useMutation(UPDATE_JOBS);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const [loading, setLoading] = useState(false);
   const handleQbxml = async () => {

client/src/components/jobs-mark-selected-exported/jobs-mark-selected-exported.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import { UPDATE_JOBS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -35,6 +36,7 @@ export function JobMarkSelectedExported({
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const [updateJob] = useMutation(UPDATE_JOBS);
   const handleUpdate = async () => {

client/src/components/jobs-notes/jobs-notes.container.jsx

@@ -1,5 +1,4 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { notification } from "antd";
 import React, { useState } from "react";
 //import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
 import { useTranslation } from "react-i18next";
@@ -11,6 +10,7 @@ import { DELETE_NOTE, QUERY_NOTES_BY_JOB_PK } from "../../graphql/notes.queries"
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import JobNotesComponent from "./jobs.notes.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -30,6 +30,8 @@ export function JobNotesContainer({ jobId, insertAuditTrail }) {
   const [deleteNote] = useMutation(DELETE_NOTE);
   const { t } = useTranslation();
   const [deleteLoading, setDeleteLoading] = useState(false);
+  const notification = useNotification();
+
   const handleNoteDelete = (id) => {
     logImEXEvent("job_note_delete");
     setDeleteLoading(true);

client/src/components/labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, InputNumber, notification, Popover, Select } from "antd";
+import { Button, Card, Form, InputNumber, Popover, Select } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
@@ -8,6 +8,7 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -29,6 +30,7 @@ export function LaborAllocationsAdjustmentEdit({
   const [open, setOpen] = useState(false);
   const [updateAdjustments] = useMutation(UPDATE_JOB);
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const { t } = useTranslation();
 

client/src/components/labor-allocations-table/labor-allocations-table.payroll.component.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Card, Col, notification, Row, Space, Table, Typography } from "antd";
+import { Alert, Button, Card, Col, Row, Space, Table, Typography } from "antd";
 import { SyncOutlined } from "@ant-design/icons";
 import axios from "axios";
 import _ from "lodash";
@@ -13,6 +13,7 @@ import "./labor-allocations-table.styles.scss";
 import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -40,6 +41,7 @@ export function PayrollLaborAllocationsTable({
     },
     filteredInfo: {}
   });
+  const notification = useNotification();
 
   useEffect(() => {
     async function CalculateTotals() {

client/src/components/note-upsert-modal/note-upsert-modal.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -12,6 +12,7 @@ import { selectNoteUpsert } from "../../redux/modals/modals.selectors";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import NoteUpsertModalComponent from "./note-upsert-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -26,6 +27,7 @@ export function NoteUpsertModalContainer({ currentUser, noteUpsertModal, toggleM
   const { t } = useTranslation();
   const [insertNote] = useMutation(INSERT_NEW_NOTE);
   const [updateNote] = useMutation(UPDATE_NOTE);
+  const notification = useNotification();
 
   const { open, context, actions } = noteUpsertModal;
   const { jobId, existingNote, text } = context;

client/src/components/owner-detail-form/owner-detail-form.container.jsx

@@ -1,4 +1,4 @@
-import { Button, Form, notification, Popconfirm } from "antd";
+import { Button, Form, Popconfirm } from "antd";
 import { PageHeader } from "@ant-design/pro-layout";
 
 import React, { useState } from "react";
@@ -7,6 +7,7 @@ import { useMutation } from "@apollo/client";
 import { useTranslation } from "react-i18next";
 import { DELETE_OWNER, UPDATE_OWNER } from "../../graphql/owners.queries";
 import OwnerDetailFormComponent from "./owner-detail-form.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 function OwnerDetailFormContainer({ owner, refetch }) {
   const { t } = useTranslation();
@@ -15,6 +16,7 @@ function OwnerDetailFormContainer({ owner, refetch }) {
   const [loading, setLoading] = useState(false);
   const [updateOwner] = useMutation(UPDATE_OWNER);
   const [deleteOwner] = useMutation(DELETE_OWNER);
+  const notification = useNotification();
 
   const handleDelete = async () => {
     setLoading(true);

client/src/components/owner-detail-update-jobs/owner-detail-update-jobs.component.jsx

@@ -1,13 +1,16 @@
 import React from "react";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 import { useMutation } from "@apollo/client";
 import { UPDATE_JOBS } from "../../graphql/jobs.queries";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function OwnerDetailUpdateJobsComponent({ owner, selectedJobs, disabled }) {
   const { t } = useTranslation();
   const [updateJobs] = useMutation(UPDATE_JOBS);
+  const notification = useNotification();
+
   const handlecClick = (e) => {
     logImEXEvent("owner_update_jobs", { count: selectedJobs.length });
 

client/src/components/parts-dispatch-expander/parts-dispatch-expander.component.jsx

@@ -1,14 +1,16 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Col, notification, Row, Table } from "antd";
+import { Button, Card, Col, Row, Table } from "antd";
 import dayjs from "../../utils/day";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_PARTS_DISPATCH_LINE } from "../../graphql/parts-dispatch.queries";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function PartsDispatchExpander({ dispatch, job }) {
   const { t } = useTranslation();
   const [updateDispatchLine] = useMutation(UPDATE_PARTS_DISPATCH_LINE);
+  const notification = useNotification();
 
   const handleAccept = async ({ partsDispatchLineId }) => {
     const accepted_at = dayjs();

client/src/components/parts-order-backorder-eta/parts-order-backorder-eta.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Spin } from "antd";
+import { Button, Form, Popover, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
 import { CalendarFilled } from "@ant-design/icons";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -28,6 +29,7 @@ export function PartsOrderBackorderEta({
   const [updateBoDate] = useMutation(MUTATION_UPDATE_BO_ETA);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const isAlreadyBackordered = bodyshop.md_order_statuses.default_bo === partsOrderStatus;
 

client/src/components/parts-order-cm-received/parts-order-cm-received.component.jsx

@@ -1,14 +1,16 @@
 import { useMutation } from "@apollo/client";
-import { Checkbox, notification, Space, Spin } from "antd";
+import { Checkbox, Space, Spin } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MUTATION_UPDATE_PO_CM_REECEIVED } from "../../graphql/parts-orders.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 export default function PartsOrderCmReceived({ checked, orderLineId, partsOrderId }) {
   const [updateLine] = useMutation(MUTATION_UPDATE_PO_CM_REECEIVED);
   const { t } = useTranslation();
 
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const handleChange = async (e) => {
     setLoading(true);

client/src/components/parts-order-line-backorder-button/parts-order-line-backorder-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover } from "antd";
+import { Button, Form, Popover } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,6 +8,7 @@ import { logImEXEvent } from "../../firebase/firebase.utils";
 import { MUTATION_BACKORDER_PART_LINE } from "../../graphql/parts-orders.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -19,6 +20,7 @@ export function PartsOrderLineBackorderButton({ partsOrderStatus, partsLineId, j
   const [backorderLine] = useMutation(MUTATION_BACKORDER_PART_LINE);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
 
   const isAlreadyBackordered = bodyshop.md_order_statuses.default_bo === partsOrderStatus;
 

client/src/components/parts-order-modal/parts-order-modal.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useApolloClient } from "@apollo/client";
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -24,6 +24,7 @@ import axios from "axios";
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import _ from "lodash";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -49,6 +50,7 @@ export function PartsOrderModalContainer({
 }) {
   const { t } = useTranslation();
   const client = useApolloClient();
+  const notification = useNotification();
 
   const {
     treatments: { OEConnection_PriceChange }
@@ -158,7 +160,7 @@ export function PartsOrderModalContainer({
             vendorid: bodyshop.inhousevendorid,
             invoice_number: "ih",
             isinhouse: true,
-            date:  dayjs(),
+            date: dayjs(),
             total: 0,
             billlines: values.parts_order_lines.data.map((p) => {
               return {
@@ -213,7 +215,8 @@ export function PartsOrderModalContainer({
               : Templates.sublet_order.subject
         },
         "e",
-        jobId
+        jobId,
+        notification
       );
     } else if (sendType === "p") {
       GenerateDocument(
@@ -228,7 +231,9 @@ export function PartsOrderModalContainer({
           }
         },
         {},
-        "p"
+        "p",
+        null,
+        notification
       );
     } else if (sendType === "oec") {
       //Send to Partner OEC.

client/src/components/parts-receive-modal/parts-receive-modal.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Form, Modal, notification } from "antd";
+import { Form, Modal } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -10,6 +10,7 @@ import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectPartsReceive } from "../../redux/modals/modals.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import PartsReceiveModalComponent from "./parts-receive-modal.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -24,6 +25,8 @@ const mapDispatchToProps = (dispatch) => ({
 export function PartsReceiveModalContainer({ partsReceiveModal, toggleModalVisible, currentUser, bodyshop }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
+
   const { open, context, actions } = partsReceiveModal;
   const { partsorderlines } = context;
 

client/src/components/payable-export-all-button/payable-export-all-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import _ from "lodash";
 import React, { useState } from "react";
@@ -12,6 +12,7 @@ import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_BILLS } from "../../graphql/bills.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -42,6 +43,7 @@ export function PayableExportAll({
   const [updateBill] = useMutation(UPDATE_BILLS);
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const handleQbxml = async () => {
     logImEXEvent("accounting_payables_export_all");

client/src/components/payable-export-button/payable-export-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +11,7 @@ import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_BILLS } from "../../graphql/bills.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -41,6 +42,7 @@ export function PayableExportButton({
   const [updateBill] = useMutation(UPDATE_BILLS);
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const handleQbxml = async () => {
     logImEXEvent("accounting_export_payable");

client/src/components/payable-mark-selected-exported/payable-mark-selected-exported.component.jsx

@@ -1,11 +1,12 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -41,6 +42,7 @@ export function BillMarkSelectedExported({
       }
     }
   `);
+  const notification = useNotification();
 
   const handleUpdate = async () => {
     setLoading(true);

client/src/components/payment-expanded-row/payment-expanded-row.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Button, Descriptions, InputNumber, Modal, notification, Space } from "antd";
+import { Button, Descriptions, InputNumber, Modal, Space } from "antd";
 import axios from "axios";
 import dayjs from "../../utils/day";
 import React, { useState } from "react";
@@ -12,10 +12,11 @@ import {
 import { INSERT_NEW_PAYMENT } from "../../graphql/payments.queries";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { DateTimeFormatter } from "../../utils/DateFormatter";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const { confirm } = Modal;
 
-const openNotificationWithIcon = (type, t) => {
+const openNotificationWithIcon = (type, t, notification) => {
   notification[type]({
     message: t("job_payments.notifications.error.title"),
     description: t("job_payments.notifications.error.description")
@@ -27,6 +28,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
   const [insertPayment] = useMutation(INSERT_NEW_PAYMENT);
   const [insertPaymentResponse] = useMutation(INSERT_PAYMENT_RESPONSE);
   const { t } = useTranslation();
+  const notification = useNotification();
 
   const { loading, error, data } = useQuery(QUERY_PAYMENT_RESPONSE_BY_PAYMENT_ID, {
     variables: {
@@ -97,7 +99,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
         });
 
         if (refundResponse.data.status < 0) {
-          openNotificationWithIcon("error", t);
+          openNotificationWithIcon("error", t, notification);
           return;
         }
 
@@ -119,11 +121,7 @@ const PaymentExpandedRowComponent = ({ record, bodyshop }) => {
 
   return (
     <div>
-      <Descriptions
+      <Descriptions title={t("job_payments.titles.descriptions")} contentStyle={{ fontWeight: "600" }} column={4}>
-        title={t("job_payments.titles.descriptions")}
-        contentStyle={{ fontWeight: "600" }}
-        column={4}
-      >
         <Descriptions.Item label={t("job_payments.titles.hint")}>
           {payment_response?.response?.methodhint}
         </Descriptions.Item>

client/src/components/payment-export-button/payment-export-button.component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -11,6 +11,7 @@ import { UPDATE_PAYMENTS } from "../../graphql/payments.queries";
 
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import client from "../../utils/GraphQLClient";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -41,6 +42,7 @@ export function PaymentExportButton({
   const [updatePayment] = useMutation(UPDATE_PAYMENTS);
   const [loading, setLoading] = useState(false);
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
+  const notification = useNotification();
 
   const handleQbxml = async () => {
     logImEXEvent("accounting_payment_export");

client/src/components/payment-mark-export-button/payment-mark-export-button-component.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Button, notification } from "antd";
+import { Button } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,6 +9,7 @@ import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectPayment } from "../../redux/modals/modals.selectors";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -23,6 +24,7 @@ const PaymentMarkForExportButton = ({ bodyshop, payment, refetch, setPaymentCont
   const { t } = useTranslation();
   const [insertExportLog, { loading: exportLogLoading }] = useMutation(INSERT_EXPORT_LOG);
   const [updatePayment, { loading: updatePaymentLoading }] = useMutation(UPDATE_PAYMENT);
+  const notification = useNotification();
 
   const handleClick = async () => {
     const today = new Date();

client/src/components/payment-mark-selected-exported/payment-mark-selected-exported.component.jsx

@@ -1,11 +1,12 @@
 import { gql, useMutation } from "@apollo/client";
-import { Button, notification, Popconfirm } from "antd";
+import { Button, Popconfirm } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -29,6 +30,7 @@ export function PaymentMarkSelectedExported({
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
+  const notification = useNotification();
 
   const [insertExportLog] = useMutation(INSERT_EXPORT_LOG);
   const [updatePayments] = useMutation(gql`