Implemented rescheduling functionality on event BOD-167

client/src/components/schedule-event/schedule-event.component.jsx

@@ -5,8 +5,21 @@ import { Link } from "react-router-dom";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
 import DataLabel from "../data-label/data-label.component";
+import { createStructuredSelector } from "reselect";
+import { setModalContext } from "../../redux/modals/modals.actions";
+import { connect } from "react-redux";
 
-export default function ScheduleEventComponent({ event, handleCancel }) {
+const mapDispatchToProps = (dispatch) => ({
+  setScheduleContext: (context) =>
+    dispatch(setModalContext({ context: context, modal: "schedule" })),
+});
+
+export function ScheduleEventComponent({
+  event,
+  refetch,
+  handleCancel,
+  setScheduleContext,
+}) {
   const { t } = useTranslation();
   const popoverContent = (
     <div>
@@ -52,7 +65,7 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
         </div>
       ) : null}
 
-      <div className='imex-flex-row'>
+      <div className="imex-flex-row">
         {event.job ? (
           <Link to={`/manage/jobs/${event.job && event.job.id}`}>
             <Button>{t("appointments.actions.viewjob")}</Button>
@@ -61,7 +74,19 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
         <Button onClick={() => handleCancel(event.id)} disabled={event.arrived}>
           {t("appointments.actions.cancel")}
         </Button>
-        <Button disabled={event.arrived}>
+        <Button
+          disabled={event.arrived}
+          onClick={() => {
+            setScheduleContext({
+              actions: { refetch: refetch },
+              context: {
+                jobId: event.job.id,
+                job: event.job,
+                previousEvent: event.id,
+              },
+            });
+          }}
+        >
           {t("appointments.actions.reschedule")}
         </Button>
         {event.isintake ? (
@@ -69,7 +94,8 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
             to={{
               pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
               search: `?appointmentId=${event.id}`,
-            }}>
+            }}
+          >
             <Button disabled={event.arrived}>
               {t("appointments.actions.intake")}
             </Button>
@@ -97,8 +123,9 @@ export default function ScheduleEventComponent({ event, handleCancel }) {
   );
 
   return (
-    <Popover trigger='click' content={popoverContent}>
+    <Popover trigger="click" content={popoverContent}>
       {RegularEvent}
     </Popover>
   );
 }
+export default connect(null, mapDispatchToProps)(ScheduleEventComponent);

client/src/components/schedule-event/schedule-event.container.jsx

@@ -10,27 +10,48 @@ export default function ScheduleEventContainer({ event, refetch }) {
   const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [updateJob] = useMutation(UPDATE_JOB);
   const handleCancel = async (id) => {
-    try {
+    const cancelAppt = await cancelAppointment({
-      await cancelAppointment({ variables: { appid: event.id } });
+      variables: { appid: event.id },
-      notification["success"]({
+    });
-        message: t("appointments.successes.canceled"),
+    notification["success"]({
-      });
+      message: t("appointments.successes.canceled"),
+    });
 
-      await updateJob({
+    if (!!cancelAppt.errors) {
-        variables: {
+      notification["error"]({
-          jobId: event.job.id,
+        message: t("appointments.errors.canceling", {
-          job: {
+          message: JSON.stringify(cancelAppt.errors),
-            date_scheduled: null,
+        }),
-            scheduled_in: null,
-          },
-        },
       });
-
+      return;
-      if (refetch) refetch();
-    } catch (error) {
-      notification["error"]({ message: t("appointments.errors.canceling") });
     }
+
+    const jobUpdate = await updateJob({
+      variables: {
+        jobId: event.job.id,
+        job: {
+          date_scheduled: null,
+          scheduled_in: null,
+        },
+      },
+    });
+    if (!!jobUpdate.errors) {
+      notification["error"]({
+        message: t("jobs.errors.updating", {
+          message: JSON.stringify(jobUpdate.errors),
+        }),
+      });
+      return;
+    }
+
+    if (refetch) refetch();
   };
 
-  return <ScheduleEventComponent event={event} handleCancel={handleCancel} />;
+  return (
+    <ScheduleEventComponent
+      event={event}
+      refetch={refetch}
+      handleCancel={handleCancel}
+    />
+  );
 }

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

@@ -3,6 +3,7 @@ import ScheduleJobModalComponent from "./schedule-job-modal.component";
 import { useMutation, useQuery } from "@apollo/react-hooks";
 import {
   INSERT_APPOINTMENT,
+  CANCEL_APPOINTMENT_BY_ID,
   QUERY_APPOINTMENTS_BY_JOBID,
 } from "../../graphql/appointments.queries";
 import moment from "moment";
@@ -32,13 +33,13 @@ export function ScheduleJobModalContainer({
   setEmailOptions,
 }) {
   const { visible, context, actions } = scheduleModal;
-  const { jobId, job } = context;
+  const { jobId, job, previousEvent } = context;
   const { refetch } = actions;
 
   const [appData, setAppData] = useState({
     start: null,
   });
-
+  const [cancelAppointment] = useMutation(CANCEL_APPOINTMENT_BY_ID);
   const [insertAppointment] = useMutation(INSERT_APPOINTMENT);
   const [updateJobStatus] = useMutation(UPDATE_JOBS);
   const [formData, setFormData] = useState({
@@ -52,7 +53,10 @@ export function ScheduleJobModalContainer({
       email: (job && job.ownr_ea) || "",
       start: null,
     });
-  }, [job, setFormData]);
+    setAppData({
+      start: null,
+    });
+  }, [job, setFormData, setAppData]);
 
   const { t } = useTranslation();
 
@@ -64,6 +68,24 @@ export function ScheduleJobModalContainer({
 
   //TODO Customize the amount of minutes it will add.
   const handleOk = async () => {
+    if (!!previousEvent) {
+      const cancelAppt = await cancelAppointment({
+        variables: { appid: previousEvent },
+      });
+      notification["success"]({
+        message: t("appointments.successes.canceled"),
+      });
+
+      if (!!cancelAppt.errors) {
+        notification["error"]({
+          message: t("appointments.errors.canceling", {
+            message: JSON.stringify(cancelAppt.errors),
+          }),
+        });
+        return;
+      }
+    }
+
     const appt = await insertAppointment({
       variables: {
         app: {

client/src/translations/en_us/common.json

@@ -27,7 +27,7 @@
 				"viewjob": "View Job"
 			},
 			"errors": {
-				"canceling": "Error canceling appointment.",
+				"canceling": "Error canceling appointment. {{message}}",
 				"saving": "Error scheduling appointment. {{message}}"
 			},
 			"fields": {

client/src/translations/es/common.json

@@ -27,7 +27,7 @@
 				"viewjob": "Ver trabajo"
 			},
 			"errors": {
-				"canceling": "Error al cancelar la cita.",
+				"canceling": "Error al cancelar la cita. {{message}}",
 				"saving": "Error al programar la cita. {{message}}"
 			},
 			"fields": {

client/src/translations/fr/common.json

@@ -27,7 +27,7 @@
 				"viewjob": "Voir le travail"
 			},
 			"errors": {
-				"canceling": "Erreur lors de l'annulation du rendez-vous.",
+				"canceling": "Erreur lors de l'annulation du rendez-vous. {{message}}",
 				"saving": "Erreur lors de la planification du rendez-vous. {{message}}"
 			},
 			"fields": {