144 lines
4.4 KiB
TypeScript
144 lines
4.4 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 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 ? "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" }}>Баланс 10.04.2022</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>Текст-заполнитель — это текст, который имеет</Typography>
|
||
<Typography>Текст-заполнитель — это текст, который имеет</Typography>
|
||
</Box>
|
||
<Button variant="pena-contained-dark" component={Link} to="/payment" sx={{ mt: "auto" }}>
|
||
Пополнить
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
{!upMd && footnotes}
|
||
</SectionWrapper>
|
||
);
|
||
}
|