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 | 1x 8x 8x 8x 8x 8x 8x 8x 8x | import { Box, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import {
IconWrapper,
NotificationItemContainer,
} from "./GiveNotificationItem.style";
import { TAlertMethods } from "../GiveNotificationCenterTypes";
import useGetAlertData from "../hooks/useGetAlertData";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import CheckBoxWithLabel from "./CheckBoxWithLabel";
import { TParsedAlert } from "@components/ProfileMenu/modals/types";
type Props = {
handleChange: (id: string, method: TAlertMethods) => void;
alert: TParsedAlert;
};
export const GiveNotificationItem = ({ alert, handleChange }: Props) => {
const { isMobileView } = useCustomThemeV2();
const { getDisplayedData } = useGetAlertData();
const { icon, title, description } = getDisplayedData({ alert });
const isEmailDisabled = alert?.disabled?.email;
const isPushDisabled = alert?.disabled?.push;
const isEmailAssigned = alert?.isAssigned?.email;
const isPushAssigned = alert?.isAssigned?.push;
return (
<NotificationItemContainer>
<IconWrapper>{icon}</IconWrapper>
<Stack
direction={isMobileView ? "column" : "row"}
flex={1}
gap="12px"
justifyContent="space-between"
>
<Stack
direction="column"
gap="10px"
sx={{
display: "flex",
flexDirection: "column",
gap: "10px",
}}
>
<GiveText variant="bodyS" color="primary">
{title}
</GiveText>
<GiveText variant="bodyS" color="secondary">
{description}
</GiveText>
</Stack>
<Box display="flex" flexDirection="row" gap="24px" alignItems="center">
<CheckBoxWithLabel
label={isMobileView ? "Push" : undefined}
checked={isPushAssigned}
isDisabled={isPushDisabled}
onChange={() => handleChange(alert?.id, "push")}
customCheckboxStyle={{
ml: isMobileView ? undefined : "45px",
}}
/>
<CheckBoxWithLabel
label={isMobileView ? "Email" : undefined}
checked={isEmailAssigned}
isDisabled={isEmailDisabled}
onChange={() => handleChange(alert?.id, "email")}
customCheckboxStyle={{
ml: isMobileView ? undefined : "45px",
}}
/>
</Box>
</Stack>
</NotificationItemContainer>
);
};
|