front-hub/src/pages/AccountSetup/DocumentsDialog/JuridicalDocumentsDialog.tsx
2023-06-02 11:22:14 +03:00

107 lines
3.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Box, Dialog, IconButton, Typography, useTheme } from "@mui/material";
import CustomButton from "@root/components/CustomButton";
import CloseSmallIcon from "@root/components/icons/CloseSmallIcon";
import { closeDocumentsDialog, sendDocuments, setDocument, useUserStore } from "@root/stores/user";
import DocumentUploadItem from "./DocumentUploadItem";
import DocumentItem from "./DocumentItem";
export default function JuridicalDocumentsDialog() {
const theme = useTheme();
const isOpen = useUserStore(state => state.isDocumentsDialogOpen);
const verificationStatus = useUserStore(state => state.verificationStatus);
const documents = useUserStore(state => state.documents);
const documentElements = verificationStatus === "verificated" ? (
<>
<DocumentItem
text="1. Скан ИНН организации НКО (выписка из ЕГЮРЛ)"
document={documents["ИНН"]}
/>
<DocumentItem
text="2. Устав организации"
document={documents["Устав"]}
/>
</>
) : (
<>
<DocumentUploadItem
document={documents["ИНН"]}
text="1. Скан ИНН организации (выписка из ЕГЮРЛ)"
onFileChange={e => setDocument("ИНН", e.target?.files?.[0])}
/>
<DocumentUploadItem
document={documents["Устав"]}
text="2. Устав организации"
onFileChange={e => setDocument("Устав", e.target?.files?.[0])}
/>
</>
);
return (
<Dialog
open={isOpen}
onClose={closeDocumentsDialog}
PaperProps={{
sx: {
width: "600px",
maxWidth: "600px",
backgroundColor: "white",
position: "relative",
display: "flex",
flexDirection: "column",
p: "20px",
gap: "20px",
borderRadius: "12px",
boxShadow: "none",
}
}}
slotProps={{ backdrop: { style: { backgroundColor: "rgb(0 0 0 / 0.7)" } } }}
>
<IconButton
onClick={closeDocumentsDialog}
sx={{
position: "absolute",
right: "7px",
top: "7px",
}}
>
<CloseSmallIcon />
</IconButton>
<Box sx={{
p: "20px",
}}>
<Typography variant="h5" lineHeight="100%">
{verificationStatus === "verificated" ? "Ваши документы" : "Загрузите документы"}
</Typography>
<Typography sx={{
fontWeight: 400,
fontSize: "16px",
lineHeight: "100%",
mt: "12px",
}}>для верификации юридических лиц в формате PDF</Typography>
<Box sx={{
mt: "30px",
display: "flex",
flexDirection: "column",
gap: "25px",
}}>
{documentElements}
</Box>
</Box>
<CustomButton
onClick={sendDocuments}
variant="contained"
sx={{
width: "180px",
height: "44px",
alignSelf: "end",
backgroundColor: theme.palette.brightPurple.main,
textColor: "white",
}}
>
Отправить
</CustomButton>
</Dialog>
);
}