@micha.bigler/ui-core-micha 2.4.5 → 2.6.1

package/.github/workflows/publish.yml

@@ -105,6 +105,10 @@ jobs:
         if: steps.version_check.outputs.should_publish == 'true'
         run: pnpm install --frozen-lockfile
 
+      - name: Run tests
+        if: steps.version_check.outputs.should_publish == 'true'
+        run: pnpm run test
+
       - name: Build
         if: steps.version_check.outputs.should_publish == 'true'
         run: pnpm run build

package/dist/components/UserListComponent.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useState, useEffect, useCallback } from 'react';
-import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TextField, } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
+import { Box, Typography, FormControl, Select, MenuItem, Button, Tooltip, CircularProgress, Alert, TextField, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, TablePagination, } from '@mui/material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -15,6 +14,10 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     const [error, setError] = useState(null);
     const [rowActionLoading, setRowActionLoading] = useState({});
     const [searchQuery, setSearchQuery] = useState('');
+    const [sortField, setSortField] = useState('email');
+    const [sortDir, setSortDir] = useState('asc');
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(25);
     const controlSx = { minWidth: 140 };
     const actionButtonSx = { textTransform: 'none', minWidth: 90 };
     const loadUsers = useCallback(async () => {
@@ -42,6 +45,9 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
     useEffect(() => {
         loadUsers();
     }, [loadUsers, refreshTrigger]);
+    useEffect(() => {
+        setPage(0);
+    }, [searchQuery]);
     const handleDelete = async (userId) => {
         if (!window.confirm(t('UserList.DELETE_CONFIRM', 'Are you sure you want to delete this user?')))
             return;
@@ -211,16 +217,23 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'email',
                 headerName: t('Auth.EMAIL_LABEL', 'Email'),
                 minWidth: 220,
-                maxWidth: 340,
                 flex: 1,
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.email) !== null && _a !== void 0 ? _a : ''; },
+                renderCell: (row) => row.email,
             },
             {
                 field: 'name',
                 headerName: t('Profile.NAME_LABEL', 'Name'),
                 minWidth: 180,
-                maxWidth: 260,
                 flex: 0.9,
-                valueGetter: (_value, row) => getUserDisplayName(row),
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => getUserDisplayName(row),
+                renderCell: (row) => getUserDisplayName(row),
             },
         ];
         if (showNewColumn) {
@@ -228,14 +241,14 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'is_new',
                 headerName: t('UserList.NEW', 'New'),
                 minWidth: 90,
-                maxWidth: 110,
                 flex: 0.35,
+                sortable: true,
                 align: 'center',
                 headerAlign: 'center',
-                valueGetter: (_value, row) => { var _a; return Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)); },
-                renderCell: (params) => {
-                    var _a, _b, _c;
-                    return renderBooleanStatusIcon(Boolean(((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.profile) === null || _b === void 0 ? void 0 : _b.is_new) || ((_c = params.row) === null || _c === void 0 ? void 0 : _c.is_new)), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
+                valueGetter: (row) => { var _a; return Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)); },
+                renderCell: (row) => {
+                    var _a;
+                    return renderBooleanStatusIcon(Boolean(((_a = row === null || row === void 0 ? void 0 : row.profile) === null || _a === void 0 ? void 0 : _a.is_new) || (row === null || row === void 0 ? void 0 : row.is_new)), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
                 },
             });
         }
@@ -244,14 +257,14 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'successful_login',
                 headerName: t('UserList.SUCCESSFUL_LOGIN', 'Successful Login'),
                 minWidth: 120,
-                maxWidth: 150,
                 flex: 0.4,
+                sortable: true,
                 align: 'center',
                 headerAlign: 'center',
-                valueGetter: (_value, row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
-                renderCell: (params) => {
-                    var _a, _b, _c;
-                    return renderBooleanStatusIcon(Boolean((_b = (_a = params.row) === null || _a === void 0 ? void 0 : _a.successful_login) !== null && _b !== void 0 ? _b : (_c = params.row) === null || _c === void 0 ? void 0 : _c.last_login), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
+                valueGetter: (row) => { var _a; return Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login); },
+                renderCell: (row) => {
+                    var _a;
+                    return renderBooleanStatusIcon(Boolean((_a = row === null || row === void 0 ? void 0 : row.successful_login) !== null && _a !== void 0 ? _a : row === null || row === void 0 ? void 0 : row.last_login), t('Common.YES', 'Yes'), t('Common.NO', 'No'));
                 },
             });
         }
@@ -260,28 +273,26 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
                 field: 'role',
                 headerName: t('UserList.ROLE', 'Role'),
                 minWidth: 180,
-                maxWidth: 240,
                 flex: 0.7,
-                valueGetter: (_value, row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
-                renderCell: (params) => {
-                    const user = params.row;
-                    return (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(user), children: _jsx(Select, { value: user.role || 'none', onChange: (event) => handleChangeRole(user.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) }));
-                },
+                sortable: true,
+                align: 'left',
+                headerAlign: 'left',
+                valueGetter: (row) => (row === null || row === void 0 ? void 0 : row.role) || 'none',
+                renderCell: (row) => (_jsx(FormControl, { size: "small", fullWidth: true, sx: controlSx, disabled: !canEdit(row), children: _jsx(Select, { value: row.role || 'none', onChange: (event) => handleChangeRole(row.id, event.target.value), variant: "outlined", children: roles.map((role) => _jsx(MenuItem, { value: role, children: role }, role)) }) })),
             });
         }
         const mappedExtraColumns = visibleExtraColumns.map((column) => ({
             field: `extra:${column.key}`,
             headerName: typeof column.label === 'function' ? column.label(listContext) : column.label,
             minWidth: Number(column.minWidth) || 180,
-            maxWidth: Number(column.maxWidth) || 320,
             flex: Number(column.flex) || 0.9,
             sortable: column.sortable !== false,
             align: column.align || 'left',
             headerAlign: column.align || 'left',
-            valueGetter: (_value, row) => getExtraColumnSortValue(column, row),
-            renderCell: (params) => column.renderCell({
-                user: params.row,
-                canEdit: canEdit(params.row),
+            valueGetter: (row) => getExtraColumnSortValue(column, row),
+            renderCell: (row) => column.renderCell({
+                user: row,
+                canEdit: canEdit(row),
                 currentUser,
                 extraContext,
                 t,
@@ -296,30 +307,27 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
             field: 'actions',
             headerName: t('Common.ACTIONS', 'Actions'),
             minWidth: Math.max(220, 110 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 110),
-            maxWidth: Math.max(360, 120 + (visibleRowActions.length + (showDeleteAction ? 1 : 0)) * 120),
             flex: 1.1,
             sortable: false,
-            filterable: false,
-            disableColumnMenu: true,
-            renderCell: (params) => {
-                const user = params.row;
-                return (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }, children: [visibleRowActions.map((action) => {
-                            const actionId = `${action.key}:${user.id}`;
-                            const isBusy = Boolean(rowActionLoading[actionId]);
-                            const isDisabled = typeof action.disabled === 'function'
-                                ? action.disabled({
-                                    user,
-                                    canEdit: canEdit(user),
-                                    currentUser,
-                                    extraContext,
-                                    t,
-                                })
-                                : false;
-                            return (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, user), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
-                                    ? action.label({ user, t, currentUser, canEdit: canEdit(user) })
-                                    : action.label }, `${action.key}-${user.id}`));
-                        }), showDeleteAction && (_jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(user.id), disabled: !canDelete(user), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) }))] }));
-            },
+            align: 'left',
+            headerAlign: 'left',
+            valueGetter: null,
+            renderCell: (row) => (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', py: 0.5 }, children: [visibleRowActions.map((action) => {
+                        const actionId = `${action.key}:${row.id}`;
+                        const isBusy = Boolean(rowActionLoading[actionId]);
+                        const isDisabled = typeof action.disabled === 'function'
+                            ? action.disabled({
+                                user: row,
+                                canEdit: canEdit(row),
+                                currentUser,
+                                extraContext,
+                                t,
+                            })
+                            : false;
+                        return (_jsx(Button, { size: "small", variant: "outlined", onClick: () => runRowAction(action, row), disabled: isBusy || isDisabled, sx: actionButtonSx, children: typeof action.label === 'function'
+                                ? action.label({ user: row, t, currentUser, canEdit: canEdit(row) })
+                                : action.label }, `${action.key}-${row.id}`));
+                    }), showDeleteAction && (_jsx(Tooltip, { title: t('Common.DELETE', 'Delete'), children: _jsx("span", { children: _jsx(Button, { size: "small", variant: "outlined", color: "error", startIcon: _jsx(DeleteIcon, {}), onClick: () => handleDelete(row.id), disabled: !canDelete(row), sx: actionButtonSx, children: t('Common.DELETE', 'Delete') }) }) }))] })),
         };
         return [...baseColumns, ...mappedExtraColumns, actionColumn];
     }, [
@@ -339,27 +347,29 @@ export function UserListComponent({ roles = DEFAULT_ROLES, currentUser, extraCol
         canEdit,
         canDelete,
     ]);
-    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })), !loading && (_jsx(Box, { sx: { width: '100%', minHeight: 520 }, children: _jsx(DataGrid, { rows: filteredUsers, columns: columns, disableRowSelectionOnClick: true, showToolbar: true, getRowHeight: () => 'auto', pageSizeOptions: [10, 25, 50, 100], initialState: {
-                        sorting: { sortModel: [{ field: 'email', sort: 'asc' }] },
-                        pagination: { paginationModel: { pageSize: 25, page: 0 } },
-                    }, localeText: {
-                        noRowsLabel: t('UserList.NO_USERS', 'No users found.'),
-                        toolbarQuickFilterPlaceholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'),
-                    }, slotProps: {
-                        toolbar: {
-                            showQuickFilter: true,
-                            quickFilterProps: { debounceMs: 300 },
-                        },
-                    }, sx: {
-                        border: 1,
-                        borderColor: 'divider',
-                        '& .MuiDataGrid-cell': {
-                            display: 'flex',
-                            alignItems: 'flex-start',
-                            py: 1,
-                        },
-                        '& .MuiDataGrid-columnHeaders': {
-                            bgcolor: 'action.hover',
-                        },
-                    } }) }))] }));
+    const sortedUsers = useMemo(() => {
+        const col = columns.find((c) => c.field === sortField);
+        return [...filteredUsers].sort((a, b) => {
+            var _a, _b;
+            const aVal = (col === null || col === void 0 ? void 0 : col.valueGetter) ? col.valueGetter(a) : ((_a = a[sortField]) !== null && _a !== void 0 ? _a : '');
+            const bVal = (col === null || col === void 0 ? void 0 : col.valueGetter) ? col.valueGetter(b) : ((_b = b[sortField]) !== null && _b !== void 0 ? _b : '');
+            const cmp = String(aVal !== null && aVal !== void 0 ? aVal : '').localeCompare(String(bVal !== null && bVal !== void 0 ? bVal : ''), undefined, { numeric: true, sensitivity: 'base' });
+            return sortDir === 'asc' ? cmp : -cmp;
+        });
+    }, [filteredUsers, sortField, sortDir, columns]);
+    const pagedUsers = useMemo(() => sortedUsers.slice(page * pageSize, page * pageSize + pageSize), [sortedUsers, page, pageSize]);
+    const handleSortClick = (field) => {
+        if (sortField === field) {
+            setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+        }
+        else {
+            setSortField(field);
+            setSortDir('asc');
+        }
+        setPage(0);
+    };
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: t('UserList.TITLE', 'All Users') }), _jsx(Box, { sx: { mb: 2, maxWidth: 420 }, children: _jsx(TextField, { fullWidth: true, size: "small", label: t('Common.SEARCH', 'Search'), placeholder: t('UserList.SEARCH_PLACEHOLDER', 'Search users...'), value: searchQuery, onChange: (event) => setSearchQuery(event.target.value) }) }), error && _jsx(Alert, { severity: "error", sx: { mb: 2 }, children: t(error) }), loading && (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(CircularProgress, {}) })), !loading && (_jsxs(Box, { sx: { width: '100%' }, children: [_jsx(TableContainer, { sx: { border: 1, borderColor: 'divider', borderRadius: 1 }, children: _jsxs(Table, { size: "small", children: [_jsx(TableHead, { sx: { bgcolor: 'action.hover' }, children: _jsx(TableRow, { children: columns.map((col) => (_jsx(TableCell, { align: col.headerAlign || col.align || 'left', sortDirection: sortField === col.field ? sortDir : false, sx: { minWidth: col.minWidth, fontWeight: 600, whiteSpace: 'nowrap' }, children: col.sortable !== false ? (_jsx(TableSortLabel, { active: sortField === col.field, direction: sortField === col.field ? sortDir : 'asc', onClick: () => handleSortClick(col.field), children: col.headerName })) : (col.headerName) }, col.field))) }) }), _jsx(TableBody, { children: pagedUsers.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, align: "center", sx: { py: 4, color: 'text.secondary' }, children: t('UserList.NO_USERS', 'No users found.') }) })) : (pagedUsers.map((row) => (_jsx(TableRow, { hover: true, children: columns.map((col) => (_jsx(TableCell, { align: col.align || 'left', sx: { verticalAlign: 'top', py: 1 }, children: col.renderCell(row) }, col.field))) }, row.id)))) })] }) }), _jsx(TablePagination, { component: "div", count: sortedUsers.length, page: page, onPageChange: (_, newPage) => setPage(newPage), rowsPerPage: pageSize, onRowsPerPageChange: (event) => {
+                            setPageSize(Number(event.target.value));
+                            setPage(0);
+                        }, rowsPerPageOptions: [10, 25, 50, 100] })] }))] }));
 }

package/dist/i18n/notificationsTranslations.js

@@ -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/dist/i18n/onboardingTranslations.js

@@ -0,0 +1,17 @@
+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.COOKIE_CONSENT_TITLE': { de: 'Cookie-Einstellungen', fr: 'Préférences des cookies', en: 'Cookie preferences', sw: 'Mapendeleo ya vidakuzi' },
+    'Onboarding.COOKIE_CONSENT_BODY': { de: 'Diese App verwendet optionale Cookies, um deine Einstellungen und Präferenzen zu speichern. Möchtest du diese aktivieren?', fr: 'Cette application utilise des cookies facultatifs pour enregistrer vos réglages et préférences. Souhaitez-vous les activer ?', en: 'This app uses optional cookies to save your settings and preferences. Would you like to enable them?', sw: 'Programu hii hutumia vidakuzi vya hiari kuhifadhi mipangilio na mapendeleo yako. Je, ungependa kuviwasha?' },
+    'Onboarding.COOKIE_CONSENT_ACCEPT': { de: 'Akzeptieren', fr: 'Accepter', en: 'Accept', sw: 'Kubali' },
+    'Onboarding.COOKIE_CONSENT_ERROR': { de: 'Die Cookie-Einstellung konnte nicht gespeichert werden. Bitte versuche es erneut.', fr: 'Impossible d’enregistrer votre préférence de cookies. Veuillez réessayer.', en: 'Your cookie preference could not be saved. Please try again.', sw: 'Upendeleo wako wa vidakuzi haukuweza 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/dist/index.js

@@ -29,3 +29,17 @@ export { AccessCodeSingleUseToggle } from './components/AccessCodeSingleUseToggl
 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/dist/notifications/NotificationSettings.js

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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() {
+    var _a;
+    if (typeof navigator === 'undefined' || typeof window === 'undefined')
+        return false;
+    const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent || '');
+    const standalone = ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(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 (_a) {
+            setError(t('NotificationSettings.SAVE_ERROR'));
+        }
+        finally {
+            setSavingEmail(false);
+        }
+    };
+    const handleEnablePush = async () => {
+        var _a;
+        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 (((_a = requestError === null || requestError === void 0 ? void 0 : requestError.response) === null || _a === void 0 ? void 0 : _a.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 (_a) {
+            setError(t('NotificationSettings.PUSH_ERROR'));
+        }
+        finally {
+            setSavingPush(false);
+        }
+    };
+    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') })))] })] }));
+}
+export default NotificationSettings;

package/dist/notifications/api.js

@@ -0,0 +1,41 @@
+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() {
+    var _a;
+    const response = await apiClient.get(`${PREFERENCES_URL}vapid-public-key/`);
+    return (_a = response.data) === null || _a === void 0 ? void 0 : _a.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/dist/notifications/serviceWorker/sw.js

@@ -0,0 +1,49 @@
+"use strict";
+/*
+ * 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 (_a) {
+        return '/';
+    }
+};
+self.addEventListener('push', (event) => {
+    if (!event.data)
+        return;
+    let payload;
+    try {
+        payload = event.data.json();
+    }
+    catch (_a) {
+        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) => {
+    var _a;
+    event.notification.close();
+    const url = resolveSameOriginUrl((_a = event.notification.data) === null || _a === void 0 ? void 0 : _a.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;
+    }));
+});