Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 34x 4x 4x 4x 4x 34x 34x 34x 34x 14x 14x 34x 14x | import React, { useEffect, useMemo } from "react";
import { Box, Stack } from "@mui/material";
import { UploadFilesProps } from "./types";
import { useGetIdentificationFiles } from "./hooks/useCamera";
import { useGetCurrentMerchantId } from "@hooks/common";
import { UploadFileDocumentPreviewItem } from "@components/UploadFile/Rebranded/UploadFileDocumentPreviewItem";
import { TMerchantDocument } from "@components/Merchants/MerchantPreview/data.types";
import { useDocumentHandlers } from "@hooks/common/documents";
import { useQueryClient } from "react-query";
import useCheckPAH from "@hooks/common/useCheckPAH";
import { UploadFileNew } from "@components/UploadFile/Rebranded/UploadFileNew";
import { AcceptAllowedImagesTypes } from "@hooks/upload-api/uploadHooks";
import { checkPortals } from "@utils/routing";
import { useCheckDocumentProcessing } from "@redux/slices/uploadProgressSlice";
import { UploadDocumentTypes } from "@redux/slices/uploadProgressSlice/types";
import { QKEY_IDENTIFICATION_FILES } from "@constants/queryKeys";
export function VerifyUpload({
updateProgressBar,
submitData,
data,
isApproved,
}: UploadFilesProps) {
const queryClient = useQueryClient();
const { merchantId } = useGetCurrentMerchantId();
const { deleteHandler } = useDocumentHandlers(merchantId);
const { data: files } = useGetIdentificationFiles();
const { isLoggedInPAH } = useCheckPAH();
const { isEnterprisePortal } = checkPortals();
const documentType =
UploadDocumentTypes[isEnterprisePortal ? "providerPAHId" : "merchantPAHId"];
const isConvertingImage = useCheckDocumentProcessing(documentType);
const ownerFiles = useMemo(
() =>
files?.data?.filter((doc: any) => doc?.attTypeName === "account_owner") ||
[],
[files],
) as TMerchantDocument[];
const isApprovedDisabled = isApproved || !isLoggedInPAH;
const handleUpload = (file: File) => {
Iif (ownerFiles.length > 0) return; // files max: 1
updateProgressBar(99);
const allFiles = [file];
submitData({ allFiles, status: "done" });
};
const deleteFileHandlerNew = (index: string | number) => {
submitData({
allFiles: data?.allFiles?.filter((_, i) => i !== index) as any[],
status: data?.status,
});
updateProgressBar(0);
};
const deleteOwnerFile = (doc: TMerchantDocument) => {
deleteHandler(doc, () =>
queryClient.invalidateQueries([QKEY_IDENTIFICATION_FILES, merchantId]),
);
};
const isUploaded = files?.data?.some(
(obj: any) => obj?.attTypeName === "account_owner",
);
useEffect(() => {
const isCompleted = data && data?.allFiles && data?.allFiles.length > 0;
updateProgressBar(isUploaded || isCompleted ? 100 : 0);
}, [isUploaded, data]);
return (
<>
<Box mt={2.5}>
<UploadFileNew
uploadFunction={handleUpload}
accept={AcceptAllowedImagesTypes}
maxFiles={1}
disabled={isApprovedDisabled || isConvertingImage}
documentType={documentType}
supportedFormatText=".png, .jpg, .jpeg, .webp, .heic"
styles={{
dropzone: {
flexDirection: "column-reverse",
},
}}
/>
</Box>
<Stack direction="column" gap={1}>
{data?.allFiles?.map((file: File, i) => {
return (
<UploadFileDocumentPreviewItem
key={i}
fileName={file.name}
id={i}
deleteDocument={deleteFileHandlerNew}
fileURL={URL.createObjectURL(file)}
/>
);
})}
{ownerFiles
.filter((doc) => doc?.attTypeName === "account_owner")
?.map((doc) => (
<UploadFileDocumentPreviewItem
{...doc}
key={doc.id}
fileName={doc.fileName}
id={doc.id.toString()}
list={ownerFiles}
deleteDocument={() => deleteOwnerFile(doc)}
fileURL={doc.fileURL}
hideDeleteIcon={true}
/>
))}
</Stack>
</>
);
}
|