PROD-2562 - handle the navigation away on the fcc's last step of a course

Author: vas3a

src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx

@@ -14,6 +14,7 @@ import {
     CoursesProviderData,
     LearnLesson,
     LearnModule,
+    LearnMyModuleProgress,
     LessonProviderData,
     MyCertificationProgressProviderData,
     MyCertificationProgressStatus,
@@ -175,6 +176,53 @@ const FreeCodeCamp: FC<{}> = () => {
         }
     }
 
+    /**
+     * Handle the navigation away from the last step of the course in the FCC frame
+     * @returns
+     */
+    function handleFccLastLessonNavigation(): void {
+        if (!certificateProgress) {
+            return
+        }
+
+        // course is completed, return user to course completed screen
+        if (certificateProgress.courseProgressPercentage === 100) {
+            const completedPath: string = getCertificationCompletedPath(
+                providerParam,
+                certificationParam
+            )
+
+            navigate(completedPath)
+            return
+        }
+
+        // course is not completed yet,
+        // so we find the first incomplete lesson
+        // and redirect user to it for a continuous flow
+        const firstIncompleteModule: LearnMyModuleProgress|undefined = certificateProgress.modules.find(m => m.completedPercentage !== 100)
+        const moduleLessons: Array<LearnLesson>|undefined = courseData?.modules.find(m => m.key === firstIncompleteModule?.module)?.lessons
+        if (!firstIncompleteModule || !moduleLessons) {
+            // case unknown, return
+            return
+        }
+
+        const completedLessons: Array<string> = firstIncompleteModule.completedLessons.map(l => l.dashedName)
+        const firstIncompleteLesson: LearnLesson|undefined = moduleLessons.find(l => !completedLessons.includes(l.dashedName))
+        if (!firstIncompleteLesson) {
+            // case unknown, return
+            return
+        }
+
+        const nextLessonPath: string = getFccLessonPath(
+            providerParam,
+            certificationParam,
+            firstIncompleteModule.module ?? '',
+            firstIncompleteLesson.dashedName ?? ''
+        )
+
+        navigate(nextLessonPath)
+    }
+
     useEffect(() => {
       if (
         certificateProgress &&
@@ -270,6 +318,7 @@ const FreeCodeCamp: FC<{}> = () => {
                             lesson={lesson}
                             onFccLessonChange={handleFccLessonReady}
                             onFccLessonComplete={handleFccLessonComplete}
+                            onFccLastLessonNavigation={handleFccLastLessonNavigation}
                         />
                     </div>
                 </div>

src-ts/tools/learn/free-code-camp/fcc-frame/FccFrame.tsx

@@ -9,11 +9,13 @@ const FreecodecampIfr: FC<any> = memo((params: any) => (
     <iframe
         className={styles.iframe}
         ref={params.frameRef}
+        title='FreeCodeCamp.org Course'
     />
 ))
 
 interface FccFrameProps {
     lesson?: LearnLessonMeta
+    onFccLastLessonNavigation: () => void
     onFccLessonChange: (path: string) => void
     onFccLessonComplete: () => void
 }
@@ -51,6 +53,10 @@ const FccFrame: FC<FccFrameProps> = (props: FccFrameProps) => {
 
         const {event: eventName, data}: {data: {path: string}, event: string } = JSON.parse(jsonData)
 
+        if (eventName === 'fcc:nav:last-challenge') {
+            props.onFccLastLessonNavigation()
+        }
+
         if (eventName === 'fcc:challenge:completed') {
             props.onFccLessonComplete()
         }
@@ -65,7 +71,7 @@ const FccFrame: FC<FccFrameProps> = (props: FccFrameProps) => {
       return () => {
         window.removeEventListener('message', handleEvent, false)
       }
-    }, [frameRef, props.onFccLessonChange, props.onFccLessonComplete])
+    }, [frameRef, props.onFccLastLessonNavigation, props.onFccLessonChange, props.onFccLessonComplete])
 
     return (
         <FreecodecampIfr frameRef={frameRef} />