Fixed no UI feedback on FormDatePicker when maxDate validation constr…

…aint is present (#1952)
podkrepi-bg · Oct 7, 2024 · 36262bb · 36262bb
1 parent da8aa1e
commit 36262bb
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 15 deletions.
diff --git a/src/common/theme.ts b/src/common/theme.ts
@@ -37,6 +37,9 @@ const colors = {
   white: {
     main: '#ffffff',
   },
+  red: {
+    error: '#ED1D1D',
+  },
 }
 
 const borders = {
@@ -67,6 +70,9 @@ export const themeOptions: ThemeOptions = {
       light: colors.blue.mainDark,
       dark: darken(colors.blue.dark, 0.2),
     },
+    error: {
+      main: colors.red.error,
+    },
   },
   shape: {
     borderRadius: 3,

diff --git a/src/components/client/auth/profile/UpdateBirthdateModal.tsx b/src/components/client/auth/profile/UpdateBirthdateModal.tsx
@@ -53,17 +53,6 @@ const parseDateString = (value: string, originalValue: string) => {
 
 const maxDate = new Date(new Date().setFullYear(new Date().getFullYear() - 18))
 
-const validationSchema: yup.SchemaOf<Pick<UpdateUserAccount, 'birthday'>> = yup
-  .object()
-  .defined()
-  .shape({
-    birthday: yup
-      .date()
-      .transform(parseDateString)
-      .max(maxDate, 'profile:birthdateModal.ageInvalid')
-      .required(),
-  })
-
 function UpdateBirthdateModal({
   isOpen,
   handleClose,
@@ -76,6 +65,17 @@ function UpdateBirthdateModal({
   const { t } = useTranslation()
   const [loading, setLoading] = useState(false)
 
+  const validationSchema: yup.SchemaOf<Pick<UpdateUserAccount, 'birthday'>> = yup
+    .object()
+    .defined()
+    .shape({
+      birthday: yup
+        .date()
+        .transform(parseDateString)
+        .max(maxDate, t('profile:birthdateModal.ageInvalid'))
+        .required(),
+    })
+
   const dateBefore18Years = new Date(new Date().setFullYear(new Date().getFullYear() - 18))
 
   const initialValues: Pick<UpdateUserAccount, 'birthday'> = {
@@ -119,7 +119,11 @@ function UpdateBirthdateModal({
           validationSchema={validationSchema}>
           <Grid container spacing={3}>
             <Grid item xs={12} sm={8}>
-              <FormDatePicker name="birthday" label={t('profile:birthdateModal.question')} />
+              <FormDatePicker
+                name="birthday"
+                label={t('profile:birthdateModal.question')}
+                maxDate={maxDate}
+              />
             </Grid>
             <Grid item xs={6}>
               <SubmitButton fullWidth label="auth:cta.send" loading={loading} />

diff --git a/src/components/common/form/FormDatePicker.tsx b/src/components/common/form/FormDatePicker.tsx
@@ -3,17 +3,27 @@ import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import { format } from 'date-fns'
 import { useField, useFormikContext } from 'formik'
 import { useTranslation } from 'next-i18next'
+import theme from 'common/theme'
 
 import { DATE_VALUE_FORMAT, getDateFormat } from 'common/util/date'
 
+interface FormDatePickerProps {
+  name: string
+  label: string
+  maxDate?: Date
+}
+
+const errorValidationColor = theme.palette.error as unknown as string
+
 /**
  * MUI date picker to be connected with Formik. Propagates updates to the passed Formik field name
  * @param name - name of the Formik field to bind
  * @param label - prompt text
+ * @param maxDate - optional maximal selectable date
  * @returns
  */
-export default function FormDatePicker({ name, label }: { name: string; label: string }) {
-  const [field] = useField(name)
+export default function FormDatePicker({ name, label, maxDate }: FormDatePickerProps) {
+  const [field, meta] = useField(name)
   const { setFieldValue } = useFormikContext()
   const { i18n } = useTranslation()
 
@@ -42,7 +52,19 @@ export default function FormDatePicker({ name, label }: { name: string; label: s
         label={label}
         value={new Date(field?.value)}
         onChange={(newValue) => updateValue(newValue)}
-        slotProps={{ textField: { size: 'small' } }}
+        slotProps={{ textField: { size: 'small', helperText: maxDate && meta.error } }}
+        sx={
+          maxDate && meta.error
+            ? {
+                '&.MuiOutlinedInput-root': {
+                  '& fieldset, &:hover fieldset, &.Mui-focused fieldset': {
+                    borderColor: errorValidationColor,
+                  },
+                },
+              }
+            : undefined
+        }
+        maxDate={maxDate}
       />
     </LocalizationProvider>
   )