IO-1222 Add preview to schedule view.

bodyshop_translations.babel

@@ -301,6 +301,27 @@
                                             </translation>
                                         </translations>
                                     </concept_node>
+                                    <concept_node>
+                                        <name>preview</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>reschedule</name>
                                         <definition_loaded>false</definition_loaded>

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;

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -9,6 +9,7 @@ import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../job-at-change/schedule-event.container";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
+import JobDetailCards from "../job-detail-cards/job-detail-cards.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
@@ -45,6 +46,8 @@ export function ScheduleCalendarWrapperComponent({
   const selectedDate = new Date(date || moment(search.date) || Date.now());
 
   return (
+    <>
+      <JobDetailCards />
       <Calendar
         events={data}
         defaultView={search.view || defaultView || "week"}
@@ -84,6 +87,7 @@ export function ScheduleCalendarWrapperComponent({
         }}
         {...otherProps}
       />
+    </>
   );
 }
 

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

@@ -9,6 +9,7 @@ export default function ScheduleCalendarComponent({ data, refetch }) {
   return (
     <Row gutter={[16, 16]}>
       <ScheduleModal />
+
       <Col span={24}>
         <PageHeader
           extra={

client/src/translations/en_us/common.json

@@ -24,6 +24,7 @@
 				"cancel": "Cancel",
 				"intake": "Intake",
 				"new": "New Appointment",
+				"preview": "Preview",
 				"reschedule": "Reschedule",
 				"sendreminder": "Send Reminder",
 				"viewjob": "View Job"

client/src/translations/es/common.json

@@ -24,6 +24,7 @@
 				"cancel": "Cancelar",
 				"intake": "Consumo",
 				"new": "Nueva cita",
+				"preview": "",
 				"reschedule": "Reprogramar",
 				"sendreminder": "",
 				"viewjob": "Ver trabajo"

client/src/translations/fr/common.json

@@ -24,6 +24,7 @@
 				"cancel": "annuler",
 				"intake": "Admission",
 				"new": "Nouveau rendez-vous",
+				"preview": "",
 				"reschedule": "Replanifier",
 				"sendreminder": "",
 				"viewjob": "Voir le travail"