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

feature/IO-3103-Ant5-Notifications

client/src/pages/contract-create/contract-create.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Card, Form, notification } from "antd";
+import { Card, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -14,6 +14,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import ContractCreatePageComponent from "./contract-create.page.component";
 import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -35,6 +36,7 @@ export function ContractCreatePageContainer({ bodyshop, setBreadcrumbs, setSelec
 
   const [insertContract] = useMutation(INSERT_NEW_CONTRACT);
   const [intakeJob] = useMutation(UPDATE_JOB);
+  const notification = useNotification();
 
   const handleFinish = async ({ addtoproduction, ...values }) => {
     if (!!selectedCarState[0] && !!selectedJobState[0]) {

client/src/pages/contract-detail/contract-detail.page.component.jsx

@@ -11,6 +11,7 @@ import ContractJobBlock from "../../components/contract-job-block/contract-job-b
 import { setModalContext } from "../../redux/modals/modals.actions";
 import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapDispatchToProps = (dispatch) => ({
   setCourtesyCarReturnModalContext: (context) =>
@@ -27,6 +28,8 @@ export function ContractDetailPage({
   saveLoading
 }) {
   const { t } = useTranslation();
+  const notification = useNotification();
+
   return (
     <div>
       <Row align="middle">
@@ -48,7 +51,9 @@ export function ContractDetailPage({
                       variables: { id: contract.id }
                     },
                     {},
-                    "p"
+                    "p",
+                    null,
+                    notification
                   );
                 },
                 items: [

client/src/pages/contract-detail/contract-detail.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Card, Form, notification } from "antd";
+import { Card, Form } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,7 @@ import NotFound from "../../components/not-found/not-found.component";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -30,6 +31,7 @@ export function ContractDetailPageContainer({ setBreadcrumbs, addRecentItem, set
   const [saveLoading, setsaveLoading] = useState(false);
   const [form] = Form.useForm();
   const { contractId } = useParams();
+  const notification = useNotification();
 
   const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, {
     variables: { id: contractId },

client/src/pages/courtesy-car-create/courtesy-car-create.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation } from "@apollo/client";
-import { Card, Form, notification } from "antd";
+import { Card, Form } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -13,6 +13,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import FeatureWrapperComponent from "../../components/feature-wrapper/feature-wrapper.component";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import UpsellComponent, { upsellEnum } from "../../components/upsell/upsell.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -28,6 +29,7 @@ export function CourtesyCarCreateContainer({ bodyshop, setBreadcrumbs, setSelect
   const [insertCourtesyCar] = useMutation(INSERT_NEW_COURTESY_CAR);
   const { t } = useTranslation();
   const history = useNavigate();
+  const notification = useNotification();
 
   const handleFinish = async (values) => {
     setLoading(true);

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Form } from "antd";
 import dayjs from "../../utils/day";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -17,6 +17,7 @@ import LoadingSpinner from "../../components/loading-spinner/loading-spinner.com
 import queryString from "query-string";
 import { pageLimit } from "../../utils/config";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
@@ -27,6 +28,7 @@ const mapDispatchToProps = (dispatch) => ({
 export function CourtesyCarDetailPageContainer({ setBreadcrumbs, addRecentItem, setSelectedHeader }) {
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder } = searchParams;
+  const notification = useNotification();
 
   const { t } = useTranslation();
   const [updateCourtesyCar] = useMutation(UPDATE_CC);

client/src/pages/dms-payables/dms-payables.container.jsx

@@ -1,4 +1,4 @@
-import { Button, Card, Col, notification, Row, Select, Space } from "antd";
+import { Button, Card, Col, Row, Select, Space } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -11,6 +11,7 @@ import { auth } from "../../firebase/firebase.utils";
 import { setBreadcrumbs, setSelectedHeader } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -37,6 +38,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const [logLevel, setLogLevel] = useState("DEBUG");
   const history = useNavigate();
   const [logs, setLogs] = useState([]);
+  const notification = useNotification();
 
   const { state } = useLocation();
 

client/src/pages/dms/dms.container.jsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Button, Card, Col, notification, Result, Row, Select, Space } from "antd";
+import { Button, Card, Col, Result, Row, Select, Space } from "antd";
 import queryString from "query-string";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ import { insertAuditTrail, setBreadcrumbs, setSelectedHeader } from "../../redux
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -52,6 +53,7 @@ export function DmsContainer({ bodyshop, setBreadcrumbs, setSelectedHeader, inse
   const [logs, setLogs] = useState([]);
   const search = queryString.parse(useLocation().search);
   const { jobId } = search;
+  const notification = useNotification();
 
   const { loading, error, data } = useQuery(QUERY_JOB_EXPORT_DMS, {
     variables: { id: jobId },

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -8,7 +8,6 @@ import {
   Form,
   Input,
   InputNumber,
-  notification,
   Popconfirm,
   Row,
   Select,
@@ -42,6 +41,7 @@ import { selectJobReadOnly } from "../../redux/application/application.selectors
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import JobCloseRoGuardContainer from "../../components/job-close-ro-guard/job-close-ro-guard.container";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -59,6 +59,7 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
   // const history = useNavigate();
   const [closeJob] = useMutation(UPDATE_JOB);
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const {
     treatments: { Qb_Multi_Ar, ClosingPeriod }

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -1,5 +1,5 @@
 import { useLazyQuery, useMutation } from "@apollo/client";
-import { Form, notification } from "antd";
+import { Form } from "antd";
 import _ from "lodash";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -13,6 +13,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import JobsCreateComponent from "./jobs-create.component";
 import JobCreateContext from "./jobs-create.context";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -24,6 +25,8 @@ const mapDispatchToProps = (dispatch) => ({
 
 function JobsCreateContainer({ bodyshop, setBreadcrumbs, setSelectedHeader }) {
   const { t } = useTranslation();
+  const notification = useNotification();
+
   const contextState = useState({
     vehicle: {
       new: false,

client/src/pages/jobs-detail/jobs-detail.page.component.jsx

@@ -10,7 +10,7 @@ import Icon, {
 } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
 import { useQuery } from "@apollo/client";
-import { Badge, Button, Divider, Form, notification, Space, Tabs } from "antd";
+import { Badge, Button, Divider, Form, Space, Tabs } from "antd";
 import Axios from "axios";
 import _ from "lodash";
 import queryString from "query-string";
@@ -55,6 +55,7 @@ import AuditTrailMapping from "../../utils/AuditTrailMappings";
 import { DateTimeFormat } from "../../utils/DateFormatter";
 import dayjs from "../../utils/day";
 import UndefinedToNull from "../../utils/undefinedtonull";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -100,6 +101,7 @@ export function JobsDetailPage({
     fetchPolicy: "network-only",
     nextFetchPolicy: "network-only"
   });
+  const notification = useNotification();
 
   useEffect(() => {
     //form.setFieldsValue(transormJobToForm(job));

client/src/pages/manage/manage.page.component.jsx

@@ -1,4 +1,5 @@
-import { FloatButton, Layout, notification, Spin } from "antd";
+import { FloatButton, Layout, Spin } from "antd";
+
 // import preval from "preval.macro";
 import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -27,7 +28,7 @@ import "./manage.page.styles.scss";
 import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
 import { selectAlerts } from "../../redux/application/application.selectors.js";
 import { addAlerts } from "../../redux/application/application.actions.js";
-
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 const JobsPage = lazy(() => import("../jobs/jobs.page"));
 
 const CardPaymentModalContainer = lazy(
@@ -122,6 +123,7 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
   const { t } = useTranslation();
   const [chatVisible] = useState(false);
   const { socket, clientId } = useContext(SocketContext);
+  const notification = useNotification();
 
   // State to track displayed alerts
   const [displayedAlertIds, setDisplayedAlertIds] = useState([]);
@@ -177,7 +179,7 @@ export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
         });
       });
     }
-  }, [alerts, displayedAlertIds]);
+  }, [alerts, displayedAlertIds, notification]);
 
   useEffect(() => {
     const widgetId = InstanceRenderManager({