From ade92d86aabccba998569ccae083276c7f6b2f54 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Thu, 6 Jan 2022 10:13:49 -0800
Subject: [PATCH] IO-347 Manual appointments.

---
 bodyshop_translations.babel                   |  86 ++++++++-
 .../schedule-event.component.jsx              | 171 ++++++++++--------
 .../scheduler-calendar-wrapper.component.jsx  |   8 +-
 .../schedule-calendar.component.jsx           |   7 +-
 .../schedule-manual-event.component.jsx       |  86 +++++++--
 client/src/graphql/appointments.queries.js    |  20 ++
 client/src/translations/en_us/common.json     |   8 +-
 client/src/translations/es/common.json        |   4 +
 client/src/translations/fr/common.json        |   4 +
 9 files changed, 288 insertions(+), 106 deletions(-)

diff --git a/bodyshop_translations.babel b/bodyshop_translations.babel
index b142996b8..9365969a2 100644
--- a/bodyshop_translations.babel
+++ b/bodyshop_translations.babel
@@ -1,4 +1,4 @@
-<babeledit_project version="1.2" be_version="2.7.1">
+<babeledit_project be_version="2.7.1" version="1.2">
     <!--
 
     BabelEdit project file
@@ -500,6 +500,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>end</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>note</name>
                                         <definition_loaded>false</definition_loaded>
@@ -521,6 +542,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>start</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>time</name>
                                         <definition_loaded>false</definition_loaded>
@@ -673,6 +715,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>dataconsistency</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>history</name>
                                         <definition_loaded>false</definition_loaded>
@@ -715,6 +778,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>manualevent</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description></description>
+                                        <comment></comment>
+                                        <default_text></default_text>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>es-MX</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>fr-CA</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
                                     <concept_node>
                                         <name>noarrivingjobs</name>
                                         <definition_loaded>false</definition_loaded>
diff --git a/client/src/components/job-at-change/schedule-event.component.jsx b/client/src/components/job-at-change/schedule-event.component.jsx
index ffaedb4f1..21f3285d1 100644
--- a/client/src/components/job-at-change/schedule-event.component.jsx
+++ b/client/src/components/job-at-change/schedule-event.component.jsx
@@ -27,6 +27,7 @@ import { GenerateDocument } from "../../utils/RenderTemplate";
 import { TemplateList } from "../../utils/TemplateConstants";
 import ChatOpenButton from "../chat-open-button/chat-open-button.component";
 import DataLabel from "../data-label/data-label.component";
+import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
 import ScheduleEventNote from "./schedule-event.note.component";
@@ -66,7 +67,10 @@ export function ScheduleEventComponent({
   const popoverContent = (
     <div style={{ maxWidth: "40vw" }}>
       {!event.isintake ? (
-        <strong>{event.title}</strong>
+        <Space>
+          <strong>{event.title}</strong>
+          <ScheduleEventColor event={event} />
+        </Space>
       ) : (
         <Space>
           <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
@@ -118,7 +122,9 @@ export function ScheduleEventComponent({
           </DataLabel>
           <ScheduleEventNote event={event} />
         </div>
-      ) : null}
+      ) : (
+        <div>{event.note || ""}</div>
+      )}
       <Divider />
       <Space wrap>
         {event.job ? (
@@ -140,84 +146,89 @@ export function ScheduleEventComponent({
             {t("appointments.actions.preview")}
           </Button>
         ) : null}
-
-        <Dropdown
-          overlay={
-            <Menu>
-              <Menu.Item
-                onClick={() => {
-                  const Template = TemplateList("job").appointment_reminder;
-                  GenerateDocument(
-                    {
-                      name: Template.key,
-                      variables: { id: event.job.id },
-                    },
-                    {
-                      to: event.job && event.job.ownr_ea,
-                      subject: Template.subject,
-                    },
-                    "e",
-                    event.job && event.job.id
-                  );
-                }}
-                disabled={event.arrived}
-              >
-                {t("general.labels.email")}
-              </Menu.Item>
-              <Menu.Item
-                onClick={() => {
-                  const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
-                  if (p && p.isValid()) {
-                    openChatByPhone({
-                      phone_num: p.formatInternational(),
-                      jobid: event.job.id,
-                    });
-                    setMessage(
-                      t("appointments.labels.reminder", {
-                        shopname: bodyshop.shopname,
-                        date: moment(event.start).format("MM/DD/YYYY"),
-                        time: moment(event.start).format("HH:mm a"),
-                      })
+        {event.job ? (
+          <Dropdown
+            overlay={
+              <Menu>
+                <Menu.Item
+                  onClick={() => {
+                    const Template = TemplateList("job").appointment_reminder;
+                    GenerateDocument(
+                      {
+                        name: Template.key,
+                        variables: { id: event.job.id },
+                      },
+                      {
+                        to: event.job && event.job.ownr_ea,
+                        subject: Template.subject,
+                      },
+                      "e",
+                      event.job && event.job.id
                     );
-                    setVisible(false);
-                  } else {
-                    notification["error"]({
-                      message: t("messaging.error.invalidphone"),
-                    });
-                  }
-                }}
-                disabled={event.arrived || !bodyshop.messagingservicesid}
-              >
-                {t("general.labels.sms")}
-              </Menu.Item>
-            </Menu>
-          }
-        >
-          <Button>{t("appointments.actions.sendreminder")}</Button>
-        </Dropdown>
+                  }}
+                  disabled={event.arrived}
+                >
+                  {t("general.labels.email")}
+                </Menu.Item>
+                <Menu.Item
+                  onClick={() => {
+                    const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
+                    if (p && p.isValid()) {
+                      openChatByPhone({
+                        phone_num: p.formatInternational(),
+                        jobid: event.job.id,
+                      });
+                      setMessage(
+                        t("appointments.labels.reminder", {
+                          shopname: bodyshop.shopname,
+                          date: moment(event.start).format("MM/DD/YYYY"),
+                          time: moment(event.start).format("HH:mm a"),
+                        })
+                      );
+                      setVisible(false);
+                    } else {
+                      notification["error"]({
+                        message: t("messaging.error.invalidphone"),
+                      });
+                    }
+                  }}
+                  disabled={event.arrived || !bodyshop.messagingservicesid}
+                >
+                  {t("general.labels.sms")}
+                </Menu.Item>
+              </Menu>
+            }
+          >
+            <Button>{t("appointments.actions.sendreminder")}</Button>
+          </Dropdown>
+        ) : null}
 
         <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
           {t("appointments.actions.cancel")}
         </Button>
-        <Button
-          disabled={event.arrived}
-          onClick={() => {
-            setVisible(false);
-            setScheduleContext({
-              actions: { refetch: refetch },
-              context: {
-                jobId: event.job.id,
-                job: event.job,
-                previousEvent: event.id,
-                color: event.color,
-                alt_transport: event.job && event.job.alt_transport,
-                note: event.note,
-              },
-            });
-          }}
-        >
-          {t("appointments.actions.reschedule")}
-        </Button>
+        {event.isintake ? (
+          <Button
+            disabled={event.arrived}
+            onClick={() => {
+              setVisible(false);
+              setScheduleContext({
+                actions: { refetch: refetch },
+                context: {
+                  jobId: event.job.id,
+                  job: event.job,
+                  previousEvent: event.id,
+                  color: event.color,
+                  alt_transport: event.job && event.job.alt_transport,
+                  note: event.note,
+                },
+              });
+            }}
+          >
+            {t("appointments.actions.reschedule")}
+          </Button>
+        ) : (
+          <ScheduleManualEvent event={event} />
+        )}
         {event.isintake ? (
           <Link
             to={{
@@ -235,7 +246,13 @@ export function ScheduleEventComponent({
   );
 
   const RegularEvent = event.isintake ? (
-    <div style={{ display: "flex", flexWrap: "wrap" }}>
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        height: "100%",
+      }}
+    >
       <Space>
         {event.note && <AlertFilled className="production-alert" />}
         <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>
@@ -262,7 +279,7 @@ export function ScheduleEventComponent({
       )}
     </div>
   ) : (
-    <div>
+    <div style={{ height: "100%", width: "100%" }}>
       <strong>{`${event.title || ""}`}</strong>
     </div>
   );
diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
index 942f2908f..616c58ecb 100644
--- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
@@ -12,6 +12,7 @@ import "./schedule-calendar.styles.scss";
 import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
 import { selectProblemJobs } from "../../redux/application/application.selectors";
 import { Alert } from "antd";
+import { useTranslation } from "react-i18next";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -30,7 +31,7 @@ export function ScheduleCalendarWrapperComponent({
 }) {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
-
+  const { t } = useTranslation();
   const handleEventPropStyles = (event, start, end, isSelected) => {
     return {
       ...(event.color
@@ -57,7 +58,10 @@ export function ScheduleCalendarWrapperComponent({
           <Alert
             key={problem.id}
             type="error"
-            message={`${problem.ro_number} has a data consistency issue. It has been exlcuded for scheduling purposes. CODE: ${problem.code}`}
+            message={t("appointments.labels.dataconsistency", {
+              ro_number: problem.ro_number,
+              code: problem.code,
+            })}
           />
         ))}
 
diff --git a/client/src/components/schedule-calendar/schedule-calendar.component.jsx b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
index 5282dc62c..91f0ac59d 100644
--- a/client/src/components/schedule-calendar/schedule-calendar.component.jsx
+++ b/client/src/components/schedule-calendar/schedule-calendar.component.jsx
@@ -3,7 +3,7 @@ import { Button, Card, Col, PageHeader, Row, Space } from "antd";
 import React from "react";
 import ScheduleCalendarWrapperComponent from "../schedule-calendar-wrapper/scheduler-calendar-wrapper.component";
 import ScheduleModal from "../schedule-job-modal/schedule-job-modal.container";
-//import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
+import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
 import ScheduleProductionList from "../schedule-production-list/schedule-production-list.component";
 import ScheduleVerifyIntegrity from "../schedule-verify-integrity/schedule-verify-integrity.component";
 
@@ -25,9 +25,8 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
                 <SyncOutlined />
               </Button>
               <ScheduleProductionList />
-              {
-                //   <ScheduleManualEvent />
-              }
+
+              <ScheduleManualEvent />
             </Space>
           }
         />
diff --git a/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx b/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
index 26e5b3eda..c36d3549d 100644
--- a/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
+++ b/client/src/components/schedule-manual-event/schedule-manual-event.component.jsx
@@ -1,17 +1,32 @@
 import { useMutation } from "@apollo/client";
-import { Button, Card, Form, Input, Popover, Space } from "antd";
+import { Button, Card, Form, Input, Popover, Select, Space } from "antd";
+import moment from "moment";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import {
-  INSERT_APPOINTMENT,
+  INSERT_MANUAL_APPT,
   UPDATE_APPOINTMENT,
 } from "../../graphql/appointments.queries";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
 
-export default function ScheduleManualEvent({ event }) {
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ScheduleManualEvent);
+
+export function ScheduleManualEvent({ bodyshop, event }) {
   const { t } = useTranslation();
-  const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
+  const [insertAppointment] = useMutation(INSERT_MANUAL_APPT);
   const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
@@ -22,26 +37,27 @@ export default function ScheduleManualEvent({ event }) {
 
   useEffect(() => {
     if (visibility && event) {
-      form.setFieldsValue({ event });
+      form.setFieldsValue(event);
     }
   }, [visibility, form, event]);
 
-  useEffect(() => {
-    //     if (entryData && entryData.scoreboard && entryData.scoreboard[0]) {
-    //       console.log("Setting FOrm");
-    //   //    form.setFieldsValue(entryData.scoreboard[0]);
-    //     }
-  }, [form]);
-
   const handleFinish = async (values) => {
-    logImEXEvent("job_close_add_to_scoreboard");
+    logImEXEvent("schedule_manual_event");
 
     setLoading(true);
     try {
       if (event && event.id) {
-        updateAppointment();
+        updateAppointment({
+          variables: { appid: event.id, app: values },
+          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+        });
       } else {
-        insertAppointment();
+        insertAppointment({
+          variables: {
+            apt: { ...values, isintake: false, bodyshopid: bodyshop.id },
+          },
+          refetchQueries: ["QUERY_ALL_ACTIVE_APPOINTMENTS"],
+        });
       }
     } catch (error) {
       console.log(error);
@@ -56,8 +72,8 @@ export default function ScheduleManualEvent({ event }) {
       <div>
         <Form form={form} layout="vertical" onFinish={handleFinish}>
           <Form.Item
-            label={t("schedule.fields.note")}
-            name="note"
+            label={t("appointments.fields.title")}
+            name="title"
             rules={[
               {
                 required: true,
@@ -67,8 +83,11 @@ export default function ScheduleManualEvent({ event }) {
           >
             <Input />
           </Form.Item>
+          <Form.Item label={t("appointments.fields.note")} name="note">
+            <Input />
+          </Form.Item>
           <Form.Item
-            label={t("schedule.fields.start")}
+            label={t("appointments.fields.start")}
             name="start"
             rules={[
               {
@@ -80,17 +99,42 @@ export default function ScheduleManualEvent({ event }) {
             <FormDateTimePickerComponent />
           </Form.Item>
           <Form.Item
-            label={t("schedule.fields.end")}
+            label={t("appointments.fields.end")}
             name="end"
             rules={[
               {
                 required: true,
                 //message: t("general.validation.required"),
               },
+              ({ getFieldValue }) => ({
+                async validator(rule, value) {
+                  if (value) {
+                    const { start } = form.getFieldsValue();
+                    if (moment(start).isAfter(moment(value))) {
+                      return Promise.reject(
+                        t("employees.labels.endmustbeafterstart")
+                      );
+                    } else {
+                      return Promise.resolve();
+                    }
+                  } else {
+                    return Promise.resolve();
+                  }
+                },
+              }),
             ]}
           >
             <FormDateTimePickerComponent />
           </Form.Item>
+          <Form.Item label={t("appointments.fields.color")} name="color">
+            <Select>
+              {bodyshop.appt_colors.map((col, idx) => (
+                <Select.Option key={idx} value={col.color.hex}>
+                  {col.label}
+                </Select.Option>
+              ))}
+            </Select>
+          </Form.Item>
 
           <Space wrap>
             <Button type="primary" htmlType="submit">
@@ -112,7 +156,9 @@ export default function ScheduleManualEvent({ event }) {
   return (
     <Popover content={overlay} visible={visibility}>
       <Button loading={loading} onClick={handleClick}>
-        {t("schedule.labels.manualevent")}
+        {event
+          ? t("appointments.actions.reschedule")
+          : t("appointments.labels.manualevent")}
       </Button>
     </Popover>
   );
diff --git a/client/src/graphql/appointments.queries.js b/client/src/graphql/appointments.queries.js
index c11cd8337..d97e2494d 100644
--- a/client/src/graphql/appointments.queries.js
+++ b/client/src/graphql/appointments.queries.js
@@ -91,6 +91,26 @@ export const INSERT_APPOINTMENT_BLOCK = gql`
   }
 `;
 
+export const INSERT_MANUAL_APPT = gql`
+  mutation INSERT_MANUAL_APPT($apt: appointments_insert_input!) {
+    insert_appointments_one(object: $apt) {
+      start
+      id
+      end
+      arrived
+      title
+      isintake
+      block
+      color
+      note
+      canceled
+      job {
+        id
+      }
+    }
+  }
+`;
+
 export const INSERT_APPOINTMENT = gql`
   mutation INSERT_APPOINTMENT(
     $app: [appointments_insert_input!]!
diff --git a/client/src/translations/en_us/common.json b/client/src/translations/en_us/common.json
index 625f504e2..5ee6705a1 100644
--- a/client/src/translations/en_us/common.json
+++ b/client/src/translations/en_us/common.json
@@ -37,7 +37,9 @@
 			"fields": {
 				"alt_transport": "Alt. Trans.",
 				"color": "Appointment Color",
-				"note": "Appt. Note",
+				"end": "End",
+				"note": "Note",
+				"start": "Start",
 				"time": "Appointment Time",
 				"title": "Title"
 			},
@@ -47,8 +49,10 @@
 				"blocked": "Blocked",
 				"cancelledappointment": "Canceled appointment for: ",
 				"completingjobs": "Completing Jobs",
+				"dataconsistency": "{{ro_number}} has a data consistency issue. It has been excluded for scheduling purposes. CODE: {{code}}.",
 				"history": "History",
 				"inproduction": "Jobs In Production",
+				"manualevent": "Add Manual Appointment",
 				"noarrivingjobs": "No jobs are arriving.",
 				"nocompletingjobs": "No jobs scheduled for completion.",
 				"nodateselected": "No date has been selected.",
@@ -864,7 +868,7 @@
 			},
 			"labels": {
 				"actions": "Actions",
-				"endmustbeafterstart": "End date must be after start date.Ï",
+				"endmustbeafterstart": "End date must be after start date.",
 				"flat_rate": "Flat Rate",
 				"name": "Name",
 				"rate_type": "Rate Type",
diff --git a/client/src/translations/es/common.json b/client/src/translations/es/common.json
index 5dadae90c..75e2ab87d 100644
--- a/client/src/translations/es/common.json
+++ b/client/src/translations/es/common.json
@@ -37,7 +37,9 @@
 			"fields": {
 				"alt_transport": "",
 				"color": "",
+				"end": "",
 				"note": "",
+				"start": "",
 				"time": "",
 				"title": "Título"
 			},
@@ -47,8 +49,10 @@
 				"blocked": "",
 				"cancelledappointment": "Cita cancelada para:",
 				"completingjobs": "",
+				"dataconsistency": "",
 				"history": "",
 				"inproduction": "",
+				"manualevent": "",
 				"noarrivingjobs": "",
 				"nocompletingjobs": "",
 				"nodateselected": "No se ha seleccionado ninguna fecha.",
diff --git a/client/src/translations/fr/common.json b/client/src/translations/fr/common.json
index 9c1c410bf..c92da10b0 100644
--- a/client/src/translations/fr/common.json
+++ b/client/src/translations/fr/common.json
@@ -37,7 +37,9 @@
 			"fields": {
 				"alt_transport": "",
 				"color": "",
+				"end": "",
 				"note": "",
+				"start": "",
 				"time": "",
 				"title": "Titre"
 			},
@@ -47,8 +49,10 @@
 				"blocked": "",
 				"cancelledappointment": "Rendez-vous annulé pour:",
 				"completingjobs": "",
+				"dataconsistency": "",
 				"history": "",
 				"inproduction": "",
+				"manualevent": "",
 				"noarrivingjobs": "",
 				"nocompletingjobs": "",
 				"nodateselected": "Aucune date n'a été sélectionnée.",