front-hub/src/pages/AccountSettings/DocumentsDialog/DocumentItem.tsx

136 lines
3.2 KiB
TypeScript
Raw Normal View History

2023-11-05 23:33:40 +00:00
import axios from "axios"
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"
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
type KeyNames =
"inn" |
"rule" |
"certificate"
2023-06-02 08:22:14 +00:00
interface Props {
text: string;
documentUrl: string;
sx?: SxProps<Theme>;
keyName: KeyNames
2023-06-02 08:22:14 +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
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
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`,
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 && (
<>
<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}>
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
}