diff --git a/src/common/hooks/donation.ts b/src/common/hooks/donation.ts index a23cf91c4..5c7d175dd 100644 --- a/src/common/hooks/donation.ts +++ b/src/common/hooks/donation.ts @@ -91,7 +91,10 @@ export async function prefetchDonationsList(client: QueryClient) { } export function useGetPayment(id: string) { - return useQuery([endpoints.payments.getPayment(id).url]) + const { data: session } = useSession() + return useQuery([endpoints.payments.getPayment(id).url], { + queryFn: authQueryFnFactory(session?.accessToken), + }) } export async function prefetchDonationById(client: QueryClient, id: string) { diff --git a/src/components/admin/payments/modals/RefundModal.tsx b/src/components/admin/payments/modals/RefundModal.tsx index b93793677..9f95406af 100644 --- a/src/components/admin/payments/modals/RefundModal.tsx +++ b/src/components/admin/payments/modals/RefundModal.tsx @@ -1,7 +1,15 @@ -import React, { useState } from 'react' +import React from 'react' import { useTranslation } from 'next-i18next' -import { Dialog, Typography, DialogTitle, DialogContent, Grid, CardContent } from '@mui/material' +import { + Dialog, + Typography, + DialogTitle, + DialogContent, + Grid, + CardContent, + CircularProgress, +} from '@mui/material' import { useRefundStripeDonation } from 'service/donation' import { AlertStore } from 'stores/AlertStore' import { UseQueryResult, useMutation } from '@tanstack/react-query' @@ -17,15 +25,9 @@ import { fromMoney } from 'common/util/money' export default observer(function RefundModal() { const { t } = useTranslation('donations') const { isRefundOpen, hideRefund, selectedRecord } = RefundStore - const { data }: UseQueryResult = useGetPayment(selectedRecord.id) - - const initialValues: StripeRefundRequest = { - extPaymentIntentId: '', - } - - if (data) { - initialValues.extPaymentIntentId = data.extPaymentIntentId - } + const { data, isLoading, isError }: UseQueryResult = useGetPayment( + selectedRecord.id, + ) const refundMutation = useMutation({ mutationFn: useRefundStripeDonation(), @@ -35,15 +37,25 @@ export default observer(function RefundModal() { hideRefund() }, }) - const [loading, setLoading] = useState(false) + + if (isLoading) { + return ( + + + + ) + } + if (isError) { + AlertStore.show(t('alerts.error'), 'error') + return + } + + const initialValues: StripeRefundRequest = { + extPaymentIntentId: data.extPaymentIntentId, + } async function onSubmit(values: StripeRefundRequest) { - setLoading(true) - try { - await refundMutation.mutateAsync(values.extPaymentIntentId) - } finally { - setLoading(false) - } + refundMutation.mutate(values.extPaymentIntentId) } return ( @@ -80,7 +92,11 @@ export default observer(function RefundModal() { {t('refund.email')} {data?.billingEmail} - +