From 1896a5d5093d2bace6014245e20e5a543628ee9c Mon Sep 17 00:00:00 2001
From: Daniel Bisgrove <daniel@bizz-websites.com>
Date: Wed, 19 Jun 2024 13:37:26 -0400
Subject: [PATCH] Ensuring the invalid date shows on the Date input and
 highlighted like an error

---
 .../PersonBirthday/PersonBirthday.tsx         | 21 +++++++++---
 .../PersonShowMore/PersonShowMore.tsx         | 31 +++++++++++++----
 .../DateTimePickers/CustomDateField.tsx       |  5 +--
 .../DateTimePickers/DesktopDateField.test.tsx | 33 ++++++++++++++++++-
 .../DateTimePickers/DesktopDateField.tsx      |  4 +++
 5 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday.tsx
index 3f0c1ef8f3..302b51262e 100644
--- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday.tsx
+++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonBirthday/PersonBirthday.tsx
@@ -32,16 +32,27 @@ export const PersonBirthday: React.FC<PersonBirthdayProps> = ({
     setFieldValue('birthdayYear', date?.year || null);
   };
 
+  const birthdayDate =
+    birthdayMonth && birthdayDay
+      ? DateTime.local(birthdayYear ?? 1900, birthdayMonth, birthdayDay)
+      : null;
+
+  const invalidDate =
+    birthdayMonth === 0 && birthdayDay === 0
+      ? DateTime.local(birthdayYear ?? 1900, birthdayMonth, birthdayDay)
+          .invalidExplanation !== ''
+      : false;
+
+  const backupBirthdayDate =
+    `${birthdayMonth}/${birthdayDay}/${birthdayYear}` as unknown as DateTime<boolean>;
+
   return (
     <ModalSectionContainer>
       <ModalSectionIcon transform="translateY(-100%)" icon={<CakeIcon />} />
       <CustomDateField
         label={t('Birthday')}
-        value={
-          birthdayMonth && birthdayDay
-            ? DateTime.local(birthdayYear ?? 1900, birthdayMonth, birthdayDay)
-            : null
-        }
+        invalidDate={invalidDate}
+        value={invalidDate ? backupBirthdayDate : birthdayDate}
         onChange={(date) => handleDateChange(date)}
       />
     </ModalSectionContainer>
diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx
index db627d0992..8ffe06c21b 100644
--- a/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx
+++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/People/Items/PersonModal/PersonShowMore/PersonShowMore.tsx
@@ -63,6 +63,28 @@ export const PersonShowMore: React.FC<PersonShowMoreProps> = ({
     setFieldValue('anniversaryMonth', date?.month || null);
     setFieldValue('anniversaryYear', date?.year || null);
   };
+
+  const anniversaryDate =
+    anniversaryMonth && anniversaryDay
+      ? DateTime.local(
+          anniversaryYear ?? 1900,
+          anniversaryMonth,
+          anniversaryDay,
+        )
+      : null;
+
+  const invalidAnniversaryDate =
+    anniversaryMonth === 0 && anniversaryDay === 0
+      ? DateTime.local(
+          anniversaryYear ?? 1900,
+          anniversaryMonth,
+          anniversaryDay,
+        ).invalidExplanation !== ''
+      : false;
+
+  const backupAnniversaryDate =
+    `${anniversaryMonth}/${anniversaryDay}/${anniversaryYear}` as unknown as DateTime<boolean>;
+
   return (
     <>
       {/* Legal First Name and Gender Section */}
@@ -142,14 +164,9 @@ export const PersonShowMore: React.FC<PersonShowMoreProps> = ({
           <Grid item xs={12} sm={6}>
             <CustomDateField
               label={t('Anniversary')}
+              invalidDate={invalidAnniversaryDate}
               value={
-                anniversaryMonth && anniversaryDay
-                  ? DateTime.local(
-                      anniversaryYear ?? 1900,
-                      anniversaryMonth,
-                      anniversaryDay,
-                    )
-                  : null
+                invalidAnniversaryDate ? backupAnniversaryDate : anniversaryDate
               }
               onChange={(date) => date && handleDateChange(date)}
             />
diff --git a/src/components/common/DateTimePickers/CustomDateField.tsx b/src/components/common/DateTimePickers/CustomDateField.tsx
index 8989b30d01..2bc625147c 100644
--- a/src/components/common/DateTimePickers/CustomDateField.tsx
+++ b/src/components/common/DateTimePickers/CustomDateField.tsx
@@ -11,12 +11,13 @@ export const CustomDateField: React.FC<DesktopDateFieldProps> = (props) => {
   const isDesktop = useMediaQuery(DEFAULT_DESKTOP_MODE_MEDIA_QUERY, {
     defaultMatches: true,
   });
+  const { label, value, invalidDate, onChange, ...textFieldProps } = props;
 
-  if (isDesktop) {
+  // If value is not valid render desktop input as it can render invalid value
+  if (isDesktop || invalidDate) {
     return <DesktopDateField {...props} />;
   }
 
-  const { label, value, onChange, ...textFieldProps } = props;
   return (
     <MobileDatePicker<DateTime>
       label={label}
diff --git a/src/components/common/DateTimePickers/DesktopDateField.test.tsx b/src/components/common/DateTimePickers/DesktopDateField.test.tsx
index a8a8a544ef..ba9dbcd559 100644
--- a/src/components/common/DateTimePickers/DesktopDateField.test.tsx
+++ b/src/components/common/DateTimePickers/DesktopDateField.test.tsx
@@ -9,6 +9,7 @@ import { DesktopDateField } from './DesktopDateField';
 interface TestComponentProps {
   value?: DateTime | null;
   locale?: string;
+  invalidDate?: boolean;
 }
 
 const onChange = jest.fn();
@@ -16,10 +17,16 @@ const onChange = jest.fn();
 const TestComponent: React.FC<TestComponentProps> = ({
   value = DateTime.local(2024, 1, 2, 3, 4, 5),
   locale = 'en-US',
+  invalidDate = false,
 }) => (
   <UserPreferenceContext.Provider value={{ locale, userId: 'userId' }}>
     <LocalizationProvider dateAdapter={AdapterLuxon} adapterLocale={locale}>
-      <DesktopDateField value={value} onChange={onChange} label="Date" />
+      <DesktopDateField
+        value={value}
+        onChange={onChange}
+        label="Date"
+        invalidDate={invalidDate}
+      />
     </LocalizationProvider>
   </UserPreferenceContext.Provider>
 );
@@ -40,6 +47,30 @@ describe('DesktopDateField', () => {
       expect(getByRole('textbox')).toHaveValue('');
     });
 
+    it('shows invalid date when invalidDate prop is TRUE', () => {
+      const { getByRole, rerender } = render(<TestComponent />);
+      rerender(
+        <TestComponent
+          value={'0/0/2000' as unknown as DateTime}
+          invalidDate={true}
+        />,
+      );
+
+      expect(getByRole('textbox')).toHaveValue('0/0/2000');
+    });
+
+    it('shows default date with a invalid date when invalidDate prop is FALSE', () => {
+      const { getByRole, rerender } = render(<TestComponent />);
+      rerender(
+        <TestComponent
+          value={'0/0/2000' as unknown as DateTime}
+          invalidDate={false}
+        />,
+      );
+
+      expect(getByRole('textbox')).toHaveValue('1/2/2024');
+    });
+
     it('the formatted value', () => {
       const { getByRole } = render(<TestComponent />);
 
diff --git a/src/components/common/DateTimePickers/DesktopDateField.tsx b/src/components/common/DateTimePickers/DesktopDateField.tsx
index 4353e5ba57..c829c3bdd4 100644
--- a/src/components/common/DateTimePickers/DesktopDateField.tsx
+++ b/src/components/common/DateTimePickers/DesktopDateField.tsx
@@ -12,11 +12,13 @@ export interface DesktopDateFieldProps
   extends Omit<StandardTextFieldProps, 'onChange'> {
   value: DateTime | null;
   onChange: (date: DateTime | null) => void;
+  invalidDate?: boolean;
 }
 
 export const DesktopDateField: React.FC<DesktopDateFieldProps> = ({
   value,
   onChange,
+  invalidDate,
   ...props
 }) => {
   const locale = useLocale();
@@ -30,6 +32,8 @@ export const DesktopDateField: React.FC<DesktopDateFieldProps> = ({
       setRawDate('');
     } else if (value.isValid) {
       setRawDate(value.toFormat('D', options));
+    } else if (invalidDate) {
+      setRawDate(value as unknown as string);
     }
   }, [locale, value]);