IO-3121 Adjust Footer

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.circleci/config.yml

@@ -9,13 +9,13 @@ orbs:
 jobs:
   imex-api-deploy:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     steps:
       - checkout
       - eb/setup
       - run:
           command: |
-            eb init imex-online-production-api -r ca-central-1 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init imex-online-production-api -r ca-central-1 -p "Node.js 22 running on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status
@@ -28,7 +28,7 @@ jobs:
 
   imex-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -52,7 +52,7 @@ jobs:
           pipeline_number: << pipeline.number >>
   imex-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
     steps:
@@ -77,7 +77,7 @@ jobs:
 
   imex-app-beta-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 
@@ -114,7 +114,7 @@ jobs:
       - eb/setup
       - run:
           command: |
-            eb init romeonline-productionapi -r us-east-2 -p "Node.js 18 running on 64bit Amazon Linux 2"
+            eb init romeonline-productionapi -r us-east-2 -p "Node.js 22 on 64bit Amazon Linux 2"
             eb status --verbose
             eb deploy
             eb status
@@ -126,7 +126,7 @@ jobs:
           pipeline_number: << pipeline.number >>
   rome-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -150,7 +150,7 @@ jobs:
           pipeline_number: << pipeline.number >>
   rome-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
 
     working_directory: ~/repo/client
 
@@ -181,7 +181,7 @@ jobs:
 
   test-rome-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -208,7 +208,7 @@ jobs:
 
   test-rome-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
 
     working_directory: ~/repo/client
 
@@ -239,7 +239,7 @@ jobs:
 
   test-hasura-migrate:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     parameters:
       secret:
         type: string
@@ -266,7 +266,7 @@ jobs:
 
   imex-test-app-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 
@@ -286,7 +286,7 @@ jobs:
 
   imex-test-app-beta-build:
     docker:
-      - image: cimg/node:18.18.2
+      - image: cimg/node:22.13.1
     resource_class: large
     working_directory: ~/repo/client
 

Dockerfile

@@ -3,7 +3,7 @@ FROM amazonlinux:2023
 
 # Install Git and Node.js (Amazon Linux 2023 uses the DNF package manager)
 RUN dnf install -y git \
-    && curl -sL https://rpm.nodesource.com/setup_20.x | bash - \
+    && curl -sL https://rpm.nodesource.com/setup_22.x | bash - \
     && dnf install -y nodejs \
     && dnf clean all
 

bodyshop_translations.babel

@@ -6369,6 +6369,27 @@
                                     <folder_node>
                                         <name>md_parts_scan</name>
                                         <children>
+                                            <concept_node>
+                                                <name>caseInsensitive</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>expression</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -6390,6 +6411,27 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>field</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                             <concept_node>
                                                 <name>flags</name>
                                                 <definition_loaded>false</definition_loaded>
@@ -6411,6 +6453,48 @@
                                                     </translation>
                                                 </translations>
                                             </concept_node>
+                                            <concept_node>
+                                                <name>operation</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
+                                            <concept_node>
+                                                <name>value</name>
+                                                <definition_loaded>false</definition_loaded>
+                                                <description></description>
+                                                <comment></comment>
+                                                <default_text></default_text>
+                                                <translations>
+                                                    <translation>
+                                                        <language>en-US</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>es-MX</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                    <translation>
+                                                        <language>fr-CA</language>
+                                                        <approved>false</approved>
+                                                    </translation>
+                                                </translations>
+                                            </concept_node>
                                         </children>
                                     </folder_node>
                                     <concept_node>
@@ -11987,6 +12071,158 @@
                                     </concept_node>
                                 </children>
                             </folder_node>
+                            <folder_node>
+                                <name>operations</name>
+                                <children>
+                                    <concept_node>
+                                        <name>contains</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>ends_with</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>equals</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>greater_than</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>less_than</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>not_equals</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>starts_with</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
                             <folder_node>
                                 <name>successes</name>
                                 <children>
@@ -23131,6 +23367,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>alt_partno</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>amount</name>
                                         <definition_loaded>false</definition_loaded>
@@ -23236,6 +23493,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>include_in_part_cnt</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <folder_node>
                                         <name>lbr_types</name>
                                         <children>

client/index.html

@@ -62,7 +62,17 @@
       t = d.getElementsByTagName("script")[0];
       t.parentNode.insertBefore(s, t);
     </script>
-
+    <script type="text/javascript">
+      window.$crisp = [];
+      window.CRISP_WEBSITE_ID = "36724f62-2eb0-4b29-9cdd-9905fb99913e";
+      (function () {
+        d = document;
+        s = d.createElement("script");
+        s.src = "https://client.crisp.chat/l.js";
+        s.async = 1;
+        d.getElementsByTagName("head")[0].appendChild(s);
+      })();
+    </script>
     <% } %>
     <script>
       !(function () {

client/package.json

@@ -8,75 +8,74 @@
   "private": true,
   "proxy": "http://localhost:4000",
   "dependencies": {
-    "@ant-design/pro-layout": "^7.19.12",
+    "@ant-design/pro-layout": "^7.22.0",
-    "@apollo/client": "^3.11.8",
+    "@apollo/client": "^3.12.6",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@fingerprintjs/fingerprintjs": "^4.5.0",
+    "@fingerprintjs/fingerprintjs": "^4.5.1",
     "@jsreport/browser-client": "^3.1.0",
-    "@reduxjs/toolkit": "^2.2.7",
+    "@reduxjs/toolkit": "^2.5.0",
-    "@sentry/cli": "^2.36.2",
+    "@sentry/cli": "^2.40.0",
     "@sentry/react": "^7.114.0",
     "@splitsoftware/splitio-react": "^1.13.0",
-    "@tanem/react-nprogress": "^5.0.51",
+    "@tanem/react-nprogress": "^5.0.53",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
-    "antd": "^5.20.1",
+    "antd": "^5.23.1",
     "apollo-link-logger": "^2.0.1",
     "apollo-link-sentry": "^3.3.0",
     "autosize": "^6.0.1",
-    "axios": "^1.7.7",
+    "axios": "^1.7.9",
     "classnames": "^2.5.1",
     "css-box-model": "^1.2.1",
     "dayjs": "^1.11.13",
-    "dayjs-business-days2": "^1.2.2",
+    "dayjs-business-days2": "^1.2.3",
     "dinero.js": "^1.9.1",
-    "dotenv": "^16.4.5",
+    "dotenv": "^16.4.7",
     "env-cmd": "^10.1.0",
     "exifr": "^7.1.3",
     "firebase": "^10.13.2",
-    "graphql": "^16.9.0",
+    "graphql": "^16.10.0",
     "i18next": "^23.15.1",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "immutability-helper": "^3.1.1",
-    "libphonenumber-js": "^1.11.9",
+    "libphonenumber-js": "^1.11.18",
     "logrocket": "^8.1.2",
-    "markerjs2": "^2.32.2",
+    "markerjs2": "^2.32.3",
     "memoize-one": "^6.0.0",
     "normalize-url": "^8.0.1",
     "object-hash": "^3.0.0",
     "prop-types": "^15.8.1",
-    "query-string": "^9.1.0",
+    "query-string": "^9.1.1",
     "raf-schd": "^4.0.3",
     "react": "^18.3.1",
-    "react-big-calendar": "^1.14.1",
+    "react-big-calendar": "^1.17.1",
     "react-color": "^2.19.3",
-    "react-cookie": "^7.2.0",
+    "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",
     "react-drag-listview": "^2.0.0",
     "react-grid-gallery": "^1.0.1",
     "react-grid-layout": "1.3.4",
     "react-i18next": "^14.1.3",
-    "react-icons": "^5.3.0",
+    "react-icons": "^5.4.0",
     "react-image-lightbox": "^5.1.4",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^9.0.3",
-    "react-number-format": "^5.4.2",
+    "react-number-format": "^5.4.3",
     "react-popopo": "^2.1.9",
     "react-product-fruits": "^2.2.61",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "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",
+    "recharts": "^2.15.0",
     "redux": "^5.0.1",
     "redux-actions": "^3.0.3",
     "redux-persist": "^6.0.0",
     "redux-saga": "^1.3.0",
     "redux-state-sync": "^3.1.4",
     "reselect": "^5.1.1",
-    "sass": "^1.79.3",
+    "sass": "^1.83.4",
-    "socket.io-client": "^4.8.0",
+    "socket.io-client": "^4.8.1",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
     "subscriptions-transport-ws": "^0.11.0",
     "use-memo-one": "^1.1.3",
     "userpilot": "^1.3.6",
@@ -121,36 +120,36 @@
     "@rollup/rollup-linux-x64-gnu": "4.6.1"
   },
   "devDependencies": {
-    "@ant-design/icons": "^5.5.1",
+    "@ant-design/icons": "^5.5.2",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-react": "^7.26.3",
-    "@dotenvx/dotenvx": "^1.14.1",
+    "@dotenvx/dotenvx": "^1.33.0",
-    "@emotion/babel-plugin": "^11.12.0",
+    "@emotion/babel-plugin": "^11.13.5",
-    "@emotion/react": "^11.13.3",
+    "@emotion/react": "^11.14.0",
-    "@eslint/js": "^9.15.0",
+    "@eslint/js": "^9.18.0",
     "@sentry/webpack-plugin": "^2.22.4",
     "@testing-library/cypress": "^10.0.2",
-    "browserslist": "^4.23.3",
+    "browserslist": "^4.24.4",
     "browserslist-to-esbuild": "^2.1.1",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
     "cross-env": "^7.0.3",
-    "cypress": "^13.14.2",
+    "cypress": "^13.17.0",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.4",
-    "globals": "^15.12.0",
+    "globals": "^15.14.0",
-    "memfs": "^4.12.0",
+    "memfs": "^4.17.0",
     "os-browserify": "^0.3.0",
     "react-error-overlay": "6.0.11",
     "redux-logger": "^3.0.6",
     "source-map-explorer": "^2.5.3",
-    "vite": "^5.4.7",
+    "vite": "^6.0.7",
-    "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-babel": "^1.3.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
-    "vite-plugin-pwa": "^0.20.5",
+    "vite-plugin-pwa": "^0.21.1",
     "vite-plugin-style-import": "^2.0.0",
-    "workbox-window": "^7.1.0"
+    "workbox-window": "^7.3.0"
   }
 }

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/App/App.styles.scss

@@ -5,6 +5,13 @@
   border-bottom: 1px solid #74695c !important;
 }
 
+// TODO: This was added because the newest release of ant was making the text color and the background color the same on a selected header
+// Tried all available tokens (https://ant.design/components/menu?locale=en-US) and even reverted all our custom styles, to no avail
+// This should be kept an eye on, especially if implementing DARK MODE
+.ant-menu-submenu-title {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
 .imex-table-header {
   display: flex;
   flex-wrap: wrap;

client/src/components/accounting-payments-table/accounting-payments-table.component.jsx

@@ -85,6 +85,17 @@ export function AccountingPayablesTableComponent({ bodyshop, loading, payments,
       sortOrder: state.sortedInfo.columnKey === "amount" && state.sortedInfo.order,
       render: (text, record) => <CurrencyFormatter>{record.amount}</CurrencyFormatter>
     },
+    {
+      title: t("payments.fields.type"),
+      dataIndex: "type",
+      key: "type",
+      sorter: (a, b) => a.type.localeCompare(b.type),
+      sortOrder: state.sortedInfo.columnKey === "type" && state.sortedInfo.order,
+      filters: bodyshop.md_payment_types.map((s) => {
+        return { text: s, value: [s] };
+      }),
+      onFilter: (value, record) => value.includes(record.type)
+    },
     {
       title: t("payments.fields.memo"),
       dataIndex: "memo",

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] },
@@ -133,15 +135,19 @@ const CardPaymentModalComponent = ({
       if (window.intellipay) {
         // eslint-disable-next-line no-eval
         eval(response.data);
-        SetIntellipayCallbackFunctions();
+        pollForIntelliPay(() => {
-        window.intellipay.autoOpen();
+          SetIntellipayCallbackFunctions();
+          window.intellipay.autoOpen();
+        });
       } else {
         const rg = document.createRange();
         const node = rg.createContextualFragment(response.data);
         document.documentElement.appendChild(node);
-        SetIntellipayCallbackFunctions();
+        pollForIntelliPay(() => {
-        window.intellipay.isAutoOpen = true;
+          SetIntellipayCallbackFunctions();
-        window.intellipay.initialize();
+          window.intellipay.isAutoOpen = true;
+          window.intellipay.initialize();
+        });
       }
     } catch (error) {
       notification.open({
@@ -345,3 +351,27 @@ const CardPaymentModalComponent = ({
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CardPaymentModalComponent);
+
+//Poll for window.IntelliPay.fixAmount for 5 seconds. If it doesn't come up, just try anyways to force the possible error.
+function pollForIntelliPay(callbackFunction) {
+  const timeout = 5000;
+  const interval = 150; // Poll every 100 milliseconds
+  const startTime = Date.now();
+
+  function checkFixAmount() {
+    if (window.intellipay && window.intellipay.fixAmount !== undefined) {
+      callbackFunction();
+      return;
+    }
+
+    if (Date.now() - startTime >= timeout) {
+      console.log("Stopped polling IntelliPay after 10 seconds. Attemping to set functions anyways.");
+      callbackFunction();
+      return;
+    }
+
+    setTimeout(checkFixAmount, interval);
+  }
+
+  checkFixAmount();
+}

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

@@ -6,7 +6,7 @@ import { createStructuredSelector } from "reselect";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectCardPayment } from "../../redux/modals/modals.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
-import CardPaymentModalComponent from "./card-payment-modal.component.";
+import CardPaymentModalComponent from "./card-payment-modal.component";
 
 const mapStateToProps = createStructuredSelector({
   cardPaymentModal: selectCardPayment,

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/error-boundary/error-boundary.component.jsx

@@ -1,10 +1,10 @@
+import * as Sentry from "@sentry/react";
 import { Button, Col, Collapse, Result, Row, Space } from "antd";
 import React from "react";
 import { withTranslation } from "react-i18next";
-import { logImEXEvent } from "../../firebase/firebase.utils";
-import * as Sentry from "@sentry/react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { logImEXEvent } from "../../firebase/firebase.utils";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
@@ -38,28 +38,23 @@ class ErrorBoundary extends React.Component {
   }
 
   handleErrorSubmit = () => {
-    InstanceRenderManager({
+    window.$crisp.push([
-      executeFunction: true,
+      "do",
-      args: [],
+      "message:send",
-      imex: () => {
+      [
-        window.$crisp.push([
+        "text",
-          "do",
+        `I hit the following error: \n\n
-          "message:send",
-          [
-            "text",
-            `I hit the following error: \n\n
               ${this.state.error.message}\n\n
               ${this.state.error.stack}\n\n
               URL:${window.location} as ${this.props.currentUser.email} for ${
                 this.props.bodyshop && this.props.bodyshop.name
               }
               `
-          ]
+      ]
-        ]);
+    ]);
+
+    window.$crisp.push(["do", "chat:open"]);
 
-        window.$crisp.push(["do", "chat:open"]);
-      }
-    });
     //     const errorDescription = `**Please add relevant details about what you were doing before you encountered this issue**
 
     // ----

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>
         }
@@ -650,14 +656,7 @@ function Header({
           icon: <Icon component={QuestionCircleFilled} />,
           label: t("menus.header.help"),
           onClick: () => {
-            window.open(
+            window.open("https://help.imex.online/", "_blank");
-              InstanceRenderManager({
-                imex: "https://help.imex.online/",
-                rome: "https://rometech.com//"
-              }),
-
-              "_blank"
-            );
           }
         },
         ...(InstanceRenderManager({
@@ -667,6 +666,7 @@ function Header({
           ? [
               {
                 key: "rescue",
+                id: "header-rescue",
                 icon: <Icon component={CarFilled} />,
                 label: t("menus.header.rescueme"),
                 onClick: () => {
@@ -730,6 +730,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,30 +1,31 @@
 import { AlertFilled } from "@ant-design/icons";
-import { Button, Divider, Dropdown, Form, Input, notification, Popover, Select, Space } from "antd";
+import { useMutation } from "@apollo/client";
+import { Button, Divider, Dropdown, Form, Input, Popover, Select, Space } from "antd";
 import parsePhoneNumber from "libphonenumber-js";
-import dayjs from "../../utils/day";
 import queryString from "query-string";
 import React, { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
+import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
 import { openChatByPhone, setMessage } from "../../redux/messaging/messaging.actions";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
+import dayjs from "../../utils/day";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
 import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
-import { useMutation } from "@apollo/client";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
-import { UPDATE_APPOINTMENT } from "../../graphql/appointments.queries";
-import ProductionListColumnComment from "../production-list-columns/production-list-columns.comment.component";
-import SocketContext from "../../contexts/SocketIO/socketContext.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,6 +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 label={t("jobs.fields.alt_transport")}>
             {(event.job && event.job.alt_transport) || ""}
             <ScheduleAtChange job={event && event.job} />
@@ -180,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-detail-lines/job-lines.component.jsx

@@ -519,6 +519,7 @@ export function JobLinesComponent({
               {selectedLines.length > 0 && ` (${selectedLines.length})`}
             </Button>
             <Button
+              id="job-lines-order-parts-button"
               disabled={(job && !job.converted) || (selectedLines.length > 0 ? false : true) || jobRO || technician}
               onClick={() => {
                 setPartsOrderContext({
@@ -541,6 +542,7 @@ export function JobLinesComponent({
               {selectedLines.length > 0 && ` (${selectedLines.length})`}
             </Button>
             <Button
+              id="job-lines-filter-parts-only-button"
               onClick={() => {
                 setState((state) => ({
                   ...state,
@@ -554,7 +556,7 @@ export function JobLinesComponent({
               <FilterFilled /> {t("jobs.actions.filterpartsonly")}
             </Button>
             <Dropdown menu={markMenu} trigger={["click"]}>
-              <Button>{t("jobs.actions.mark")}</Button>
+              <Button id="repair-data-mark-button">{t("jobs.actions.mark")}</Button>
             </Dropdown>
             <Button
               disabled={jobRO || technician}

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.component.jsx

@@ -192,6 +192,23 @@ export function JobLinesUpsertModalComponent({ bodyshop, open, jobLine, handleCa
           <Form.Item label={t("joblines.fields.tax_part")} name="tax_part" valuePropName="checked" initialValue={true}>
             <Switch />
           </Form.Item>
+          <Form.Item dependencies={[["act_price"]]} noStyle>
+            {() => {
+              if (form.getFieldValue("act_price") === 0) {
+                return (
+                  <Form.Item
+                    label={t("joblines.fields.include_in_part_cnt")}
+                    name="include_in_part_cnt"
+                    valuePropName="checked"
+                  >
+                    <Switch />
+                  </Form.Item>
+                );
+              } else {
+                return null;
+              }
+            }}
+          </Form.Item>
         </LayoutFormRow>
       </Form>
     </Modal>

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.
@@ -173,7 +175,7 @@ export function JobsCloseExportButton({
           }
         });
 
-        if (!!!jobUpdateResponse.errors) {
+        if (!jobUpdateResponse.errors) {
           notification.open({
             type: "success",
             key: "jobsuccessexport",
@@ -222,7 +224,7 @@ export function JobsCloseExportButton({
   };
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled} type="primary">
       {t("jobs.actions.export")}
     </Button>
   );

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

@@ -1,7 +1,8 @@
 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 { some } from "lodash";
+import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -11,6 +12,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
@@ -18,7 +20,14 @@ const mapStateToProps = createStructuredSelector({
   jobRO: selectJobReadOnly
 });
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) =>
+    dispatch(
+      insertAuditTrail({
+        jobid,
+        operation,
+        type
+      })
+    )
 });
 
 export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTrail, parentFormIsFieldsTouched }) {
@@ -27,6 +36,8 @@ 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 allFormValues = Form.useWatch([], form);
 
   const handleConvert = async ({ employee_csr, category, ...values }) => {
     if (parentFormIsFieldsTouched()) {
@@ -69,6 +80,8 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
     setLoading(false);
   };
 
+  const submitDisabled = useCallback(() => some(allFormValues, (v) => v === undefined), [allFormValues]);
+
   const popMenu = (
     <div>
       <Form
@@ -77,9 +90,12 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
         onFinish={handleConvert}
         initialValues={{
           driveable: true,
-          towin: false,
+          towin: job.towin,
+          ca_gst_registrant: job.ca_gst_registrant,
           employee_csr: job.employee_csr,
-          category: job.category
+          category: job.category,
+          referral_source: job.referral_source,
+          referral_source_extra: job.referral_source_extra ?? ""
         }}
       >
         <Form.Item
@@ -209,7 +225,7 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
           <Switch />
         </Form.Item>
         <Space wrap>
-          <Button type="primary" danger onClick={() => form.submit()} loading={loading}>
+          <Button disabled={submitDisabled()} type="primary" danger onClick={() => form.submit()} loading={loading}>
             {t("jobs.actions.convert")}
           </Button>
           <Button onClick={() => setOpen(false)}>{t("general.actions.close")}</Button>
@@ -231,11 +247,6 @@ export function JobsConvertButton({ bodyshop, job, refetch, jobRO, insertAuditTr
         loading={loading}
         onClick={() => {
           setOpen(true);
-          form.setFieldsValue({
-            driveable: true,
-            towin: false,
-            employee_csr: job.employee_csr
-          });
         }}
       >
         {t("jobs.actions.convert")}

client/src/components/jobs-create-jobs-info/jobs-create-jobs-info.component.jsx

@@ -1,26 +1,23 @@
 import { Collapse, Form, Input, InputNumber, Select, Space, Switch } from "antd";
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 import CurrencyInput from "../form-items-formatted/currency-form-item.component";
 import FormItemEmail from "../form-items-formatted/email-form-item.component";
 import FormItemPhone, { PhoneItemFormatterValidation } from "../form-items-formatted/phone-form-item.component";
 import JobsDetailChangeEstimator from "../jobs-detail-change-estimator/jobs-detail-change-estimator.component";
 import JobsDetailChangeFilehandler from "../jobs-detail-change-filehandler/jobs-detail-change-filehandler.component";
 import JobsDetailRatesChangeButton from "../jobs-detail-rates-change-button/jobs-detail-rates-change-button.component";
-import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
-
 import JobsDetailRatesLabor from "../jobs-detail-rates/jobs-detail-rates.labor.component";
 import JobsDetailRatesMaterials from "../jobs-detail-rates/jobs-detail-rates.materials.component";
 import JobsDetailRatesOther from "../jobs-detail-rates/jobs-detail-rates.other.component";
+import JobsDetailRatesParts from "../jobs-detail-rates/jobs-detail-rates.parts.component";
 import JobsDetailRatesTaxes from "../jobs-detail-rates/jobs-detail-rates.taxes.component";
-
 import JobsMarkPstExempt from "../jobs-mark-pst-exempt/jobs-mark-pst-exempt.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
-import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
@@ -199,7 +196,9 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
         </Collapse.Panel>
         <Collapse.Panel forceRender key="financial" header={t("menus.jobsdetail.financials")}>
           <JobsDetailRatesChangeButton form={form} />
-          <JobsMarkPstExempt form={form} />
+          {InstanceRenderManager({
+            imex: <JobsMarkPstExempt form={form} />
+          })}
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.ded_amt")} name="ded_amt">
               <CurrencyInput min={0} />
@@ -246,7 +245,6 @@ export function JobsCreateJobsInfo({ bodyshop, form, selected }) {
               </LayoutFormRow>
             )
           })}
-
           <LayoutFormRow>
             <Form.Item label={t("jobs.fields.rate_lab")} name="rate_lab">
               <CurrencyInput />

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,14 +1,15 @@
 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";
+import { useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
+import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
 import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { CANCEL_APPOINTMENTS_BY_JOB_ID, INSERT_MANUAL_APPT } from "../../graphql/appointments.queries";
 import { GET_CURRENT_QUESTIONSET_ID, INSERT_CSI } from "../../graphql/csi.queries";
@@ -30,7 +31,8 @@ import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";
 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";
+import ShareToTeamsButton from "../share-to-teams/share-to-teams.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -120,6 +122,7 @@ export function JobsDetailHeaderActions({
   const history = useNavigate();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
   const [isCancelScheduleModalVisible, setIsCancelScheduleModalVisible] = useState(false);
   const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
   const [deleteJob] = useMutation(DELETE_JOB);
@@ -128,6 +131,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 }
@@ -198,7 +202,10 @@ export function JobsDetailHeaderActions({
         message: t("appointments.successes.created")
       });
     } catch (error) {
-      notification.open({ type: "error", message: t("appointments.errors.saving", { error: error.message }) });
+      notification.open({
+        type: "error",
+        message: t("appointments.errors.saving", { error: error.message })
+      });
     } finally {
       setLoading(false);
       setVisibility(false);
@@ -716,7 +723,13 @@ export function JobsDetailHeaderActions({
       key: "toggleproduction",
       id: "job-actions-toggleproduction",
       disabled: !job.converted || jobRO,
-      label: <JobsDetailHeaderActionsToggleProduction job={job} refetch={refetch} />
+      label: (
+        <JobsDetailHeaderActionsToggleProduction
+          job={job}
+          refetch={refetch}
+          closeParentMenu={() => setDropdownOpen(false)}
+        />
+      )
     },
 
     {
@@ -822,14 +835,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, false, notification)
         }
   );
 
@@ -962,6 +975,14 @@ export function JobsDetailHeaderActions({
     }
   );
 
+  if (bodyshop?.md_functionality_toggles?.teams) {
+    menuItems.push({
+      key: "sharetoteams",
+      id: "job-actions-sharetoteams",
+      label: <ShareToTeamsButton noIcon={true} urlOverride={`${window.location.origin}${window.location.pathname}`} />
+    });
+  }
+
   menuItems.push({
     key: "exportcustdata",
     id: "job-actions-exportcustdata",
@@ -1146,7 +1167,7 @@ export function JobsDetailHeaderActions({
           </Form.Item>
         </Form>
       </Modal>
-      <Dropdown menu={menu} trigger={["click"]} key="changestatus">
+      <Dropdown menu={menu} trigger={["click"]} key="changestatus" open={dropdownOpen} onOpenChange={setDropdownOpen}>
         <Button>
           <span>{t("general.labels.actions")}</span>
           <DownCircleFilled />

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

@@ -1,17 +1,19 @@
-import { useMutation } from "@apollo/client";
+import { useLazyQuery, 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 { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
+import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
 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 { DateTimeFormatterFunction } from "../../utils/DateFormatter";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component.jsx";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser,
@@ -22,15 +24,40 @@ const mapDispatchToProps = (dispatch) => ({
   insertAuditTrail: ({ jobid, operation }) => dispatch(insertAuditTrail({ jobid, operation }))
 });
 
-export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO, insertAuditTrail }) {
+export function JobsDetailHeaderActionsToggleProduction({
+  bodyshop,
+  job,
+  jobRO,
+  refetch,
+  closeParentMenu,
+  insertAuditTrail
+}) {
   const [scenario, setScenario] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [popOverVisible, setPopOverVisible] = useState(false);
   const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
   const { t } = useTranslation();
   const [form] = Form.useForm();
+  const notification = useNotification();
+
+  const [getJobDetails, { loading: jobDetailsLoading }] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
+    variables: { id: job.id },
+    onCompleted: (data) => {
+      if (data?.jobs_by_pk) {
+        form.setFieldsValue({
+          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
+          scheduled_completion: data.jobs_by_pk.scheduled_completion,
+          actual_completion: data.jobs_by_pk.actual_completion,
+          scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
+          actual_delivery: data.jobs_by_pk.actual_delivery
+        });
+      }
+    },
+    fetchPolicy: "network-only"
+  });
 
   useEffect(() => {
-    //Figure out what scenario were in, populate accodingly
+    //Figure out what scenario were in, populate accordingly
     if (job && bodyshop) {
       if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
         setScenario("pre");
@@ -74,89 +101,90 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
                 DateTimeFormatterFunction(values.actual_completion)
               )
       });
+      setPopOverVisible(false);
+      closeParentMenu();
+      refetch();
     }
     setLoading(false);
   };
 
   const popMenu = (
     <div onClick={(e) => e.stopPropagation()}>
-      <Form
+      {jobDetailsLoading ? (
-        layout="vertical"
+        <LoadingSpinner />
-        form={form}
+      ) : (
-        onFinish={handleConvert}
+        <Form layout="vertical" form={form} onFinish={handleConvert}>
-        initialValues={{
+          {scenario === "pre" && (
-          actual_in: dayjs(),
+            <>
-          scheduled_completion: job.scheduled_completion,
+              <Form.Item
-          actual_completion: job.actual_completion,
+                name={["actual_in"]}
-          scheduled_deliver: job.scheduled_deliver,
+                label={t("jobs.fields.actual_in")}
-          actual_delivery: job.actual_delivery
+                rules={[
-        }}
+                  {
-      >
+                    required: true
-        {scenario === "pre" && (
+                    //message: t("general.validation.required"),
-          <>
+                  }
-            <Form.Item
+                ]}
-              name={["actual_in"]}
+              >
-              label={t("jobs.fields.actual_in")}
+                <FormDateTimePickerComponent disabled={jobRO} />
-              rules={[
+              </Form.Item>
-                {
+              <Form.Item
-                  required: true
+                name={["scheduled_completion"]}
-                  //message: t("general.validation.required"),
+                label={t("jobs.fields.scheduled_completion")}
-                }
+                rules={[
-              ]}
+                  {
-            >
+                    required: true
-              <FormDateTimePickerComponent disabled={jobRO} />
+                    //message: t("general.validation.required"),
-            </Form.Item>
+                  }
-            <Form.Item
+                ]}
-              name={["scheduled_completion"]}
+              >
-              label={t("jobs.fields.scheduled_completion")}
+                <FormDateTimePickerComponent disabled={jobRO} />
-              rules={[
+              </Form.Item>
-                {
+              <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
-                  required: true
+                <FormDateTimePickerComponent disabled={jobRO} />
-                  //message: t("general.validation.required"),
+              </Form.Item>
-                }
+            </>
-              ]}
+          )}
-            >
+          {scenario === "prod" && (
-              <FormDateTimePickerComponent disabled={jobRO} />
+            <>
-            </Form.Item>
+              <Form.Item
-            <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
+                name={["actual_completion"]}
-              <FormDateTimePickerComponent disabled={jobRO} />
+                label={t("jobs.fields.actual_completion")}
-            </Form.Item>
+                rules={[
-          </>
+                  {
-        )}
+                    required: true
-        {scenario === "prod" && (
+                    //message: t("general.validation.required"),
-          <>
+                  }
-            <Form.Item
+                ]}
-              name={["actual_completion"]}
+              >
-              label={t("jobs.fields.actual_completion")}
+                <FormDateTimePickerComponent disabled={jobRO} />
-              rules={[
+              </Form.Item>
-                {
-                  required: true
-                  //message: t("general.validation.required"),
-                }
-              ]}
-            >
-              <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
 
-            <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
+              <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
-              <FormDateTimePickerComponent disabled={jobRO} />
+                <FormDateTimePickerComponent disabled={jobRO} />
-            </Form.Item>
+              </Form.Item>
-          </>
+            </>
-        )}
+          )}
 
-        <Space wrap>
+          <Space wrap>
-          <Button type="primary" onClick={() => form.submit()} loading={loading}>
+            <Button type="primary" onClick={() => form.submit()} loading={loading}>
-            {t("general.actions.save")}
+              {t("general.actions.save")}
-          </Button>
+            </Button>
-        </Space>
+          </Space>
-      </Form>
+        </Form>
+      )}
     </div>
   );
 
   return (
     <Popover //open={open}
       content={popMenu}
-      onClick={(e) => e.stopPropagation()}
+      open={popOverVisible}
+      onOpenChange={setPopOverVisible}
+      onClick={(e) => {
+        getJobDetails();
+        e.stopPropagation();
+      }}
       getPopupContainer={(trigger) => trigger.parentNode}
       trigger="click"
     >

client/src/components/jobs-detail-rates/jobs-detail-rates.parts.component.jsx

@@ -982,7 +982,7 @@ export function JobsDetailRatesParts({ jobRO, expanded, required = true, form })
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>
         </LayoutFormRow>
-        <LayoutFormRow>
+        <LayoutFormRow header={t("jobs.labels.cieca_pfo")}>
           <Form.Item label={t("jobs.fields.tax_tow_rt")} name="tax_tow_rt">
             <InputNumber min={0} max={100} precision={4} disabled={jobRO} />
           </Form.Item>

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

@@ -1,10 +1,11 @@
 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 { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 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";
@@ -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 [
@@ -132,7 +134,7 @@ export function JobsDocumentsGalleryReassign({ bodyshop, galleryImages, callback
           ]}
           name={"jobid"}
         >
-          <JobSearchSelect />
+          <JobSearchSelect notExported={false} notInvoiced={false} />
         </Form.Item>
       </Form>
       <Space>

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-documents-local-gallery/jobs-documents-local-gallery.reassign.component.jsx

@@ -1,5 +1,5 @@
 import { Button, Form, Popover, Space } from "antd";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
@@ -60,7 +60,7 @@ export function JobsDocumentsLocalGalleryReassign({ bodyshop, jobid, allMedia, g
           ]}
           name={"jobid"}
         >
-          <JobSearchSelect />
+          <JobSearchSelect notExported={false} notInvoiced={false}/>
         </Form.Item>
       </Form>
       <Space>

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";
@@ -10,9 +10,10 @@ import { auth, logImEXEvent } from "../../firebase/firebase.utils";
 import { INSERT_EXPORT_LOG } from "../../graphql/accounting.queries";
 import { UPDATE_JOBS } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
-import AuditTrailMapping from "../../utils/AuditTrailMappings";
 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 () => {
@@ -165,7 +167,7 @@ export function JobsExportAllButton({
               }
             });
 
-            if (!!!jobUpdateResponse.errors) {
+            if (!jobUpdateResponse.errors) {
               notification.open({
                 type: "success",
                 key: "jobsuccessexport",
@@ -213,13 +215,13 @@ export function JobsExportAllButton({
       })
     );
 
-    if (!!completedCallback) completedCallback([]);
+    if (completedCallback) completedCallback([]);
-    if (!!loadingCallback) loadingCallback(false);
+    if (loadingCallback) loadingCallback(false);
     setLoading(false);
   };
 
   return (
-    <Button onClick={handleQbxml} loading={loading} disabled={disabled || jobIds?.length > 10}>
+    <Button onClick={handleQbxml} loading={loading} disabled={disabled || jobIds?.length > 10} type="primary">
       {t("jobs.actions.exportselected")}
     </Button>
   );

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.component.jsx

@@ -1,6 +1,5 @@
 import { EditFilled } from "@ant-design/icons";
 import { Alert, Card, Col, Row, Space, Table, Typography } from "antd";
-import _ from "lodash";
 import React, { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -9,11 +8,11 @@ import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import { alphaSort } from "../../utils/sorters";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
 import LaborAllocationsAdjustmentEdit from "../labor-allocations-adjustment-edit/labor-allocations-adjustment-edit.component";
+import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 import "./labor-allocations-table.styles.scss";
 import { CalculateAllocationsTotals } from "./labor-allocations-table.utility";
-import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
-import UpsellComponent, { upsellEnum } from "../upsell/upsell.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   technician: selectTechnician
@@ -65,6 +64,7 @@ export function LaborAllocationsTable({
       key: "total",
       sorter: (a, b) => a.total - b.total,
       sortOrder: state.sortedInfo.columnKey === "total" && state.sortedInfo.order,
+      align: "right",
       render: (text, record) => record.total.toFixed(1)
     },
     {
@@ -73,6 +73,7 @@ export function LaborAllocationsTable({
       key: "hrs_claimed",
       sorter: (a, b) => a.claimed - b.claimed,
       sortOrder: state.sortedInfo.columnKey === "claimed" && state.sortedInfo.order,
+      align: "right",
       render: (text, record) => record.claimed && record.claimed.toFixed(1)
     },
     {
@@ -81,6 +82,7 @@ export function LaborAllocationsTable({
       key: "adjustments",
       sorter: (a, b) => a.adjustments - b.adjustments,
       sortOrder: state.sortedInfo.columnKey === "adjustments" && state.sortedInfo.order,
+      align: "right",
       render: (text, record) => (
         <Space wrap>
           {record.adjustments.toFixed(1)}
@@ -100,17 +102,17 @@ export function LaborAllocationsTable({
     {
       title: t("jobs.labels.difference"),
       dataIndex: "difference",
-
       key: "difference",
       sorter: (a, b) => a.difference - b.difference,
       sortOrder: state.sortedInfo.columnKey === "difference" && state.sortedInfo.order,
+      align: "right",
       render: (text, record) => (
         <strong
           style={{
-            color: record.difference >= 0 ? "green" : "red"
+            color: record.difference.toFixed(1) >= 0 ? "green" : "red"
           }}
         >
-          {_.round(record.difference, 1)}
+          {(Math.abs(record.difference) < 0.05 ? 0 : record.difference).toFixed(1)}
         </strong>
       )
     }
@@ -129,7 +131,6 @@ export function LaborAllocationsTable({
       ellipsis: true,
       render: (text, record) => `${record.op_code_desc || ""}${record.alt_partm ? ` ${record.alt_partm}` : ""}`
     },
-
     {
       title: t("joblines.fields.act_price"),
       dataIndex: "act_price",
@@ -187,7 +188,7 @@ export function LaborAllocationsTable({
       { hrs_total: 0, hrs_claimed: 0, adjustments: 0, difference: 0 }
     );
 
-  if (summary.difference !== 0 && typeof warningCallback === "function") {
+  if (Math.abs(summary.difference.toFixed(1)) !== 0 && typeof warningCallback === "function") {
     warningCallback({ key: "labor", warning: t("jobs.labels.outstandinghours") });
   }
 
@@ -217,19 +218,21 @@ export function LaborAllocationsTable({
             summary={() => (
               <Table.Summary.Row>
                 <Table.Summary.Cell>
-                  <Typography.Title level={4}>{t("general.labels.totals")}</Typography.Title>
+                  <Typography.Title level={4} style={{ margin: 0, lineHeight: 1 }}>
+                    {t("general.labels.totals")}
+                  </Typography.Title>
                 </Table.Summary.Cell>
-                <Table.Summary.Cell>{summary.hrs_total.toFixed(1)}</Table.Summary.Cell>
+                <Table.Summary.Cell align="right">{summary.hrs_total.toFixed(1)}</Table.Summary.Cell>
-                <Table.Summary.Cell>{summary.hrs_claimed.toFixed(1)}</Table.Summary.Cell>
+                <Table.Summary.Cell align="right">{summary.hrs_claimed.toFixed(1)}</Table.Summary.Cell>
-                <Table.Summary.Cell>{summary.adjustments.toFixed(1)}</Table.Summary.Cell>
+                <Table.Summary.Cell align="right">{summary.adjustments.toFixed(1)}</Table.Summary.Cell>
-                <Table.Summary.Cell>
+                <Table.Summary.Cell align="right">
                   <Typography.Text
                     style={{
                       fontWeight: "bold",
-                      color: summary.difference >= 0 ? "green" : "red"
+                      color: summary.difference.toFixed(1) >= 0 ? "green" : "red"
                     }}
                   >
-                    {summary.difference.toFixed(1)}
+                    {(Math.abs(summary.difference) < 0.05 ? 0 : summary.difference).toFixed(1)}
                   </Typography.Text>
                 </Table.Summary.Cell>
               </Table.Summary.Row>
@@ -261,11 +264,10 @@ export function LaborAllocationsTable({
           </Card>
         </Col>
       )}
-      {showWarning && summary.difference !== 0 && (
+      {showWarning && Math.abs(summary.difference.toFixed(1)) !== 0 && (
         <Alert style={{ margin: "8px 0px" }} type="warning" message={t("jobs.labels.outstandinghours")} />
       )}
     </Row>
   );
 }
-
 export default connect(mapStateToProps, null)(LaborAllocationsTable);

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);