This repository has been archived by the owner on Jan 3, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add button to refund Payments to Edit Registrations and show payment …
…status (#296) * refund frontend * useMutation for refunds * fix lint * make sure modal doesn't get accidentally closed * add missing loading check * show payment status in registration table * correct order of arguments * safe payment access * shorten it to Paid on * correctly get payment status in registration editor * fix typo * correctly check for error * correctly send the refund request * fix registration admin list not displaying correctly * display payment updated_at more nicely * show number of registrations on each list * make admin comment less comically large
- Loading branch information
1 parent
e30ab95
commit 7d7d76f
Showing
12 changed files
with
317 additions
and
167 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import externalServiceFetch from '../../helper/external_service_fetch' | ||
import { availableRefundsRoute } from '../../helper/routes' | ||
|
||
export default async function getAvailableRefunds( | ||
competitionId: string, | ||
userId: string | ||
): Promise<{ | ||
charges: { payment_id: string; amount: number }[] | ||
}> { | ||
return externalServiceFetch(availableRefundsRoute(competitionId, userId)) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import externalServiceFetch from '../../helper/external_service_fetch' | ||
import { refundRoute } from '../../helper/routes' | ||
|
||
export default async function refundPayment(body: { | ||
competitionId: string | ||
userId: string | ||
paymentId: string | ||
amount: number | ||
}): Promise<{ | ||
status: string | ||
}> { | ||
return externalServiceFetch( | ||
refundRoute(body.competitionId, body.userId, body.paymentId, body.amount) | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 1 addition & 11 deletions
12
Frontend/src/pages/registration_administration/components/list.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,7 @@ | ||
@import '../../../style/font-sizes'; | ||
@import '../../../style/margins'; | ||
@import '../../../style/colors'; | ||
.list { | ||
border-radius: 23px; | ||
background-color: $background-grey; | ||
border-width: 10px; | ||
padding: 10px; | ||
} | ||
|
||
.list-container{ | ||
margin-top: $double-margin; | ||
} | ||
.list-header{ | ||
font-size: $header-size; | ||
margin-top: $triple-margin; | ||
margin-bottom: $triple-margin; | ||
} |
94 changes: 94 additions & 0 deletions
94
Frontend/src/pages/registration_edit/components/Refunds.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import { useMutation, useQuery } from '@tanstack/react-query' | ||
import React, { useState } from 'react' | ||
import { Button, Input, Label, Modal, Table } from 'semantic-ui-react' | ||
import getAvailableRefunds from '../../../api/payment/get/get_available_refunds' | ||
import refundPayment from '../../../api/payment/get/refund_payment' | ||
import { setMessage } from '../../../ui/events/messages' | ||
import LoadingMessage from '../../../ui/messages/loadingMessage' | ||
|
||
export default function Refunds({ open, onExit, userId, competitionId }) { | ||
const [refundAmount, setRefundAmount] = useState(0) | ||
const { | ||
data: refunds, | ||
isLoading: refundsLoading, | ||
isError: refundError, | ||
} = useQuery({ | ||
queryKey: ['refunds', competitionId, userId], | ||
queryFn: () => getAvailableRefunds(competitionId, userId), | ||
refetchOnWindowFocus: false, | ||
refetchOnReconnect: false, | ||
staleTime: Infinity, | ||
refetchOnMount: 'always', | ||
}) | ||
const { mutate: refundMutation, isLoading: isMutating } = useMutation({ | ||
mutationFn: refundPayment, | ||
onError: (data) => { | ||
setMessage( | ||
'Refund payment failed with error: ' + data.errorCode, | ||
'negative' | ||
) | ||
}, | ||
onSuccess: () => { | ||
setMessage('Refund succeeded', 'positive') | ||
onExit() | ||
}, | ||
}) | ||
return refundsLoading ? ( | ||
<LoadingMessage /> | ||
) : ( | ||
!refundError && ( | ||
<Modal open={open} dimmer="blurring"> | ||
<Modal.Header>Available Refunds:</Modal.Header> | ||
<Modal.Content> | ||
<Table> | ||
<Table.Header> | ||
<Table.Header> Amount </Table.Header> | ||
<Table.Header> </Table.Header> | ||
</Table.Header> | ||
<Table.Body> | ||
{refunds.charges.map((refund) => ( | ||
<Table.Row key={refund.payment_id}> | ||
<Table.Cell> | ||
<Input | ||
labelPosition="right" | ||
type="text" | ||
placeholder={refund.amount} | ||
> | ||
<Label basic>$</Label> | ||
<input | ||
value={refundAmount} | ||
max={refund.amount} | ||
onChange={(event) => | ||
setRefundAmount(event.target.value) | ||
} | ||
/> | ||
</Input> | ||
</Table.Cell> | ||
<Table.Cell> | ||
<Button | ||
onClick={() => | ||
refundMutation({ | ||
competitionId, | ||
userId, | ||
paymentId: refund.payment_id, | ||
amount: refundAmount, | ||
}) | ||
} | ||
> | ||
Refund amount | ||
</Button> | ||
</Table.Cell> | ||
</Table.Row> | ||
))} | ||
</Table.Body> | ||
</Table> | ||
</Modal.Content> | ||
<Modal.Actions> | ||
<Button disabled={isMutating} onClick={onExit}> | ||
Go Back | ||
</Button> | ||
</Modal.Actions> | ||
</Modal> | ||
) | ||
) | ||
} |
Oops, something went wrong.