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 | 24x 436x 436x 436x 436x 436x 3x 3x 3x 1x 3x 3x 436x 6x 436x | import { showMessage } from "@common/Toast";
import { useFileUploadContext } from "@components/UploadFile/FileUploadContext";
import { FileUploadStatus } from "@components/UploadFile/types";
import { IMAGE_UPLOAD_SIZE_LIMIT } from "@constants/constants";
import NiceModal from "@ebay/nice-modal-react";
import { EDIT_PROFILE_IMAGE_MODAL } from "modals/modal_names";
import GiveThumbnail from "@shared/Thumbnail/GiveThumbnail";
import { checkPortals } from "@utils/routing";
import { Icon } from "@phosphor-icons/react";
import { SxProps } from "@mui/material";
type TProfileImageProps = {
imageUrl?: string;
title: string;
onUpload?: (file: File) => void;
onDelete?: () => void;
disabled?: boolean;
hoverIcon?: Icon;
sx?: SxProps;
};
const ProfileImage = ({
imageUrl,
title,
onUpload,
onDelete,
disabled = false,
hoverIcon,
...props
}: TProfileImageProps) => {
const { setSnackbarFiles } = useFileUploadContext();
const { isAcquirerEnterprises } = checkPortals();
const thumbnailType = isAcquirerEnterprises ? "provider" : "merchant";
const actions = {
onUpload,
onDelete,
canUpload: !disabled,
canDelete: !disabled && !!imageUrl,
};
const checkMaxSize = (file: File) => {
const exceedsSize = file.size > IMAGE_UPLOAD_SIZE_LIMIT;
const exceedsTitleLength = file.name.length > 254;
if (exceedsSize) {
setSnackbarFiles([
{
id: `${Date.now()}-${file.name}`,
name: file.name,
size: file.size,
status: FileUploadStatus.FILE_TOO_LARGE,
uploadProgress: 0,
canBeDeleted: false,
},
]);
}
if (exceedsTitleLength) showMessage("Error", "File name is too long");
return exceedsSize || exceedsTitleLength;
};
const handleClick = () => {
NiceModal.show(EDIT_PROFILE_IMAGE_MODAL, {
defaultImageURL: imageUrl,
rounded: false,
subTitle: title,
actions,
onLocalUpload: checkMaxSize,
thumbnailType,
});
};
return (
<GiveThumbnail
{...props}
size="large"
type={thumbnailType}
imageUrl={imageUrl}
disabled={disabled}
onClick={handleClick}
hoverIcon={hoverIcon}
/>
);
};
export default ProfileImage;
|