Cleanup on schedule modal + begin smart scheduling BOD-4

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

@@ -1,23 +1,23 @@
 import { Button, Checkbox, Col, Row } from "antd";
 import axios from "axios";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { auth } from "../../firebase/firebase.utils";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
+import { DateTimeFormatter } from "../../utils/DateFormatter";
 
 export default function ScheduleJobModalComponent({
   existingAppointments,
   appData,
   setAppData,
-  formData,
-  setFormData,
 }) {
   const { t } = useTranslation();
-
+  const [loading, setLoading] = useState(false);
   const handleAuto = async () => {
+    setLoading(true);
     try {
       const response = await axios.post(
         "/scheduling/job",
@@ -29,16 +29,19 @@ export default function ScheduleJobModalComponent({
         }
       );
       console.log("response", response);
+      setAppData({ ...appData, smartDates: response.data });
     } catch (error) {
       console.log("error", error, error.message);
+    } finally {
+      setLoading(false);
     }
   };
 
   //TODO Existing appointments list only refreshes sometimes after modal close. May have to do with the container class.
   return (
-    <Row>
+    <Row gutter={[32, 32]}>
       <Col span={14}>
-        <div style={{ display: "flex", alignContent: "middle" }}>
+        <div className='imex-flex-row imex-flex-row__flex-space-around'>
           <strong>{t("appointments.fields.time")}</strong>
           <DateTimePicker
             value={appData.start}
@@ -46,10 +49,22 @@ export default function ScheduleJobModalComponent({
               setAppData({ ...appData, start: e });
             }}
           />
-          <Button onClick={handleAuto}>
+          <Button onClick={handleAuto} loading={loading}>
             {t("appointments.actions.smartscheduling")}
           </Button>
         </div>
+        <div className='imex-flex-row imex-flex-row__flex-space-around'>
+          {appData.smartDates.map((d, idx) => (
+            <Button
+              className='imex-flex-row__margin'
+              key={idx}
+              onClick={() => {
+                setAppData({ ...appData, start: d });
+              }}>
+              <DateTimeFormatter>{d}</DateTimeFormatter>
+            </Button>
+          ))}
+        </div>
 
         {t("appointments.labels.history")}
         <ScheduleExistingAppointmentsList
@@ -57,17 +72,16 @@ export default function ScheduleJobModalComponent({
         />
 
         <Checkbox
-          defaultChecked={formData.notifyCustomer}
+          defaultChecked={appData.notifyCustomer}
           onChange={(e) =>
-            setFormData({ ...formData, notifyCustomer: e.target.checked })
-          }
-        >
+            setAppData({ ...appData, notifyCustomer: e.target.checked })
+          }>
           {t("jobs.labels.appointmentconfirmation")}
         </Checkbox>
         <EmailInput
-          defaultValue={formData.email}
+          defaultValue={appData.email}
           title={t("owner.fields.ownr_ea")}
-          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+          onChange={(e) => setAppData({ ...appData, email: e.target.value })}
         />
       </Col>
       <Col span={10}>

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

@@ -35,28 +35,25 @@ 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 [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
   const [updateJobStatus] = useMutation(UPDATE_JOBS);
-  const [formData, setFormData] = useState({
-    notifyCustomer: false,
-    email: (job && job.ownr_ea) || "",
-  });
 
   useEffect(() => {
-    setFormData({
+    setAppData({
       notifyCustomer: !!(job && job.ownr_ea),
       email: (job && job.ownr_ea) || "",
       start: null,
+      smartDates: [],
     });
-    setAppData({
-      start: null,
-    });
-  }, [job, setFormData, setAppData]);
+  }, [job, , setAppData]);
 
   const { t } = useTranslation();
 
@@ -68,6 +65,7 @@ export function ScheduleJobModalContainer({
 
   //TODO Customize the amount of minutes it will add.
   const handleOk = async () => {
+    setLoading(true);
     if (!!previousEvent) {
       const cancelAppt = await cancelAppointment({
         variables: { appid: previousEvent },
@@ -89,9 +87,10 @@ export function ScheduleJobModalContainer({
     const appt = await insertAppointment({
       variables: {
         app: {
-          ...appData,
+          //...appData,
           jobid: jobId,
           bodyshopid: bodyshop.id,
+          start: moment(appData.start),
           end: moment(appData.start).add(bodyshop.appt_length || 60, "minutes"),
         },
       },
@@ -129,12 +128,12 @@ export function ScheduleJobModalContainer({
         return;
       }
     }
-
+    setLoading(false);
     toggleModalVisible();
-    if (formData.notifyCustomer) {
+    if (appData.notifyCustomer) {
       setEmailOptions({
         messageOptions: {
-          to: formData.email,
+          to: appData.email,
           replyTo: bodyshop.email,
         },
         template: {
@@ -156,14 +155,14 @@ export function ScheduleJobModalContainer({
       width={"90%"}
       maskClosable={false}
       destroyOnClose
-      okButtonProps={{ disabled: appData.start ? false : true }}
-    >
+      okButtonProps={{
+        disabled: appData.start ? false : true,
+        loading: loading,
+      }}>
       <ScheduleJobModalComponent
         existingAppointments={existingAppointments}
         appData={appData}
         setAppData={setAppData}
-        formData={formData}
-        setFormData={setFormData}
       />
     </Modal>
   );