admin/payments: Fix refund button not working (#1759)

* hooks/donation.ts: Add auth header to useGetPayment() request The route is now protected * admin/payments: Fix formik extPaymentIntentId being empty string some time
podkrepi-bg · Apr 2, 2024 · 89e08ff · 89e08ff
1 parent 0747906
commit 89e08ff
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 20 deletions.
diff --git 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<TPaymentResponse>([endpoints.payments.getPayment(id).url])
+  const { data: session } = useSession()
+  return useQuery<TPaymentResponse>([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
@@ -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<TPaymentResponse> = useGetPayment(selectedRecord.id)
-
-  const initialValues: StripeRefundRequest = {
-    extPaymentIntentId: '',
-  }
-
-  if (data) {
-    initialValues.extPaymentIntentId = data.extPaymentIntentId
-  }
+  const { data, isLoading, isError }: UseQueryResult<TPaymentResponse> = 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 (
+      <Dialog open={true}>
+        <CircularProgress />
+      </Dialog>
+    )
+  }
+  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}
               </Typography>
               <Grid item xs={12} marginTop={3}>
-                <SubmitButton fullWidth label={t('refund.confirm-button')} loading={loading} />
+                <SubmitButton
+                  fullWidth
+                  label={t('refund.confirm-button')}
+                  loading={refundMutation.isLoading}
+                />
               </Grid>
             </CardContent>
           </GenericForm>