Skip to content

Commit

Permalink
Update CompletePage.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@hdcola
hdcola committed Nov 4, 2024
1 parent 3c2917c commit c4889e3
Showing 1 changed file with 84 additions and 42 deletions.
126 changes: 84 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,
Box,

Check failure on line 17 in src/pages/CompletePage.tsx

View workflow job for this annotation

GitHub Actions / test 

'Box' is declared but its value is never read.

Check failure on line 17 in src/pages/CompletePage.tsx

View workflow job for this annotation

GitHub Actions / test 

'Box' is declared but its value is never read.
Avatar,
} from '@mui/material';

type StatusKey =
| 'succeeded'
Expand Down Expand Up @@ -74,48 +87,77 @@ 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%',
}}
>
ID
</TableCell>
<TableCell>{intentId}</TableCell>
</TableRow>
<TableRow>
<TableCell
component="th"
sx={{ fontWeight: 'bold' }}
>
Status
</TableCell>
<TableCell
sx={{ textTransform: 'capitalize' }}
>
{status}
</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 c4889e3

Please sign in to comment.