diff --git a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx b/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx index a856a0ba4..1af7bc067 100755 --- a/src-ts/tools/learn/course-completed/CourseCompletedPage.tsx +++ b/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> + ] = 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 ( <> diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx index 8f97f541f..e20942c9b 100644 --- a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx +++ b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx @@ -39,6 +39,7 @@ import { UserCertificationProgressStatus, userCertificationProgressUpdateAsync, UserCertificationUpdateProgressActions, + useShowSurvey, } from '../learn-lib' import { getCertificationCompletedPath, getCoursePath, getLessonPathFromModule } from '../learn.routes' @@ -46,6 +47,7 @@ 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>] = useState(textFormatGetSafeString(routeParams.lesson)) + const [showSurvey, setShowSurvey]: [ + string, + Dispatch> + ] = 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 ( <> diff --git a/src-ts/tools/learn/learn-config/learn-config.model.ts b/src-ts/tools/learn/learn-config/learn-config.model.ts index 7a68f6a33..dea83ff0a 100644 --- a/src-ts/tools/learn/learn-config/learn-config.model.ts +++ b/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 + } } diff --git a/src-ts/tools/learn/learn-config/learn.default.config.ts b/src-ts/tools/learn/learn-config/learn.default.config.ts index 066ada8dc..dca4e129f 100644 --- a/src-ts/tools/learn/learn-config/learn.default.config.ts +++ b/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', + } } diff --git a/src-ts/tools/learn/learn-lib/index.ts b/src-ts/tools/learn/learn-lib/index.ts index 6a21a12f8..ad81bf8ee 100755 --- a/src-ts/tools/learn/learn-lib/index.ts +++ b/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' diff --git a/src-ts/tools/learn/learn-lib/survey/index.ts b/src-ts/tools/learn/learn-lib/survey/index.ts new file mode 100644 index 000000000..d852e9fcd --- /dev/null +++ b/src-ts/tools/learn/learn-lib/survey/index.ts @@ -0,0 +1 @@ +export * from './use-show-survey' diff --git a/src-ts/tools/learn/learn-lib/survey/use-show-survey.ts b/src-ts/tools/learn/learn-lib/survey/use-show-survey.ts new file mode 100644 index 000000000..e72a410de --- /dev/null +++ b/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> +] => { + return useLocalStorage('tca-show-survey', ''); +}