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

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_privacy_statement),
+    blocking: true,
+    skipable: false,
+    persistDismissed: false,
+    titleKey: 'Onboarding.PRIVACY_COOKIES_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,71 @@
+import React, { useContext, 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 { AuthContext } from '../auth/AuthContext';
+import { useOnboarding } from './OnboardingProvider';
+
+export function OnboardingWizard() {
+  const { t } = useTranslation();
+  const onboarding = useOnboarding();
+  const authContext = useContext(AuthContext);
+  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);
+    authContext?.refreshUser?.()?.catch(() => {
+      // Best-effort refresh; the step itself already persisted successfully.
+    });
+  };
+
+  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;

package/src/onboarding/steps/CookieConsentStep.jsx

@@ -0,0 +1,133 @@
+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/tests/AuthContext.test.jsx

@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import React, { useContext } from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+
+const apiClient = vi.hoisted(() => ({
+  ensureCsrfToken: vi.fn().mockResolvedValue(undefined),
+}));
+const authApi = vi.hoisted(() => ({
+  fetchAuthMethods: vi.fn().mockResolvedValue({}),
+  fetchCurrentUser: vi.fn(),
+  logoutSession: vi.fn(),
+}));
+
+vi.mock('../src/auth/apiClient', () => apiClient);
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('../src/auth/ReauthModal', () => ({ ReauthModal: () => null }));
+
+import { AuthContext, AuthProvider } from '../src/auth/AuthContext';
+
+function Probe() {
+  const { user, refreshUser } = useContext(AuthContext);
+  return (
+    <div>
+      <span data-testid="first-name">{user?.first_name || ''}</span>
+      <button type="button" onClick={() => refreshUser()}>refresh</button>
+    </div>
+  );
+}
+
+describe('AuthContext refreshUser', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('re-fetches the current user and updates context state', async () => {
+    authApi.fetchCurrentUser
+      .mockResolvedValueOnce({ id: 1, first_name: 'Ada' })
+      .mockResolvedValueOnce({ id: 1, first_name: 'Grace' });
+
+    render(<AuthProvider><Probe /></AuthProvider>);
+
+    await waitFor(() => expect(screen.getByTestId('first-name').textContent).toBe('Ada'));
+
+    screen.getByRole('button', { name: 'refresh' }).click();
+
+    await waitFor(() => expect(screen.getByTestId('first-name').textContent).toBe('Grace'));
+    expect(authApi.fetchCurrentUser).toHaveBeenCalledTimes(2);
+  });
+});

package/tests/CookieConsentStep.test.jsx

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+const authApi = vi.hoisted(() => ({
+  fetchCookieStatement: vi.fn(),
+  fetchPrivacyStatement: vi.fn(),
+  updateUserProfile: vi.fn(),
+}));
+
+vi.mock('../src/auth/authApi', () => authApi);
+vi.mock('react-i18next', () => ({ useTranslation: () => ({ t: (key) => key }) }));
+
+import { CookieConsentStep } from '../src/onboarding/steps/CookieConsentStep';
+
+describe('CookieConsentStep (combined privacy + cookies)', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    authApi.fetchPrivacyStatement.mockResolvedValue('privacy text');
+    authApi.fetchCookieStatement.mockResolvedValue('cookie text');
+    authApi.updateUserProfile.mockResolvedValue({});
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('does not submit while the privacy checkbox is unchecked', async () => {
+    const onComplete = vi.fn();
+    render(<CookieConsentStep onComplete={onComplete} />);
+
+    const button = screen.getByRole('button', { name: 'Onboarding.CONTINUE' });
+    expect(button.disabled).toBe(true);
+    fireEvent.click(button);
+
+    await waitFor(() => expect(authApi.updateUserProfile).not.toHaveBeenCalled());
+    expect(onComplete).not.toHaveBeenCalled();
+  });
+
+  it('submits both fields with cookies unchecked (privacy only)', async () => {
+    const onComplete = vi.fn();
+    render(<CookieConsentStep onComplete={onComplete} />);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Onboarding.PRIVACY_AGREEMENT_LABEL' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Onboarding.CONTINUE' }));
+
+    await waitFor(() => expect(authApi.updateUserProfile).toHaveBeenCalledWith({
+      accepted_privacy_statement: true,
+      accepted_convenience_cookies: false,
+    }));
+    expect(onComplete).toHaveBeenCalled();
+  });
+
+  it('submits both fields with cookies checked', async () => {
+    const onComplete = vi.fn();
+    render(<CookieConsentStep onComplete={onComplete} />);
+
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Onboarding.PRIVACY_AGREEMENT_LABEL' }));
+    fireEvent.click(screen.getByRole('checkbox', { name: 'Onboarding.COOKIES_OPT_IN_LABEL' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Onboarding.CONTINUE' }));
+
+    await waitFor(() => expect(authApi.updateUserProfile).toHaveBeenCalledWith({
+      accepted_privacy_statement: true,
+      accepted_convenience_cookies: true,
+    }));
+    expect(onComplete).toHaveBeenCalled();
+  });
+});