diff --git a/src/components/admin/donations/grid/Grid.tsx b/src/components/admin/donations/grid/Grid.tsx index 6fe74ff43..2b2502666 100644 --- a/src/components/admin/donations/grid/Grid.tsx +++ b/src/components/admin/donations/grid/Grid.tsx @@ -1,8 +1,9 @@ import React, { useState } from 'react' -import { UseQueryResult } from '@tanstack/react-query' +import { UseQueryResult, useMutation, useQueryClient } from '@tanstack/react-query' import { useTranslation } from 'next-i18next' -import { Box, Tooltip } from '@mui/material' -import { Edit } from '@mui/icons-material' +import { Box, IconButton, Tooltip } from '@mui/material' + +import { Autorenew, Edit } from '@mui/icons-material' import { DataGrid, GridColDef, @@ -23,6 +24,11 @@ import RenderEditPersonCell from './RenderEditPersonCell' import { useStores } from '../../../../common/hooks/useStores' import Link from 'next/link' +import { useSession } from 'next-auth/react' +import { endpoints } from 'service/apiEndpoints' +import { apiClient } from 'service/apiClient' +import { authConfig } from 'service/restRequests' +import { AlertStore } from 'stores/AlertStore' interface RenderCellProps { params: GridRenderCellParams @@ -36,6 +42,7 @@ const addIconStyles = { } export default observer(function Grid() { const { donationStore } = useStores() + const queryClient = useQueryClient() const [paginationModel, setPaginationModel] = useState({ pageSize: 10, @@ -48,9 +55,48 @@ export default observer(function Grid() { const campaignId = router.query.campaignId as string | undefined const paymentId = router.query.paymentId as string | undefined + const syncMutation = useMutation({ + mutationFn: async (id: string) => { + return await apiClient.patch( + endpoints.donation.synchronizeWithPayment(id).url, + null, + authConfig(session?.accessToken), + ) + }, + onError: () => { + AlertStore.show(t('common:alerts.error'), 'error') + queryClient.invalidateQueries([ + endpoints.donation.donationsList( + paymentId, + campaignId, + { pageIndex: paginationModel.page, pageSize: paginationModel.pageSize }, + donationStore.donationFilters, + donationStore.donationSearch ?? '', + ).url, + ]) + }, + onSuccess: () => { + AlertStore.show(t('common:alerts.message-sent'), 'success') + queryClient.invalidateQueries([ + endpoints.donation.donationsList( + paymentId, + campaignId, + { pageIndex: paginationModel.page, pageSize: paginationModel.pageSize }, + donationStore.donationFilters, + donationStore.donationSearch ?? '', + ).url, + ]) + }, + }) + 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, + error: donationHistoryError, isLoading: isDonationHistoryLoading, refetch, }: UseQueryResult = useDonationsList( @@ -109,11 +155,36 @@ export default observer(function Grid() { } const columns: GridColDef[] = [ + { + field: 'actions', + headerName: 'Actions', + type: 'actions', + width: 120, + resizable: false, + renderCell: (params: GridRenderCellParams) => { + if (!canEditFinancials) { + return '' + } + + return ( + <> + + syncMutation.mutate(params.row.id)}> + + + + + ) + }, + }, { field: 'paymentId', //TODO:Ttranslate headerName: 'Плащане номер', - width: 300, + width: 150, renderCell: (params: GridRenderCellParams) => { return ( {params.row.paymentId} @@ -121,12 +192,19 @@ export default observer(function Grid() { }, }, { - field: 'createdAt', - headerName: t('donations:date'), - ...commonProps, - width: 250, - renderCell: (params: GridRenderCellParams) => { - return getExactDateTime(params?.row.createdAt) + field: 'payment.status', + //TODO:Ttranslate + headerName: 'Статус на плащане', + renderCell(params) { + return params.row.payment?.status + }, + }, + { + field: 'payment.provider', + //TODO:Ttranslate + headerName: 'Разплащателна система', + renderCell(params) { + return params.row.payment?.provider }, }, { @@ -136,11 +214,41 @@ export default observer(function Grid() { return }, }, + { + field: 'payment.billingName', + //TODO:Ttranslate + headerName: 'billingName', + width: 250, + renderCell(params) { + return params.row.payment?.billingName + }, + }, + { + field: 'payment.billingEmail', + //TODO:Ttranslate + headerName: 'billingEmail', + width: 300, + renderCell(params) { + return params.row.payment?.billingEmail + }, + }, + { + field: 'createdAt', + headerName: t('donations:date'), + ...commonProps, + width: 250, + renderCell: (params: GridRenderCellParams) => { + return getExactDateTime(params?.row.createdAt) + }, + }, { field: 'currency', headerName: t('donations:currency'), ...commonProps, width: 100, + renderCell(params) { + return params.row.payment?.currency + }, }, { field: 'person', diff --git a/src/service/apiEndpoints.ts b/src/service/apiEndpoints.ts index 73b741416..b4fad72e2 100644 --- a/src/service/apiEndpoints.ts +++ b/src/service/apiEndpoints.ts @@ -152,6 +152,8 @@ export const endpoints = { createCheckoutSession: { url: '/donation/create-checkout-session', method: 'POST' }, createPaymentIntent: { url: '/donation/create-payment-intent', method: 'POST' }, createBankDonation: { url: '/donation/create-bank-payment', method: 'POST' }, + synchronizeWithPayment: (id: string) => + { url: `/donation/${id}/sync-with-payment`, method: 'PATCH' }, refundStripePayment: (id: string) => { url: `/donation/refund-stripe-payment/${id}`, method: 'POST' }, invalidateStripePayment: (id: string) =>