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

package/dist/onboarding/steps/CompleteNameStep.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { 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 TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import PersonIcon from '@mui/icons-material/Person';
+import { updateUserProfile } from '../../auth/authApi';
+export function CompleteNameStep({ onComplete }) {
+    const { t } = useTranslation();
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!firstName.trim() || !lastName.trim())
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            await updateUserProfile({ first_name: firstName.trim(), last_name: lastName.trim() });
+            onComplete();
+        }
+        catch (_a) {
+            setError(t('Onboarding.COMPLETE_NAME_ERROR'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: submit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PersonIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.COMPLETE_NAME_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.COMPLETE_NAME_BODY') }), error && _jsx(Alert, { severity: "error", onClose: () => setError(''), children: error }), _jsx(TextField, { label: t('Onboarding.FIRST_NAME_LABEL'), value: firstName, onChange: (event) => setFirstName(event.target.value), required: true, fullWidth: true, size: "small" }), _jsx(TextField, { label: t('Onboarding.LAST_NAME_LABEL'), value: lastName, onChange: (event) => setLastName(event.target.value), required: true, fullWidth: true, size: "small" }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "contained", type: "submit", disabled: loading || !firstName.trim() || !lastName.trim(), startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('Onboarding.SAVE') }) })] }));
+}
+export default CompleteNameStep;

package/dist/onboarding/steps/CookieConsentStep.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { 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 Checkbox from '@mui/material/Checkbox';
+import CircularProgress from '@mui/material/CircularProgress';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import PrivacyTipIcon from '@mui/icons-material/PrivacyTip';
+import { fetchCookieStatement, fetchPrivacyStatement, updateUserProfile } from '../../auth/authApi';
+export function CookieConsentStep({ onComplete }) {
+    const { t } = useTranslation();
+    const [privacyAccepted, setPrivacyAccepted] = useState(false);
+    const [cookiesAccepted, setCookiesAccepted] = useState(false);
+    const [privacyText, setPrivacyText] = useState('');
+    const [cookieText, setCookieText] = useState('');
+    const [showPrivacyText, setShowPrivacyText] = useState(false);
+    const [showCookieText, setShowCookieText] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const togglePrivacyText = async () => {
+        if (!showPrivacyText && !privacyText) {
+            try {
+                setPrivacyText(await fetchPrivacyStatement());
+            }
+            catch (_a) {
+                // Non-fatal: the link simply won't reveal inline text this time.
+            }
+        }
+        setShowPrivacyText((previous) => !previous);
+    };
+    const toggleCookieText = async () => {
+        if (!showCookieText && !cookieText) {
+            try {
+                setCookieText(await fetchCookieStatement());
+            }
+            catch (_a) {
+                // Non-fatal: the link simply won't reveal inline text this time.
+            }
+        }
+        setShowCookieText((previous) => !previous);
+    };
+    const submit = async (event) => {
+        event.preventDefault();
+        if (!privacyAccepted)
+            return;
+        setLoading(true);
+        setError('');
+        try {
+            await updateUserProfile({
+                accepted_privacy_statement: true,
+                accepted_convenience_cookies: cookiesAccepted,
+            });
+            onComplete();
+        }
+        catch (_a) {
+            setError(t('Onboarding.PRIVACY_COOKIES_ERROR'));
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsxs(Box, { component: "form", onSubmit: submit, sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(PrivacyTipIcon, { color: "primary" }), _jsx(Typography, { variant: "h6", children: t('Onboarding.PRIVACY_COOKIES_TITLE') })] }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('Onboarding.PRIVACY_COOKIES_BODY') }), error && _jsx(Alert, { severity: "error", onClose: () => setError(''), children: error }), _jsxs(Box, { children: [_jsx(FormControlLabel, { control: (_jsx(Checkbox, { checked: privacyAccepted, onChange: (event) => setPrivacyAccepted(event.target.checked), required: true })), label: t('Onboarding.PRIVACY_AGREEMENT_LABEL') }), _jsxs(Box, { children: [_jsx(Link, { component: "button", type: "button", variant: "body2", onClick: togglePrivacyText, children: t('Onboarding.VIEW_STATEMENT') }), showPrivacyText && privacyText && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1, whiteSpace: 'pre-wrap' }, children: privacyText }))] })] }), _jsxs(Box, { children: [_jsx(FormControlLabel, { control: (_jsx(Checkbox, { checked: cookiesAccepted, onChange: (event) => setCookiesAccepted(event.target.checked) })), label: t('Onboarding.COOKIES_OPT_IN_LABEL') }), _jsxs(Box, { children: [_jsx(Link, { component: "button", type: "button", variant: "body2", onClick: toggleCookieText, children: t('Onboarding.VIEW_STATEMENT') }), showCookieText && cookieText && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mt: 1, whiteSpace: 'pre-wrap' }, children: cookieText }))] })] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { variant: "contained", type: "submit", disabled: loading || !privacyAccepted, startIcon: loading ? _jsx(CircularProgress, { size: 16 }) : undefined, children: t('Onboarding.CONTINUE') }) })] }));
+}
+export default CookieConsentStep;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -22,12 +22,16 @@
     "react-router-dom": "^7.15.1"
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json"
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run"
   },
   "devDependencies": {
     "@mui/icons-material": "^7.3.11",
+    "@testing-library/react": "^16.3.2",
     "i18next": "^26.2.0",
+    "jsdom": "^29.1.1",
     "react-i18next": "^17.0.8",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   }
 }

package/src/auth/AuthContext.jsx

@@ -115,6 +115,11 @@ export const AuthProvider = ({ children }) => {
     }));
   };
 
+  const refreshUser = async () => {
+    const data = await fetchCurrentUser();
+    if (data) setUser(mapUserFromApi(data));
+  };
+
   const logout = async () => {
     try {
       await logoutSession();
@@ -134,6 +139,7 @@ export const AuthProvider = ({ children }) => {
         loading,
         login,
         logout,
+        refreshUser,
       }}
     >
       {children}

package/src/i18n/notificationsTranslations.ts

@@ -0,0 +1,17 @@
+export const notificationsTranslations = {
+  'NotificationSettings.TITLE': { de: 'Benachrichtigungen', fr: 'Notifications', en: 'Notifications', sw: 'Arifa' },
+  'NotificationSettings.SUBTITLE': { de: 'Lege fest, wie du informiert werden möchtest.', fr: 'Choisissez comment vous souhaitez être informé.', en: 'Choose how you want to be notified.', sw: 'Chagua jinsi unavyotaka kuarifiwa.' },
+  'NotificationSettings.LOAD_ERROR': { de: 'Benachrichtigungseinstellungen konnten nicht geladen werden.', fr: 'Impossible de charger les paramètres de notification.', en: 'Notification settings could not be loaded.', sw: 'Mipangilio ya arifa haikuweza kupakiwa.' },
+  'NotificationSettings.SAVE_ERROR': { de: 'Benachrichtigungseinstellungen konnten nicht gespeichert werden.', fr: 'Impossible d’enregistrer les paramètres de notification.', en: 'Notification settings could not be saved.', sw: 'Mipangilio ya arifa haikuweza kuhifadhiwa.' },
+  'NotificationSettings.EMAIL_LABEL': { de: 'E-Mail-Benachrichtigungen', fr: 'Notifications par e-mail', en: 'Email notifications', sw: 'Arifa za barua pepe' },
+  'NotificationSettings.EMAIL_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.' },
+  'NotificationSettings.PUSH_LABEL': { de: 'Push-Benachrichtigungen', fr: 'Notifications push', en: 'Push notifications', sw: 'Arifa za push' },
+  'NotificationSettings.PUSH_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.' },
+  'NotificationSettings.PUSH_ENABLE': { de: 'Push aktivieren', fr: 'Activer les notifications push', en: 'Enable push', sw: 'Washa push' },
+  'NotificationSettings.PUSH_DISABLE': { de: 'Push auf diesem Gerät deaktivieren', fr: 'Désactiver les notifications push sur cet appareil', en: 'Disable push on this device', sw: 'Zima push kwenye kifaa hiki' },
+  'NotificationSettings.PUSH_DENIED': { de: 'Die Browserberechtigung für Push-Benachrichtigungen wurde verweigert.', fr: 'L’autorisation du navigateur pour les notifications push a été refusée.', en: 'Browser permission for push notifications was denied.', sw: 'Ruhusa ya kivinjari kwa arifa za push imekataliwa.' },
+  'NotificationSettings.PUSH_ERROR': { de: 'Push-Benachrichtigungen konnten nicht aktualisiert werden.', fr: 'Impossible de mettre à jour les notifications push.', en: 'Push notifications could not be updated.', sw: 'Arifa za push hazikuweza kusasishwa.' },
+  'NotificationSettings.PUSH_CONFLICT': { de: 'Dieses Gerät ist bereits mit einem anderen Konto für Push-Benachrichtigungen verbunden.', fr: 'Cet appareil est déjà associé à un autre compte pour les notifications push.', en: 'This device is already associated with another account for push notifications.', sw: 'Kifaa hiki tayari kimeunganishwa na akaunti nyingine kwa arifa za push.' },
+  'NotificationSettings.PUSH_NOT_SUPPORTED': { de: 'Push-Benachrichtigungen werden von diesem Browser nicht unterstützt.', fr: 'Les notifications push ne sont pas prises en charge par ce navigateur.', en: 'Push notifications are not supported by this browser.', sw: 'Arifa za push hazitumiki na kivinjari hiki.' },
+  'NotificationSettings.IOS_HINT': { de: 'Füge diese App zuerst zum Home-Bildschirm hinzu, um Push-Benachrichtigungen zu aktivieren.', fr: 'Ajoutez d’abord cette application à l’écran d’accueil pour activer les notifications push.', en: 'Add this app to your home screen first to enable push notifications.', sw: 'Ongeza programu hii kwenye skrini yako ya mwanzo kwanza ili kuwasha arifa za push.' },
+};

package/src/i18n/onboardingTranslations.ts

@@ -0,0 +1,20 @@
+export const onboardingTranslations = {
+  'Onboarding.SETUP': { de: 'Einrichtung', fr: 'Configuration', en: 'Setup', sw: 'Usanidi' },
+  'Onboarding.STEP_COUNTER': { de: 'Schritt {{current}} von {{total}}', fr: 'Étape {{current}} sur {{total}}', en: 'Step {{current}} of {{total}}', sw: 'Hatua ya {{current}} kati ya {{total}}' },
+  'Onboarding.PRIVACY_COOKIES_TITLE': { de: 'Datenschutz & Cookies', fr: 'Confidentialité et cookies', en: 'Privacy & cookies', sw: 'Faragha na vidakuzi' },
+  'Onboarding.PRIVACY_COOKIES_BODY': { de: 'Bitte lies unsere Datenschutzerklärung und stimme ihr zu, um fortzufahren. Optionale Cookies helfen uns, deine Einstellungen und Präferenzen zu speichern.', fr: 'Veuillez lire et accepter notre politique de confidentialité pour continuer. Les cookies facultatifs nous aident à enregistrer vos réglages et préférences.', en: 'Please read and agree to our privacy statement to continue. Optional cookies help us save your settings and preferences.', sw: 'Tafadhali soma na ukubali taarifa yetu ya faragha ili kuendelea. Vidakuzi vya hiari hutusaidia kuhifadhi mipangilio na mapendeleo yako.' },
+  'Onboarding.PRIVACY_AGREEMENT_LABEL': { de: 'Ich habe die Datenschutzerklärung gelesen und stimme ihr zu.', fr: 'J’ai lu et j’accepte la politique de confidentialité.', en: 'I have read and agree to the privacy statement.', sw: 'Nimesoma na ninakubali taarifa ya faragha.' },
+  'Onboarding.COOKIES_OPT_IN_LABEL': { de: 'Optionale Cookies aktivieren, um meine Einstellungen und Präferenzen zu speichern.', fr: 'Activer les cookies facultatifs pour enregistrer mes réglages et préférences.', en: 'Enable optional cookies to save my settings and preferences.', sw: 'Washa vidakuzi vya hiari kuhifadhi mipangilio na mapendeleo yangu.' },
+  'Onboarding.VIEW_STATEMENT': { de: 'Text anzeigen', fr: 'Afficher le texte', en: 'View text', sw: 'Angalia maandishi' },
+  'Onboarding.CONTINUE': { de: 'Weiter', fr: 'Continuer', en: 'Continue', sw: 'Endelea' },
+  'Onboarding.PRIVACY_COOKIES_ERROR': { de: 'Deine Angaben konnten nicht gespeichert werden. Bitte versuche es erneut.', fr: 'Vos préférences n’ont pas pu être enregistrées. Veuillez réessayer.', en: 'Your preferences could not be saved. Please try again.', sw: 'Mapendeleo yako hayakuweza kuhifadhiwa. Tafadhali jaribu tena.' },
+  'Onboarding.COMPLETE_NAME_TITLE': { de: 'Dein Name', fr: 'Votre nom', en: 'Your name', sw: 'Jina lako' },
+  'Onboarding.COMPLETE_NAME_BODY': { de: 'Bitte gib deinen Vor- und Nachnamen an, damit andere dich erkennen.', fr: 'Veuillez indiquer votre prénom et votre nom afin que les autres puissent vous reconnaître.', en: 'Please provide your first and last name so others can recognise you.', sw: 'Tafadhali weka jina lako la kwanza na la mwisho ili wengine wakutambue.' },
+  'Onboarding.FIRST_NAME_LABEL': { de: 'Vorname', fr: 'Prénom', en: 'First name', sw: 'Jina la kwanza' },
+  '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.SKIP': { de: 'Überspringen', fr: 'Passer', en: 'Skip', sw: 'Ruka' },
+};

package/src/index.js

@@ -41,3 +41,25 @@ export { QrSignupManager } from './components/QrSignupManager';
 
 // --- 6. Translations ---
 export { authTranslations } from './i18n/authTranslations';
+
+// --- 7. Notifications ---
+export { NotificationSettings } from './notifications/NotificationSettings';
+export * from './notifications/api';
+
+// --- 8. Onboarding ---
+export * from './onboarding/api';
+export { selectActiveSteps } from './onboarding/stepSelection';
+export {
+  OnboardingContext,
+  OnboardingProvider,
+  UNIVERSAL_STEP_DESCRIPTORS,
+  useOnboarding,
+} from './onboarding/OnboardingProvider';
+export { OnboardingWizard } from './onboarding/OnboardingWizard';
+export { CookieConsentStep } from './onboarding/steps/CookieConsentStep';
+export { CompleteNameStep } from './onboarding/steps/CompleteNameStep';
+export { BrowserPushStep } from './onboarding/steps/BrowserPushStep';
+
+// --- 9. Translations ---
+export { notificationsTranslations } from './i18n/notificationsTranslations';
+export { onboardingTranslations } from './i18n/onboardingTranslations';

package/src/notifications/NotificationSettings.jsx

@@ -0,0 +1,189 @@
+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';
+import Switch from '@mui/material/Switch';
+import Typography from '@mui/material/Typography';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import {
+  getNotificationPreferences,
+  getVapidPublicKey,
+  patchNotificationPreferences,
+  removePushSubscription,
+  savePushSubscription,
+  urlBase64ToUint8Array,
+} from './api';
+
+function getPushSupport() {
+  return typeof navigator !== 'undefined'
+    && typeof window !== 'undefined'
+    && 'serviceWorker' in navigator
+    && 'PushManager' in window;
+}
+
+function getIosInstallState() {
+  if (typeof navigator === 'undefined' || typeof window === 'undefined') return false;
+  const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent || '');
+  const standalone = window.matchMedia?.('(display-mode: standalone)').matches
+    || window.navigator.standalone === true;
+  return isIos && !standalone;
+}
+
+export function NotificationSettings() {
+  const { t } = useTranslation();
+  const [preferences, setPreferences] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [savingEmail, setSavingEmail] = useState(false);
+  const [savingPush, setSavingPush] = useState(false);
+  const [pushSubscribed, setPushSubscribed] = useState(false);
+  const [error, setError] = useState('');
+  const [conflict, setConflict] = useState('');
+
+  const pushSupported = getPushSupport();
+  const iosNeedsInstall = getIosInstallState();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    getNotificationPreferences()
+      .then((data) => {
+        if (!cancelled) setPreferences(data);
+      })
+      .catch(() => {
+        if (!cancelled) setError(t('NotificationSettings.LOAD_ERROR'));
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [t]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!pushSupported) return undefined;
+
+    navigator.serviceWorker.ready
+      .then((registration) => registration.pushManager.getSubscription())
+      .then((subscription) => {
+        if (!cancelled) setPushSubscribed(Boolean(subscription));
+      })
+      .catch(() => {
+        if (!cancelled) setPushSubscribed(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [pushSupported]);
+
+  const handleEmailToggle = async (event) => {
+    const email_opt_in = event.target.checked;
+    setSavingEmail(true);
+    setError('');
+    try {
+      const updated = await patchNotificationPreferences({ email_opt_in });
+      setPreferences(updated);
+    } catch {
+      setError(t('NotificationSettings.SAVE_ERROR'));
+    } finally {
+      setSavingEmail(false);
+    }
+  };
+
+  const handleEnablePush = async () => {
+    setSavingPush(true);
+    setError('');
+    setConflict('');
+    try {
+      const permission = await Notification.requestPermission();
+      if (permission !== 'granted') {
+        setError(t('NotificationSettings.PUSH_DENIED'));
+        return;
+      }
+      const vapidPublicKey = await getVapidPublicKey();
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
+      });
+      await savePushSubscription(subscription.toJSON(), navigator.userAgent);
+      const updated = await patchNotificationPreferences({ push_opt_in: true });
+      setPreferences(updated);
+      setPushSubscribed(true);
+    } catch (requestError) {
+      if (requestError?.response?.status === 409) {
+        setConflict(t('NotificationSettings.PUSH_CONFLICT'));
+      } else {
+        setError(t('NotificationSettings.PUSH_ERROR'));
+      }
+    } finally {
+      setSavingPush(false);
+    }
+  };
+
+  const handleDisablePush = async () => {
+    setSavingPush(true);
+    setError('');
+    setConflict('');
+    try {
+      const registration = await navigator.serviceWorker.ready;
+      const subscription = await registration.pushManager.getSubscription();
+      if (subscription) {
+        const endpoint = subscription.endpoint;
+        await subscription.unsubscribe();
+        await removePushSubscription({ endpoint });
+      }
+      setPushSubscribed(false);
+    } catch {
+      setError(t('NotificationSettings.PUSH_ERROR'));
+    } finally {
+      setSavingPush(false);
+    }
+  };
+
+  if (loading) {
+    return <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}><CircularProgress /></Box>;
+  }
+
+  return (
+    <Box sx={{ maxWidth: 520 }}>
+      <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+        <NotificationsIcon />
+        {t('NotificationSettings.TITLE')}
+      </Typography>
+      <Typography variant="body2" color="text.secondary" gutterBottom>
+        {t('NotificationSettings.SUBTITLE')}
+      </Typography>
+      {error && <Alert severity="error" sx={{ mb: 2 }} onClose={() => setError('')}>{error}</Alert>}
+      {conflict && <Alert severity="warning" sx={{ mb: 2 }} onClose={() => setConflict('')}>{conflict}</Alert>}
+
+      <Box sx={{ py: 2 }}>
+        <FormControlLabel
+          control={<Switch checked={Boolean(preferences?.email_opt_in)} onChange={handleEmailToggle} disabled={savingEmail} />}
+          label={<Box><Typography variant="body1">{t('NotificationSettings.EMAIL_LABEL')}</Typography><Typography variant="caption" color="text.secondary">{t('NotificationSettings.EMAIL_HINT')}</Typography></Box>}
+          labelPlacement="end"
+          sx={{ alignItems: 'flex-start', ml: 0 }}
+        />
+      </Box>
+
+      <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>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export default NotificationSettings;

package/src/notifications/api.js

@@ -0,0 +1,49 @@
+import apiClient from '../auth/apiClient';
+
+const PREFERENCES_URL = '/api/notifications/preferences/';
+const PUSH_SUBSCRIPTION_URL = `${PREFERENCES_URL}push-subscription/`;
+
+export async function getNotificationPreferences() {
+  const response = await apiClient.get(PREFERENCES_URL);
+  return response.data;
+}
+
+export async function patchNotificationPreferences(patch) {
+  const response = await apiClient.patch(PREFERENCES_URL, patch);
+  return response.data;
+}
+
+export async function getVapidPublicKey() {
+  const response = await apiClient.get(`${PREFERENCES_URL}vapid-public-key/`);
+  return response.data?.vapidPublicKey;
+}
+
+export async function listPushSubscriptions() {
+  const response = await apiClient.get(PUSH_SUBSCRIPTION_URL);
+  return response.data;
+}
+
+export async function savePushSubscription(subscription, ua) {
+  const response = await apiClient.post(PUSH_SUBSCRIPTION_URL, { subscription, ua });
+  return response.data;
+}
+
+export async function removePushSubscription(subscriptionIdentifier) {
+  const response = await apiClient.delete(PUSH_SUBSCRIPTION_URL, { data: subscriptionIdentifier });
+  return response.data;
+}
+
+export function urlBase64ToUint8Array(base64String) {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+  const decoder = typeof window !== 'undefined' && typeof window.atob === 'function'
+    ? window.atob
+    : typeof atob === 'function'
+      ? atob
+      : null;
+
+  if (!decoder) throw new Error('Base64 decoding is unavailable in this environment.');
+
+  const raw = decoder(base64);
+  return Uint8Array.from([...raw].map((character) => character.charCodeAt(0)));
+}

package/src/notifications/serviceWorker/sw.js

@@ -0,0 +1,50 @@
+/*
+ * Canonical service-worker source. Copy this file verbatim to each consuming
+ * application's public/sw.js so it is served from that application's origin root.
+ */
+const resolveSameOriginUrl = (url) => {
+  try {
+    const resolvedUrl = new URL(url || '/', self.location.origin);
+    if (resolvedUrl.origin !== self.location.origin) return '/';
+
+    return `${resolvedUrl.pathname}${resolvedUrl.search}${resolvedUrl.hash}`;
+  } catch {
+    return '/';
+  }
+};
+
+self.addEventListener('push', (event) => {
+  if (!event.data) return;
+
+  let payload;
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = { body: event.data.text() };
+  }
+
+  const options = {
+    body: payload.body || '',
+    data: { url: resolveSameOriginUrl(payload.url) },
+  };
+  if (payload.icon) options.icon = payload.icon;
+  if (payload.badge) options.badge = payload.badge;
+
+  event.waitUntil(self.registration.showNotification(payload.title || 'Notification', options));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+  const url = resolveSameOriginUrl(event.notification.data?.url);
+
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clientList) => {
+      for (const client of clientList) {
+        if (client.url.includes(self.location.origin) && 'focus' in client) {
+          return Promise.resolve(client.navigate(url)).then(() => client.focus());
+        }
+      }
+      return clients.openWindow ? clients.openWindow(url) : undefined;
+    }),
+  );
+});