donations/grid: Allow admins to edit billingEmail

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

@@ -24,6 +24,7 @@ import { PersonResponse } from 'gql/person'
 import { usePersonList } from 'common/hooks/person'
 import RenderEditPersonCell from './RenderEditPersonCell'
 import { useStores } from '../../../../common/hooks/useStores'
+import RenderEditBillingEmailCell from './RenderEditBillingEmailCell'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -97,6 +98,34 @@ export default observer(function Grid() {
     )
   }
 
+  const RenderBillingEmaiCell = ({ params }: RenderCellProps) => {
+    return (
+      <>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
+          {params.row.billingEmail}
+          {params.isEditable ? (
+            <Tooltip title={t('donations:cta.edit')}>
+              <Edit
+                sx={addIconStyles}
+                color="action"
+                fontSize="medium"
+                onClick={() => {
+                  if (focusedRowId) {
+                    params.api.startCellEditMode({ id: params.row.id, field: params.field })
+                  }
+                  params.api.getCellMode(params.row.id, params.field)
+                  setFocusedRowId(params.row.id)
+                }}
+              />
+            </Tooltip>
+          ) : (
+            <></>
+          )}
+        </Box>
+      </>
+    )
+  }
+
   const RenderMoneyCell = ({ params }: RenderCellProps) => {
     return <>{money(params.row.amount, params.row.currency)}</>
   }
@@ -155,11 +184,20 @@ export default observer(function Grid() {
     {
       field: 'billingEmail',
       headerName: 'Billing Email',
-      width: 250,
+      width: 300,
+      editable: true,
+      renderCell: (params: GridRenderCellParams) => {
+        return <RenderBillingEmaiCell params={params} />
+      },
+
+      renderEditCell: (params: GridRenderEditCellParams) => {
+        return <RenderEditBillingEmailCell params={params} personList={data} onUpdate={refetch} />
+      },
     },
     {
       field: 'id',
       headerName: 'ID',
+      width: 320,
     },
     {
       field: 'type',
@@ -169,7 +207,7 @@ export default observer(function Grid() {
       field: 'provider',
       headerName: t('donations:provider'),
       ...commonProps,
-      width: 250,
+      width: 100,
     },
     {
       field: 'targetVaultId',

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import { AxiosError, AxiosResponse } from 'axios'
+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 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'
+
+interface RenderEditCellProps {
+  params: GridRenderEditCellParams
+  personList?: PersonResponse[]
+  onUpdate(): void
+}
+const addIconStyles = {
+  background: '#4ac3ff',
+  borderRadius: '50%',
+  cursor: 'pointer',
+  padding: 0.7,
+  boxShadow: 3,
+}
+
+export default function RenderEditBillingEmailCell({
+  params,
+  personList,
+  onUpdate,
+}: RenderEditCellProps) {
+  const { t } = useTranslation()
+
+  const initialPerson = {
+    firstName: params.row.billingEmail,
+    lastName: '',
+    email: params.row.email || params.row.billingEmail || null,
+  }
+  const [person, setPerson] = React.useState<PersonResponse | null>({
+    ...initialPerson,
+  } as PersonResponse)
+  const mutationFn = useEditDonation(params.row.id)
+
+  const mutation = useMutation<
+    AxiosResponse<DonationResponse>,
+    AxiosError<ApiErrors>,
+    UserDonationInput
+  >({
+    mutationFn,
+    onError: () => AlertStore.show(t('donations:alerts.error'), 'error'),
+    onSuccess: () => {
+      AlertStore.show(t('donations:alerts.editDonor'), 'success')
+      onUpdate()
+      params.api.stopCellEditMode({ id: params.row.id, field: params.field })
+    },
+  })
+
+  const onClick = () => {
+    if (person) {
+      const donationData: UserDonationInput = params.row
+      donationData.billingEmail = person.email
+      mutation.mutate(donationData)
+    } else {
+      AlertStore.show(t('donations:alerts.requiredError'), 'error')
+    }
+  }
+
+  return (
+    <Box
+      sx={{ display: 'flex', alignItems: 'center', width: '100%', padding: 0.7, overflow: 'auto' }}>
+      <Autocomplete
+        id="edit-person-cell"
+        sx={{ width: 300 }}
+        value={person}
+        ListboxProps={{ style: { maxHeight: 300 } }}
+        onChange={(event, newValue: PersonResponse | null) => {
+          setPerson(newValue)
+        }}
+        options={personList || []}
+        getOptionLabel={(option: PersonResponse) => `${option.email}`}
+        renderInput={(params) => <TextField {...params} variant="standard" fullWidth />}
+        renderOption={(params, option: PersonResponse) => (
+          <Box component="li" {...params} key={option.id}>
+            {`${option.firstName} ${option.lastName} (${option.email ? option.email : ''})`}
+          </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
+        }}
+        clearText={t('donations:cta.clear')}
+        noOptionsText={t('donations:noOptions')}
+        openText={t('donations:cta.open')}
+        closeText={t('donations:cta.close')}
+      />
+      <Tooltip title={t('donations:cta.save')}>
+        <Save sx={addIconStyles} color="action" fontSize="medium" onClick={onClick} />
+      </Tooltip>
+    </Box>
+  )
+}

src/gql/donations.d.ts

@@ -74,6 +74,7 @@ export type DonationInput = {
 }
 export type UserDonationInput = DonationInput & {
   targetPersonId?: UUID
+  billingEmail?: string
 }
 
 export type DonationBankInput = {