Merge remote-tracking branch 'origin/main' into MPDX-9608-remove-extra-hcm-call

Author: Katelyn Grimes

README.md

@@ -719,3 +719,29 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Browser Support
+
+Browser and device usage based on GA4 28-day active users of the production MPDX app at next.mpdx.org (Apr 8 – May 5, 2026). _Last updated: May 2026 — review annually._
+
+**Targeted browsers** (Next.js 15 build defaults): Chrome 64+, Edge 79+, Firefox 67+, Safari 12+ (macOS & iOS), and Opera 51+. Internet Explorer is not supported.
+
+**Usage snapshot**
+
+**Browser share**
+
+| Browser   | Share |
+| :-------- | :---- |
+| Chrome    | 57.8% |
+| (not set) | 21.9% |
+| Safari    | 15.2% |
+| Edge      | 3.4%  |
+| Firefox   | 1.5%  |
+
+**Device share**
+
+| Device  | Share |
+| :------ | :---- |
+| Desktop | 87.9% |
+| Mobile  | 11.9% |
+| Tablet  | 1.2%  |

src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/AddDonation/AddDonation.test.tsx

@@ -208,4 +208,31 @@ describe('AddDonation', () => {
       ).toHaveValue('Cool Designation Account (321)'),
     );
   });
+
+  it('shows required-field errors after a field is touched', async () => {
+    const { queryByText, findByText, getByRole } = render(
+      <LocalizationProvider dateAdapter={AdapterLuxon}>
+        <ThemeProvider theme={theme}>
+          <SnackbarProvider>
+            <GqlMockedProvider>
+              <AddDonation
+                accountListId={accountListId}
+                handleClose={handleClose}
+              />
+            </GqlMockedProvider>
+          </SnackbarProvider>
+        </ThemeProvider>
+      </LocalizationProvider>,
+    );
+    expect(await findByText('Amount')).toBeInTheDocument();
+    expect(queryByText('Partner Account is required')).not.toBeInTheDocument();
+
+    const partnerAccount = getByRole('combobox', { name: 'Partner Account' });
+    act(() => {
+      partnerAccount.focus();
+      partnerAccount.blur();
+    });
+
+    expect(await findByText('Partner Account is required')).toBeInTheDocument();
+  });
 });

src/components/Layouts/Primary/TopBar/Items/AddMenu/Items/AddDonation/AddDonation.tsx

@@ -43,7 +43,7 @@ const donationSchema = yup.object({
   amount: yup
     .number()
     .typeError('Amount must be a valid number')
-    .required()
+    .required(i18n.t('Amount is required'))
     .test(
       'Is amount in valid currency format?',
       'Amount must be in valid currency format',
@@ -70,12 +70,12 @@ const donationSchema = yup.object({
       (value) => !value || parseFloat(value as unknown as string) > 0,
     ),
   appealId: yup.string().nullable(),
-  currency: yup.string().required(),
+  currency: yup.string().required(i18n.t('Currency is required')),
   designationAccountId: yup
     .string()
     .required(i18n.t('Designation Account is required')),
-  donationDate: requiredDateTime(),
-  donorAccountId: yup.string().required(),
+  donationDate: requiredDateTime(i18n.t('Date is required')),
+  donorAccountId: yup.string().required(i18n.t('Partner Account is required')),
   memo: yup.string().nullable(),
   motivation: yup.string().nullable(),
   paymentMethod: yup.string().nullable(),
@@ -251,7 +251,7 @@ export const AddDonation = ({
                           setFieldValue('currency', currencyCode);
                         }}
                         textFieldProps={{
-                          error: !!errors.currency,
+                          error: !!errors.currency && touched.currency,
                         }}
                         size="small"
                       />
@@ -288,6 +288,13 @@ export const AddDonation = ({
                           onChange={(date) =>
                             setFieldValue('donationDate', date)
                           }
+                          error={Boolean(
+                            errors.donationDate && touched.donationDate,
+                          )}
+                          helperText={
+                            touched.donationDate &&
+                            (errors.donationDate as string)
+                          }
                         />
                       )}
                     </FastField>
@@ -355,6 +362,13 @@ export const AddDonation = ({
                             autocompleteId="partner-account-input"
                             labelId="partner-account-label"
                             size="small"
+                            textFieldProps={{
+                              error:
+                                !!errors.donorAccountId &&
+                                touched.donorAccountId,
+                              helperText:
+                                touched.donorAccountId && errors.donorAccountId,
+                            }}
                           />
                         </Box>
                       )}
@@ -474,6 +488,9 @@ export const AddDonation = ({
                               'aria-labelledby': 'appeal-amount-label',
                             }}
                           />
+                          <FormHelperText>
+                            {touched.appealAmount && errors.appealAmount}
+                          </FormHelperText>
                         </Box>
                       )}
                     </Field>