All files / src/components/Settings/BusinessDetails/RebrandedBusinessProfile BPLinkInProgressV2.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
4x
1x
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4x
 
 
 
 
 
 
 
 
 
 
 
import { Box, Stack } from "@mui/material";
import { LinkSimpleIcon } from "@phosphor-icons/react";
import GiveButton from "@shared/Button/GiveButton";
import GiveText from "@shared/Text/GiveText";
import { styled, useAppTheme } from "@theme/v2/Provider";
 
type Props = {
  taxID: string;
  email?: string;
  handleChangeTaxId: () => void;
};
 
const BPLinkInProgressV2 = ({ taxID, email, handleChangeTaxId }: Props) => {
  const { palette } = useAppTheme();
 
  return (
    <Stack spacing={3} alignItems="center">
      <IconContainer>
        <LinkSimpleIcon size={28} color={palette?.text?.secondary} />
      </IconContainer>
      <Stack spacing={0.5}>
        <GiveText variant="bodyL" textAlign="center">
          Linked Tax ID
        </GiveText>
        <GiveText variant="bodyS" textAlign="center">
          This Tax ID{" "}
          <span style={{ color: palette.text.primary }}>({taxID})</span> has
          been recognized as belonging to an active business. An email has been
          sent to {email} to confirm the association.
        </GiveText>
      </Stack>
      <GiveButton
        label="Change Tax ID"
        variant="outline"
        size="large"
        onClick={handleChangeTaxId}
      />
    </Stack>
  );
};
 
const IconContainer = styled(Box)(({ theme }) => ({
  borderRadius: "50%",
  background: theme.palette?.primitive?.transparent?.["darken-5"],
  height: "60px",
  width: "60px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
}));
 
export default BPLinkInProgressV2;