2023-11-05 23:33:40 +00:00
|
|
|
import axios from "axios"
|
2024-05-22 02:19:20 +00:00
|
|
|
import { Box, IconButton, SxProps, Theme, Typography, useTheme } from "@mui/material"
|
2023-11-05 23:33:40 +00:00
|
|
|
import { Document, Page } from "react-pdf"
|
|
|
|
import { Buffer } from "buffer"
|
|
|
|
import { downloadFileToDevice } from "@root/utils/downloadFileToDevice"
|
2024-05-22 02:19:20 +00:00
|
|
|
import EditIcon from "@mui/icons-material/Edit"
|
|
|
|
import { ChangeEvent, useRef } from "react"
|
|
|
|
import { SendDocumentsArgs, Verification } from "@root/model/auth"
|
|
|
|
import makeRequest from "@api/makeRequest"
|
|
|
|
import { jsonToFormdata } from "@utils/jsonToFormdata"
|
|
|
|
import { parseAxiosError } from "@utils/parse-error"
|
|
|
|
import { readFile } from "@root/utils/readFile"
|
|
|
|
import { enqueueSnackbar } from "notistack"
|
2023-06-02 08:22:14 +00:00
|
|
|
|
2024-05-22 02:19:20 +00:00
|
|
|
type KeyNames =
|
|
|
|
"inn" |
|
|
|
|
"rule" |
|
|
|
|
"certificate"
|
2023-06-02 08:22:14 +00:00
|
|
|
interface Props {
|
2024-05-22 02:19:20 +00:00
|
|
|
text: string;
|
|
|
|
documentUrl: string;
|
|
|
|
sx?: SxProps<Theme>;
|
|
|
|
keyName: KeyNames
|
2023-06-02 08:22:14 +00:00
|
|
|
}
|
|
|
|
|
2024-05-22 02:19:20 +00:00
|
|
|
|
|
|
|
export default function DocumentItem({ text, documentUrl = "", sx, keyName }: Props) {
|
2023-11-05 23:33:40 +00:00
|
|
|
const theme = useTheme()
|
2023-07-25 22:31:04 +00:00
|
|
|
|
2024-05-22 02:19:20 +00:00
|
|
|
const fileInputRef = useRef<HTMLInputElement>(null)
|
|
|
|
|
|
|
|
function handleChooseFileClick() {
|
|
|
|
fileInputRef.current?.click()
|
|
|
|
}
|
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
const downloadFile = async () => {
|
|
|
|
const { data } = await axios.get<ArrayBuffer>(documentUrl, {
|
|
|
|
responseType: "arraybuffer",
|
|
|
|
})
|
2023-07-25 22:31:04 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
if (!data) {
|
|
|
|
return
|
|
|
|
}
|
2023-06-02 08:22:14 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
downloadFileToDevice(
|
|
|
|
`${documentUrl.split("/").pop()?.split(".")?.[0] || "document"}.pdf`,
|
|
|
|
Buffer.from(data)
|
|
|
|
)
|
2023-07-25 22:31:04 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
return
|
|
|
|
}
|
2023-07-25 22:31:04 +00:00
|
|
|
|
2024-05-22 02:19:20 +00:00
|
|
|
async function sendDocument(
|
|
|
|
e: ChangeEvent<HTMLInputElement>
|
|
|
|
) {
|
|
|
|
const target = e.target as HTMLInputElement;
|
|
|
|
const file = target?.files?.[0] || null;
|
|
|
|
if (file !== null) {
|
|
|
|
const readedFile = await readFile(file, "binary")
|
|
|
|
try {
|
|
|
|
await makeRequest<FormData, Verification>({
|
2024-05-22 20:41:34 +00:00
|
|
|
url: `${process.env.REACT_APP_DOMAIN}/verification/v1.0.0/verification`,
|
2024-05-22 02:19:20 +00:00
|
|
|
method: "PATCH",
|
|
|
|
useToken: true,
|
|
|
|
withCredentials: true,
|
|
|
|
body: jsonToFormdata({ [keyName]: readedFile }),
|
|
|
|
})
|
|
|
|
|
|
|
|
enqueueSnackbar("Данные обновлены")
|
|
|
|
} catch (nativeError) {
|
|
|
|
const [error] = parseAxiosError(nativeError)
|
|
|
|
|
|
|
|
enqueueSnackbar(`Ошибка отправки документов. ${error}`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
display: "flex",
|
|
|
|
flexDirection: "column",
|
|
|
|
alignItems: "start",
|
|
|
|
gap: "10px",
|
|
|
|
...sx,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Typography
|
|
|
|
sx={{
|
|
|
|
color: "#4D4D4D",
|
|
|
|
fontWeight: 500,
|
|
|
|
fontVariantNumeric: "tabular-nums",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</Typography>
|
|
|
|
{documentUrl && (
|
|
|
|
<>
|
2024-05-22 02:19:20 +00:00
|
|
|
<Box sx={{ display: "flex", alignItems: "center" }}>
|
|
|
|
<Typography
|
|
|
|
sx={{ color: theme.palette.purple.main, cursor: "pointer" }}
|
|
|
|
onClick={downloadFile}
|
|
|
|
>
|
|
|
|
{documentUrl.split("/").pop()?.split(".")?.[0]}
|
|
|
|
</Typography>
|
|
|
|
<IconButton
|
|
|
|
onClick={handleChooseFileClick}
|
|
|
|
>
|
|
|
|
<EditIcon sx={{ color: theme.palette.purple.main }} />
|
|
|
|
</IconButton>
|
|
|
|
<input
|
|
|
|
ref={fileInputRef}
|
|
|
|
style={{ display: "none" }}
|
|
|
|
onChange={sendDocument}
|
|
|
|
type="file"
|
|
|
|
id="image-file"
|
|
|
|
multiple
|
|
|
|
accept={"application/pdf"}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
<Document file={documentUrl}>
|
2024-05-22 02:19:20 +00:00
|
|
|
|
2023-11-05 23:33:40 +00:00
|
|
|
<Page
|
|
|
|
pageNumber={1}
|
|
|
|
width={200}
|
|
|
|
renderTextLayer={false}
|
|
|
|
renderAnnotationLayer={false}
|
|
|
|
/>
|
|
|
|
</Document>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Box>
|
|
|
|
)
|
2023-07-25 22:31:04 +00:00
|
|
|
}
|