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 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 6x 14x 14x 14x 13x 13x 13x 13x 6x 6x 6x 1x 1x 6x 6x 13x 3x 3x 3x 1x 2x 3x 13x | import { styled, Typography } from "@mui/material"; import Alert from "components/Alert"; import CustomColorSwitch from "components/CustomColorSwitch"; import { Trans, useTranslation } from "i18n"; import { NOTIFICATIONS } from "i18n/namespaces"; import Sentry from "platform/sentry"; import { useEffect, useState } from "react"; import { theme } from "theme"; import PushNotificationDenied from "./PushNotificationDenied"; import { checkPushEnabled, turnPushNotificationsOff, turnPushNotificationsOn, } from "./utils/helpers"; const StyledAlert = styled(Alert)(({ theme }) => ({ marginBottom: theme.spacing(3), marginTop: theme.spacing(2), })); const StyledTitleBox = styled("div")(({ theme }) => ({ display: "flex", alignItems: "center", })); export default function PushNotificationSettings() { const { t } = useTranslation([NOTIFICATIONS]); const isNotificationSupported = typeof Notification !== "undefined"; const [errorMessage, setErrorMessage] = useState<string | null>(null); const [isPushEnabled, setIsPushEnabled] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(true); const [shouldPromptAllow, setShouldPromptAllow] = useState<boolean>(false); // whether to show the user instructions to click 'Allow' in their browser useEffect(() => { const checkPushEnabledWrap = async () => { try { setIsPushEnabled(await checkPushEnabled()); } catch (e) { setErrorMessage( t("notification_settings.push_notifications.error_unsupported"), ); Sentry.captureException(e, { tags: { component: "PushNotificationPermission", action: "onPermissionGranted", userAgent: navigator.userAgent, }, }); } setIsLoading(false); }; checkPushEnabledWrap(); }, [t]); const turnPushNotificationsOnWrap = async () => { setIsLoading(true); const result = await turnPushNotificationsOn(setShouldPromptAllow); if (!result.success) { setErrorMessage(result.errorMessage); } else { setIsPushEnabled(true); } setIsLoading(false); }; const turnPushNotificationsOffWrap = async () => { setIsLoading(true); Iif (await turnPushNotificationsOff()) { setIsPushEnabled(false); } setIsLoading(false); }; return ( <div> <StyledTitleBox> <Typography variant="h2"> {t("notification_settings.push_notifications.title")} </Typography> <CustomColorSwitch checked={isPushEnabled} onClick={ isPushEnabled ? turnPushNotificationsOffWrap : turnPushNotificationsOnWrap } customColor={theme.palette.primary.main} isLoading={isLoading} /> </StyledTitleBox> {errorMessage && ( <StyledAlert severity="error"> {errorMessage || t("notification_settings.push_notifications.error_generic")} </StyledAlert> )} {shouldPromptAllow && ( <Alert severity="info"> {t("notification_settings.push_notifications.allow_push")} </Alert> )} {isNotificationSupported && Notification.permission === "denied" && ( <PushNotificationDenied /> )} <Typography variant="body1" sx={{ marginBottom: theme.spacing(2) }}> {isPushEnabled ? ( <Trans i18nKey="notifications:notification_settings.push_notifications.enabled_message"> You currently have push notifications <strong>enabled</strong>. </Trans> ) : ( <Trans i18nKey="notifications:notification_settings.push_notifications.disabled_message"> You currently have push notifications <strong>disabled</strong>. </Trans> )} </Typography> <Typography variant="body1"> {t("notification_settings.push_notifications.description")} </Typography> </div> ); } |