window unfocused modal

src/app/(web)/(oa)/assessment/[assessmentId]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { use } from 'react';
+import { use, useEffect, useState } from 'react';
 import useAssessment from '@/lib/hooks/useAssessment';
 import AssessmentIntro from '@/lib/components/assessment-flow/AssessmentIntro';
 import AssessmentOutro from '@/lib/components/assessment-flow/AssessmentOutro';
@@ -10,11 +10,27 @@ import AssessmentContent from '@/lib/components/assessment-flow/AssessmentConten
 import { useHeartbeat } from '@/lib/hooks/useHeartbeat';
 import { LostConnectionModal } from '@/lib/components/modal/LostConnectionModal';
 import AssessmentSkeleton from '@/lib/components/assessment-flow/AssessmentSkeleton';
+import { useWindowUnfocused } from '@/lib/hooks/useWindowUnfocused';
+import { WindowUnfocusedModal } from '@/lib/components/modal/WindowUnfocusedModal';
 
 export default function AssessmentPage({ params }: { params: Promise<{ assessmentId: string }> }) {
     const { assessmentId } = use(params);
     const assessment = useAssessment(assessmentId);
     const { isConnected } = useHeartbeat(assessment.token ?? null);
+    const isWindowUnfocused = useWindowUnfocused();
+    const [isUnfocusedModalOpen, setIsUnfocusedModalOpen] = useState(false);
+    const isExamActive =
+        !assessment.isLoading &&
+        !assessment.error &&
+        isConnected &&
+        assessment.phase !== 'intro' &&
+        assessment.phase !== 'outro';
+
+    useEffect(() => {
+        if (isExamActive && isWindowUnfocused) {
+            setIsUnfocusedModalOpen(true);
+        }
+    }, [isExamActive, isWindowUnfocused]);
 
     if (assessment.isLoading)
         return (
@@ -52,6 +68,10 @@ export default function AssessmentPage({ params }: { params: Promise<{ assessmen
         <div className="flex h-screen w-full flex-col overflow-hidden">
             {/* onOpenChange is returning nothing as we don't have recovery implemented just yet  */}
             <LostConnectionModal open={!isConnected} onOpenChange={() => {}} />
+            <WindowUnfocusedModal
+                open={isUnfocusedModalOpen}
+                onAcknowledge={() => setIsUnfocusedModalOpen(false)}
+            />
             <AssessmentNavbar candidateName={assessment.candidateName} />
             <div className="flex flex-1 overflow-hidden">
                 <AssessmentSidebar

src/lib/components/modal/WindowUnfocusedModal.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@/lib/components/ui/Button';
+
+type WindowUnfocusedModalProps = {
+    open: boolean;
+    onAcknowledge: () => void;
+};
+
+export function WindowUnfocusedModal({ open, onAcknowledge }: WindowUnfocusedModalProps) {
+    if (!open) return null;
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/25 p-4 backdrop-blur-md">
+            <div className="bg-sarge-gray-0 border-sarge-gray-200 flex w-full max-w-[380px] flex-col items-center gap-4 rounded-lg border px-8 py-7 text-center shadow-lg">
+                <div className="space-y-3">
+                    <h2 className="text-sarge-gray-900 text-base leading-snug font-bold">
+                        You can&apos;t unfocus your assessment window during the exam
+                    </h2>
+                    <p className="text-sarge-gray-600 text-sm">The admin has been notified.</p>
+                </div>
+                <Button className="h-9 min-w-28 px-5" onClick={onAcknowledge}>
+                    I understand
+                </Button>
+            </div>
+        </div>
+    );
+}