Added predictive completion time based on cycle times for job scheduling. BOD-401

client/src/components/schedule-job-modal/schedule-job-modal.container.jsx

@@ -1,23 +1,24 @@
-import React, { useState, useEffect } from "react";
-import ScheduleJobModalComponent from "./schedule-job-modal.component";
 import { useMutation, useQuery } from "@apollo/react-hooks";
-import {
-  INSERT_APPOINTMENT,
-  CANCEL_APPOINTMENT_BY_ID,
-  QUERY_APPOINTMENTS_BY_JOBID,
-} from "../../graphql/appointments.queries";
-import moment from "moment";
-import { notification, Modal } from "antd";
+//import moment from "moment";
+import { Form, Modal, notification } from "antd";
+import moment from "moment-business-days";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UPDATE_JOBS } from "../../graphql/jobs.queries";
-import { setEmailOptions } from "../../redux/email/email.actions";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectSchedule } from "../../redux/modals/modals.selectors";
-import { toggleModalVisible } from "../../redux/modals/modals.actions";
-import { TemplateList } from "../../utils/TemplateConstants";
 import { logImEXEvent } from "../../firebase/firebase.utils";
+import {
+  CANCEL_APPOINTMENT_BY_ID,
+  INSERT_APPOINTMENT,
+  QUERY_APPOINTMENTS_BY_JOBID,
+} from "../../graphql/appointments.queries";
+import { QUERY_LBR_HRS_BY_PK, UPDATE_JOBS } from "../../graphql/jobs.queries";
+import { setEmailOptions } from "../../redux/email/email.actions";
+import { toggleModalVisible } from "../../redux/modals/modals.actions";
+import { selectSchedule } from "../../redux/modals/modals.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
+import { TemplateList } from "../../utils/TemplateConstants";
+import ScheduleJobModalComponent from "./schedule-job-modal.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -36,26 +37,23 @@ export function ScheduleJobModalContainer({
 }) {
   const { visible, context, actions } = scheduleModal;
   const { jobId, job, previousEvent } = context;
+
   const { refetch } = actions;
-  const [loading, setLoading] = useState(false);
-  const [appData, setAppData] = useState({
-    notifyCustomer: !!(job && job.ownr_ea),
-    email: (job && job.ownr_ea) || "",
-    start: null,
-    smartDates: [],
+  const [form] = Form.useForm();
+
+  const { data: lbrHrsData } = useQuery(QUERY_LBR_HRS_BY_PK, {
+    variables: { id: job && job.id },
+    skip: !job || !job.id,
   });
+
+  const [loading, setLoading] = useState(false);
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
   const [updateJobStatus] = useMutation(UPDATE_JOBS);
 
   useEffect(() => {
-    setAppData({
-      notifyCustomer: !!(job && job.ownr_ea),
-      email: (job && job.ownr_ea) || "",
-      start: null,
-      smartDates: [],
-    });
-  }, [job, setAppData]);
+    form.resetFields();
+  }, [job, form]);
 
   const { t } = useTranslation();
 
@@ -65,7 +63,7 @@ export function ScheduleJobModalContainer({
     skip: !visible || !!!jobId,
   });
 
-  const handleOk = async () => {
+  const handleFinish = async (values) => {
     logImEXEvent("schedule_new_appointment");
 
     setLoading(true);
@@ -90,11 +88,10 @@ export function ScheduleJobModalContainer({
     const appt = await insertAppointment({
       variables: {
         app: {
-          //...appData,
           jobid: jobId,
           bodyshopid: bodyshop.id,
-          start: moment(appData.start),
-          end: moment(appData.start).add(bodyshop.appt_length || 60, "minutes"),
+          start: moment(values.start),
+          end: moment(values.start).add(bodyshop.appt_length || 60, "minutes"),
         },
       },
     });
@@ -117,7 +114,8 @@ export function ScheduleJobModalContainer({
           fields: {
             status: bodyshop.md_ro_statuses.default_scheduled,
             date_scheduled: new Date(),
-            scheduled_in: appData.start,
+            scheduled_in: values.start,
+            scheduled_completion: values.scheduled_completion,
           },
         },
       });
@@ -133,10 +131,10 @@ export function ScheduleJobModalContainer({
     }
     setLoading(false);
     toggleModalVisible();
-    if (appData.notifyCustomer) {
+    if (values.notifyCustomer) {
       setEmailOptions({
         messageOptions: {
-          to: [appData.email],
+          to: [values.email],
           replyTo: bodyshop.email,
         },
         template: {
@@ -154,21 +152,34 @@ export function ScheduleJobModalContainer({
     <Modal
       visible={visible}
       onCancel={() => toggleModalVisible()}
-      onOk={handleOk}
+      onOk={() => form.submit()}
       width={"90%"}
       maskClosable={false}
       destroyOnClose
+      forceRender
       okButtonProps={{
-        disabled: appData.start ? false : true,
         loading: loading,
       }}
     >
-      <ScheduleJobModalComponent
-        jobId={jobId}
-        existingAppointments={existingAppointments}
-        appData={appData}
-        setAppData={setAppData}
-      />
+      <Form
+        form={form}
+        layout="vertical"
+        onFinish={handleFinish}
+        initialValues={{
+          notifyCustomer: !!(job && job.ownr_ea),
+          email: (job && job.ownr_ea) || "",
+          start: null,
+          // smartDates: [],
+          scheduled_completion: null,
+        }}
+      >
+        <ScheduleJobModalComponent
+          existingAppointments={existingAppointments}
+          lbrHrsData={lbrHrsData}
+          form={form}
+          jobId={jobId}
+        />
+      </Form>
     </Modal>
   );
 }