admin/payments: Fix formik extPaymentIntentId being empty string some…

… time

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>