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