74 lines
1.9 KiB
TypeScript
74 lines
1.9 KiB
TypeScript
|
import { Modal, Box, Typography, Button, useTheme } from "@mui/material";
|
|||
|
|
import { useNavigate } from "react-router-dom";
|
|||
|
|
|
|||
|
|
type PrePaymentModalProps = {
|
|||
|
|
open: boolean;
|
|||
|
|
setOpen: (isOpen: boolean) => void;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const PrePaymentModal = ({ open, setOpen }: PrePaymentModalProps) => {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
const navigate = useNavigate();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Modal
|
|||
|
|
open={open}
|
|||
|
|
onClose={() => setOpen(false)}
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
alignItems: "center",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
margin: "10px",
|
|||
|
|
padding: "25px",
|
|||
|
|
maxWidth: "600px",
|
|||
|
|
borderRadius: "5px",
|
|||
|
|
textAlign: "center",
|
|||
|
|
outline: "none",
|
|||
|
|
background: theme.palette.background.default,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box>
|
|||
|
|
<Typography id="modal-modal-title" variant="h6" component="h2">
|
|||
|
|
Пополните баланс, что бы посмотреть контакты
|
|||
|
|
</Typography>
|
|||
|
|
</Box>
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
justifyContent: "center",
|
|||
|
|
alignItems: "center",
|
|||
|
|
flexWrap: "wrap",
|
|||
|
|
gap: "20px",
|
|||
|
|
marginTop: "15px",
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Button
|
|||
|
|
variant="outlined"
|
|||
|
|
onClick={() => setOpen(false)}
|
|||
|
|
sx={{
|
|||
|
|
color: theme.palette.primary.main,
|
|||
|
|
"&:hover": { color: theme.palette.grey2.main },
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Отмена
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
variant="outlined"
|
|||
|
|
onClick={() => navigate("/tariffs")}
|
|||
|
|
sx={{
|
|||
|
|
color: theme.palette.primary.main,
|
|||
|
|
"&:hover": { color: theme.palette.grey2.main },
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Пополнить
|
|||
|
|
</Button>
|
|||
|
|
</Box>
|
|||
|
|
</Box>
|
|||
|
|
</Modal>
|
|||
|
|
);
|
|||
|
|
};
|