feature/IO-2681-Share-To-Teams-Button - Merge release

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

@@ -1,4 +1,5 @@
-import { DeleteFilled } from "@ant-design/icons";
+import { DeleteFilled, PrinterFilled } from "@ant-design/icons";
+import { PageHeader } from "@ant-design/pro-layout";
 import { useApolloClient, useMutation } from "@apollo/client";
 import {
   Alert,
@@ -8,7 +9,6 @@ import {
   Form,
   Input,
   InputNumber,
-  notification,
   Popconfirm,
   Row,
   Select,
@@ -17,31 +17,31 @@ import {
   Switch,
   Typography
 } from "antd";
-import { PageHeader } from "@ant-design/pro-layout";
-
-import React, { useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 // import { useNavigate } from 'react-router-dom';
 import { useSplitTreatments } from "@splitsoftware/splitio-react";
 import Dinero from "dinero.js";
-import dayjs from "../../utils/day";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DateTimePicker from "../../components/form-date-time-picker/form-date-time-picker.component";
 import FormsFieldChanged from "../../components/form-fields-changed-alert/form-fields-changed-alert.component";
 import CurrencyInput from "../../components/form-items-formatted/currency-form-item.component";
+import JobCloseRoGuardContainer from "../../components/job-close-ro-guard/job-close-ro-guard.container";
 import JobsScoreboardAdd from "../../components/job-scoreboard-add-button/job-scoreboard-add-button.component";
 import JobsCloseAutoAllocate from "../../components/jobs-close-auto-allocate/jobs-close-auto-allocate.component";
 import JobsCloseLines from "../../components/jobs-close-lines/jobs-close-lines.component";
 import LayoutFormRow from "../../components/layout-form-row/layout-form-row.component";
+import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";
 import { generateJobLinesUpdatesForInvoicing } from "../../graphql/jobs-lines.queries";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { insertAuditTrail } from "../../redux/application/application.actions";
 import { selectJobReadOnly } from "../../redux/application/application.selectors";
+import { setModalContext } from "../../redux/modals/modals.actions.js";
 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 dayjs from "../../utils/day";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -49,16 +49,24 @@ const mapStateToProps = createStructuredSelector({
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type }))
+  insertAuditTrail: ({ jobid, operation, type }) => dispatch(insertAuditTrail({ jobid, operation, type })),
+  setPrintCenterContext: (context) =>
+    dispatch(
+      setModalContext({
+        context: context,
+        modal: "printCenter"
+      })
+    )
 });
 
-export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
+export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail, setPrintCenterContext }) {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const client = useApolloClient();
   // const history = useNavigate();
   const [closeJob] = useMutation(UPDATE_JOB);
   const [loading, setLoading] = useState(false);
+  const notification = useNotification();
 
   const {
     treatments: { Qb_Multi_Ar, ClosingPeriod }
@@ -170,7 +178,6 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
           extra={
             <Space>
               <JobsCloseAutoAllocate joblines={job.joblines} form={form} disabled={!!job.date_exported || jobRO} />
-
               <Popconfirm
                 onConfirm={() => form.submit()}
                 disabled={jobRO}
@@ -187,6 +194,21 @@ export function JobsCloseComponent({ job, bodyshop, jobRO, insertAuditTrail }) {
                   <Button disabled={job.date_exported || !jobRO}>{t("jobs.actions.sendtodms")}</Button>
                 </Link>
               )}
+              <Button
+                onClick={() => {
+                  setPrintCenterContext({
+                    context: {
+                      id: job.id,
+                      job: job,
+                      type: "job"
+                    }
+                  });
+                }}
+                key="printing"
+                icon={<PrinterFilled />}
+              >
+                {t("jobs.actions.printCenter")}
+              </Button>
               <JobsScoreboardAdd job={job} disabled={false} />
             </Space>
           }

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));
@@ -390,7 +392,7 @@ export function JobsDetailPage({
             {
               key: "labor",
               id: "job-details-labor",
-              icon: <Icon component={FaHardHat} />,
+              icon: <Icon component={FaHardHat} style={{ marginRight: 15 }} />,
               label: (
                 <LockWrapperComponent featureName="timetickets">{t("menus.jobsdetail.labor")}</LockWrapperComponent>
               ),
@@ -419,7 +421,7 @@ export function JobsDetailPage({
             {
               key: "documents",
               id: "job-details-documents",
-              icon: <FileImageFilled />,
+              icon: <FileImageFilled style={{ marginRight: 10 }} />,
               label: <LockWrapperComponent featureName="media">{t("jobs.labels.documents")}</LockWrapperComponent>,
               children: bodyshop.uselocalmediaserver ? (
                 <JobsDocumentsLocalGallery job={job} />
@@ -447,12 +449,14 @@ export function JobsDetailPage({
             },
             {
               key: "tasks",
-              icon: <FaTasks />,
+              icon: <FaTasks style={{ paddingTop: 3 }} />,
               id: "job-details-tasks",
               label: (
-                <Space direction="horizontal">
-                  {t("jobs.labels.tasks")}
-                  {job.tasks_aggregate.aggregate.count > 0 && <Badge count={job.tasks_aggregate.aggregate.count} />}
+                <Space direction="horizontal" align="center">
+                  <span>{t("jobs.labels.tasks")}</span>
+                  {job.tasks_aggregate.aggregate.count > 0 && (
+                    <Badge size="small" count={job.tasks_aggregate.aggregate.count} />
+                  )}
                 </Space>
               ),
               children: (

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({