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 | 355x 355x 355x 355x 355x 355x 58x 297x | import { Stack } from "@mui/material";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import ProfileImage from "@shared/ProfileImage/ProfileImage";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { EDIT_DENY_MESSAGE } from "@constants/permissions";
import { ArrowPlacement } from "@shared/Tooltip/GiveTooltip.types";
import GiveText from "@shared/Text/GiveText";
import { ModifiedGiveChip } from "features/Underwriting/UnderwritingCard/UnderwritingCard.style";
import { TChipColors } from "@shared/Chip/GiveChip";
import useChangeProfileImage from "@shared/SidePanel/components/SidepanelTitle/hooks/useChangeProfileImage";
import { formatSSN, parseTaxID } from "../GiveMerchantFile/hooks/helpers";
import { TAX_ID_ENUM } from "@utils/index";
import PanelLoadingSkeleton from "./PanelLoadingSkeleton";
interface Props {
title: string;
imageUrl?: string;
id: number;
businessData?: any;
label: any;
color?: TChipColors;
renderStatus?: React.ReactNode;
isLoading?: boolean;
}
function GiveUnderwritingSidepanelTitle({
title,
imageUrl,
id,
businessData,
label,
color,
renderStatus,
isLoading = false,
}: Props) {
const { isMobileView } = useCustomThemeV2();
// We are hiding the action items section if merchant_underwriting is false and we are in enterprise portal
const { onUpload, onDelete, disabled } = useChangeProfileImage(id);
const { legalName, taxID, tinType, ssn } = businessData || {};
const formattedTaxID =
tinType == TAX_ID_ENUM.SSN ? formatSSN(ssn) : parseTaxID(taxID);
const showLegalName = Boolean(legalName || formattedTaxID);
if (isLoading) {
return <PanelLoadingSkeleton variant="title" />;
}
return (
<Stack
flexDirection="row"
justifyContent="space-between"
alignItems={isMobileView || !showLegalName ? "start" : "center"}
maxWidth="100%"
gap={3}
>
<Stack flexShrink={1} overflow="hidden" gap="12px">
<Stack
gap="12px"
alignItems={isMobileView ? "flex-start" : "center"}
flexDirection={isMobileView ? "column-reverse" : "row"}
paddingTop={showLegalName ? 0 : "8px"}
>
<GiveText variant="h5">{title}</GiveText>
{renderStatus || (
<ModifiedGiveChip
label={label}
color={color}
variant="light"
size="large"
/>
)}
</Stack>
{showLegalName && (
<GiveText color="secondary" variant="bodyS">
{[legalName, formattedTaxID].filter(Boolean).join(" - ")}
</GiveText>
)}
</Stack>
<GiveTooltip
arrowPlacement={ArrowPlacement.TOP_START}
title={EDIT_DENY_MESSAGE}
color="default"
disableHoverListener={!disabled}
sx={{ width: "fit-content" }}
>
<ProfileImage
imageUrl={imageUrl}
title={title}
onUpload={onUpload}
onDelete={onDelete}
disabled={disabled}
/>
</GiveTooltip>
</Stack>
);
}
export default GiveUnderwritingSidepanelTitle;
|