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 | 19x 19x 19x 19x | import { PlaidIcon } from "@assets/icons";
import { WithTooltipWrapper } from "@common/Menu/NewDropdownMenu";
import { Text } from "@common/Text";
import { ACTION_DENY_MESSAGE } from "@constants/permissions";
import { usePlaidService } from "@hooks/merchant-api/BankAccounts";
import { Box, BoxProps, Stack } from "@mui/material";
import { palette } from "@palette";
type Props = {
name?: string;
accountNumber?: number;
logo?: string;
};
const OnboardingPlaidCard = ({
name,
accountNumber,
logo,
...props
}: Props & BoxProps) => {
const { isEnableLinkPlaid } = usePlaidService();
return (
<WithTooltipWrapper
hasTooltip={!isEnableLinkPlaid}
tooltipProps={{
message: ACTION_DENY_MESSAGE,
show: !isEnableLinkPlaid,
}}
>
<Box
sx={{
...containerStyle,
...(!isEnableLinkPlaid && {
pointerEvents: "none",
}),
}}
{...props}
>
<Box display="flex" alignItems="center" justifyContent="space-between">
<PlaidIcon width={40} height={40} fill="#ffffff" />
{name && (
<Stack
direction="row"
spacing={1}
alignItems="center"
className="plaid-disconnect"
>
<Text fontWeight="book" color="#ffffff">
Disconnect
</Text>
</Stack>
)}
</Box>
<Text sx={nameStyle}>{name || "Quick link through Plaid"}</Text>
<Text sx={descriptionStyle}>
{accountNumber
? `Bank account ••••••${accountNumber}`
: "Secure & Swift! Connect your account through Plaid for enhanced security and faster approval."}
</Text>
</Box>
</WithTooltipWrapper>
);
};
const containerStyle = {
display: "flex",
flexDirection: "column",
gap: "8px",
borderRadius: "12px",
padding: "16px",
border: "1px solid rgba(228, 228, 228, 0.50)",
background: palette.neutral[100],
cursor: "pointer",
"& .plaid-disconnect": {
visibility: "hidden",
},
"&:hover": {
"& .plaid-disconnect": {
visibility: "visible",
},
boxShadow: "0px 8px 15px 0px rgba(2, 2, 2, 0.15)",
},
};
const nameStyle = {
fontSize: "18px",
fontWeight: "400",
color: "#FBFBFB",
};
const descriptionStyle = {
fontSize: "14px",
fontWeight: "300",
color: "#FBFBFB",
};
export default OnboardingPlaidCard;
|