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

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

@@ -3,7 +3,8 @@ import ScheduleJobModalComponent from "./schedule-job-modal.component";
 import { useMutation } from "react-apollo";
 import { INSERT_APPOINTMENT } from "../../graphql/appointments.queries";
 import moment from "moment";
-
+import { notification } from "antd";
+import { useTranslation } from "react-i18next";
 export default function ScheduleJobModalContainer({
   scheduleModalState,
   jobId
@@ -11,11 +12,15 @@ export default function ScheduleJobModalContainer({
   const [scheduleModalVisible, setscheduleModalVisible] = scheduleModalState;
   const [appData, setAppData] = useState({ jobid: jobId, start: null });
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
+  const [formData, setFormData] = useState({ notifyCustomer: false });
+  const { t } = useTranslation();
 
   return (
     <ScheduleJobModalComponent
       appData={appData}
       setAppData={setAppData}
+      formData={formData}
+      setFormData={setFormData}
       //Spreadable Modal Props
       visible={scheduleModalVisible}
       onCancel={() => setscheduleModalVisible(false)}
@@ -25,9 +30,25 @@ export default function ScheduleJobModalContainer({
           variables: {
             app: { ...appData, end: moment(appData.start).add(60, "minutes") }
           }
-        }).then(r => {
-          setscheduleModalVisible(false);
-        });
+        })
+          .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!");
+            }
+            setscheduleModalVisible(false);
+          })
+          .catch(error => {
+            notification["error"]({
+              message: t("appointments.errors.saving", {
+                message: error.message
+              })
+            });
+          });
       }}
     />
   );