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 | 50x 62x 62x 62x 62x 97x 62x 62x 62x 43x 62x 97x 97x | import { Stack, useMediaQuery } from "@mui/material";
import GiveUploadItem from "@shared/FileUpload/GiveUploadItem";
import { useAppTheme } from "@theme/v2/Provider";
import { GiveUploadItemProps, UploadStackProps } from "./types";
import { FilePreviewType } from "@shared/FilePreview/types";
import { fileFormatter } from "@shared/FilePreview/utils";
import useDocumentPreviewV2 from "@shared/FilePreview/hooks/useDocumentPreviewV2";
import { checkPortals } from "@utils/routing";
const GiveUploadStack = ({
items,
customStyles,
isHideDelete,
hideAllButtons,
handleLocalDelete,
hideEditButtons,
hideDownload,
showAddNote,
showIconTooltip,
}: UploadStackProps) => {
const { isEnterprisePortal, isMerchantPortal } = checkPortals();
const { palette, breakpoints } = useAppTheme();
const isDesktop = useMediaQuery(breakpoints.up("v2_sm"));
const merchantId = items[0]?.merchantId;
const fileDataList = items?.map((item) => item.fileData) as FilePreviewType[];
const documentList = fileDataList?.map(fileFormatter);
// TODO: as this is a reusable component, it will be used for enterprises as well.
// So, we need to receive the entityId as a prop.
// We also need to need to check for isEnterprise.
const { handlePreview } = useDocumentPreviewV2({
entityId: merchantId,
documentList: documentList || [],
isDeleteHidden: isHideDelete,
handleLocalDelete,
});
const isHiddenDelete = (doc: GiveUploadItemProps) => {
return (
(isMerchantPortal || isEnterprisePortal) && doc?.fileData?.isUploaded
);
};
return (
<Stack
direction="column"
border={`1px solid ${palette.border?.primary}`}
overflow="hidden"
width={isDesktop ? "clamp(600px, 100%, 100%)" : "100%"}
borderRadius="12px"
sx={{
maxWidth: "100%",
backgroundColor: palette.surface?.primary,
"& > *:last-child": {
borderBottom: "none",
},
...customStyles,
}}
>
{items.map((item, index) => {
const isBusinessOwnerID =
item?.fileData?.attTypeName === "legal_principal";
return (
<GiveUploadItem
key={item?.fileData?.id || index}
{...item}
isMobile={!isDesktop}
isHideDelete={
isHideDelete || isBusinessOwnerID || isHiddenDelete(item)
}
handlePreview={handlePreview}
isBusinessOwnerID={isBusinessOwnerID}
hideEditButtons={hideEditButtons}
hideAllButtons={hideAllButtons}
hideDownload={hideDownload}
showAddNote={showAddNote}
showIconTooltip={showIconTooltip}
/>
);
})}
</Stack>
);
};
export default GiveUploadStack;
|