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.component.jsx

@@ -1,4 +1,4 @@
-import { Checkbox, Col, Row, Tabs } from "antd";
+import { Checkbox, Col, Row, Input, Button } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
@@ -6,6 +6,7 @@ import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.con
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import axios from "axios";
 import { auth } from "../../firebase/firebase.utils";
+import EmailInput from "../form-items-formatted/email-form-item.component";
 
 export default function ScheduleJobModalComponent({
   existingAppointments,
@@ -37,31 +38,24 @@ export default function ScheduleJobModalComponent({
   return (
     <Row>
       <Col span={14}>
-        <Tabs defaultActiveKey="1">
-          <Tabs.TabPane tab="SMART Scheduling" key="auto">
-            Automatic Job Selection.
-            <button onClick={handleAuto}>Get dates.</button>
-          </Tabs.TabPane>
-          <Tabs.TabPane tab="Manual Scheduling" key="manual">
-            <Row>
-              Manual Job Selection Scheduled Time
-              <div style={{ height: "300px" }}>
-                <DateTimePicker
-                  value={appData.start}
-                  onChange={(e) => {
-                    setAppData({ ...appData, start: e });
-                  }}
-                />
-              </div>
-            </Row>
-          </Tabs.TabPane>
-        </Tabs>
+        <div style={{ display: "flex", alignContent: "middle" }}>
+          <strong>{t("appointments.fields.time")}</strong>
+          <DateTimePicker
+            value={appData.start}
+            onChange={(e) => {
+              setAppData({ ...appData, start: e });
+            }}
+          />
+          <Button onClick={handleAuto}>
+            {t("appointments.actions.smartscheduling")}
+          </Button>
+        </div>
+
+        {t("appointments.labels.history")}
         <ScheduleExistingAppointmentsList
           existingAppointments={existingAppointments}
         />
-        {
-          //TODO Build out notifications.
-        }
+
         <Checkbox
           defaultChecked={formData.notifyCustomer}
           onChange={(e) =>
@@ -70,6 +64,11 @@ export default function ScheduleJobModalComponent({
         >
           {t("jobs.labels.appointmentconfirmation")}
         </Checkbox>
+        <EmailInput
+          defaultValue={formData.email}
+          title={t("owner.fields.ownr_ea")}
+          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+        />
       </Col>
       <Col span={10}>
         <ScheduleDayViewContainer day={appData.start} />