[GG-3938] Fixed date fields prefilling

src/modules/new-request-form/NewRequestForm.tsx

@@ -120,6 +120,7 @@ export function NewRequestForm({
     organizations.length > 0 && organizations[0]?.id
       ? organizations[0]?.id?.toString()
       : null;
+
   const handleChange = useCallback(
     (field: Field, value: Field["value"]) => {
       setTicketFields(
@@ -141,13 +142,16 @@ export function NewRequestForm({
     setOrganizationField({ ...organizationField, value });
   }
 
-  function handleDueDateChange(value: string) {
-    if (dueDateField === null) {
-      return;
-    }
+  const handleDueDateChange = useCallback(
+    (value: string) => {
+      if (dueDateField === null) {
+        return;
+      }
 
-    setDueDateField({ ...dueDateField, value });
-  }
+      setDueDateField({ ...dueDateField, value });
+    },
+    [dueDateField]
+  );
 
   return (
     <>

src/modules/new-request-form/fields/DatePicker.tsx

@@ -9,7 +9,7 @@
 import { Span } from "@zendeskgarden/react-typography";
 import type { Field } from "../data-types";
 import type { ChangeEventHandler } from "react";
-import { useState } from "react";
+import { useCallback, useState } from "react";
 
 interface DatePickerProps {
   field: Field;
@@ -29,25 +29,48 @@
     value ? new Date(value as string) : undefined
   );
 
-  const formatDate = (value: Date | undefined) => {
-    if (value === undefined) {
-      return "";
-    }
-    const isoString = value.toISOString();
-    return valueFormat === "dateTime" ? isoString : isoString.split("T")[0];
-  };
+  /* Formats the date using the UTC time zone to prevent timezone-related issues.
+   * By creating a new Date object with only the date, the time defaults to 00:00:00 UTC.
+   * This avoids date shifts that can occur if formatted with the local time zone, as Garden does by default.
+   */
+  const formatDateInput = useCallback(
+    (date: Date) => {
+      const dateTimeFormat = new Intl.DateTimeFormat(locale, {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: "UTC",
+      });
+      return dateTimeFormat.format(date);
+    },
+    [locale]
+  );
 
-  const handleChange = (date: Date) => {
-    // Set the time to 12:00:00 as this is also the expected behavior across Support and the API
-    const newDate = new Date(
-      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0)
-    ) as Date;
-    setDate(newDate);
-    const dateString = formatDate(newDate);
-    if (dateString !== undefined) {
-      onChange(dateString);
-    }
-  };
+  const formatDateValue = useCallback(
+    (value: Date | undefined) => {
+      if (value === undefined) {
+        return "";
+      }
+      const isoString = value.toISOString();
+      return valueFormat === "dateTime" ? isoString : isoString.split("T")[0];
+    },
+    [valueFormat]
+  );
+
+  const handleChange = useCallback(
+    (date: Date) => {
+      // Set the time to 12:00:00 as this is also the expected behavior across Support and the API
+      const newDate = new Date(
+        Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12, 0, 0)
+      ) as Date;
+      setDate(newDate);
+      const dateString = formatDateValue(newDate);
+      if (dateString !== undefined) {
+        onChange(dateString);
+      }
+    },
+    [onChange, formatDateValue]
+  );
 
   const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
     // Allow field to be cleared
@@ -61,12 +84,17 @@
     <GardenField>
       <Label>
         {label}
         {required && <Span aria-hidden="true">*</Span>}
       </Label>
       {description && (
         <Hint dangerouslySetInnerHTML={{ __html: description }} />
       )}
-      <GardenDatepicker value={date} onChange={handleChange} locale={locale}>
+      <GardenDatepicker
+        value={date}
+        onChange={handleChange}
+        formatDate={formatDateInput}
+        locale={locale}
+      >
         <Input
           required={required}
           lang={locale}
@@ -75,7 +103,7 @@
         />
       </GardenDatepicker>
       {error && <Message validation="error">{error}</Message>}
-      <input type="hidden" name={name} value={formatDate(date)} />
+      <input type="hidden" name={name} value={formatDateValue(date)} />
     </GardenField>
   );
 }

src/modules/new-request-form/usePrefilledTicketFields.tsx

@@ -4,6 +4,7 @@ import DOMPurify from "dompurify";
 
 const MAX_URL_LENGTH = 2048;
 const TICKET_FIELD_PREFIX = "tf_";
+const DATE_REGEX = /^\d{4}-\d{2}-\d{2}$/;
 
 const ALLOWED_BOOLEAN_VALUES = ["true", "false"];
 const ALLOWED_HTML_TAGS = [
@@ -57,6 +58,20 @@ function getFieldFromId(id: string, prefilledTicketFields: Fields) {
   }
 }
 
+function isValidDate(dateString: string) {
+  if (!DATE_REGEX.test(dateString)) {
+    return false;
+  }
+
+  const date = new Date(dateString);
+  const [year, month, day] = dateString.split("-").map(Number);
+  return (
+    date.getUTCFullYear() === year &&
+    date.getUTCMonth() + 1 === month &&
+    date.getUTCDate() === day
+  );
+}
+
 function getPrefilledTicketFields(fields: Fields): Fields {
   const { href } = location;
   const params = new URL(href).searchParams;
@@ -102,6 +117,12 @@ function getPrefilledTicketFields(fields: Fields): Fields {
               : "";
         }
         break;
+      case "due_at":
+      case "date":
+        if (isValidDate(sanitizedValue)) {
+          field.value = sanitizedValue;
+        }
+        break;
       default:
         field.value = sanitizedValue;
     }