145 lines
4.1 KiB
TypeScript
145 lines
4.1 KiB
TypeScript
import { Box, Button, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material"
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack"
|
||
import WalletIcon from "@components/icons/WalletIcon"
|
||
import SectionWrapper from "@components/SectionWrapper"
|
||
import { cardShadow } from "@root/utils/theme"
|
||
import { currencyFormatter } from "@root/utils/currencyFormatter"
|
||
import { useUserStore } from "@root/stores/user"
|
||
import { Link } from "react-router-dom"
|
||
|
||
import { useHistoryTracker } from "@root/utils/hooks/useHistoryTracker"
|
||
|
||
export default function Wallet() {
|
||
const handleCustomBackNavigation = useHistoryTracker()
|
||
const theme = useTheme()
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"))
|
||
const isTablet = useMediaQuery(theme.breakpoints.down(1000))
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600))
|
||
const cash = useUserStore((state) => state.userAccount?.wallet.cash) ?? 0
|
||
|
||
const footnotes = (
|
||
<Box
|
||
component="ol"
|
||
sx={{
|
||
color: theme.palette.gray.main,
|
||
pt: "10px",
|
||
pl: "25px",
|
||
|
||
mt: 0,
|
||
mb: upMd ? "3px" : "73px",
|
||
}}
|
||
>
|
||
<Typography
|
||
component="li"
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "20px",
|
||
fontWeight: 400,
|
||
}}
|
||
>
|
||
Текст для сносок: текст-заполнитель — это текст, который имеет текст-заполнитель — это текст, который имеет
|
||
</Typography>
|
||
<Typography
|
||
component="li"
|
||
sx={{
|
||
fontSize: "16px",
|
||
lineHeight: "20px",
|
||
fontWeight: 400,
|
||
}}
|
||
>
|
||
Текст для сносок: тель — это текст, который имеет текст-заполнитель — это текст, который имеет
|
||
</Typography>
|
||
</Box>
|
||
)
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
mt: "25px",
|
||
mb: "70px",
|
||
px: isTablet ? (isMobile ? "18px" : "40px") : "20px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: "40px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{!upMd && (
|
||
<IconButton onClick={handleCustomBackNavigation} sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||
<ArrowBackIcon />
|
||
</IconButton>
|
||
)}
|
||
<Typography variant="h4">Мой кошелёк</Typography>
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
backgroundColor: "white",
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
gap: "9%",
|
||
borderRadius: "12px",
|
||
mb: "40px",
|
||
boxShadow: cardShadow,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: upMd ? "59.5%" : undefined,
|
||
p: "20px",
|
||
pb: upMd ? undefined : "10px",
|
||
}}
|
||
>
|
||
<Typography sx={{ color: theme.palette.gray.dark, mb: "30px" }}>Текущий баланс</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "22px",
|
||
pb: "40px",
|
||
borderBottom: `1px solid ${theme.palette.gray.main}`,
|
||
}}
|
||
>
|
||
<WalletIcon bgcolor="#FEDFD0" color={theme.palette.orange.main} />
|
||
<Typography variant="h5">{currencyFormatter.format(cash / 100)}</Typography>
|
||
</Box>
|
||
{/*{upMd && footnotes}*/}
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
alignItems: "start",
|
||
color: theme.palette.gray.dark,
|
||
width: upMd ? "31.5%" : undefined,
|
||
p: "20px",
|
||
pl: upMd ? "33px" : undefined,
|
||
borderLeft: upMd ? `1px solid ${theme.palette.gray.main}` : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: "22px",
|
||
maxWidth: "85%",
|
||
mb: "32px",
|
||
}}
|
||
>
|
||
<Typography>Это ваш внутренний кошелёк, вы можете заранее его пополнить на любую сумму от 1000р и в любой момент использовать баланс.</Typography>
|
||
<Typography>Вывод баланса с кошелька не предусмотрен</Typography>
|
||
</Box>
|
||
<Button variant="pena-contained-dark" component={Link} to="/payment" sx={{ mt: "auto" }}>
|
||
Пополнить
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
{/*{!upMd && footnotes}*/}
|
||
</SectionWrapper>
|
||
)
|
||
}
|