@@ -38,6 +38,9 @@ import {
3838 UploadDocumentsResponse ,
3939 UploadDocumentsRequest ,
4040 UPLOAD_DOCUMENTS_MUTATION ,
41+ RefundPaymentResponse ,
42+ RefundPaymentRequest ,
43+ REFUND_PAYMENT_MUTATION ,
4144} from '@tools/admin/requests/processing-tasks-card' ;
4245import ReviewInformationStep from '@components/admin/requests/processing/ReviewInformationStep' ;
4346import { clientUploadToS3 , getFileName } from '@lib/utils/s3-utils' ;
@@ -118,6 +121,13 @@ export default function ProcessingTasksCard({ applicationId }: ProcessingTasksCa
118121 refetch ( ) ;
119122 } ;
120123
124+ const [ refundPayment , { loading : refundPaymentLoading } ] =
125+ useMutation < RefundPaymentResponse , RefundPaymentRequest > ( REFUND_PAYMENT_MUTATION ) ;
126+ const handleRefundPayment = async ( ) => {
127+ await refundPayment ( { variables : { input : { applicationId } } } ) ;
128+ refetch ( ) ;
129+ } ;
130+
121131 const toast = useToast ( ) ;
122132
123133 const handleSubmitDocuments = async ( applicationDoc : File ) => {
@@ -195,14 +205,14 @@ export default function ProcessingTasksCard({ applicationId }: ProcessingTasksCa
195205 reviewRequestCompleted,
196206 reviewRequestCompletedEmployee,
197207 reviewRequestCompletedUpdatedAt,
208+ paymentRefunded,
209+ paymentRefundedEmployee,
210+ paymentRefundedUpdatedAt,
198211 } ,
199212 } ,
200213 } = data ;
201214 const shopifyOrderUrl = `https://${ process . env . NEXT_PUBLIC_SHOPIFY_DOMAIN } /admin/orders/${ shopifyConfirmationNumber } ` ;
202215
203- /** Placeholder boolean status for customer refund */
204- const customerRefunded = false ;
205-
206216 return (
207217 < PermitHolderInfoCard colSpan = { 7 } header = { _header } >
208218 < Divider mt = "8px" />
@@ -233,40 +243,30 @@ export default function ProcessingTasksCard({ applicationId }: ProcessingTasksCa
233243 </ >
234244 ) : undefined
235245 }
236- isCompleted = { false }
246+ isCompleted = { paymentRefunded }
237247 showLog = { showTaskLog }
238248 log = {
239- showTaskLog && appHolepunchedEmployee
249+ showTaskLog && paymentRefundedEmployee
240250 ? {
241251 name : formatFullName (
242- appHolepunchedEmployee . firstName ,
243- appHolepunchedEmployee . lastName
252+ paymentRefundedEmployee . firstName ,
253+ paymentRefundedEmployee . lastName
244254 ) ,
245- date : appHolepunchedUpdatedAt ,
255+ date : paymentRefundedUpdatedAt ,
246256 }
247257 : null
248258 }
249259 >
250- { customerRefunded ? (
251- < Button
252- variant = "ghost"
253- textDecoration = "underline black"
254- // TODO: Add click handler
255- // onClick={() => {}}
256- >
257- < Text textStyle = "caption" color = "black" >
258- Undo
259- </ Text >
260- </ Button >
261- ) : (
260+ { ! paymentRefunded && (
262261 < Button
263262 marginLeft = "auto"
264263 height = "35px"
265264 bg = "background.gray"
266265 _hover = { { bg : 'background.grayHover' } }
267266 color = "black"
268- // TODO: Add click handler
269- // onClick={() => {}}
267+ onClick = { handleRefundPayment }
268+ isDisabled = { refundPaymentLoading }
269+ isLoading = { refundPaymentLoading }
270270 >
271271 < Text textStyle = "xsmall-medium" > Mark as complete</ Text >
272272 </ Button >
0 commit comments