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 | 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x | import VolunteerActivismIcon from "@mui/icons-material/VolunteerActivism";
import { Alert, alpha, styled } from "@mui/material";
import useAccountInfo from "features/auth/useAccountInfo";
import { useTranslation } from "i18n";
import { GLOBAL } from "i18n/namespaces";
import { theme } from "theme";
import DonationProgressBar from "./DonationProgressBar";
import useDonationStats from "./useDonationStats";
export interface DonationDriveBlockProps {
onClose?: () => void;
action?: React.ReactNode;
alwaysShow?: boolean;
}
const OuterWrapper = styled("div")(({ theme }) => ({
display: "flex",
alignItems: "center",
width: "100%",
gap: theme.spacing(2),
[theme.breakpoints.down("md")]: {
flexDirection: "column",
alignItems: "stretch",
gap: theme.spacing(1.5),
},
}));
const ContentWrapper = styled("div")(({ theme }) => ({
display: "flex",
flexDirection: "column",
flex: 1,
gap: theme.spacing(0.75),
}));
const Message = styled("span")(({ theme }) => ({
fontSize: "0.875rem",
color: "var(--mui-palette-text-secondary)",
[theme.breakpoints.down("md")]: {
textAlign: "center",
},
}));
export default function DonationDriveBlock({
onClose,
action,
alwaysShow = false,
}: DonationDriveBlockProps) {
const { t, i18n } = useTranslation(GLOBAL);
const { data: accountInfo, isLoading } = useAccountInfo();
const { data: donationStats } = useDonationStats();
Iif (!alwaysShow && (isLoading || !accountInfo?.shouldShowDonationBanner)) {
return null;
}
const formattedGoal = donationStats
? new Intl.NumberFormat(i18n.language, {
style: "currency",
currency: "USD",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
}).format(donationStats.goal)
: "";
return (
<Alert
icon={<VolunteerActivismIcon />}
onClose={onClose}
sx={{
alignItems: "center",
".MuiAlert-message": { width: "100%", py: 0.5 },
backgroundColor: alpha(theme.palette.secondary.main, 0.08),
color: "var(--mui-palette-text-primary)",
"& .MuiAlert-icon": {
color: "var(--mui-palette-secondary-main)",
alignSelf: "center",
},
[theme.breakpoints.down("md")]: {
alignItems: "flex-start",
"& .MuiAlert-icon": {
paddingTop: "10px",
},
},
}}
>
<OuterWrapper>
<ContentWrapper>
<DonationProgressBar />
<Message>
{t("donation_banner.message", { goal: formattedGoal })}
</Message>
</ContentWrapper>
{action}
</OuterWrapper>
</Alert>
);
}
|