@micha.bigler/ui-core-micha 2.7.0 → 2.8.1

package/dist/i18n/onboardingTranslations.js

@@ -14,7 +14,12 @@ export const onboardingTranslations = {
     'Onboarding.LAST_NAME_LABEL': { de: 'Nachname', fr: 'Nom', en: 'Last name', sw: 'Jina la mwisho' },
     'Onboarding.SAVE': { de: 'Speichern', fr: 'Enregistrer', en: 'Save', sw: 'Hifadhi' },
     'Onboarding.COMPLETE_NAME_ERROR': { de: 'Der Name konnte nicht gespeichert werden. Bitte versuche es erneut.', fr: 'Impossible d’enregistrer votre nom. Veuillez réessayer.', en: 'Your name could not be saved. Please try again.', sw: 'Jina lako halikuweza kuhifadhiwa. Tafadhali jaribu tena.' },
-    'Onboarding.BROWSER_PUSH_TITLE': { de: 'Push-Benachrichtigungen', fr: 'Notifications push', en: 'Push notifications', sw: 'Arifa za push' },
-    'Onboarding.BROWSER_PUSH_BODY': { de: 'Erhalte Benachrichtigungen direkt im Browser, auch wenn die App nicht geöffnet ist.', fr: 'Recevez des notifications directement dans votre navigateur, même lorsque l’application est fermée.', en: 'Receive notifications directly in your browser, even when the app is not open.', sw: 'Pokea arifa moja kwa moja kwenye kivinjari chako, hata programu haijafunguliwa.' },
+    'Onboarding.NOTIFICATIONS_TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
+    'Onboarding.NOTIFICATIONS_BODY': { de: 'Wähle aus, wie du über wichtige Neuigkeiten informiert werden möchtest.', fr: 'Choisissez comment vous souhaitez être informé des informations importantes.', en: 'Choose how you would like to be notified about important updates.', sw: 'Chagua jinsi unavyotaka kuarifiwa kuhusu taarifa muhimu.' },
+    'Onboarding.EMAIL_NOTIFICATIONS_LABEL': { de: 'E-Mail-Benachrichtigungen', fr: 'Notifications par e-mail', en: 'Email notifications', sw: 'Arifa za barua pepe' },
+    'Onboarding.EMAIL_NOTIFICATIONS_HINT': { de: 'Erhalte wichtige Informationen per E-Mail.', fr: 'Recevez les informations importantes par e-mail.', en: 'Receive important information by email.', sw: 'Pokea taarifa muhimu kwa barua pepe.' },
+    'Onboarding.PUSH_NOTIFICATIONS_LABEL': { de: 'Push-Benachrichtigungen', fr: 'Notifications push', en: 'Push notifications', sw: 'Arifa za push' },
+    'Onboarding.PUSH_NOTIFICATIONS_HINT': { de: 'Aktiviere Benachrichtigungen für dieses Gerät.', fr: 'Activez les notifications pour cet appareil.', en: 'Enable notifications for this device.', sw: 'Washa arifa kwa kifaa hiki.' },
+    'Onboarding.PUSH_ENABLED': { de: 'Push-Benachrichtigungen sind auf diesem Gerät aktiviert.', fr: 'Les notifications push sont activées sur cet appareil.', en: 'Push notifications are enabled on this device.', sw: 'Arifa za push zimewashwa kwenye kifaa hiki.' },
     'Onboarding.SKIP': { de: 'Überspringen', fr: 'Passer', en: 'Skip', sw: 'Ruka' },
 };

package/dist/notifications/NotificationSettings.js

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -143,6 +142,6 @@ export function NotificationSettings() {
     if (loading) {
         return _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(CircularProgress, {}) });
     }
-    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_HINT') }), iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), pushSupported && !iosNeedsInstall && (pushSubscribed ? (_jsx(Button, { variant: "outlined", color: "error", onClick: handleDisablePush, disabled: savingPush, startIcon: savingPush ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_DISABLE') })) : (_jsx(Button, { variant: "contained", onClick: handleEnablePush, disabled: savingPush, startIcon: savingPush ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_ENABLE') })))] })] }));
+    return (_jsxs(Box, { sx: { maxWidth: 520 }, children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, {}), t('NotificationSettings.TITLE')] }), _jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: t('NotificationSettings.SUBTITLE') }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, onClose: () => setError(''), children: error }), conflict && _jsx(Alert, { severity: "warning", sx: { mb: 2 }, onClose: () => setConflict(''), children: conflict }), _jsx(Box, { sx: { py: 2 }, children: _jsx(FormControlLabel, { control: _jsx(Switch, { checked: Boolean(preferences === null || preferences === void 0 ? void 0 : preferences.email_opt_in), onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.EMAIL_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.EMAIL_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }) }), _jsx(Divider, {}), _jsxs(Box, { sx: { py: 2 }, children: [iosNeedsInstall && _jsx(Alert, { severity: "info", sx: { mb: 1.5 }, children: t('NotificationSettings.IOS_HINT') }), !pushSupported && !iosNeedsInstall && _jsx(Alert, { severity: "warning", sx: { mb: 1.5 }, children: t('NotificationSettings.PUSH_NOT_SUPPORTED') }), _jsx(FormControlLabel, { control: (_jsx(Switch, { checked: pushSubscribed, onChange: (event) => (event.target.checked ? handleEnablePush() : handleDisablePush()), disabled: savingPush || !pushSupported || iosNeedsInstall })), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('NotificationSettings.PUSH_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('NotificationSettings.PUSH_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } })] })] }));
 }
 export default NotificationSettings;

package/dist/onboarding/OnboardingProvider.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 import { AuthContext } from '../auth/AuthContext';
+import { getNotificationPreferences } from '../notifications/api';
 import { getOnboardingStepConfig } from './api';
 import { selectActiveSteps } from './stepSelection';
 import CookieConsentStep from './steps/CookieConsentStep';
@@ -27,11 +28,15 @@ export const UNIVERSAL_STEP_DESCRIPTORS = [
     },
     {
         id: 'browser_push',
-        condition: (ctx) => { var _a; return Boolean(((_a = ctx.pushState) === null || _a === void 0 ? void 0 : _a.supported) && !ctx.pushState.subscribed); },
+        condition: (ctx) => {
+            var _a, _b;
+            return Boolean((((_a = ctx.pushState) === null || _a === void 0 ? void 0 : _a.supported) && (!ctx.pushState.subscribed || !ctx.emailOptedIn))
+                || (!((_b = ctx.pushState) === null || _b === void 0 ? void 0 : _b.supported) && !ctx.emailOptedIn));
+        },
         blocking: false,
         skipable: true,
         persistDismissed: true,
-        titleKey: 'Onboarding.BROWSER_PUSH_TITLE',
+        titleKey: 'Onboarding.NOTIFICATIONS_TITLE',
         Component: BrowserPushStep,
     },
 ];
@@ -61,6 +66,7 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
     const [configMap, setConfigMap] = useState({});
     const [configLoaded, setConfigLoaded] = useState(false);
     const [pushState, setPushState] = useState(getInitialPushState);
+    const [emailOptedIn, setEmailOptedIn] = useState(false);
     const [dismissedSet, setDismissedSet] = useState(loadDismissedSteps);
     const descriptors = useMemo(() => [...UNIVERSAL_STEP_DESCRIPTORS, ...extraSteps], [extraSteps]);
     useEffect(() => {
@@ -107,6 +113,24 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
         });
         return () => { cancelled = true; };
     }, []);
+    useEffect(() => {
+        let cancelled = false;
+        if (!user) {
+            setEmailOptedIn(false);
+            return undefined;
+        }
+        setEmailOptedIn(false);
+        getNotificationPreferences()
+            .then((data) => {
+            if (!cancelled)
+                setEmailOptedIn(Boolean(data === null || data === void 0 ? void 0 : data.email_opt_in));
+        })
+            .catch(() => {
+            if (!cancelled)
+                setEmailOptedIn(false);
+        });
+        return () => { cancelled = true; };
+    }, [user]);
     const dismissStep = useCallback((id) => {
         setDismissedSet((previous) => {
             const next = new Set(previous);
@@ -122,7 +146,7 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
             return next;
         });
     }, []);
-    const ctx = useMemo(() => ({ user, pushState }), [user, pushState]);
+    const ctx = useMemo(() => ({ user, pushState, emailOptedIn }), [user, pushState, emailOptedIn]);
     const activeSteps = useMemo(() => {
         if (!configLoaded || !user)
             return [];

package/dist/onboarding/steps/BrowserPushStep.js

@@ -1,22 +1,58 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import { getVapidPublicKey, patchNotificationPreferences, savePushSubscription, urlBase64ToUint8Array, } from '../../notifications/api';
-export function BrowserPushStep({ onComplete, onDismiss }) {
+export function BrowserPushStep({ onComplete, onDismiss, ctx }) {
+    var _a, _b, _c;
     const { t } = useTranslation();
     const [loading, setLoading] = useState(false);
+    const [savingEmail, setSavingEmail] = useState(false);
+    const [emailOptedIn, setEmailOptedIn] = useState(Boolean(ctx === null || ctx === void 0 ? void 0 : ctx.emailOptedIn));
+    const [pushSubscribed, setPushSubscribed] = useState(Boolean((_a = ctx === null || ctx === void 0 ? void 0 : ctx.pushState) === null || _a === void 0 ? void 0 : _a.subscribed));
     const [error, setError] = useState('');
+    const pushSupported = Boolean((_b = ctx === null || ctx === void 0 ? void 0 : ctx.pushState) === null || _b === void 0 ? void 0 : _b.supported);
+    useEffect(() => {
+        setEmailOptedIn(Boolean(ctx === null || ctx === void 0 ? void 0 : ctx.emailOptedIn));
+    }, [ctx === null || ctx === void 0 ? void 0 : ctx.emailOptedIn]);
+    useEffect(() => {
+        var _a;
+        setPushSubscribed(Boolean((_a = ctx === null || ctx === void 0 ? void 0 : ctx.pushState) === null || _a === void 0 ? void 0 : _a.subscribed));
+    }, [(_c = ctx === null || ctx === void 0 ? void 0 : ctx.pushState) === null || _c === void 0 ? void 0 : _c.subscribed]);
+    const handleEmailToggle = async (event) => {
+        const nextEmailOptedIn = event.target.checked;
+        const previousEmailOptedIn = emailOptedIn;
+        setSavingEmail(true);
+        setError('');
+        setEmailOptedIn(nextEmailOptedIn);
+        try {
+            await patchNotificationPreferences({ email_opt_in: nextEmailOptedIn });
+        }
+        catch (_a) {
+            setEmailOptedIn(previousEmailOptedIn);
+            setError(t('NotificationSettings.SAVE_ERROR'));
+        }
+        finally {
+            setSavingEmail(false);
+        }
+    };
     const enable = async () => {
         var _a;
         setLoading(true);
         setError('');
         try {
+            if (typeof Notification === 'undefined') {
+                setError(t('NotificationSettings.PUSH_ERROR'));
+                return;
+            }
             const permission = await Notification.requestPermission();
             if (permission !== 'granted') {
                 setError(t('NotificationSettings.PUSH_DENIED'));
@@ -30,6 +66,7 @@ export function BrowserPushStep({ onComplete, onDismiss }) {
             });
             await savePushSubscription(subscription.toJSON(), navigator.userAgent);
             await patchNotificationPreferences({ push_opt_in: true });
+            setPushSubscribed(true);
             onComplete();
         }
         catch (requestError) {
@@ -44,6 +81,6 @@ export function BrowserPushStep({ onComplete, onDismiss }) {
             setLoading(false);
         }
     };
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.BROWSER_PUSH_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.BROWSER_PUSH_BODY') }), error && _jsx(Alert, { severity: "warning", onClose: () => setError(''), children: error }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1 }, children: [_jsx(Button, { variant: "text", onClick: onDismiss, disabled: loading, children: t('Onboarding.SKIP') }), _jsx(Button, { variant: "contained", onClick: enable, disabled: loading, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_ENABLE') })] })] }));
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(NotificationsIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.NOTIFICATIONS_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.NOTIFICATIONS_BODY') }), error && _jsx(Alert, { severity: "warning", onClose: () => setError(''), children: error }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: emailOptedIn, onChange: handleEmailToggle, disabled: savingEmail }), label: _jsxs(Box, { children: [_jsx(Typography, { variant: "body1", children: t('Onboarding.EMAIL_NOTIFICATIONS_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('Onboarding.EMAIL_NOTIFICATIONS_HINT') })] }), labelPlacement: "end", sx: { alignItems: 'flex-start', ml: 0 } }), pushSupported && (_jsxs(Box, { children: [_jsx(Typography, { variant: "body1", gutterBottom: true, children: t('Onboarding.PUSH_NOTIFICATIONS_LABEL') }), _jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 1.5 }, children: t('Onboarding.PUSH_NOTIFICATIONS_HINT') }), pushSubscribed ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(CheckCircleIcon, { color: "success", fontSize: "small" }), _jsx(Typography, { variant: "body2", children: t('Onboarding.PUSH_ENABLED') })] })) : (_jsx(Button, { variant: "contained", onClick: enable, disabled: loading, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('NotificationSettings.PUSH_ENABLE') }))] })), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1 }, children: [_jsx(Button, { variant: "text", onClick: onDismiss, disabled: loading || savingEmail, children: t('Onboarding.SKIP') }), _jsx(Button, { variant: "contained", onClick: onComplete, disabled: loading || savingEmail, children: t('Onboarding.CONTINUE') })] })] }));
 }
 export default BrowserPushStep;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/i18n/onboardingTranslations.ts

@@ -14,7 +14,12 @@ export const onboardingTranslations = {
   'Onboarding.LAST_NAME_LABEL': { de: 'Nachname', fr: 'Nom', en: 'Last name', sw: 'Jina la mwisho' },
   'Onboarding.SAVE': { de: 'Speichern', fr: 'Enregistrer', en: 'Save', sw: 'Hifadhi' },
   'Onboarding.COMPLETE_NAME_ERROR': { de: 'Der Name konnte nicht gespeichert werden. Bitte versuche es erneut.', fr: 'Impossible d’enregistrer votre nom. Veuillez réessayer.', en: 'Your name could not be saved. Please try again.', sw: 'Jina lako halikuweza kuhifadhiwa. Tafadhali jaribu tena.' },
-  'Onboarding.BROWSER_PUSH_TITLE': { de: 'Push-Benachrichtigungen', fr: 'Notifications push', en: 'Push notifications', sw: 'Arifa za push' },
-  'Onboarding.BROWSER_PUSH_BODY': { de: 'Erhalte Benachrichtigungen direkt im Browser, auch wenn die App nicht geöffnet ist.', fr: 'Recevez des notifications directement dans votre navigateur, même lorsque l’application est fermée.', en: 'Receive notifications directly in your browser, even when the app is not open.', sw: 'Pokea arifa moja kwa moja kwenye kivinjari chako, hata programu haijafunguliwa.' },
+  'Onboarding.NOTIFICATIONS_TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
+  'Onboarding.NOTIFICATIONS_BODY': { de: 'Wähle aus, wie du über wichtige Neuigkeiten informiert werden möchtest.', fr: 'Choisissez comment vous souhaitez être informé des informations importantes.', en: 'Choose how you would like to be notified about important updates.', sw: 'Chagua jinsi unavyotaka kuarifiwa kuhusu taarifa muhimu.' },
+  'Onboarding.EMAIL_NOTIFICATIONS_LABEL': { de: 'E-Mail-Benachrichtigungen', fr: 'Notifications par e-mail', en: 'Email notifications', sw: 'Arifa za barua pepe' },
+  'Onboarding.EMAIL_NOTIFICATIONS_HINT': { de: 'Erhalte wichtige Informationen per E-Mail.', fr: 'Recevez les informations importantes par e-mail.', en: 'Receive important information by email.', sw: 'Pokea taarifa muhimu kwa barua pepe.' },
+  'Onboarding.PUSH_NOTIFICATIONS_LABEL': { de: 'Push-Benachrichtigungen', fr: 'Notifications push', en: 'Push notifications', sw: 'Arifa za push' },
+  'Onboarding.PUSH_NOTIFICATIONS_HINT': { de: 'Aktiviere Benachrichtigungen für dieses Gerät.', fr: 'Activez les notifications pour cet appareil.', en: 'Enable notifications for this device.', sw: 'Washa arifa kwa kifaa hiki.' },
+  'Onboarding.PUSH_ENABLED': { de: 'Push-Benachrichtigungen sind auf diesem Gerät aktiviert.', fr: 'Les notifications push sont activées sur cet appareil.', en: 'Push notifications are enabled on this device.', sw: 'Arifa za push zimewashwa kwenye kifaa hiki.' },
   'Onboarding.SKIP': { de: 'Überspringen', fr: 'Passer', en: 'Skip', sw: 'Ruka' },
 };

package/src/notifications/NotificationSettings.jsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -172,15 +171,20 @@ export function NotificationSettings() {
       <Divider />
 
       <Box sx={{ py: 2 }}>
-        <Typography variant="body1" gutterBottom>{t('NotificationSettings.PUSH_LABEL')}</Typography>
-        <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1.5 }}>{t('NotificationSettings.PUSH_HINT')}</Typography>
         {iosNeedsInstall && <Alert severity="info" sx={{ mb: 1.5 }}>{t('NotificationSettings.IOS_HINT')}</Alert>}
-        {!pushSupported && !iosNeedsInstall && <Alert severity="warning">{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
-        {pushSupported && !iosNeedsInstall && (pushSubscribed ? (
-          <Button variant="outlined" color="error" onClick={handleDisablePush} disabled={savingPush} startIcon={savingPush ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_DISABLE')}</Button>
-        ) : (
-          <Button variant="contained" onClick={handleEnablePush} disabled={savingPush} startIcon={savingPush ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_ENABLE')}</Button>
-        ))}
+        {!pushSupported && !iosNeedsInstall && <Alert severity="warning" sx={{ mb: 1.5 }}>{t('NotificationSettings.PUSH_NOT_SUPPORTED')}</Alert>}
+        <FormControlLabel
+          control={(
+            <Switch
+              checked={pushSubscribed}
+              onChange={(event) => (event.target.checked ? handleEnablePush() : handleDisablePush())}
+              disabled={savingPush || !pushSupported || iosNeedsInstall}
+            />
+          )}
+          label={<Box><Typography variant="body1">{t('NotificationSettings.PUSH_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.PUSH_HINT')}</Typography></Box>}
+          labelPlacement="end"
+          sx={{ alignItems: 'flex-start', ml: 0 }}
+        />
       </Box>
     </Box>
   );

package/src/onboarding/OnboardingProvider.jsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { AuthContext } from '../auth/AuthContext';
+import { getNotificationPreferences } from '../notifications/api';
 import { getOnboardingStepConfig } from './api';
 import { selectActiveSteps } from './stepSelection';
 import CookieConsentStep from './steps/CookieConsentStep';
@@ -34,11 +35,14 @@ export const UNIVERSAL_STEP_DESCRIPTORS = [
   },
   {
     id: 'browser_push',
-    condition: (ctx) => Boolean(ctx.pushState?.supported && !ctx.pushState.subscribed),
+    condition: (ctx) => Boolean(
+      (ctx.pushState?.supported && (!ctx.pushState.subscribed || !ctx.emailOptedIn))
+      || (!ctx.pushState?.supported && !ctx.emailOptedIn),
+    ),
     blocking: false,
     skipable: true,
     persistDismissed: true,
-    titleKey: 'Onboarding.BROWSER_PUSH_TITLE',
+    titleKey: 'Onboarding.NOTIFICATIONS_TITLE',
     Component: BrowserPushStep,
   },
 ];
@@ -71,6 +75,7 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
   const [configMap, setConfigMap] = useState({});
   const [configLoaded, setConfigLoaded] = useState(false);
   const [pushState, setPushState] = useState(getInitialPushState);
+  const [emailOptedIn, setEmailOptedIn] = useState(false);
   const [dismissedSet, setDismissedSet] = useState(loadDismissedSteps);
 
   const descriptors = useMemo(
@@ -123,6 +128,25 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
     return () => { cancelled = true; };
   }, []);
 
+  useEffect(() => {
+    let cancelled = false;
+    if (!user) {
+      setEmailOptedIn(false);
+      return undefined;
+    }
+
+    setEmailOptedIn(false);
+    getNotificationPreferences()
+      .then((data) => {
+        if (!cancelled) setEmailOptedIn(Boolean(data?.email_opt_in));
+      })
+      .catch(() => {
+        if (!cancelled) setEmailOptedIn(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [user]);
+
   const dismissStep = useCallback((id) => {
     setDismissedSet((previous) => {
       const next = new Set(previous);
@@ -138,7 +162,7 @@ export function OnboardingProvider({ children, extraSteps = [] }) {
     });
   }, []);
 
-  const ctx = useMemo(() => ({ user, pushState }), [user, pushState]);
+  const ctx = useMemo(() => ({ user, pushState, emailOptedIn }), [user, pushState, emailOptedIn]);
   const activeSteps = useMemo(() => {
     if (!configLoaded || !user) return [];
     return selectActiveSteps(descriptors, configMap, ctx, dismissedSet);

package/src/onboarding/steps/BrowserPushStep.jsx

@@ -1,10 +1,13 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import Typography from '@mui/material/Typography';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import {
   getVapidPublicKey,
@@ -13,15 +16,47 @@ import {
   urlBase64ToUint8Array,
 } from '../../notifications/api';
 
-export function BrowserPushStep({ onComplete, onDismiss }) {
+export function BrowserPushStep({ onComplete, onDismiss, ctx }) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [savingEmail, setSavingEmail] = useState(false);
+  const [emailOptedIn, setEmailOptedIn] = useState(Boolean(ctx?.emailOptedIn));
+  const [pushSubscribed, setPushSubscribed] = useState(Boolean(ctx?.pushState?.subscribed));
   const [error, setError] = useState('');
+  const pushSupported = Boolean(ctx?.pushState?.supported);
+
+  useEffect(() => {
+    setEmailOptedIn(Boolean(ctx?.emailOptedIn));
+  }, [ctx?.emailOptedIn]);
+
+  useEffect(() => {
+    setPushSubscribed(Boolean(ctx?.pushState?.subscribed));
+  }, [ctx?.pushState?.subscribed]);
+
+  const handleEmailToggle = async (event) => {
+    const nextEmailOptedIn = event.target.checked;
+    const previousEmailOptedIn = emailOptedIn;
+    setSavingEmail(true);
+    setError('');
+    setEmailOptedIn(nextEmailOptedIn);
+    try {
+      await patchNotificationPreferences({ email_opt_in: nextEmailOptedIn });
+    } catch {
+      setEmailOptedIn(previousEmailOptedIn);
+      setError(t('NotificationSettings.SAVE_ERROR'));
+    } finally {
+      setSavingEmail(false);
+    }
+  };
 
   const enable = async () => {
     setLoading(true);
     setError('');
     try {
+      if (typeof Notification === 'undefined') {
+        setError(t('NotificationSettings.PUSH_ERROR'));
+        return;
+      }
       const permission = await Notification.requestPermission();
       if (permission !== 'granted') {
         setError(t('NotificationSettings.PUSH_DENIED'));
@@ -35,6 +70,7 @@ export function BrowserPushStep({ onComplete, onDismiss }) {
       });
       await savePushSubscription(subscription.toJSON(), navigator.userAgent);
       await patchNotificationPreferences({ push_opt_in: true });
+      setPushSubscribed(true);
       onComplete();
     } catch (requestError) {
       if (requestError?.response?.status === 409) {
@@ -49,12 +85,32 @@ export function BrowserPushStep({ onComplete, onDismiss }) {
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><NotificationsIcon color="primary" /><Typography variant="h6">{t('Onboarding.BROWSER_PUSH_TITLE')}</Typography></Box>
-      <Typography variant="body2" color="text.secondary">{t('Onboarding.BROWSER_PUSH_BODY')}</Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><NotificationsIcon color="primary" /><Typography variant="h6">{t('Onboarding.NOTIFICATIONS_TITLE')}</Typography></Box>
+      <Typography variant="body2" color="text.secondary">{t('Onboarding.NOTIFICATIONS_BODY')}</Typography>
       {error && <Alert severity="warning" onClose={() => setError('')}>{error}</Alert>}
+      <FormControlLabel
+        control={<Switch checked={emailOptedIn} onChange={handleEmailToggle} disabled={savingEmail} />}
+        label={<Box><Typography variant="body1">{t('Onboarding.EMAIL_NOTIFICATIONS_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('Onboarding.EMAIL_NOTIFICATIONS_HINT')}</Typography></Box>}
+        labelPlacement="end"
+        sx={{ alignItems: 'flex-start', ml: 0 }}
+      />
+      {pushSupported && (
+        <Box>
+          <Typography variant="body1" gutterBottom>{t('Onboarding.PUSH_NOTIFICATIONS_LABEL')}</Typography>
+          <Typography variant="caption" color="text.secondary" display="block" sx={{ mb: 1.5 }}>{t('Onboarding.PUSH_NOTIFICATIONS_HINT')}</Typography>
+          {pushSubscribed ? (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+              <CheckCircleIcon color="success" fontSize="small" />
+              <Typography variant="body2">{t('Onboarding.PUSH_ENABLED')}</Typography>
+            </Box>
+          ) : (
+            <Button variant="contained" onClick={enable} disabled={loading} startIcon={loading ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_ENABLE')}</Button>
+          )}
+        </Box>
+      )}
       <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-        <Button variant="text" onClick={onDismiss} disabled={loading}>{t('Onboarding.SKIP')}</Button>
-        <Button variant="contained" onClick={enable} disabled={loading} startIcon={loading ? <CircularProgress size={16} /> : undefined}>{t('NotificationSettings.PUSH_ENABLE')}</Button>
+        <Button variant="text" onClick={onDismiss} disabled={loading || savingEmail}>{t('Onboarding.SKIP')}</Button>
+        <Button variant="contained" onClick={onComplete} disabled={loading || savingEmail}>{t('Onboarding.CONTINUE')}</Button>
       </Box>
     </Box>
   );

package/tests/BrowserPushStep.test.jsx

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const notificationsApi = vi.hoisted(() => ({
+  getVapidPublicKey: vi.fn(),
+  patchNotificationPreferences: vi.fn(),
+  savePushSubscription: vi.fn(),
+  urlBase64ToUint8Array: vi.fn(() => new Uint8Array([1, 2, 3])),
+}));
+
+vi.mock('../src/notifications/api', () => notificationsApi);
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+
+import { BrowserPushStep } from '../src/onboarding/steps/BrowserPushStep';
+
+function renderStep(ctx, props = {}) {
+  return render(
+    <BrowserPushStep
+      ctx={ctx}
+      onComplete={vi.fn()}
+      onDismiss={vi.fn()}
+      {...props}
+    />,
+  );
+}
+
+function installPushEnvironment(subscription) {
+  const registration = {
+    pushManager: {
+      subscribe: vi.fn(),
+    },
+  };
+  vi.stubGlobal('navigator', {
+    serviceWorker: { ready: Promise.resolve(registration) },
+    userAgent: 'Unit Test Browser',
+  });
+  Object.defineProperty(window, 'PushManager', { value: class PushManager {}, configurable: true });
+  return registration;
+}
+
+describe('BrowserPushStep', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    notificationsApi.patchNotificationPreferences.mockResolvedValue({});
+    notificationsApi.getVapidPublicKey.mockResolvedValue('AQID');
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.unstubAllGlobals();
+  });
+
+  it.each([
+    [false, true],
+    [true, false],
+  ])('saves the selected email notification preference', async (emailOptedIn, expectedEmailOptIn) => {
+    renderStep({ emailOptedIn, pushState: { supported: false, subscribed: false } });
+
+    fireEvent.click(screen.getByRole('switch', { name: /Onboarding.EMAIL_NOTIFICATIONS_LABEL/ }));
+
+    await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ email_opt_in: expectedEmailOptIn }));
+  });
+
+  it('reverts the email toggle when saving the preference fails', async () => {
+    notificationsApi.patchNotificationPreferences.mockRejectedValue(new Error('unavailable'));
+    renderStep({ emailOptedIn: false, pushState: { supported: false, subscribed: false } });
+
+    const toggle = screen.getByRole('switch', { name: /Onboarding.EMAIL_NOTIFICATIONS_LABEL/ });
+    fireEvent.click(toggle);
+
+    await waitFor(() => expect(toggle.checked).toBe(false));
+    expect(screen.getByRole('alert').textContent).toBe('NotificationSettings.SAVE_ERROR');
+  });
+
+  it('subscribes to push and opts in after saving the subscription', async () => {
+    const registration = installPushEnvironment();
+    const subscription = {
+      toJSON: vi.fn(() => ({ endpoint: 'https://fcm.googleapis.com/fcm/send/example' })),
+    };
+    const onComplete = vi.fn();
+    registration.pushManager.subscribe.mockResolvedValue(subscription);
+    vi.stubGlobal('Notification', { requestPermission: vi.fn().mockResolvedValue('granted') });
+
+    renderStep({ emailOptedIn: false, pushState: { supported: true, subscribed: false } }, { onComplete });
+    fireEvent.click(screen.getByRole('button', { name: 'NotificationSettings.PUSH_ENABLE' }));
+
+    await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ push_opt_in: true }));
+    expect(Notification.requestPermission).toHaveBeenCalledOnce();
+    expect(registration.pushManager.subscribe).toHaveBeenCalledWith({
+      userVisibleOnly: true,
+      applicationServerKey: new Uint8Array([1, 2, 3]),
+    });
+    expect(notificationsApi.savePushSubscription).toHaveBeenCalledWith(
+      { endpoint: 'https://fcm.googleapis.com/fcm/send/example' },
+      'Unit Test Browser',
+    );
+    expect(notificationsApi.savePushSubscription.mock.invocationCallOrder[0])
+      .toBeLessThan(notificationsApi.patchNotificationPreferences.mock.invocationCallOrder[0]);
+    expect(onComplete).toHaveBeenCalledOnce();
+  });
+
+  it('shows an enabled state instead of a redundant push enable action', () => {
+    renderStep({ emailOptedIn: false, pushState: { supported: true, subscribed: true } });
+
+    expect(screen.getByText('Onboarding.PUSH_ENABLED')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: 'NotificationSettings.PUSH_ENABLE' })).toBeNull();
+  });
+});

package/tests/NotificationSettings.test.jsx

@@ -49,7 +49,7 @@ describe('NotificationSettings push toggle', () => {
     vi.stubGlobal('Notification', { requestPermission: vi.fn().mockResolvedValue('granted') });
 
     render(<NotificationSettings />);
-    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_ENABLE' }));
+    fireEvent.click(await screen.findByRole('switch', { name: /PUSH_LABEL/ }));
 
     await waitFor(() => expect(notificationsApi.patchNotificationPreferences).toHaveBeenCalledWith({ push_opt_in: true }));
     expect(Notification.requestPermission).toHaveBeenCalledOnce();
@@ -73,7 +73,7 @@ describe('NotificationSettings push toggle', () => {
     installPushEnvironment(subscription);
 
     render(<NotificationSettings />);
-    fireEvent.click(await screen.findByRole('button', { name: 'NotificationSettings.PUSH_DISABLE' }));
+    fireEvent.click(await screen.findByRole('switch', { name: /PUSH_LABEL/ }));
 
     await waitFor(() => expect(subscription.unsubscribe).toHaveBeenCalledOnce());
     expect(notificationsApi.removePushSubscription).toHaveBeenCalledWith({ endpoint: subscription.endpoint });

package/tests/OnboardingProvider.test.jsx

@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+
+const onboardingApi = vi.hoisted(() => ({
+  getOnboardingStepConfig: vi.fn(),
+}));
+const notificationsApi = vi.hoisted(() => ({
+  getNotificationPreferences: vi.fn(),
+}));
+
+vi.mock('../src/onboarding/api', () => onboardingApi);
+vi.mock('../src/notifications/api', () => notificationsApi);
+
+import { AuthContext } from '../src/auth/AuthContext';
+import { OnboardingProvider, useOnboarding } from '../src/onboarding/OnboardingProvider';
+
+function Probe() {
+  const onboarding = useOnboarding();
+  return <span data-testid="email-opted-in">{String(onboarding?.ctx.emailOptedIn)}</span>;
+}
+
+function renderProvider() {
+  return render(
+    <AuthContext.Provider value={{ user: { id: 1 } }}>
+      <OnboardingProvider><Probe /></OnboardingProvider>
+    </AuthContext.Provider>,
+  );
+}
+
+describe('OnboardingProvider notification preferences', () => {
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+    onboardingApi.getOnboardingStepConfig.mockResolvedValue([]);
+  });
+
+  it('populates emailOptedIn from notification preferences', async () => {
+    notificationsApi.getNotificationPreferences.mockResolvedValue({ email_opt_in: true });
+
+    renderProvider();
+
+    await waitFor(() => expect(screen.getByTestId('email-opted-in').textContent).toBe('true'));
+    expect(notificationsApi.getNotificationPreferences).toHaveBeenCalledOnce();
+  });
+
+  it('defaults emailOptedIn to false when notification preferences cannot be loaded', async () => {
+    notificationsApi.getNotificationPreferences.mockRejectedValue(new Error('unavailable'));
+
+    renderProvider();
+
+    await waitFor(() => expect(notificationsApi.getNotificationPreferences).toHaveBeenCalledOnce());
+    expect(screen.getByTestId('email-opted-in').textContent).toBe('false');
+  });
+});

package/tests/onboardingDescriptors.test.js

@@ -1,7 +1,9 @@
 import { describe, expect, it } from 'vitest';
 import { UNIVERSAL_STEP_DESCRIPTORS } from '../src/onboarding/OnboardingProvider';
+import { selectActiveSteps } from '../src/onboarding/stepSelection';
 
 const cookieConsentDescriptor = UNIVERSAL_STEP_DESCRIPTORS.find((step) => step.id === 'cookie_consent');
+const browserPushDescriptor = UNIVERSAL_STEP_DESCRIPTORS.find((step) => step.id === 'browser_push');
 
 describe('cookie_consent descriptor condition', () => {
   it('is active when the user has not accepted the privacy statement, regardless of cookies', () => {
@@ -23,3 +25,45 @@ describe('cookie_consent descriptor condition', () => {
     expect(cookieConsentDescriptor.condition({ user: null })).toBe(false);
   });
 });
+
+describe('browser_push descriptor condition', () => {
+  it('is active when push is supported and either channel remains unconfigured', () => {
+    expect(browserPushDescriptor.condition({
+      pushState: { supported: true, subscribed: false },
+      emailOptedIn: true,
+    })).toBe(true);
+    expect(browserPushDescriptor.condition({
+      pushState: { supported: true, subscribed: true },
+      emailOptedIn: false,
+    })).toBe(true);
+  });
+
+  it('is active when push is unsupported and email notifications are not enabled', () => {
+    expect(browserPushDescriptor.condition({
+      pushState: { supported: false, subscribed: false },
+      emailOptedIn: false,
+    })).toBe(true);
+  });
+
+  it('is inactive when push is unsupported with email notifications enabled or both channels are enabled', () => {
+    expect(browserPushDescriptor.condition({
+      pushState: { supported: false, subscribed: false },
+      emailOptedIn: true,
+    })).toBe(false);
+    expect(browserPushDescriptor.condition({
+      pushState: { supported: true, subscribed: true },
+      emailOptedIn: true,
+    })).toBe(false);
+  });
+
+  it('is excluded after persistent dismissal', () => {
+    const activeSteps = selectActiveSteps(
+      [browserPushDescriptor],
+      { browser_push: true },
+      { pushState: { supported: true, subscribed: false }, emailOptedIn: false },
+      new Set(['browser_push']),
+    );
+
+    expect(activeSteps).toEqual([]);
+  });
+});