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 | import { Box, Stack } from "@mui/material";
import { ReactNode } from "react";
import { useAppTheme } from "@theme/v2/Provider";
import { usePayBuilderContext } from "@sections/PayBuilder/provider/PayBuilderContext";
import { useBannerOffset } from "@hooks/common/useBannerOffset";
import { Divider } from "@mui/material";
import GivePaymentsLogoBlack from "@assets/icons/RebrandedIcons/GivePaymentsLogo";
import { EmailHeader } from "@sections/PayBuilder/components/product-preview-email/ProductEmailHeader";
interface EmailPreviewLayoutProps {
content: ReactNode;
isLoading?: boolean;
}
export function EmailPreviewLayout({
content,
isLoading = false,
}: EmailPreviewLayoutProps) {
const theme = useAppTheme();
const bannerOffset = useBannerOffset();
const {
screenStates: { isMobileView, isMobileDevice },
} = usePayBuilderContext();
const containerMinHeight = `calc(100vh - ${180 + bannerOffset}px)`;
const header = <EmailHeader />;
const footer = (
<Stack gap="24px">
<Divider />
<GivePaymentsLogoBlack fill={theme.palette.primitive?.neutral["50"]} />
</Stack>
);
return (
<Box
sx={{
overflowY: "auto",
overflowX: "hidden",
width: "100%",
// ...checkoutScrollbarStyles,
}}
>
<Box
sx={{
backgroundColor: theme.palette.primitive?.neutral["10"],
margin: "auto",
width: "100%",
borderRadius: "20px",
minHeight: containerMinHeight,
display: "flex",
...(!isMobileDevice &&
!isMobileView && {
paddingX: "80px",
}),
}}
>
<Box
sx={{
backgroundColor: theme.palette.primitive?.neutral["0"],
margin: "auto",
width: isMobileView ? "100%" : "600px",
minHeight: containerMinHeight,
display: "flex",
flexDirection: "column",
}}
>
{isLoading ? (
<Box flex={1} />
) : (
<>
{header}
{/* MAIN FLEX CONTROLLER */}
<Stack
sx={{
paddingX: 5,
paddingBottom: 5,
gap: "24px",
flex: 1,
}}
>
{/* GROWING CONTENT */}
<Stack sx={{ flex: 1, gap: "24px" }}>{content}</Stack>
{/* FOOTER */}
{footer}
</Stack>
</>
)}
</Box>
</Box>
</Box>
);
}
|