IO-1671 Improved date handling for form item.

client/src/App/App.jsx

@@ -1,4 +1,6 @@
+import { useTreatments } from "@splitsoftware/splitio-react";
 import { Button, Result } from "antd";
+import LogRocket from "logrocket";
 import React, { lazy, Suspense, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -6,11 +8,10 @@ import { Route, Switch } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import DocumentEditorContainer from "../components/document-editor/document-editor.container";
 import ErrorBoundary from "../components/error-boundary/error-boundary.component";
-import LogRocket from "logrocket";
-
 //Component Imports
 import LoadingSpinner from "../components/loading-spinner/loading-spinner.component";
 import DisclaimerPage from "../pages/disclaimer/disclaimer.page";
+import LandingPage from "../pages/landing/landing.page";
 import TechPageContainer from "../pages/tech/tech.page.container";
 import { setOnline } from "../redux/application/application.actions";
 import { selectOnline } from "../redux/application/application.selectors";
@@ -22,8 +23,6 @@ import {
 import PrivateRoute from "../utils/private-route";
 import "./App.styles.scss";
 
-import LandingPage from "../pages/landing/landing.page";
-import { useTreatments } from "@splitsoftware/splitio-react";
 const ResetPassword = lazy(() =>
   import("../pages/reset-password/reset-password.component")
 );
@@ -58,11 +57,6 @@ export function App({
     bodyshop && bodyshop.imexshopid
   );
 
-  console.log(
-    "🚀  ~ file: App.jsx  ~ line 56  ~ LogRocket_Tracking",
-    LogRocket_Tracking
-  );
-
   useEffect(() => {
     if (!navigator.onLine) {
       setOnline(false);

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

@@ -1,16 +1,22 @@
 import { DatePicker } from "antd";
 import moment from "moment";
-import React, { forwardRef } from "react";
+import React, { useRef } from "react";
 //To be used as a form element only.
 
 const dateFormat = "MM/DD/YYYY";
 
-const FormDatePicker = (
+export default function FormDatePicker({
-  { value, onChange, onBlur, onlyFuture, ...restProps },
+  value,
-  ref
+  onChange,
-) => {
+  onBlur,
+  onlyFuture,
+  ...restProps
+}) {
+  const ref = useRef();
+
   const handleChange = (newDate) => {
     if (value !== newDate && onChange) {
+      console.log("XXX1");
       onChange(newDate);
     }
   };
@@ -19,17 +25,34 @@ const FormDatePicker = (
     if (e.key.toLowerCase() === "t") {
       if (onChange) {
         onChange(new moment());
+        if (ref.current && ref.current.blur) ref.current.blur();
       }
+    } else if (e.key.toLowerCase() === "enter") {
+      if (ref.current && ref.current.blur) ref.current.blur();
     }
   };
 
+  const handleBlur = (e) => {
+    const v = e.target.value;
+    if (!v) return;
+
+    const _a = moment(
+      v,
+      ["MMDDYY", "MMDDYYYY", "MMDD", "MM/DD/YY"],
+      "en",
+      false
+    );
+    if (_a.isValid() && onChange) onChange(_a);
+  };
+
   return (
     <div onKeyDown={handleKeyDown}>
       <DatePicker
+        ref={ref}
         value={value ? moment(value) : null}
         onChange={handleChange}
         format={dateFormat}
-        onBlur={onBlur}
+        onBlur={onBlur || handleBlur}
         disabledTime
         {...(onlyFuture && {
           disabledDate: (d) => moment().subtract(1, "day").isAfter(d),
@@ -38,6 +61,4 @@ const FormDatePicker = (
       />
     </div>
   );
-};
+}
-
-export default forwardRef(FormDatePicker);

client/src/components/jobs-admin-dates/jobs-admin-dates.component.jsx

@@ -1,11 +1,13 @@
 import { useMutation } from "@apollo/client";
-import { Button, Form, notification, DatePicker } from "antd";
+import { Button, Form, notification } from "antd";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import DateTimePicker from "../form-date-time-picker/form-date-time-picker.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
 import moment from "moment";
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
+
 export default function JobsAdminDatesChange({ job }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
@@ -54,7 +56,7 @@ export default function JobsAdminDatesChange({ job }) {
             label={t("jobs.fields.date_estimated")}
             name="date_estimated"
           >
-            <DatePicker format="MM/DD/YYYY" />
+            <FormDatePicker format="MM/DD/YYYY" />
           </Form.Item>
           <Form.Item label={t("jobs.fields.date_open")} name="date_open">
             <DateTimePicker />

client/src/components/jobs-detail-dates/jobs-detail-dates.component.jsx

@@ -1,4 +1,4 @@
-import { DatePicker, Form, Statistic, Tooltip } from "antd";
+import { Form, Statistic, Tooltip } from "antd";
 import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -34,7 +34,7 @@ export function JobsDetailDatesComponent({ jobRO, job, bodyshop }) {
           label={t("jobs.fields.date_estimated")}
           name="date_estimated"
         >
-          <DatePicker disabled={jobRO} format="MM/DD/YYYY" />
+          <FormDatePicker disabled={jobRO} />
         </Form.Item>
         <Form.Item label={t("jobs.fields.date_open")} name="date_open">
           <DateTimePicker disabled={jobRO} />

client/src/components/production-list-columns/production-list-columns.date.component.jsx

@@ -1,12 +1,12 @@
 import { useMutation } from "@apollo/client";
-import { DatePicker, Dropdown, TimePicker, Button, Card } from "antd";
+import { Button, Card, Dropdown, TimePicker } from "antd";
 import moment from "moment";
 import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { logImEXEvent } from "../../firebase/firebase.utils";
 import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import { DateFormatter } from "../../utils/DateFormatter";
-
+import FormDatePicker from "../form-date-picker/form-date-picker.component";
-import { useTranslation } from "react-i18next";
 
 export default function ProductionListDate({
   record,
@@ -17,8 +17,12 @@ export default function ProductionListDate({
   const [updateAlert] = useMutation(UPDATE_JOB);
   const [visible, setVisible] = useState(false);
   const { t } = useTranslation();
+
   const handleChange = (date) => {
     logImEXEvent("product_toggle_date", { field });
+    if (date.isSame(record[field] && moment(record[field]))) {
+      return;
+    }
 
     //e.stopPropagation();
     updateAlert({
@@ -58,7 +62,7 @@ export default function ProductionListDate({
             style={{ padding: "1rem" }}
             onClick={(e) => e.stopPropagation()}
           >
-            <DatePicker
+            <FormDatePicker
               onClick={(e) => e.stopPropagation()}
               value={(record[field] && moment(record[field])) || null}
               onChange={handleChange}

client/src/translations/en_us/common.json

@@ -1506,7 +1506,8 @@
 				"difference": "Difference",
 				"diskscan": "Scan Disk for Estimates",
 				"dms": {
-					"defaultstory": "Bodyshop RO {{ro_number}}.  Damage to $t(jobs.fields.area_of_damage_impact.{{area_of_damage}}).",
+					"damageto": "Damage to $t(jobs.fields.area_of_damage_impact.{{area_of_damage}}).",
+					"defaultstory": "B/S RO: {{ro_number}}. Owner: {{ownr_nm}}. Insurance Co: {{ins_co_nm}}.  Claim/PO #: {{clm_po}}",
 					"invoicedatefuture": "Invoice date must be today or in the future for CDK posting.",
 					"kmoutnotgreaterthankmin": "Mileage out must be greater than mileage in.",
 					"logs": "Logs",

client/src/translations/es/common.json

@@ -1506,6 +1506,7 @@
 				"difference": "",
 				"diskscan": "",
 				"dms": {
+					"damageto": "",
 					"defaultstory": "",
 					"invoicedatefuture": "",
 					"kmoutnotgreaterthankmin": "",

client/src/translations/fr/common.json

@@ -1506,6 +1506,7 @@
 				"difference": "",
 				"diskscan": "",
 				"dms": {
+					"damageto": "",
 					"defaultstory": "",
 					"invoicedatefuture": "",
 					"kmoutnotgreaterthankmin": "",