/** * PushPermissionPrompt — post-install permission bottom sheet (D-08, UI-SPEC Surface 1). * * Shows after the PWA is installed (isInstalled() === true) and when: * - Notification.permission === 'default' (not yet asked) * - The user hasn't dismissed via "Not now" (localStorage pushPermissionDismissed !== '1') * * Accessibility: * - role="dialog", aria-modal="true", aria-labelledby pointing to the heading * - 48px primary CTA, 44px secondary ghost button * - Backdrop does NOT dismiss (permission UX must be explicit — per UI-SPEC Surface 1) * * Security: T-02d-01 — all text is plain-text JSX children; no dangerouslySetInnerHTML. * * iOS constraint (D-08 / CLAUDE.md iOS table): * subscribe() is called synchronously inside the onClick handler — no await before * the pushManager.subscribe() call satisfies the iOS user-gesture requirement. */ import { useState, useEffect, useId } from 'react'; import { Bell, Loader2, X } from 'lucide-react'; import { usePushSubscription } from '../hooks/usePushSubscription.js'; // fetchVapidKey is the internal helper; we import it directly via the module // rather than re-exporting it through usePushSubscription, since we need to // store the resolved key in state (not just warm the cache). async function fetchVapidKeyForPrompt(): Promise { try { const cached = sessionStorage.getItem('vapidPublicKey'); if (cached) return cached; const res = await fetch('/api/push/vapid-public-key', { credentials: 'include' }); if (!res.ok) return null; const data = (await res.json()) as { publicKey: string }; if (data.publicKey) { sessionStorage.setItem('vapidPublicKey', data.publicKey); } return data.publicKey ?? null; } catch { return null; } } // ── installed state check ────────────────────────────────────────────────── function isInstalled(): boolean { return ( window.matchMedia('(display-mode: standalone)').matches || (navigator as unknown as { standalone?: boolean }).standalone === true ); } // ── localStorage guards ──────────────────────────────────────────────────── function readDismissed(): boolean { try { return localStorage.getItem('pushPermissionDismissed') === '1'; } catch { return false; } } function persistDismissed(): void { try { localStorage.setItem('pushPermissionDismissed', '1'); } catch { // Private mode / storage disabled — ignore } } // ── PushPermissionPrompt ─────────────────────────────────────────────────── interface PushPermissionPromptProps { /** Optional callback after the prompt is closed (granted or dismissed) */ onClose?: () => void; } export function PushPermissionPrompt({ onClose }: PushPermissionPromptProps) { const [dismissed, setDismissed] = useState(readDismissed); const [installed, setInstalled] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // CR-04: Pre-fetch the VAPID key into state so the tap handler can call // subscribe(registration, vapidKey) without any await before pushManager.subscribe(). // Button is disabled until the key is ready (null = not yet loaded). const [vapidKey, setVapidKey] = useState(null); // NEW-CR-01: Pre-resolve the ServiceWorkerRegistration into state so the tap // handler has ZERO awaits between the user gesture and pushManager.subscribe(). // Any await (including navigator.serviceWorker.ready) between the tap and // pushManager.subscribe() breaks the iOS user-gesture requirement. const [swRegistration, setSwRegistration] = useState(null); const headingId = useId(); const { subscribe, permission } = usePushSubscription(); useEffect(() => { setInstalled(isInstalled()); }, []); // Pre-fetch the VAPID key into state while the prompt is visible. // CR-04: We store the resolved key in state (not just sessionStorage) so the // tap handler has synchronous access — no network await inside the tap path. useEffect(() => { if (!installed) return; if (permission !== 'default') return; if (dismissed) return; void fetchVapidKeyForPrompt().then((key) => { if (key) setVapidKey(key); }); }, [installed, permission, dismissed]); // NEW-CR-01: Pre-resolve the ServiceWorkerRegistration in a useEffect so the // tap handler never has to await navigator.serviceWorker.ready. // navigator.serviceWorker.ready resolves once the SW is active; doing this // eagerly means the result is in state before the user can tap the button. useEffect(() => { if (!installed) return; if (permission !== 'default') return; if (dismissed) return; if (!navigator.serviceWorker) return; void navigator.serviceWorker.ready.then((reg) => { setSwRegistration(reg); }); }, [installed, permission, dismissed]); // Don't render when: not installed, already granted/denied, or dismissed if (!installed) return null; if (permission !== 'default') return null; if (dismissed) return null; function handleDismiss() { persistDismissed(); setDismissed(true); onClose?.(); } // onClick handler — subscribe() called synchronously (iOS user-gesture requirement). // NEW-CR-01: Both vapidKey AND swRegistration are pre-resolved in state (useEffects above). // There is ZERO await between the tap gesture and registration.pushManager.subscribe() // inside subscribe() — the iOS gesture gate is fully satisfied. function handleEnableClick() { if (loading || !vapidKey || !swRegistration) return; setLoading(true); setError(null); // Capture both synchronously — no await in this scope before subscribe(). const resolvedVapidKey = vapidKey; const resolvedRegistration = swRegistration; void (async () => { try { await subscribe(resolvedRegistration, resolvedVapidKey); // On success: close the prompt (permission is now 'granted') setLoading(false); onClose?.(); } catch (err) { setLoading(false); if (err instanceof Error && err.name === 'NotAllowedError') { // User denied in the native browser dialog — close the sheet setDismissed(true); onClose?.(); } else { setError('Something went wrong. Please try again.'); } } })(); } return ( // Full-screen backdrop — NO backdrop click-dismiss (permission UX must be explicit) ); }