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

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;
+    }),
+  );
+});

package/src/onboarding/OnboardingProvider.jsx

@@ -0,0 +1,153 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { AuthContext } from '../auth/AuthContext';
+import { getOnboardingStepConfig } from './api';
+import { selectActiveSteps } from './stepSelection';
+import CookieConsentStep from './steps/CookieConsentStep';
+import CompleteNameStep from './steps/CompleteNameStep';
+import BrowserPushStep from './steps/BrowserPushStep';
+
+export const UNIVERSAL_STEP_DESCRIPTORS = [
+  {
+    id: 'cookie_consent',
+    condition: (ctx) => Boolean(ctx.user && !ctx.user.accepted_convenience_cookies),
+    blocking: true,
+    skipable: false,
+    persistDismissed: false,
+    titleKey: 'Onboarding.COOKIE_CONSENT_TITLE',
+    Component: CookieConsentStep,
+  },
+  {
+    id: 'complete_name',
+    condition: (ctx) => Boolean(ctx.user && (!ctx.user.first_name?.trim() || !ctx.user.last_name?.trim())),
+    blocking: true,
+    skipable: false,
+    persistDismissed: false,
+    titleKey: 'Onboarding.COMPLETE_NAME_TITLE',
+    Component: CompleteNameStep,
+  },
+  {
+    id: 'browser_push',
+    condition: (ctx) => Boolean(ctx.pushState?.supported && !ctx.pushState.subscribed),
+    blocking: false,
+    skipable: true,
+    persistDismissed: true,
+    titleKey: 'Onboarding.BROWSER_PUSH_TITLE',
+    Component: BrowserPushStep,
+  },
+];
+
+export const OnboardingContext = createContext(null);
+
+export function useOnboarding() {
+  return useContext(OnboardingContext);
+}
+
+function loadDismissedSteps() {
+  if (typeof window === 'undefined') return new Set();
+  try {
+    return new Set(JSON.parse(window.localStorage.getItem('onboarding_dismissed')) || []);
+  } catch {
+    return new Set();
+  }
+}
+
+function getInitialPushState() {
+  const supported = typeof navigator !== 'undefined'
+    && typeof window !== 'undefined'
+    && 'serviceWorker' in navigator
+    && 'PushManager' in window;
+  return supported ? null : { supported: false, subscribed: false };
+}
+
+export function OnboardingProvider({ children, extraSteps = [] }) {
+  const { user } = useContext(AuthContext);
+  const [configMap, setConfigMap] = useState({});
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const [pushState, setPushState] = useState(getInitialPushState);
+  const [dismissedSet, setDismissedSet] = useState(loadDismissedSteps);
+
+  const descriptors = useMemo(
+    () => [...UNIVERSAL_STEP_DESCRIPTORS, ...extraSteps],
+    [extraSteps],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!user) {
+      setConfigMap({});
+      setConfigLoaded(false);
+      return undefined;
+    }
+
+    getOnboardingStepConfig()
+      .then((data) => {
+        if (cancelled) return;
+        const nextConfigMap = {};
+        (data || []).forEach((item) => { nextConfigMap[item.key] = item.enabled; });
+        setConfigMap(nextConfigMap);
+      })
+      .catch(() => {
+        if (!cancelled) setConfigMap({});
+      })
+      .finally(() => {
+        if (!cancelled) setConfigLoaded(true);
+      });
+
+    return () => { cancelled = true; };
+  }, [user]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (typeof navigator === 'undefined' || typeof window === 'undefined'
+      || !('serviceWorker' in navigator) || !('PushManager' in window)) {
+      setPushState({ supported: false, subscribed: false });
+      return undefined;
+    }
+
+    navigator.serviceWorker.ready
+      .then((registration) => registration.pushManager.getSubscription())
+      .then((subscription) => {
+        if (!cancelled) setPushState({ supported: true, subscribed: Boolean(subscription) });
+      })
+      .catch(() => {
+        if (!cancelled) setPushState({ supported: true, subscribed: false });
+      });
+
+    return () => { cancelled = true; };
+  }, []);
+
+  const dismissStep = useCallback((id) => {
+    setDismissedSet((previous) => {
+      const next = new Set(previous);
+      next.add(id);
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem('onboarding_dismissed', JSON.stringify([...next]));
+        } catch {
+          // Persistence is optional; the in-memory dismissal still applies.
+        }
+      }
+      return next;
+    });
+  }, []);
+
+  const ctx = useMemo(() => ({ user, pushState }), [user, pushState]);
+  const activeSteps = useMemo(() => {
+    if (!configLoaded || !user) return [];
+    return selectActiveSteps(descriptors, configMap, ctx, dismissedSet);
+  }, [configLoaded, user, descriptors, configMap, ctx, dismissedSet]);
+
+  const value = useMemo(
+    () => ({ activeSteps, dismissStep, ctx, configMap, setConfigMap }),
+    [activeSteps, dismissStep, ctx, configMap],
+  );
+
+  return <OnboardingContext.Provider value={value}>{children}</OnboardingContext.Provider>;
+}

package/src/onboarding/OnboardingWizard.jsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Box from '@mui/material/Box';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import { useOnboarding } from './OnboardingProvider';
+
+export function OnboardingWizard() {
+  const { t } = useTranslation();
+  const onboarding = useOnboarding();
+  const [sessionDismissed, setSessionDismissed] = useState(() => new Set());
+  const totalRef = useRef(null);
+  const [completed, setCompleted] = useState(0);
+  const activeSteps = onboarding?.activeSteps || [];
+  const visibleSteps = activeSteps.filter((step) => !sessionDismissed.has(step.id));
+
+  useEffect(() => {
+    if (visibleSteps.length > 0 && totalRef.current === null) {
+      totalRef.current = visibleSteps.length;
+      setCompleted(0);
+    }
+    if (visibleSteps.length === 0) {
+      totalRef.current = null;
+      setCompleted(0);
+    }
+  }, [visibleSteps.length]);
+
+  if (!onboarding || visibleSteps.length === 0) return null;
+
+  const { dismissStep, ctx } = onboarding;
+  const currentStep = visibleSteps[0];
+  const total = totalRef.current || visibleSteps.length;
+  const progress = total > 1 ? Math.round((completed / total) * 100) : 0;
+  const StepComponent = currentStep.Component;
+
+  const completeCurrentStep = () => {
+    setSessionDismissed((previous) => new Set([...previous, currentStep.id]));
+    setCompleted((count) => count + 1);
+  };
+
+  const dismissCurrentStep = () => {
+    if (currentStep.persistDismissed) dismissStep(currentStep.id);
+    completeCurrentStep();
+  };
+
+  return (
+    <Dialog open fullWidth maxWidth="sm" disableEscapeKeyDown={currentStep.blocking} onClose={currentStep.blocking ? undefined : dismissCurrentStep}>
+      <DialogTitle sx={{ pb: 0 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Typography variant="subtitle2" color="text.secondary">
+            {total > 1 ? t('Onboarding.STEP_COUNTER', { current: completed + 1, total }) : t('Onboarding.SETUP')}
+          </Typography>
+        </Box>
+        {total > 1 && <LinearProgress variant="determinate" value={progress} sx={{ mt: 1, borderRadius: 1 }} />}
+      </DialogTitle>
+      <DialogContent sx={{ pt: 2 }}>
+        <StepComponent onComplete={completeCurrentStep} onDismiss={dismissCurrentStep} ctx={ctx} />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default OnboardingWizard;

package/src/onboarding/api.js

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,16 @@
+/**
+ * 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

@@ -0,0 +1,63 @@
+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 Typography from '@mui/material/Typography';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import {
+  getVapidPublicKey,
+  patchNotificationPreferences,
+  savePushSubscription,
+  urlBase64ToUint8Array,
+} from '../../notifications/api';
+
+export function BrowserPushStep({ onComplete, onDismiss }) {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const enable = async () => {
+    setLoading(true);
+    setError('');
+    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);
+      await patchNotificationPreferences({ push_opt_in: 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.BROWSER_PUSH_TITLE')}</Typography></Box>
+      <Typography variant="body2" color="text.secondary">{t('Onboarding.BROWSER_PUSH_BODY')}</Typography>
+      {error && <Alert severity="warning" onClose={() => setError('')}>{error}</Alert>}
+      <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>
+      </Box>
+    </Box>
+  );
+}
+
+export default BrowserPushStep;

package/src/onboarding/steps/CompleteNameStep.jsx

@@ -0,0 +1,46 @@
+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;