admin/donations: Fix not being able to link user to donation if billingEmail is null

src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx

@@ -11,6 +11,7 @@ import { DonationResponse, UserDonationInput } from 'gql/donations'
 import { useEditDonation } from 'service/donation'
 import { ApiErrors } from 'service/apiErrors'
 import { AlertStore } from 'stores/AlertStore'
+import { personFilter } from 'components/common/person/PersonAutoCompleteFilter'
 
 interface RenderEditCellProps {
   params: GridRenderEditCellParams
@@ -35,7 +36,7 @@ export default function RenderEditBillingEmailCell({
   const initialPerson = {
     firstName: params.row.billingEmail,
     lastName: '',
-    email: params.row.email || params.row.billingEmail || null,
+    email: params.row.email || params.row.billingEmail || '',
   }
   const [person, setPerson] = React.useState<PersonResponse | null>({
     ...initialPerson,
@@ -59,6 +60,7 @@ export default function RenderEditBillingEmailCell({
   const onClick = () => {
     if (person) {
       const donationData: UserDonationInput = params.row
+      donationData.targetPersonId = undefined
       donationData.billingEmail = person.email
       mutation.mutate(donationData)
     } else {
@@ -86,18 +88,7 @@ export default function RenderEditBillingEmailCell({
           </Box>
         )}
         isOptionEqualToValue={(option, value) => option.email === value.email}
-        filterOptions={(options, state) => {
-          const displayOptions = options.filter(
-            (option) =>
-              option.firstName
-                .toLowerCase()
-                .trim()
-                .includes(state.inputValue.toLowerCase().trim()) ||
-              option.email.toLowerCase().trim().includes(state.inputValue.toLowerCase().trim()),
-          )
-
-          return displayOptions
-        }}
+        filterOptions={personFilter}
         clearText={t('donations:cta.clear')}
         noOptionsText={t('donations:noOptions')}
         openText={t('donations:cta.open')}

src/components/admin/donations/grid/RenderEditPersonCell.tsx

@@ -4,13 +4,14 @@ import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'next-i18next'
 import { GridRenderEditCellParams } from '@mui/x-data-grid'
 import { TextField, Tooltip, Box } from '@mui/material'
-import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'
+import Autocomplete from '@mui/material/Autocomplete'
 import { Save } from '@mui/icons-material'
 import { PersonResponse } from 'gql/person'
 import { DonationResponse, UserDonationInput } from 'gql/donations'
 import { useEditDonation } from 'service/donation'
 import { ApiErrors } from 'service/apiErrors'
 import { AlertStore } from 'stores/AlertStore'
+import { personFilter } from 'components/common/person/PersonAutoCompleteFilter'
 
 interface RenderEditCellProps {
   params: GridRenderEditCellParams
@@ -37,7 +38,7 @@ export default function RenderEditPersonCell({
       params.row.person && params.row.person.firstName ? params.row.person.firstName : 'Anonymous',
     lastName:
       params.row.person && params.row.person.lastName ? params.row.person.lastName : 'Donor',
-    email: params.row.email || params.row.billingEmail || null,
+    email: params.row.email || params.row.billingEmail || '',
   }
   const [person, setPerson] = React.useState<PersonResponse | null>({
     ...initialPerson,
@@ -62,6 +63,7 @@ export default function RenderEditPersonCell({
     if (person) {
       const donationData: UserDonationInput = params.row
       donationData.targetPersonId = person.id
+      donationData.billingEmail = undefined
       mutation.mutate(donationData)
     } else {
       AlertStore.show(t('donations:alerts.requiredError'), 'error')
@@ -86,12 +88,7 @@ export default function RenderEditPersonCell({
           </Box>
         )}
         isOptionEqualToValue={(option, value) => option.firstName === value.firstName}
-        filterOptions={createFilterOptions<PersonResponse>({
-          matchFrom: 'any',
-          limit: 5,
-          ignoreCase: true,
-          trim: true,
-        })}
+        filterOptions={personFilter}
         clearText={t('donations:cta.clear')}
         noOptionsText={t('donations:noOptions')}
         openText={t('donations:cta.open')}

src/components/common/person/PersonAutoCompleteFilter.ts

@@ -0,0 +1,23 @@
+import { PersonResponse } from 'gql/person'
+import { FilterOptionsState } from '@mui/material'
+
+/**
+ * Custom function to filter person related autocomplete inputs, based on either firstname, lastname or email
+ * @param options AutoComplete prop
+ * @param state AutoComplete prop
+ * @returns
+ */
+export const personFilter = (
+  options: PersonResponse[],
+  state: FilterOptionsState<PersonResponse>,
+) => {
+  const displayOptions = options.filter((option) => {
+    const name = `${option.firstName.toLowerCase()} ${option.lastName.toLowerCase()}`
+    return (
+      name.includes(state.inputValue.toLowerCase()) ||
+      option.email.toLowerCase().includes(state.inputValue.toLowerCase())
+    )
+  })
+
+  return displayOptions
+}