From 1d62423b4c96ddeed22aba6ae2a5d2edcb720ac6 Mon Sep 17 00:00:00 2001
From: sb-cecilialiu <cecilia.liu@icf.com>
Date: Fri, 8 Nov 2024 07:19:11 -0600
Subject: [PATCH 1/2] MAT-7679 display the saved time and zone

---
 .../element/types/DateTimeComponent.tsx       | 63 +++++--------------
 1 file changed, 15 insertions(+), 48 deletions(-)

diff --git a/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx b/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
index 15c18b78..9bd3a91f 100644
--- a/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
+++ b/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
@@ -18,7 +18,6 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(advancedFormat);
 dayjs.utc().format();
-const userTimeZone = dayjs.tz.guess();
 
 interface MenuObj {
   value: string;
@@ -48,21 +47,6 @@ const offSets = [
   { id: "America/Saipan - CHST", value: "+10:00" },
 ];
 
-const findByLabel = (value) => {
-  let result = "--";
-  if (value && options) {
-    options.forEach((opt) => {
-      if (opt.label === value) {
-        result = opt.value + " - " + opt.label;
-      }
-    });
-  }
-  return result;
-};
-const convertToStandardTime = (dayLightTime) => {
-  return dayLightTime.add(-1, "hour");
-};
-
 const getOffSet = (value) => {
   let result = "-05:00";
   if (value) {
@@ -96,7 +80,6 @@ const DateTimeComponent = ({
   structureDefinition,
 }: TypeComponentProps) => {
   const [date, setDate] = useState<string>();
-  const [formattedDate, setFormattedDate] = useState("");
   const [time, setTime] = useState<string>();
   const [formattedTime, setFormattedTime] = useState("");
   const [timeZone, setTimeZone] = useState("");
@@ -106,31 +89,17 @@ const DateTimeComponent = ({
   const TIME_FORMAT = "HH:mm:ss";
 
   useEffect(() => {
-    let currentDate = new Date();
     if (value) {
-      currentDate = new Date(value);
-    }
-
-    let converted = dayjs.utc(currentDate);
-    const timezoneName = currentDate
-      .toLocaleString("en-US", { timeZoneName: "short" })
-      .split(", ")[1]
-      ?.split(" ")[2]; // e.g., timezoneName = "CDT"
-
-    if (timezoneName.includes("DT")) {
-      converted = convertToStandardTime(converted).tz(userTimeZone);
-
-      setTimeZone(findByLabel(timezoneName.replace("D", "S")));
-    } else if (timezoneName.includes("GMT")) {
-      const zone = findByOffSet(timezoneName.substring(3, 6) + ":00");
-      setTimeZone(zone);
-    } else {
-      setTimeZone(findByLabel(timezoneName));
+      const zone = value.slice(-6);
+
+      setDate(value.slice(0, 10));
+      const formattedDate = dayjs(value)
+        .utcOffset(zone)
+        .format("YYYY-MM-DDTHH:mm:ss");
+      setTime(formattedDate);
+      setFormattedTime(value.slice(11, 19));
+      setTimeZone(findByOffSet(zone));
     }
-    setDate(converted.format(DATE_TIME_ZONE_FORMAT));
-    setTime(converted.format(DATE_TIME_ZONE_FORMAT));
-    setFormattedDate(converted.format(DATE_FORMAT));
-    setFormattedTime(converted.format(TIME_FORMAT));
   }, []);
 
   const renderMenuItems = (options: MenuObj[]) => {
@@ -180,12 +149,11 @@ const DateTimeComponent = ({
         >
           <DateField
             label="Date Field"
-            value={dayjs(date)}
+            value={date ? dayjs(date) : null}
             disabled={!canEdit}
             id="date-field"
             handleDateChange={(date) => {
-              setDate(date);
-              setFormattedDate(date?.format(DATE_FORMAT));
+              setDate(date?.format(DATE_FORMAT));
               const offset = getOffSet(timeZone);
               const changedDate = handleDateTimeChange(
                 date?.format(DATE_FORMAT),
@@ -203,7 +171,6 @@ const DateTimeComponent = ({
               label="Time Field"
               id="time-field"
               seconds
-              inputFormat="HH:mm:ss"
               views={["hours", "minutes", "seconds"]}
               data-testid="time-input"
               handleTimeChange={(time) => {
@@ -212,13 +179,13 @@ const DateTimeComponent = ({
 
                 const offset = getOffSet(timeZone);
                 const changedDate = handleDateTimeChange(
-                  formattedDate,
+                  date,
                   time?.format(TIME_FORMAT),
                   offset
                 );
                 onChange(changedDate);
               }}
-              value={dayjs(time)}
+              value={time ? dayjs(time) : null}
             />
           </div>
           <Select
@@ -234,7 +201,7 @@ const DateTimeComponent = ({
             SelectDisplayProps={{
               "aria-required": "true",
             }}
-            value={timeZone ? timeZone : "America/New_York - EST"}
+            value={value ? timeZone : null}
             options={renderMenuItems(options)}
             renderValue={(value) => {
               return findAndRenderLabel(value);
@@ -244,7 +211,7 @@ const DateTimeComponent = ({
               setTimeZone(newTimeZone);
               const offset = getOffSet(newTimeZone);
               const changedDate = handleDateTimeChange(
-                formattedDate,
+                date,
                 formattedTime,
                 offset
               );

From 9b2ae988c1a7a69287d2115c8164b068b23e4e29 Mon Sep 17 00:00:00 2001
From: sb-cecilialiu <cecilia.liu@icf.com>
Date: Fri, 8 Nov 2024 07:26:11 -0600
Subject: [PATCH 2/2] MAT-7679 prevent invalid date

---
 .../builder/element/types/DateTimeComponent.tsx          | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx b/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
index 9bd3a91f..9af00754 100644
--- a/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
+++ b/src/components/editTestCase/qiCore/LeftPanel/ElementsTab/builder/element/types/DateTimeComponent.tsx
@@ -128,9 +128,12 @@ const DateTimeComponent = ({
   };
 
   const handleDateTimeChange = (date, time, offset) => {
-    const dateTime = dayjs(date + "T" + time + ".000");
-    const dateTimeStr = dateTime.format(DATE_TIME_ZONE_FORMAT).slice(0, 23);
-    return dateTimeStr + offset;
+    if (date) {
+      const dateTime = dayjs(date + "T" + time + ".000");
+      const dateTimeStr = dateTime.format(DATE_TIME_ZONE_FORMAT).slice(0, 23);
+      return dateTimeStr + offset;
+    }
+    return null;
   };
 
   return (