InvoicePreview InvoiceEmailHeader.tsx

0% Statements 0/8

100% Branches 0/0

0% Functions 0/1

0% Lines 0/8

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import useCheckEnvironment from "@hooks/common/useCheckEnvironment";
import { Box } from "@mui/material";
import { usePayBuilderContext } from "@sections/PayBuilder/provider/PayBuilderContext";
import { usePayBuilderForm } from "@sections/PayBuilder/provider/PayBuilderFormProvider";
import ProductPageLogoComponent from "../products/ProductPageContainer/ProductPageLogoComponent";
 
const InvoiceEmailHeader = () => {
  const { domain } = useCheckEnvironment();
  const url = `https://cdn.${domain}givepayments.com/images/header.jpeg`;
  const {
    screenStates: { isMobileDevice },
  } = usePayBuilderContext();
 
  const { methods } = usePayBuilderForm();
  const values = methods.getValues();
  const logo = values.Style.logo;
  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: "flex-end",
        padding: "80px 40px 40px",
      }}
    >
      <ProductPageLogoComponent
        logoUrl={logo}
        isPreview
        boxSx={{
          justifyContent: "initial",
        }}
      />
    </Box>
  );
};
 
export default InvoiceEmailHeader;