/** * InstructionSheet — shared OS-specific notification re-enable guidance bottom sheet. * * Extracted from PermissionDeniedBanner (Phase 5 UAT-05-T4 fix). * Used by both PermissionDeniedBanner and SettingsSheet. * * Security: T-05-24 — all copy is plain-text JSX children, no dangerouslySetInnerHTML. */ import { X } from 'lucide-react'; // ── OS detection ────────────────────────────────────────────────────────── function isIOS(): boolean { return ( /iPad|iPhone|iPod/.test(navigator.userAgent) && !(window as unknown as { MSStream?: unknown }).MSStream ); } // ── Instruction steps ──────────────────────────────────────────────────── const IOS_STEPS = [ 'Open Settings on your iPhone', 'Scroll down and tap Safari', 'Tap Notifications', 'Allow notifications for FamilySync', ]; const ANDROID_STEPS = [ 'Open your browser (Chrome or Edge) on your phone', 'Tap the three-dot menu → Settings', 'Tap Site Settings → Notifications', 'Find FamilySync and tap Allow', ]; // ── Instruction sheet ──────────────────────────────────────────────────── interface InstructionSheetProps { onClose: () => void; } export function InstructionSheet({ onClose }: InstructionSheetProps) { const steps = isIOS() ? IOS_STEPS : ANDROID_STEPS; const platform = isIOS() ? 'iOS' : 'Android'; return ( ); }