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 | 9x 9x | import { Box, Button, Avatar } from "@mui/material";
import { LinkIcon } from "@phosphor-icons/react";
import { useAppTheme, styled } from "@theme/v2/Provider";
import GiveText from "@shared/Text/GiveText";
interface Props {
taxId?: string;
email?: string;
onChangeTaxId: () => void;
}
export const ExistingTaxIdWarningScreen = ({
taxId,
email,
onChangeTaxId,
}: Props): JSX.Element => {
const theme = useAppTheme();
return (
<StyledBox>
<Avatar
sx={{
bgcolor: theme.palette.action.hover,
width: 56,
height: 56,
mb: 3,
}}
>
<LinkIcon size={32} color={theme.palette.text.secondary} />
</Avatar>
<GiveText variant="bodyL" sx={{ mb: 3 }}>
This Tax ID{" "}
<Box component="span" sx={{ fontWeight: "bold" }}>
({taxId ?? "N/A"})
</Box>{" "}
has been recognized as belonging to an active business. An email has
been sent to {email} to confirm the association.
</GiveText>
<Button
variant="outline"
color="primary"
onClick={onChangeTaxId}
sx={{
borderRadius: "20px",
textTransform: "none",
minWidth: "160px",
borderColor: theme.palette.grey[400],
color: theme.palette.text.primary,
"&:hover": {
borderColor: theme.palette.primary.main,
backgroundColor: theme.palette.action.hover,
},
}}
>
Change Tax ID
</Button>
</StyledBox>
);
};
const StyledBox = styled(Box)({
display: "flex",
flexDirection: "column",
alignItems: "center",
height: "100%",
justifyContent: "center",
padding: "40px",
});
|