TCA-790 Delay all calls to the survey -> dev

src-ts/tools/learn/course-completed/CourseCompletedPage.tsx

@@ -1,4 +1,4 @@
-import { FC, useContext, useEffect } from 'react'
+import { Dispatch, FC, SetStateAction, useContext, useEffect } from 'react'
 import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
 
 import { EnvironmentConfig } from '../../../config'
@@ -9,6 +9,7 @@ import {
     LoadingSpinner,
     profileContext,
     ProfileContextData,
+    surveyTriggerForUser,
     textFormatGetSafeString,
 } from '../../../lib'
 import {
@@ -21,11 +22,13 @@ import {
     useLearnBreadcrumb,
     UserCertificationProgressProviderData,
     UserCertificationProgressStatus,
+    useShowSurvey,
 } from '../learn-lib'
 import { getCertificatePath, getCoursePath, LEARN_PATHS, rootRoute } from '../learn.routes'
 
 import { ReactComponent as StarsSvg } from './stars.svg'
 import styles from './CourseCompletedPage.module.scss'
+import { LearnConfig } from '../learn-config'
 
 const CourseCompletedPage: FC<{}> = () => {
 
@@ -36,6 +39,11 @@ const CourseCompletedPage: FC<{}> = () => {
     const certificationParam: string = textFormatGetSafeString(routeParams.certification)
     const coursePath: string = getCoursePath(providerParam, certificationParam)
 
+    const [showSurvey, setShowSurvey]: [
+        string,
+        Dispatch<SetStateAction<string>>
+    ] = useShowSurvey()
+
     const {
         course: courseData,
         ready: courseDataReady,
@@ -87,6 +95,13 @@ const CourseCompletedPage: FC<{}> = () => {
         ready,
     ])
 
+    useEffect(() => {
+      if (ready && showSurvey === certificationParam) {
+        surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId)
+        setShowSurvey('')
+      }
+    }, [ready, showSurvey, certificationParam]);
+
     return (
         <>
             <LoadingSpinner hide={ready} />

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

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash'
 import {
     Dispatch,
     FC,
@@ -38,14 +39,15 @@ import {
     UserCertificationProgressStatus,
     userCertificationProgressUpdateAsync,
     UserCertificationUpdateProgressActions,
+    useShowSurvey,
 } from '../learn-lib'
 import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes'
 
 import { FccFrame } from './fcc-frame'
 import { FccSidebar } from './fcc-sidebar'
 import { TitleNav } from './title-nav'
 import styles from './FreeCodeCamp.module.scss'
-import { debounce } from 'lodash'
+import { LearnConfig } from '../learn-config'
 
 const FreeCodeCamp: FC<{}> = () => {
 
@@ -66,6 +68,11 @@ const FreeCodeCamp: FC<{}> = () => {
     const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>]
         = useState(textFormatGetSafeString(routeParams.lesson))
 
+    const [showSurvey, setShowSurvey]: [
+        string,
+        Dispatch<SetStateAction<string>>
+    ] = useShowSurvey()
+
     const {
         certificationProgress: certificateProgress,
         setCertificateProgress,
@@ -212,6 +219,7 @@ const FreeCodeCamp: FC<{}> = () => {
         profile?.userId,
     ])
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleFccLessonComplete: (challengeUuid: string) => void = useCallback(debounce((challengeUuid: string) => {
 
         const currentLesson: { [key: string]: string } = {
@@ -234,7 +242,6 @@ const FreeCodeCamp: FC<{}> = () => {
             currentLesson,
         )
             .then((progress: LearnUserCertificationProgress) => {
-
                 setCertificateProgress(progress)
                 handleSurvey(certWasInProgress, progress)
 
@@ -274,30 +281,16 @@ const FreeCodeCamp: FC<{}> = () => {
 
         // This is the last lesson to be completed in the first module completed,
         // so it's time to trigger the survey
-        const surveyTrigger: string = 'TCA First Module Completed'
-
-        // If there is only one assessment in a cert (e.g. Data Analysis w/Python),
-        // the cert is also completed, which redirects the user to the cert page.
-        // So the survey needs to be delayed so that it appears on the completed
-        // cert page instead of the current lesson.
-
-        // NOTE: we can't use the cert's status here bc it doesn't get set to
-        // completed until the UI notices the cert is complete and initiates
-        // the completion. And we have to use >= instead of === because it's
-        // possible TCA data isn't in sync w/the latest FCC curriculum.
-        if (progress.certificationProgressPercentage >= 100) {
-            setTimeout(async () => {
-                surveyTriggerForUser(surveyTrigger, profile?.userId)
-            }, 1000)
-        } else {
-            surveyTriggerForUser(surveyTrigger, profile?.userId)
-        }
+        // NOTE: We have to add a delay, otherwise the survey closes when the user
+        // is automatically redirected to the next lesson.
+        setShowSurvey(certificationParam)
     }
 
     /**
      * Handle the navigation away from the last step of the course in the FCC frame
      * @returns
      */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleFccLastLessonNavigation: () => void = useCallback(debounce(() => {
 
         if (!certificateProgress) {
@@ -461,6 +454,17 @@ const FreeCodeCamp: FC<{}> = () => {
         isLoggedIn,
     ])
 
+    useEffect(() => {
+        if (ready && showSurvey === certificationParam) {
+            surveyTriggerForUser(LearnConfig.SURVEY.COMPLETED_FIRST_MODULE, profile?.userId)
+            setShowSurvey('')
+        }
+    }, [
+        ready,
+        showSurvey,
+        certificationParam,
+    ]);
+
     return (
         <>
             <LoadingSpinner hide={ready} />

src-ts/tools/learn/learn-config/learn-config.model.ts

@@ -7,4 +7,7 @@ export interface LearnConfigModel {
         value: string,
     }
     CLIENT: string
+    SURVEY: {
+        COMPLETED_FIRST_MODULE: string
+    }
 }

src-ts/tools/learn/learn-config/learn.default.config.ts

@@ -11,4 +11,7 @@ export const LearnConfigDefault: LearnConfigModel = {
         value: 'certificate-container',
     },
     CLIENT: 'https://fcc.topcoder-dev.com:4431',
+    SURVEY: {
+        COMPLETED_FIRST_MODULE: 'TCA First Module Completed',
+    }
 }

src-ts/tools/learn/learn-lib/index.ts

@@ -7,5 +7,6 @@ export * from './data-providers'
 export * from './learn-breadcrumb-provider'
 export * from './learn-swr'
 export * from './my-course-card'
+export * from './survey'
 export * from './svgs'
 export * from './wave-hero'

src-ts/tools/learn/learn-lib/survey/index.ts

@@ -0,0 +1 @@
+export * from './use-show-survey'

src-ts/tools/learn/learn-lib/survey/use-show-survey.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from "react"
+import { useLocalStorage } from "../../../../lib"
+
+export const useShowSurvey = (): [
+    string,
+    Dispatch<SetStateAction<string>>
+] => {
+    return useLocalStorage<string>('tca-show-survey', '');
+}