Ensuring the invalid date shows on the Date input and highlighted lik…

…e an error

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>

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)}
             />

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}

src/components/common/DateTimePickers/DesktopDateField.test.tsx

@@ -9,17 +9,24 @@ import { DesktopDateField } from './DesktopDateField';
 interface TestComponentProps {
   value?: DateTime | null;
   locale?: string;
+  invalidDate?: boolean;
 }
 
 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 />);
 

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]);