Added length of appointment to config + fixed appointments not showing in scheduling modal + added appointment confirmation template. BOD-141 BOD-149 BOD-148

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ScheduleJobModalComponent from "./schedule-job-modal.component";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
@@ -9,12 +9,13 @@ import moment from "moment";
 import { notification, Modal } from "antd";
 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";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -22,22 +23,37 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   toggleModalVisible: () => dispatch(toggleModalVisible("schedule")),
+  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
 });
 export function ScheduleJobModalContainer({
   scheduleModal,
   bodyshop,
   toggleModalVisible,
+  setEmailOptions,
 }) {
   const { visible, context, actions } = scheduleModal;
-  const { jobId } = context;
+  const { jobId, job } = context;
   const { refetch } = actions;
 
   const [appData, setAppData] = useState({
     start: null,
   });
+
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
   const [updateJobStatus] = useMutation(UPDATE_JOBS);
-  const [formData, setFormData] = useState({ notifyCustomer: false });
+  const [formData, setFormData] = useState({
+    notifyCustomer: false,
+    email: (job && job.ownr_ea) || "",
+  });
+
+  useEffect(() => {
+    setFormData({
+      notifyCustomer: !!(job && job.ownr_ea),
+      email: (job && job.ownr_ea) || "",
+      start: null,
+    });
+  }, [job, setFormData]);
+
   const { t } = useTranslation();
 
   const existingAppointments = useQuery(QUERY_APPOINTMENTS_BY_JOBID, {
@@ -47,47 +63,67 @@ export function ScheduleJobModalContainer({
   });
 
   //TODO Customize the amount of minutes it will add.
-  const handleOk = () => {
-    insertAppointment({
+  const handleOk = async () => {
+    const appt = await insertAppointment({
       variables: {
         app: {
           ...appData,
           jobid: jobId,
           bodyshopid: bodyshop.id,
-          end: moment(appData.start).add(60, "minutes"),
+          end: moment(appData.start).add(bodyshop.appt_length || 60, "minutes"),
         },
       },
-    })
-      .then((r) => {
-        updateJobStatus({
-          variables: {
-            jobIds: [jobId],
-            fields: {
-              status: bodyshop.md_ro_statuses.default_scheduled,
-              date_scheduled: new Date(),
-              scheduled_in: appData.start,
-            },
-          },
-        }).then((r) => {
-          notification["success"]({
-            message: t("appointments.successes.created"),
-          });
+    });
 
-          if (formData.notifyCustomer) {
-            //TODO Implement customer reminder on scheduling.
-            alert("Chosed to notify the customer somehow!");
-          }
-          toggleModalVisible();
-          if (refetch) refetch();
-        });
-      })
-      .catch((error) => {
+    if (!!appt.errors) {
+      notification["error"]({
+        message: t("appointments.errors.saving", {
+          message: JSON.stringify(appt.errors),
+        }),
+      });
+      return;
+    }
+    notification["success"]({
+      message: t("appointments.successes.created"),
+    });
+    if (jobId) {
+      const jobUpdate = await updateJobStatus({
+        variables: {
+          jobIds: [jobId],
+          fields: {
+            status: bodyshop.md_ro_statuses.default_scheduled,
+            date_scheduled: new Date(),
+            scheduled_in: appData.start,
+          },
+        },
+      });
+
+      if (!!jobUpdate.errors) {
         notification["error"]({
           message: t("appointments.errors.saving", {
-            message: error.message,
+            message: JSON.stringify(jobUpdate.errors),
           }),
         });
+        return;
+      }
+    }
+
+    toggleModalVisible();
+    if (formData.notifyCustomer) {
+      setEmailOptions({
+        messageOptions: {
+          to: formData.email,
+          replyTo: bodyshop.email,
+        },
+        template: {
+          name: TemplateList.appointment_confirmation.key,
+          variables: {
+            id: appt.data.insert_appointments.returning[0].id,
+          },
+        },
       });
+    }
+    if (refetch) refetch();
   };
 
   return (