IO-1222 Add preview to schedule view.

client/src/components/job-at-change/schedule-event.component.jsx

@@ -2,7 +2,7 @@ import { Button, Popover, Space } from "antd";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { setModalContext } from "../../redux/modals/modals.actions";
 import CurrencyFormatter from "../../utils/CurrencyFormatter";
 import PhoneFormatter from "../../utils/PhoneFormatter";
@@ -11,6 +11,8 @@ import { TemplateList } from "../../utils/TemplateConstants";
 import DataLabel from "../data-label/data-label.component";
 import ScheduleAtChange from "./job-at-change.component";
 import ScheduleEventColor from "./schedule-event.color.component";
+import queryString from "query-string";
+
 const mapDispatchToProps = (dispatch) => ({
   setScheduleContext: (context) =>
     dispatch(setModalContext({ context: context, modal: "schedule" })),
@@ -24,6 +26,8 @@ export function ScheduleEventComponent({
 }) {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
+  const history = useHistory();
+  const searchParams = queryString.parse(useLocation().search);
 
   const blockContent = (
     <div>
@@ -88,6 +92,20 @@ export function ScheduleEventComponent({
             <Button>{t("appointments.actions.viewjob")}</Button>
           </Link>
         ) : null}
+        {event.job ? (
+          <Button
+            onClick={() => {
+              history.push({
+                search: queryString.stringify({
+                  ...searchParams,
+                  selected: event.job.id,
+                }),
+              });
+            }}
+          >
+            {t("appointments.actions.preview")}
+          </Button>
+        ) : null}
         <Button
           onClick={() => {
             const Template = TemplateList("job").appointment_reminder;