Added basic bucketed smart scheduling BOD-4

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -4,3 +4,7 @@
   box-sizing: unset !important;
   min-height: unset !important;
 }
+
+.imex-event-arrived {
+  background-color: green;
+}

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

@@ -2,14 +2,20 @@ import moment from "moment";
 import queryString from "query-string";
 import React from "react";
 import { Calendar, momentLocalizer } from "react-big-calendar";
+import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import Event from "../schedule-event/schedule-event.container";
 import HeaderComponent from "./schedule-calendar-header.component";
 import "./schedule-calendar.styles.scss";
 
+const mapStateToProps = createStructuredSelector({
+  bodyshop: selectBodyshop,
+});
 const localizer = momentLocalizer(moment);
-
-export default function ScheduleCalendarWrapperComponent({
+export function ScheduleCalendarWrapperComponent({
+  bodyshop,
   data,
   refetch,
   defaultView,
@@ -19,6 +25,21 @@ export default function ScheduleCalendarWrapperComponent({
 }) {
   const search = queryString.parse(useLocation().search);
   const history = useHistory();
+
+  const handleEventPropStyles = (event, start, end, isSelected) => {
+    // if (!!!bodyshop.ssbuckets) {
+    //   return {};
+    // }
+    // const defaultEventColor = "#3174ad";
+    // const jobHrs = result.jobs_by_pk.jobhrs.aggregate.sum.mod_lb_hrs;
+    // const JobBucket = bodyshop.ssbuckets.filter(
+    //   (bucket) =>
+    //     bucket.gte <= jobHrs && (!!bucket.lt ? bucket.lt > jobHrs : true)
+    // )[0];
+
+    return { className: event.arrived ? "imex-event-arrived" : "" };
+  };
+
   return (
     <Calendar
       events={data}
@@ -41,6 +62,7 @@ export default function ScheduleCalendarWrapperComponent({
       localizer={localizer}
       min={new Date("2020-01-01T06:00:00")} //TODO Read from business settings.
       max={new Date("2020-01-01T20:00:00")}
+      eventPropGetter={handleEventPropStyles}
       components={{
         event: (e) => Event({ event: e.event, refetch: refetch }),
         header: HeaderComponent,
@@ -49,3 +71,5 @@ export default function ScheduleCalendarWrapperComponent({
     />
   );
 }
+
+export default connect(mapStateToProps, null)(ScheduleCalendarWrapperComponent);

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

@@ -106,9 +106,9 @@ export function ScheduleEventComponent({
 
   const RegularEvent = event.isintake ? (
     <div>
-      <strong style={{ color: event.arrived ? "green" : "" }}>{`${
-        (event.job && event.job.ownr_fn) || ""
-      } ${(event.job && event.job.ownr_ln) || ""}`}</strong>
+      <strong>{`${(event.job && event.job.ownr_fn) || ""} ${
+        (event.job && event.job.ownr_ln) || ""
+      }`}</strong>
       <div style={{ margin: 4 }}>
         {`${(event.job && event.job.v_model_yr) || ""} ${
           (event.job && event.job.v_make_desc) || ""

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

@@ -3,11 +3,12 @@ import axios from "axios";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { auth } from "../../firebase/firebase.utils";
+import { DateFormatter } from "../../utils/DateFormatter";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
-import { DateTimeFormatter } from "../../utils/DateFormatter";
+import moment from "moment";
 
 export default function ScheduleJobModalComponent({
   existingAppointments,
@@ -41,7 +42,7 @@ export default function ScheduleJobModalComponent({
   return (
     <Row gutter={[32, 32]}>
       <Col span={14}>
-        <div className='imex-flex-row imex-flex-row__flex-space-around'>
+        <div className="imex-flex-row imex-flex-row__flex-space-around">
           <strong>{t("appointments.fields.time")}</strong>
           <DateTimePicker
             value={appData.start}
@@ -53,15 +54,20 @@ export default function ScheduleJobModalComponent({
             {t("appointments.actions.smartscheduling")}
           </Button>
         </div>
-        <div className='imex-flex-row imex-flex-row__flex-space-around'>
+        <div className="imex-flex-row imex-flex-row__flex-space-around">
           {appData.smartDates.map((d, idx) => (
             <Button
-              className='imex-flex-row__margin'
+              className="imex-flex-row__margin"
               key={idx}
               onClick={() => {
-                setAppData({ ...appData, start: d });
-              }}>
-              <DateTimeFormatter>{d}</DateTimeFormatter>
+                console.log("new Date(d)", new Date(d));
+                setAppData({
+                  ...appData,
+                  start: new moment(d).add(8, "hours"),
+                });
+              }}
+            >
+              <DateFormatter>{d}</DateFormatter>
             </Button>
           ))}
         </div>
@@ -75,7 +81,8 @@ export default function ScheduleJobModalComponent({
           defaultChecked={appData.notifyCustomer}
           onChange={(e) =>
             setAppData({ ...appData, notifyCustomer: e.target.checked })
-          }>
+          }
+        >
           {t("jobs.labels.appointmentconfirmation")}
         </Checkbox>
         <EmailInput

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

@@ -53,7 +53,7 @@ export function ScheduleJobModalContainer({
       start: null,
       smartDates: [],
     });
-  }, [job, , setAppData]);
+  }, [job, setAppData]);
 
   const { t } = useTranslation();
 
@@ -158,7 +158,8 @@ export function ScheduleJobModalContainer({
       okButtonProps={{
         disabled: appData.start ? false : true,
         loading: loading,
-      }}>
+      }}
+    >
       <ScheduleJobModalComponent
         existingAppointments={existingAppointments}
         appData={appData}

client/src/graphql/bodyshop.queries.js

@@ -32,6 +32,7 @@ export const QUERY_BODYSHOP = gql`
       accountingconfig
       appt_length
       stripe_acct_id
+      ssbuckets
       employees {
         id
         first_name