TCA-790 - use localstorage flag for showing survey

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

@@ -39,13 +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 { 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,
@@ -235,7 +242,6 @@ const FreeCodeCamp: FC<{}> = () => {
             currentLesson,
         )
             .then((progress: LearnUserCertificationProgress) => {
-
                 setCertificateProgress(progress)
                 handleSurvey(certWasInProgress, progress)
 
@@ -277,9 +283,7 @@ const FreeCodeCamp: FC<{}> = () => {
         // so it's time to trigger the survey
         // NOTE: We have to add a delay, otherwise the survey closes when the user
         // is automatically redirected to the next lesson.
-        setTimeout(async () => {
-            surveyTriggerForUser('TCA First Module Completed', profile?.userId)
-        }, 1000)
+        setShowSurvey(certificationParam)
     }
 
     /**
@@ -450,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', '');
+}