@micha.bigler/ui-core-micha 3.14.4 → 4.0.0

package/src/onboarding/api.js

@@ -1,13 +0,0 @@
-import apiClient from '../auth/apiClient';
-
-const STEP_CONFIG_URL = '/api/onboarding/step-config/';
-
-export async function getOnboardingStepConfig() {
-  const response = await apiClient.get(STEP_CONFIG_URL);
-  return response.data;
-}
-
-export async function patchOnboardingStepConfig(payload) {
-  const response = await apiClient.patch(STEP_CONFIG_URL, payload);
-  return response.data;
-}

package/src/onboarding/stepSelection.js

@@ -1,16 +0,0 @@
-/**
- * Pure onboarding step selection.
- *
- * @param {Array} descriptors Step descriptors in display order.
- * @param {Object} configMap Enabled state keyed by dcm onboarding step key.
- * @param {Object} ctx Runtime context supplied to each step condition.
- * @param {Set} dismissedSet Persistently dismissed step ids.
- * @returns {Array} Steps that should be shown.
- */
-export function selectActiveSteps(descriptors, configMap, ctx, dismissedSet = new Set()) {
-  return descriptors.filter((step) => {
-    if (configMap[step.id] === false) return false;
-    if (step.persistDismissed && dismissedSet.has(step.id)) return false;
-    return step.condition(ctx);
-  });
-}

package/src/onboarding/steps/BrowserPushStep.jsx

@@ -1,121 +0,0 @@
-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 const BROWSER_PUSH_FORM_CONTROL_LABEL_SX = { alignItems: 'flex-start', ml: 0 };
-
-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'));
-        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);
-      await patchNotificationPreferences({ push_opt_in: true });
-      setPushSubscribed(true);
-      onComplete();
-    } catch (requestError) {
-      if (requestError?.response?.status === 409) {
-        setError(t('NotificationSettings.PUSH_CONFLICT'));
-      } else {
-        setError(t('NotificationSettings.PUSH_ERROR'));
-      }
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  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.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={BROWSER_PUSH_FORM_CONTROL_LABEL_SX}
-      />
-      {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 || savingEmail}>{t('Onboarding.SKIP')}</Button>
-        <Button variant="contained" onClick={onComplete} disabled={loading || savingEmail}>{t('Onboarding.CONTINUE')}</Button>
-      </Box>
-    </Box>
-  );
-}
-
-export default BrowserPushStep;

package/src/onboarding/steps/CompleteNameStep.jsx

@@ -1,46 +0,0 @@
-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 {
-      setError(t('Onboarding.COMPLETE_NAME_ERROR'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Box component="form" onSubmit={submit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><PersonIcon color="primary" /><Typography variant="h6">{t('Onboarding.COMPLETE_NAME_TITLE')}</Typography></Box>
-      <Typography variant="body2" color="text.secondary">{t('Onboarding.COMPLETE_NAME_BODY')}</Typography>
-      {error && <Alert severity="error" onClose={() => setError('')}>{error}</Alert>}
-      <TextField label={t('Onboarding.FIRST_NAME_LABEL')} value={firstName} onChange={(event) => setFirstName(event.target.value)} required fullWidth size="small" />
-      <TextField label={t('Onboarding.LAST_NAME_LABEL')} value={lastName} onChange={(event) => setLastName(event.target.value)} required fullWidth size="small" />
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}><Button variant="contained" type="submit" disabled={loading || !firstName.trim() || !lastName.trim()} startIcon={loading ? <CircularProgress size={16} /> : undefined}>{t('Onboarding.SAVE')}</Button></Box>
-    </Box>
-  );
-}
-
-export default CompleteNameStep;

package/src/onboarding/steps/CookieConsentStep.jsx

@@ -1,133 +0,0 @@
-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 {
-        // 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 {
-        // 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 {
-      setError(t('Onboarding.PRIVACY_COOKIES_ERROR'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <Box component="form" onSubmit={submit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <PrivacyTipIcon color="primary" />
-        <Typography variant="h6">{t('Onboarding.PRIVACY_COOKIES_TITLE')}</Typography>
-      </Box>
-      <Typography variant="body2" color="text.secondary">{t('Onboarding.PRIVACY_COOKIES_BODY')}</Typography>
-      {error && <Alert severity="error" onClose={() => setError('')}>{error}</Alert>}
-
-      <Box>
-        <FormControlLabel
-          control={(
-            <Checkbox
-              checked={privacyAccepted}
-              onChange={(event) => setPrivacyAccepted(event.target.checked)}
-              required
-            />
-          )}
-          label={t('Onboarding.PRIVACY_AGREEMENT_LABEL')}
-        />
-        <Box>
-          <Link component="button" type="button" variant="body2" onClick={togglePrivacyText}>
-            {t('Onboarding.VIEW_STATEMENT')}
-          </Link>
-          {showPrivacyText && privacyText && (
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 1, whiteSpace: 'pre-wrap' }}>
-              {privacyText}
-            </Typography>
-          )}
-        </Box>
-      </Box>
-
-      <Box>
-        <FormControlLabel
-          control={(
-            <Checkbox
-              checked={cookiesAccepted}
-              onChange={(event) => setCookiesAccepted(event.target.checked)}
-            />
-          )}
-          label={t('Onboarding.COOKIES_OPT_IN_LABEL')}
-        />
-        <Box>
-          <Link component="button" type="button" variant="body2" onClick={toggleCookieText}>
-            {t('Onboarding.VIEW_STATEMENT')}
-          </Link>
-          {showCookieText && cookieText && (
-            <Typography variant="body2" color="text.secondary" sx={{ mt: 1, whiteSpace: 'pre-wrap' }}>
-              {cookieText}
-            </Typography>
-          )}
-        </Box>
-      </Box>
-
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button
-          variant="contained"
-          type="submit"
-          disabled={loading || !privacyAccepted}
-          startIcon={loading ? <CircularProgress size={16} /> : undefined}
-        >
-          {t('Onboarding.CONTINUE')}
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
-export default CookieConsentStep;

package/src/onboarding/steps/PwaInstallStep.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import InstallMobileIcon from '@mui/icons-material/InstallMobile';
-
-export function PwaInstallStep({ onComplete, onDismiss, ctx }) {
-  const { t } = useTranslation();
-  const isIos = Boolean(ctx?.pwaInstall?.isIos);
-  const deferredPrompt = ctx?.pwaInstall?.deferredPrompt;
-
-  const handleInstall = async () => {
-    if (!deferredPrompt) {
-      onComplete();
-      return;
-    }
-    deferredPrompt.prompt();
-    try {
-      await deferredPrompt.userChoice;
-    } finally {
-      onComplete();
-    }
-  };
-
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <InstallMobileIcon color="primary" />
-        <Typography variant="h6">{t('Onboarding.PWA_INSTALL_TITLE')}</Typography>
-      </Box>
-      <Typography variant="body2" color="text.secondary">
-        {t(isIos ? 'Onboarding.PWA_INSTALL_IOS_BODY' : 'Onboarding.PWA_INSTALL_BODY')}
-      </Typography>
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-        <Button variant="text" onClick={onDismiss}>{t('Onboarding.SKIP')}</Button>
-        {isIos ? (
-          <Button variant="contained" onClick={onComplete}>{t('Onboarding.CONTINUE')}</Button>
-        ) : (
-          <Button variant="contained" onClick={handleInstall}>{t('Onboarding.PWA_INSTALL_ACTION')}</Button>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-export default PwaInstallStep;