Table updates for new appointments fields. Schedule modal baseline functionality. Refactor schedule components to be more reusable.

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

@@ -1,35 +1,57 @@
+import { Checkbox, DatePicker, Modal, Tabs, TimePicker, Col, Row } from "antd";
 import React from "react";
-import { Modal, Tabs, DatePicker, TimePicker } from "antd";
-import moment from "moment";
+import { useTranslation } from "react-i18next";
+import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 export default function ScheduleJobModalComponent({
   appData,
   setAppData,
+  formData,
+  setFormData,
   ...props
 }) {
+  const { t } = useTranslation();
   return (
-    <Modal {...props} maskClosable={false}>
+    <Modal {...props} width={"80%"} maskClosable={false}>
       <Tabs defaultActiveKey="1">
         <Tabs.TabPane tab="SMART Scheduling" key="auto">
           Automatic Job Selection.
         </Tabs.TabPane>
         <Tabs.TabPane tab="Manual Scheduling" key="manual">
-          Manual Job Selection Scheduled Time
-          <DatePicker
-            value={appData.start}
-            onChange={e => {
-              setAppData({ ...appData, start: e });
-            }}
-          />
-          <TimePicker
-            value={appData.start}
-            format={"HH:mm"}
-            minuteStep={15}
-            onChange={e => {
-              setAppData({ ...appData, start: e });
-            }}
-          />
+          <Row>
+            <Col span={14}>
+              Manual Job Selection Scheduled Time
+              <DatePicker
+                value={appData.start}
+                onChange={e => {
+                  setAppData({ ...appData, start: e });
+                }}
+              />
+              <TimePicker
+                value={appData.start}
+                format={"HH:mm"}
+                minuteStep={15}
+                onChange={e => {
+                  setAppData({ ...appData, start: e });
+                }}
+              />
+            </Col>
+            <Col span={10}>
+              <ScheduleDayViewContainer day={appData.start} />
+            </Col>
+          </Row>
         </Tabs.TabPane>
       </Tabs>
+      {
+        //TODO: Build out notifications.
+      }
+      <Checkbox
+        defaultChecked={formData.notifyCustomer}
+        onChange={e =>
+          setFormData({ ...formData, notifyCustomer: e.target.checked })
+        }
+      >
+        {t("jobs.labels.appointmentconfirmation")}
+      </Checkbox>
     </Modal>
   );
 }