Invalidate a donation from the admin panel

public/locales/bg/donations.json

@@ -32,6 +32,7 @@
     "edit": "Дарението беше редактирано успешно!",
     "delete": "Дарението беше изтрито успешно!",
     "refundSuccess": "Беше създадена успешна заявка за връщане на парите към Stripe.",
+    "invalidate": "Дарението беше маркирано като невалидно!",
     "editDonor": "Дарителят беше редактиран успешно!",
     "error": "Възникна грешка! Моля опитайте отново по-късно.",
     "requiredError": "Полето е задължително."
@@ -66,5 +67,14 @@
     "amount": "Сума:",
     "email": "Е-mail на дарител:",
     "confirm-button": "Възстанови парите от дарение"
+  },
+  "invalidate": {
+    "icon": "Маркирай като невалидно",
+    "title": "Маркиране на дарение като невалидно",
+    "confirmation": "Сигурни ли сте, че искате да маркирате като невалидно дарението:",
+    "number": "Номер:",
+    "amount": "Сума:",
+    "email": "Е-mail на дарител:",
+    "confirm-button": "Маркирай като невалидно"
   }
 }

public/locales/en/donations.json

@@ -32,6 +32,7 @@
     "edit": "Document has been edited successfully!",
     "delete": "Document has been deleted successfully!",
     "refundSuccess": "A successful refund request was created with Stripe.",
+    "invalidate": "Document has been marked as invalid successfully!",
     "editDonor": "Donation donor has been edited successfully!",
     "error": "An error has occured! Please try again later.",
     "requiredError": "Fields is required!"
@@ -66,5 +67,14 @@
     "amount": "Amount:",
     "email": "Donator's email:",
     "confirm-button": "Refund a donation"
+  },
+  "invalidate": {
+    "icon": "Mark as invalid",
+    "title": "Mark as invalid",
+    "confirmation": "Are you sure you want to refund the donation:",
+    "number": "Number:",
+    "amount": "Amount:",
+    "email": "Е-mail",
+    "confirm-button": "Mark as invalid"
   }
 }

src/components/admin/donations/DonationsPage.tsx

@@ -9,6 +9,7 @@ import { RefundStoreImpl } from './store/RefundStore'
 
 export const ModalStore = new ModalStoreImpl()
 export const RefundStore = new RefundStoreImpl()
+export const InvalidateStore = new ModalStoreImpl()
 
 export default function DocumentsPage() {
   const { t } = useTranslation()

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

@@ -14,8 +14,8 @@ import { observer } from 'mobx-react'
 import { useDonationsList } from 'common/hooks/donation'
 
 import DetailsModal from '../modals/DetailsModal'
-import DeleteModal from '../modals/DeleteModal'
-import { ModalStore, RefundStore } from '../DonationsPage'
+import InvalidateModal from '../modals/InvalidateModal'
+import { ModalStore, RefundStore, InvalidateStore } from '../DonationsPage'
 import { getExactDateTime } from 'common/util/date'
 import { useRouter } from 'next/router'
 import { money } from 'common/util/money'
@@ -26,8 +26,10 @@ import RenderEditPersonCell from './RenderEditPersonCell'
 import { useStores } from '../../../../common/hooks/useStores'
 import RenderEditBillingEmailCell from './RenderEditBillingEmailCell'
 import RestoreIcon from '@mui/icons-material/Restore'
+import CancelIcon from '@mui/icons-material/Cancel'
 import RefundModal from '../modals/RefundModal'
 import { DonationStatus, PaymentProvider } from '../../../../gql/donations.enums'
+import { useSession } from 'next-auth/react'
 
 interface RenderCellProps {
   params: GridRenderCellParams
@@ -51,8 +53,16 @@ export default observer(function Grid() {
   const router = useRouter()
   const { isDetailsOpen } = ModalStore
   const { isRefundOpen } = RefundStore
+  const {
+    isDeleteOpen,
+    setSelectedRecord: setInvalidateRecord,
+    showDelete: showInvalidate,
+  } = InvalidateStore
   const campaignId = router.query.campaignId as string | undefined
-
+  const { data: session } = useSession()
+  const canEditFinancials = session?.user?.realm_access?.roles.includes(
+    'account-edit-financials-requests',
+  )
   const {
     data: { items: donations, total: allDonationsCount } = { items: [], total: 0 },
     // error: donationHistoryError,
@@ -147,6 +157,11 @@ export default observer(function Grid() {
     showRefund()
   }
 
+  function invalidateClickHandler(id: string) {
+    setInvalidateRecord({ id, name: '' })
+    showInvalidate()
+  }
+
   const columns: GridColDef[] = [
     {
       field: 'actions',
@@ -155,20 +170,31 @@ export default observer(function Grid() {
       width: 120,
       resizable: false,
       renderCell: (params: GridRenderCellParams) => {
-        return params.row?.status === DonationStatus.succeeded &&
-          params.row?.provider === PaymentProvider.stripe ? (
+        if (!canEditFinancials || params.row?.status !== DonationStatus.succeeded) {
+          return ''
+        }
+
+        return (
           <>
-            <Tooltip title={t('donations:refund.icon')}>
+            {params.row.provider === PaymentProvider.stripe && (
+              <Tooltip title={t('donations:refund.icon')}>
+                <IconButton
+                  size="small"
+                  color="primary"
+                  onClick={() => refundClickHandler(params.row.id)}>
+                  <RestoreIcon />
+                </IconButton>
+              </Tooltip>
+            )}
+            <Tooltip title={t('donations:invalidate.icon')}>
               <IconButton
                 size="small"
                 color="primary"
-                onClick={() => refundClickHandler(params.row.id)}>
-                <RestoreIcon />
+                onClick={() => invalidateClickHandler(params.row.id)}>
+                <CancelIcon />
               </IconButton>
             </Tooltip>
           </>
-        ) : (
-          ''
         )
       },
     },
@@ -292,7 +318,7 @@ export default observer(function Grid() {
       {/* making sure we don't sent requests to the API when not needed */}
       {isDetailsOpen && <DetailsModal />}
       {isRefundOpen && <RefundModal />}
-      <DeleteModal />
+      {isDeleteOpen && <InvalidateModal onUpdate={refetch} />}
     </>
   )
 })

src/components/admin/donations/modals/InvalidateModal.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { useRouter } from 'next/router'
+import { useMutation } from '@tanstack/react-query'
+import { observer } from 'mobx-react'
+import { AxiosError, AxiosResponse } from 'axios'
+import { useTranslation } from 'next-i18next'
+
+import { DonationResponse } from 'gql/donations'
+import { ApiErrors } from 'service/apiErrors'
+import { AlertStore } from 'stores/AlertStore'
+import { routes } from 'common/routes'
+import DeleteDialog from 'components/admin/DeleteDialog'
+import { useInvalidateStripeDonation } from 'service/donation'
+
+import { InvalidateStore } from '../DonationsPage'
+
+type Props = {
+  onUpdate: () => void
+}
+
+export default observer(function InvalidateModal({ onUpdate }: Props) {
+  const router = useRouter()
+  const { hideDelete, selectedRecord } = InvalidateStore
+  const { t } = useTranslation()
+
+  const mutationFn = useInvalidateStripeDonation()
+
+  const invalidateMutation = useMutation<
+    AxiosResponse<DonationResponse>,
+    AxiosError<ApiErrors>,
+    string
+  >({
+    mutationFn,
+    onError: () => AlertStore.show(t('donations:alerts:error'), 'error'),
+    onSuccess: () => {
+      hideDelete()
+      AlertStore.show(t('donations:alerts:invalidate'), 'success')
+      router.push(routes.admin.donations.index)
+      onUpdate()
+    },
+  })
+
+  function invalidateHandler() {
+    invalidateMutation.mutate(selectedRecord.id)
+  }
+
+  return <DeleteDialog modalStore={InvalidateStore} deleteHandler={invalidateHandler} />
+})

src/service/apiEndpoints.ts

@@ -118,6 +118,8 @@ export const endpoints = {
     createBankDonation: <Endpoint>{ url: '/donation/create-bank-payment', method: 'POST' },
     refundStripePayment: (id: string) =>
       <Endpoint>{ url: `/donation/refund-stripe-payment/${id}`, method: 'POST' },
+    invalidateStripePayment: (id: string) =>
+      <Endpoint>{ url: `/donation/${id}/invalidate`, method: 'PATCH' },
     getDonation: (id: string) => <Endpoint>{ url: `/donation/${id}`, method: 'GET' },
     donationsList: (
       campaignId?: string,

src/service/donation.ts

@@ -78,6 +78,16 @@ export const useRefundStripeDonation = () => {
     )
   }
 }
+export const useInvalidateStripeDonation = () => {
+  const { data: session } = useSession()
+  return async (extPaymentId: string) => {
+    return await apiClient.patch(
+      endpoints.donation.invalidateStripePayment(extPaymentId).url,
+      '',
+      authConfig(session?.accessToken),
+    )
+  }
+}
 
 export const useUploadBankTransactionsFiles = () => {
   const { data: session } = useSession()