125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||
|
||
import CustomButton from "@components/CustomButton";
|
||
import SectionWrapper from "@components/SectionWrapper";
|
||
import ComplexNavText from "@components/ComplexNavText";
|
||
import PaymentMethodCard from "./PaymentMethodCard";
|
||
|
||
import mastercardLogo from "../../assets/bank-logo/logo-mastercard.png";
|
||
import visaLogo from "../../assets/bank-logo/logo-visa.png";
|
||
import qiwiLogo from "../../assets/bank-logo/logo-qiwi.png";
|
||
import mirLogo from "../../assets/bank-logo/logo-mir.png";
|
||
import tinkoffLogo from "../../assets/bank-logo/logo-tinkoff.png";
|
||
import { cardShadow } from "@root/utils/themes/shadow";
|
||
|
||
export default function Payment() {
|
||
const theme = useTheme();
|
||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
|
||
|
||
return (
|
||
<SectionWrapper
|
||
maxWidth="lg"
|
||
sx={{
|
||
mt: "25px",
|
||
mb: "70px",
|
||
}}
|
||
>
|
||
{upMd && <ComplexNavText text1="Все тарифы — " text2="Способ оплаты" />}
|
||
<Box
|
||
sx={{
|
||
mt: "20px",
|
||
mb: "40px",
|
||
display: "flex",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
{!upMd && (
|
||
<IconButton sx={{ p: 0, height: "28px", width: "28px", color: "black" }}>
|
||
<ArrowBackIcon />
|
||
</IconButton>
|
||
)}
|
||
<Typography variant="h4">Способ оплаты</Typography>
|
||
</Box>
|
||
{!upMd && (
|
||
<Typography variant="body2" mb="30px">
|
||
Выберите способ оплаты
|
||
</Typography>
|
||
)}
|
||
<Box
|
||
sx={{
|
||
backgroundColor: upMd ? "white" : undefined,
|
||
display: "flex",
|
||
flexDirection: upMd ? "row" : "column",
|
||
borderRadius: "12px",
|
||
boxShadow: upMd
|
||
? cardShadow
|
||
: undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: upMd ? "68.5%" : undefined,
|
||
p: upMd ? "20px" : undefined,
|
||
display: "flex",
|
||
flexDirection: upSm ? "row" : "column",
|
||
flexWrap: "wrap",
|
||
gap: upMd ? "14px" : "20px",
|
||
}}
|
||
>
|
||
<PaymentMethodCard name="Mastercard" image={mastercardLogo} />
|
||
<PaymentMethodCard name="Visa" image={visaLogo} />
|
||
<PaymentMethodCard name="QIWI Кошелек" image={qiwiLogo} />
|
||
<PaymentMethodCard name="Мир" image={mirLogo} />
|
||
<PaymentMethodCard name="Тинькофф" image={tinkoffLogo} />
|
||
</Box>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
justifyContent: "space-between",
|
||
alignItems: "start",
|
||
color: theme.palette.grey3.main,
|
||
width: upMd ? "31.5%" : undefined,
|
||
p: upMd ? "20px" : undefined,
|
||
pl: upMd ? "33px" : undefined,
|
||
mt: upMd ? undefined : "30px",
|
||
borderLeft: upMd ? `1px solid ${theme.palette.grey2.main}` : undefined,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
maxWidth: "85%",
|
||
}}
|
||
>
|
||
{upMd && <Typography mb="56px">Выберите способ оплаты</Typography>}
|
||
<Typography mb="20px">К оплате</Typography>
|
||
<Typography
|
||
sx={{
|
||
fontWeight: 500,
|
||
fontSize: "20px",
|
||
lineHeight: "24px",
|
||
mb: "28px",
|
||
}}
|
||
>
|
||
3 190 руб.
|
||
</Typography>
|
||
</Box>
|
||
<CustomButton
|
||
variant="outlined"
|
||
sx={{
|
||
borderColor: theme.palette.brightPurple.main,
|
||
mt: "auto",
|
||
}}
|
||
>
|
||
Выбрать
|
||
</CustomButton>
|
||
</Box>
|
||
</Box>
|
||
</SectionWrapper>
|
||
);
|
||
}
|