All files / src/components/PaymentForm PublicFormFooter.tsx

0% Statements 0/8
0% Branches 0/23
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 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 98 99 100 101 102                                                                                                                                                                                                           
import { Box, Stack, useTheme } from "@mui/material";
import { Text } from "@common/Text";
import { palette } from "@palette";
import { useMediaQuery } from "@mui/material";
import { LoginExternalLink } from "@components/Login";
import { PRIVACY_POLICY_URL, TERMS_OF_SERVICE_URL } from "@constants/constants";
import useCheckEnvironment from "@hooks/common/useCheckEnvironment";
 
const CUSTOM_BREAKPOINT = 1290;
 
const PublicFormFooter = ({
  isPeekMode,
  customStyle,
  isDisabled,
  isDesktopDeviceType,
}: {
  isPeekMode?: boolean;
  customStyle?: any;
  isDisabled?: boolean | undefined;
  isDesktopDeviceType?: boolean;
}) => {
  const theme = useTheme();
  const isDesktopView = useMediaQuery(theme.breakpoints.up("sm"));
  const isMaxedWidth = useMediaQuery(theme.breakpoints.up(CUSTOM_BREAKPOINT));
  const isDesktop = isDesktopDeviceType ?? isDesktopView;
  const { platformBaseUrl } = useCheckEnvironment();
 
  return (
    <Box
      sx={{
        backgroundColor: customStyle?.bgColor || "#F8F8F6",
        width: "100%",
        maxWidth: customStyle?.maxWidth || "1232px",
        margin: "0 auto",
        padding: customStyle?.padding || "8px 16px",
      }}
    >
      <Stack
        sx={{
          maxWidth: "1280px",
          margin: "0 auto",
          textAlign: "center",
          padding: 2,
          ...(isMaxedWidth &&
            !isPeekMode && {
              paddingLeft: 0,
              paddingRight: 0,
            }),
          // width: "100%",
          pointerEvents: "auto",
          ...(isPeekMode && { zIndex: 1 }),
        }}
        direction={isDesktop ? "row" : "column-reverse"}
        justifyContent={isDesktop ? "space-between" : "center"}
        alignItems="center"
        gap={2}
      >
        <Text
          color={palette.neutral[600]}
          sx={{
            fontSize: customStyle?.fontSize || undefined,
          }}
        >
          All rights reserved ©GiveCorporation {new Date().getFullYear()}
        </Text>
        <Stack direction="row" justifyContent={"space-evenly"} gap={2}>
          <LoginExternalLink
            underline={palette.neutral[600]}
            href={PRIVACY_POLICY_URL}
            isDisabled={isDisabled}
          >
            <Text
              color={palette.neutral[600]}
              sx={{
                fontSize: customStyle?.fontSize || undefined,
              }}
            >
              Privacy Policy
            </Text>
          </LoginExternalLink>
          <LoginExternalLink
            underline={palette.neutral[600]}
            href={`${platformBaseUrl}${TERMS_OF_SERVICE_URL}`}
            isDisabled={isDisabled}
          >
            <Text
              color={palette.neutral[600]}
              sx={{
                fontSize: customStyle?.fontSize || undefined,
              }}
            >
              Terms & Conditions
            </Text>
          </LoginExternalLink>
        </Stack>
      </Stack>
    </Box>
  );
};
 
export default PublicFormFooter;