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

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,7 @@ 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({
@@ -121,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);
@@ -129,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, Share_To_Teams }
@@ -717,7 +720,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)}
+        />
+      )
     },
 
     {
@@ -823,14 +832,14 @@ export function JobsDetailHeaderActions({
           id: "job-actions-removefromproduction",
           disabled: !job.converted,
           label: t("jobs.actions.removefromproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch, true)
+          onClick: () => AddToProduction(client, job.id, refetch, true, notification)
         }
       : {
           key: "addtoproduction",
           id: "job-actions-addtoproduction",
           disabled: !job.converted,
           label: t("jobs.actions.addtoproduction"),
-          onClick: () => AddToProduction(client, job.id, refetch)
+          onClick: () => AddToProduction(client, job.id, refetch, notification)
         }
   );
 
@@ -1155,7 +1164,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,18 @@
-import { useMutation } from "@apollo/client";
-import { Button, Form, notification, Popover, Space } from "antd";
+import { useLazyQuery, useMutation } from "@apollo/client";
+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";
 
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser,
@@ -22,15 +23,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] = 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,24 +100,16 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
                 DateTimeFormatterFunction(values.actual_completion)
               )
       });
+      setPopOverVisible(false);
+      closeParentMenu();
+      refetch();
     }
     setLoading(false);
   };
 
   const popMenu = (
     <div onClick={(e) => e.stopPropagation()}>
-      <Form
-        layout="vertical"
-        form={form}
-        onFinish={handleConvert}
-        initialValues={{
-          actual_in: dayjs(),
-          scheduled_completion: job.scheduled_completion,
-          actual_completion: job.actual_completion,
-          scheduled_deliver: job.scheduled_deliver,
-          actual_delivery: job.actual_delivery
-        }}
-      >
+      <Form layout="vertical" form={form} onFinish={handleConvert}>
         {scenario === "pre" && (
           <>
             <Form.Item
@@ -156,7 +174,12 @@ export function JobsDetailHeaderActionsToggleProduction({ bodyshop, job, jobRO,
   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"
     >