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}>