Skip to content

Commit

Permalink
Merge branch 'main' into yana
Browse files Browse the repository at this point in the history
  • Loading branch information
@iasssy
iasssy committed Nov 4, 2024
2 parents 14f7d97 + fb14018 commit 628ffb8
Show file tree
Hide file tree
Showing 2 changed files with 154 additions and 42 deletions.
32 changes: 32 additions & 0 deletions src/api/usePaymentCheckout.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
import useLoginStore from '../store/useLoginStore';

interface PaymentCheckoutInfo {
order_id: number;
user_id: number;
payment_ref: string;
payment_method: string;
full_name: string;
status: string;
total: number;
}

const fetchPaymentCheckout = async (paymentId: string): Promise<PaymentCheckoutInfo> => {
const { authToken } = useLoginStore.getState();

const { data } = await axios.post(
`${import.meta.env.VITE_API_URL}/api/payments/checkout`,
{ paymentId },
{ headers: { Authorization: `Bearer ${authToken}` }, }
);
return data;
};

export const usePaymentCheckout = (paymentId: string | null) => {
return useQuery({
queryKey: ['payment-checkout', paymentId],
queryFn: () => fetchPaymentCheckout(paymentId!),
enabled: !!paymentId,
});
};
164 changes: 122 additions & 42 deletions src/pages/CompletePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,19 @@ import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import OpenInNewOutlinedIcon from '@mui/icons-material/OpenInNewOutlined';
import {
Container,
Paper,
Typography,
Table,
TableBody,
TableRow,
TableCell,
Stack,
Button,
Avatar,
} from '@mui/material';
import { usePaymentCheckout } from '../api/usePaymentCheckout';

type StatusKey =
| 'succeeded'
Expand Down Expand Up @@ -47,6 +60,7 @@ export const CompletePage = () => {

const [status, setStatus] = useState<StatusKey>('default');
const [intentId, setIntentId] = useState<string | null>(null);
const { data: checkoutInfo } = usePaymentCheckout(intentId);

useEffect(() => {
if (!stripe) {
Expand Down Expand Up @@ -74,48 +88,114 @@ export const CompletePage = () => {
const { icon: Icon, iconColor, text } = STATUS_CONTENT_MAP[status];

return (
<div id="payment-status">
<div id="status-icon" style={{ backgroundColor: iconColor }}>
<Icon />
</div>
<h2 id="status-text">{text}</h2>

{intentId && (
<div id="details-table">
<table>
<tbody>
<tr>
<td className="TableLabel">id</td>
<td id="intent-id" className="TableContent">
{intentId}
</td>
</tr>
<tr>
<td className="TableLabel">status</td>
<td id="intent-status" className="TableContent">
{status}
</td>
</tr>
</tbody>
</table>
</div>
)}
<div className="flex flex-col">
{intentId && (
<a
href={`https://dashboard.stripe.com/payments/${intentId}`}
id="view-details"
rel="noopener noreferrer"
target="_blank"
<Container maxWidth="sm" sx={{ mt: 4 }}>
<Paper elevation={3} sx={{ p: 4 }}>
<Stack spacing={3} alignItems="center">
<Avatar
sx={{
bgcolor: iconColor,
width: 56,
height: 56,
}}
>
View details
<OpenInNewOutlinedIcon style={{ paddingLeft: '5px' }} />
</a>
)}
<a id="retry-button" href="/checkout">
Test another
</a>
</div>
</div>
<Icon sx={{ fontSize: 32, color: 'white' }} />
</Avatar>

<Typography variant="h4" component="h1" textAlign="center">
{text}
</Typography>

{intentId && (
<Table>
<TableBody>
<TableRow>
<TableCell
component="th"
sx={{
fontWeight: 'bold',
width: '30%',
}}
>
Payment ID
</TableCell>
<TableCell>{intentId}</TableCell>
</TableRow>
<TableRow>
<TableCell
component="th"
sx={{ fontWeight: 'bold' }}
>
Status
</TableCell>
<TableCell
sx={{ textTransform: 'capitalize' }}
>
{status}
</TableCell>
</TableRow>
{checkoutInfo && (
<>
<TableRow>
<TableCell
component="th"
sx={{ fontWeight: 'bold' }}
>
Order ID
</TableCell>
<TableCell>
{checkoutInfo.order_id}
</TableCell>
</TableRow>
<TableRow>
<TableCell
component="th"
sx={{ fontWeight: 'bold' }}
>
Customer
</TableCell>
<TableCell>
{checkoutInfo.full_name}
</TableCell>
</TableRow>
<TableRow>
<TableCell
component="th"
sx={{ fontWeight: 'bold' }}
>
Total
</TableCell>
<TableCell>
${checkoutInfo.total.toFixed(2)}
</TableCell>
</TableRow>
</>
)}
</TableBody>
</Table>
)}

<Stack direction="row" spacing={2} sx={{ mt: 2 }}>
{intentId && (
<Button
variant="outlined"
endIcon={<OpenInNewOutlinedIcon />}
href={`https://dashboard.stripe.com/payments/${intentId}`}
target="_blank"
rel="noopener noreferrer"
>
View details
</Button>
)}
<Button
variant="contained"
href="/checkout"
color="primary"
>
Test another
</Button>
</Stack>
</Stack>
</Paper>
</Container>
);
};

0 comments on commit 628ffb8

Please sign in to comment.