diff --git a/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx b/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx index ac1a28955..943428c60 100644 --- a/src/components/admin/donations/grid/RenderEditBillingEmailCell.tsx +++ b/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({ ...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({ )} 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')} diff --git a/src/components/admin/donations/grid/RenderEditPersonCell.tsx b/src/components/admin/donations/grid/RenderEditPersonCell.tsx index 22525f20e..0419c3736 100644 --- a/src/components/admin/donations/grid/RenderEditPersonCell.tsx +++ b/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({ ...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({ )} isOptionEqualToValue={(option, value) => option.firstName === value.firstName} - filterOptions={createFilterOptions({ - matchFrom: 'any', - limit: 5, - ignoreCase: true, - trim: true, - })} + filterOptions={personFilter} clearText={t('donations:cta.clear')} noOptionsText={t('donations:noOptions')} openText={t('donations:cta.open')} diff --git a/src/components/common/person/PersonAutoCompleteFilter.ts b/src/components/common/person/PersonAutoCompleteFilter.ts new file mode 100644 index 000000000..38eedbab9 --- /dev/null +++ b/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, +) => { + 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 +}