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 | 43x 134x 134x 1x 1x | import { BankAccountTagType } from "@common/Tag/BankAccountTag";
import { Stack } from "@mui/material";
import { DotsThreeIcon } from "@phosphor-icons/react";
import GiveIconButton from "@shared/IconButton/GiveIconButton";
import GiveText from "@shared/Text/GiveText";
import GiveBAStatusChip from "./GiveBAStatusChip";
type TBankAccountHeader = {
accountName?: string;
status?: BankAccountTagType;
isPlaid?: boolean;
onOpenMenu?: (event: React.MouseEvent<HTMLElement>, id: number) => void;
accountId: number;
isProviderLinked?: boolean;
isLocalBA?: boolean;
};
const BankAccountHeader = ({
accountName,
status,
isPlaid,
onOpenMenu,
accountId,
isProviderLinked,
isLocalBA,
}: TBankAccountHeader) => {
const headerDescription = isPlaid
? "Connected With Plaid"
: isProviderLinked
? "Linked to Provider"
: "Manually Uploaded";
return (
<Stack
direction="row"
flexGrow={1}
justifyContent="space-between"
alignItems="center"
width="100%"
gap={2}
>
<Stack direction="column" gap="8px" alignItems="left" overflow="hidden">
<GiveText color="primary">{accountName}</GiveText>
<GiveText color="secondary" variant="bodyXS">
{headerDescription}
</GiveText>
</Stack>
<Stack
display="flex"
direction="row"
gap="8px"
alignItems="center"
justifyContent="center"
>
{onOpenMenu && (
<GiveIconButton
data-testid="bank-account-actions-button"
sx={{ margin: "0px !important", paddingRight: "8px" }}
variant="ghost"
onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
onOpenMenu(e, accountId);
}}
Icon={DotsThreeIcon}
/>
)}
{!isLocalBA && <GiveBAStatusChip accountStatus={status} />}
</Stack>
</Stack>
);
};
export default BankAccountHeader;
|