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,45 +46,48 @@ export function ScheduleCalendarWrapperComponent({
   const selectedDate = new Date(date || moment(search.date) || Date.now());
 
   return (
-    <Calendar
-      events={data}
-      defaultView={search.view || defaultView || "week"}
-      date={selectedDate}
-      onNavigate={(date, view, action) => {
-        search.date = date.toISOString().substr(0, 10);
-        history.push({ search: queryString.stringify(search) });
-      }}
-      onRangeChange={(start, end) => {
-        if (setDateRangeCallback) setDateRangeCallback({ start, end });
-      }}
-      onView={(view) => {
-        search.view = view;
-        history.push({ search: queryString.stringify(search) });
-      }}
-      step={15}
-      // timeslots={1}
-      showMultiDayTimes
-      localizer={localizer}
-      min={
-        bodyshop.schedule_start_time
-          ? new Date(bodyshop.schedule_start_time)
-          : new Date("2020-01-01T06:00:00")
-      }
-      max={
-        bodyshop.schedule_end_time
-          ? new Date(bodyshop.schedule_end_time)
-          : new Date("2020-01-01T20:00:00")
-      }
-      eventPropGetter={handleEventPropStyles}
-      components={{
-        event: (e) =>
-          Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
-        header: (p) => (
-          <HeaderComponent {...p} events={data} refetch={refetch} />
-        ),
-      }}
-      {...otherProps}
-    />
+    <>
+      <JobDetailCards />
+      <Calendar
+        events={data}
+        defaultView={search.view || defaultView || "week"}
+        date={selectedDate}
+        onNavigate={(date, view, action) => {
+          search.date = date.toISOString().substr(0, 10);
+          history.push({ search: queryString.stringify(search) });
+        }}
+        onRangeChange={(start, end) => {
+          if (setDateRangeCallback) setDateRangeCallback({ start, end });
+        }}
+        onView={(view) => {
+          search.view = view;
+          history.push({ search: queryString.stringify(search) });
+        }}
+        step={15}
+        // timeslots={1}
+        showMultiDayTimes
+        localizer={localizer}
+        min={
+          bodyshop.schedule_start_time
+            ? new Date(bodyshop.schedule_start_time)
+            : new Date("2020-01-01T06:00:00")
+        }
+        max={
+          bodyshop.schedule_end_time
+            ? new Date(bodyshop.schedule_end_time)
+            : new Date("2020-01-01T20:00:00")
+        }
+        eventPropGetter={handleEventPropStyles}
+        components={{
+          event: (e) =>
+            Event({ bodyshop: bodyshop, event: e.event, refetch: refetch }),
+          header: (p) => (
+            <HeaderComponent {...p} events={data} refetch={refetch} />
+          ),
+        }}
+        {...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"