IO-3031 View Day when Scheduling

Signed-off-by: Allan Carr <allan.carr@thinkimex.com>

.vscode/settings.json

@@ -8,5 +8,18 @@
       "pattern": "**/IMEX.xml",
       "systemId": "logs/IMEX.xsd"
     }
+  ],
+  "cSpell.words": [
+    "antd",
+    "appointmentconfirmation",
+    "appt",
+    "bodyshop",
+    "IMEX",
+    "labhrs",
+    "larhrs",
+    "ownr",
+    "promanager",
+    "smartscheduling",
+    "touchtime"
   ]
 }

client/src/components/form-date-time-picker/form-date-time-picker.component.jsx

@@ -1,4 +1,4 @@
-import { DatePicker } from "antd";
+import { DatePicker, Space, TimePicker } from "antd";
 import PropTypes from "prop-types";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ const DateTimePicker = ({
   onlyFuture,
   onlyToday,
   isDateOnly = false,
+  isSeparatedTime: isSeparatedTime = false,
   bodyshop,
   ...restProps
 }) => {
@@ -87,24 +88,56 @@ const DateTimePicker = ({
 
   return (
     <div onKeyDown={handleKeyDown} id={id} style={{ width: "100%" }}>
-      <DatePicker
-        showTime={
-          isDateOnly
-            ? false
-            : {
-                format: "hh:mm a",
-                minuteStep: 15,
-                defaultValue: dayjs(dayjs(), "HH:mm:ss")
-              }
-        }
-        format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
-        value={value ? dayjs(value) : null}
-        onChange={handleChange}
-        placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
-        onBlur={onBlur || handleBlur}
-        disabledDate={handleDisabledDate}
-        {...restProps}
-      />
+      {isSeparatedTime && (
+        <Space direction="vertical" style={{ width: "100%" }}>
+          <DatePicker
+            showTime={false}
+            format="MM/DD/YYYY"
+            value={value ? dayjs(value) : null}
+            onChange={handleChange}
+            placeholder={t("general.labels.date")}
+            onBlur={handleBlur}
+            disabledDate={handleDisabledDate}
+            isDateOnly={true}
+            {...restProps}
+          />
+          {value && (
+            <TimePicker
+              format="hh:mm a"
+              minuteStep={15}
+              defaultOpenValue={dayjs()
+                .minute(Math.floor(dayjs().minute() / 15) * 15)
+                .second(0)}
+              onChange={(value) => {
+                handleChange(value);
+                onBlur();
+              }}
+              placeholder={t("general.labels.time")}
+              {...restProps}
+            />
+          )}
+        </Space>
+      )}
+      {!isSeparatedTime && (
+        <DatePicker
+          showTime={
+            isDateOnly
+              ? false
+              : {
+                  format: "hh:mm a",
+                  minuteStep: 15,
+                  defaultValue: dayjs(dayjs(), "HH:mm:ss")
+                }
+          }
+          format={isDateOnly ? "MM/DD/YYYY" : "MM/DD/YYYY hh:mm a"}
+          value={value ? dayjs(value) : null}
+          onChange={handleChange}
+          placeholder={isDateOnly ? t("general.labels.date") : t("general.labels.datetime")}
+          onBlur={onBlur || handleBlur}
+          disabledDate={handleDisabledDate}
+          {...restProps}
+        />
+      )}
     </div>
   );
 };
@@ -116,7 +149,8 @@ DateTimePicker.propTypes = {
   id: PropTypes.string,
   onlyFuture: PropTypes.bool,
   onlyToday: PropTypes.bool,
-  isDateOnly: PropTypes.bool
+  isDateOnly: PropTypes.bool,
+  isSeparatedTime: PropTypes.bool
 };
 
 export default connect(mapStateToProps, null)(DateTimePicker);

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

@@ -1,6 +1,5 @@
 import { Button, Col, Form, Input, Row, Select, Space, Switch, Typography } from "antd";
 import axios from "axios";
-import dayjs from "../../utils/day";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -8,13 +7,14 @@ import { createStructuredSelector } from "reselect";
 import { calculateScheduleLoad } from "../../redux/application/application.actions";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { DateFormatter } from "../../utils/DateFormatter";
+import dayjs from "../../utils/day";
+import InstanceRenderManager from "../../utils/instanceRenderMgr";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import EmailInput from "../form-items-formatted/email-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import ScheduleDayViewContainer from "../schedule-day-view/schedule-day-view.container";
 import ScheduleExistingAppointmentsList from "../schedule-existing-appointments-list/schedule-existing-appointments-list.component";
 import "./schedule-job-modal.scss";
-import InstanceRenderManager from "../../utils/instanceRenderMgr";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop
@@ -84,7 +84,7 @@ export function ScheduleJobModalComponent({
               }
             ]}
           >
-            <DateTimePicker onBlur={handleDateBlur} onlyFuture />
+            <DateTimePicker onBlur={handleDateBlur} onlyFuture isSeparatedTime />
           </Form.Item>
           <Form.Item
             name="scheduled_completion"

client/src/translations/en_us/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "Sunday",
         "text": "Text",
         "thursday": "Thursday",
+        "time": "Select Time",
         "total": "Total",
         "totals": "Totals",
         "tuesday": "Tuesday",

client/src/translations/es/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "",
         "text": "",
         "thursday": "",
+        "time": "",
         "total": "",
         "totals": "",
         "tuesday": "",

client/src/translations/fr/common.json

@@ -1254,6 +1254,7 @@
         "sunday": "",
         "text": "",
         "thursday": "",
+        "time": "",
         "total": "",
         "totals": "",
         "tuesday": "",