All files / src/sections/PayBuilder/components/product-preview-email ProductEmailHeader.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
 
 
 
 
 
 
 
 
12x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Image } from "@common/StyledImage/Image";
import { useAccountSelection } from "@pages/Login/modals/hooks/useAccountSelectionModal";
import { useGetCurrentMerchantId } from "@hooks/common";
import useCheckEnvironment from "@hooks/common/useCheckEnvironment";
import { Box } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { addSizeToImage } from "@utils/image.helpers";
 
export const EmailHeader = () => {
  const { domain } = useCheckEnvironment();
  const url = `https://cdn.${domain}givepayments.com/images/header.jpeg`;
  const { merchantId, img, name } = useGetCurrentMerchantId();
  const { accountList } = useAccountSelection(undefined);
 
  const account = accountList.find((el) => el.id === merchantId);
  const avatarImage = img || addSizeToImage(account?.img || "", "small") || "";
 
  return (
    <Box
      sx={{
        height: "152px",
        background: `linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 1) 90%), url(${url}) lightgray 50% / cover no-repeat`,
        display: "flex",
        alignItems: typeof avatarImage === "string" ? "center" : "flex-end",
        gap: "12px",
        padding: "80px 40px 40px",
      }}
    >
      {avatarImage && (
        <Image
          src={avatarImage}
          sx={{
            width: 48,
            height: 48,
          }}
        />
      )}
      <GiveText>{name}</GiveText>
    </Box>
  );
};