1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
import { Box, Container, Sheet, Typography } from '@mui/joy'
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import Logo from '../../Logo'
const PaymentCancelledView = () => {
const navigate = useNavigate()
useEffect(() => {
const timer = setTimeout(() => {
navigate('/my/chores')
}, 5000)
return () => clearTimeout(timer)
}, [navigate])
return (
<Container component='main' maxWidth='xs'>
<Box
sx={{
marginTop: 4,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Sheet
sx={{
mt: 1,
width: '100%',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
padding: 2,
borderRadius: '8px',
boxShadow: 'md',
}}
>
<Logo />
<Typography level='h2' sx={{ mt: 2, mb: 1 }}>
Payment has been cancelled
</Typography>
<Typography level='body-md' sx={{ mb: 2 }}>
You will be redirected to the main page shortly.
</Typography>
</Sheet>
</Box>
</Container>
)
}
export default PaymentCancelledView
|
