topcoder-platform · testflyjets · Dec 7, 2022 · Dec 6, 2022 · Dec 6, 2022 · Dec 7, 2022
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "dependencies": {
         "@datadog/browser-logs": "^4.21.2",
         "@heroicons/react": "^1.0.6",
+        "@sprig-technologies/sprig-browser": "^2.20.1",
         "@stripe/react-stripe-js": "1.13.0",
         "@stripe/stripe-js": "1.41.0",
         "apexcharts": "^3.36.0",

diff --git a/public/index.html b/public/index.html
@@ -2,24 +2,26 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description"
-    content="Topcoder is home to the world’s largest community of designers, developers, and data scientists. Allowing you the freedom to start and execute faster." />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />
-  <link rel="stylesheet" href="%PUBLIC_URL%/global.css">
-  <!--
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description"
+        content="Topcoder is home to the world’s largest community of designers, developers, and data scientists. Allowing you the freedom to start and execute faster." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preload" as="style"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Barlow+Condensed:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo_512x512.png" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/global.css">
+    <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -28,13 +30,13 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>Topcoder Top Technology Talent On-Demand</title>
+    <title>Topcoder Top Technology Talent On-Demand</title>
 </head>
 
 <body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root" data-id="root"></div>
-  <!--
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" data-id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 

diff --git a/src-ts/App.tsx b/src-ts/App.tsx
@@ -7,7 +7,7 @@ import { routeContext, RouteContextData } from './lib'
 
 const App: FC<{}> = () => {
 
-    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState(false)
+    const [ready, setReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
     const { allRoutes, getRouteElement }: RouteContextData = useContext(routeContext)
 
     const routeElements: Array<ReactElement> = allRoutes
@@ -19,9 +19,9 @@ const App: FC<{}> = () => {
 
     useEffect(() => {
         if (ready) {
-            document.getElementById('root')?.classList.add('app-ready');
+            document.getElementById('root')?.classList.add('app-ready')
         }
-    }, [ready]);
+    }, [ready])
 
     return (
         <>

diff --git a/src-ts/config/environments/environment.default.config.ts b/src-ts/config/environments/environment.default.config.ts
@@ -20,6 +20,9 @@ export const EnvironmentConfigDefault: EnvironmentConfigModel = {
         SERVICE: 'platform-ui',
     },
     REAUTH_OFFSET: 55,
+    SPRIG: {
+        ENVIRONMENT_ID: 'bUcousVQ0-yF',
+    },
     // TODO: Move stripe creds to .env file
     STRIPE: {
         ADMIN_TOKEN:

diff --git a/src-ts/config/environments/environment.prod.config.ts b/src-ts/config/environments/environment.prod.config.ts
@@ -18,6 +18,9 @@ export const EnvironmentConfigProd: EnvironmentConfigModel = {
     },
     DISABLED_TOOLS: [],
     ENV: 'prod',
+    SPRIG: {
+        ENVIRONMENT_ID: 'a-IZBZ6-r7bU',
+    },
     // TODO: Move stripe creds to .env file
     STRIPE: {
         ADMIN_TOKEN:

diff --git a/src-ts/lib/functions/index.ts b/src-ts/lib/functions/index.ts
@@ -10,5 +10,6 @@ export * from './error-functions'
 export * from './file-functions'
 export * from './logging-functions'
 export * from './text-format-functions'
+export * from './survey-functions'
 export * from './user-functions'
 export * from './xhr-functions'
diff --git a/src-ts/lib/functions/survey-functions/index.ts b/src-ts/lib/functions/survey-functions/index.ts
@@ -0,0 +1 @@
+export { triggerForUser as surveyTriggerForUser } from './survey.functions'
diff --git a/src-ts/lib/functions/survey-functions/survey.functions.tsx b/src-ts/lib/functions/survey-functions/survey.functions.tsx
@@ -0,0 +1,22 @@
+import { sprig, SprigAPI } from '@sprig-technologies/sprig-browser'
+
+import { EnvironmentConfig } from '../../../config'
+
+const Sprig: SprigAPI = sprig.configure({
+    environmentId: EnvironmentConfig.SPRIG.ENVIRONMENT_ID,
+})
+
+export function triggerForUser(surveyName: string, userId?: number): void {
+
+    if (!userId) {
+        Sprig.track(surveyName)
+        return
+    }
+
+    Sprig.identifyAndTrack({
+        anonymousId: '',
+        eventName: surveyName,
+        metadata: undefined,
+        userId: `${userId}`,
+    })
+}
diff --git a/src-ts/lib/global-config.model.ts b/src-ts/lib/global-config.model.ts
@@ -16,6 +16,9 @@ export interface GlobalConfig {
         SERVICE: string
     }
     REAUTH_OFFSET: number
+    SPRIG: {
+        ENVIRONMENT_ID: string
+    }
     STRIPE: {
         ADMIN_TOKEN: string
         API_KEY: string

diff --git a/src-ts/lib/index.ts b/src-ts/lib/index.ts
@@ -18,6 +18,7 @@ export {
     logError,
     logInfo,
     logInitialize,
+    surveyTriggerForUser,
     textFormatDateLocaleShortString,
     textFormatGetSafeString,
     textFormatMoneyLocaleString,

diff --git a/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx b/src-ts/tools/learn/free-code-camp/FreeCodeCamp.tsx
@@ -17,12 +17,16 @@ import {
     LoadingSpinner,
     profileContext,
     ProfileContextData,
+    surveyTriggerForUser,
+    textFormatGetSafeString,
 } from '../../../lib'
 import {
     CoursesProviderData,
     LearnLesson,
     LearnModule,
     LearnModuleProgress,
+    LearnModuleStatus,
+    LearnUserCertificationProgress,
     LessonProviderData,
     useGetCourses,
     useGetLesson,
@@ -52,11 +56,14 @@ const FreeCodeCamp: FC<{}> = () => {
 
     const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
-    const providerParam: string = routeParams.provider ?? ''
+    const providerParam: string = textFormatGetSafeString(routeParams.provider)
 
-    const [certificationParam, setCourseParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.certification ?? '')
-    const [moduleParam, setModuleParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.module ?? '')
-    const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>] = useState(routeParams.lesson ?? '')
+    const [certificationParam, setCourseParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.certification))
+    const [moduleParam, setModuleParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.module))
+    const [lessonParam, setLessonParam]: [string, Dispatch<SetStateAction<string>>]
+        = useState(textFormatGetSafeString(routeParams.lesson))
 
     const {
         certificationProgress: certificateProgress,
@@ -83,11 +90,11 @@ const FreeCodeCamp: FC<{}> = () => {
 
     const ready: boolean = profileReady && courseDataReady && lessonReady && (!isLoggedIn || progressReady)
 
-    const certification: string = lesson?.course.certification ?? ''
-    const module: string = lesson?.module.title ?? ''
+    const certification: string = textFormatGetSafeString(lesson?.course.certification)
+    const module: string = textFormatGetSafeString(lesson?.module.title)
     const breadcrumb: Array<BreadcrumbItemModel> = useLearnBreadcrumb([
         {
-            name: lesson?.course.title ?? '',
+            name: textFormatGetSafeString(lesson?.course.title),
             url: getCoursePath(providerParam, certification),
         },
         {
@@ -96,7 +103,8 @@ const FreeCodeCamp: FC<{}> = () => {
         },
     ])
 
-    const currentModuleData: LearnModule | undefined = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
+    const currentModuleData: LearnModule | undefined
+        = useMemo(() => courseData?.modules.find(d => d.key === moduleParam), [courseData, moduleParam])
 
     const currentStepIndex: number = useMemo(() => {
         if (!currentModuleData) {
@@ -155,7 +163,7 @@ const FreeCodeCamp: FC<{}> = () => {
         }
     }
 
-    function handleFccLessonReady(lessonPath: string): void {
+    const handleFccLessonReady: (lessonPath: string) => void = useCallback((lessonPath: string) => {
 
         const [nLessonPath, modulePath, coursePath]: Array<string> = lessonPath.replace(/\/$/, '')
             .split('/')
@@ -195,29 +203,56 @@ const FreeCodeCamp: FC<{}> = () => {
                     .then(setCertificateProgress)
             }, 500)
         }
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        certificateProgress,
+        lesson?.course.certificationId,
+        lesson?.course.id,
+        profile?.userId,
+    ])
+
+    const handleFccLessonComplete: (challengeUuid: string) => void = useCallback((challengeUuid: string) => {
 
-    function handleFccLessonComplete(challengeUuid: string): void {
         const currentLesson: { [key: string]: string } = {
             lesson: lessonParam,
             module: moduleParam,
             uuid: challengeUuid,
         }
-        if (certificateProgress) {
-            userCertificationProgressUpdateAsync(
-                certificateProgress.id,
-                UserCertificationUpdateProgressActions.completeLesson,
-                currentLesson,
-            )
-                .then(setCertificateProgress)
+
+        if (!certificateProgress) {
+            return
         }
-    }
+
+        userCertificationProgressUpdateAsync(
+            certificateProgress.id,
+            UserCertificationUpdateProgressActions.completeLesson,
+            currentLesson,
+        )
+            .then((progress: LearnUserCertificationProgress) => {
+
+                setCertificateProgress(progress)
+
+                // if this is the last lesson of the first module, show the survey
+                const firstModule: LearnModuleProgress = progress.modules[0]
+                if (moduleParam === firstModule.module
+                    && firstModule.moduleStatus === LearnModuleStatus.completed) {
+
+                    surveyTriggerForUser('TCA First Module Completed', profile?.userId)
+                }
+            })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        certificateProgress,
+        lessonParam,
+        moduleParam,
+    ])
 
     /**
      * Handle the navigation away from the last step of the course in the FCC frame
      * @returns
      */
-    function handleFccLastLessonNavigation(): void {
+    const handleFccLastLessonNavigation: () => void = useCallback(() => {
+
         if (!certificateProgress) {
             return
         }
@@ -236,15 +271,18 @@ const FreeCodeCamp: FC<{}> = () => {
         // course is not completed yet,
         // so we find the first incomplete lesson
         // and redirect user to it for a continuous flow
-        const firstIncompleteModule: LearnModuleProgress | undefined = certificateProgress.modules.find(m => m.completedPercentage !== 100)
-        const moduleLessons: Array<LearnLesson> | undefined = courseData?.modules.find(m => m.key === firstIncompleteModule?.module)?.lessons
+        const firstIncompleteModule: LearnModuleProgress | 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))
+        const firstIncompleteLesson: LearnLesson | undefined
+            = moduleLessons.find(l => !completedLessons.includes(l.dashedName))
         if (!firstIncompleteLesson) {
             // case unknown, return
             return
@@ -258,7 +296,13 @@ const FreeCodeCamp: FC<{}> = () => {
         )
 
         navigate(nextLessonPath)
-    }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        certificateProgress,
+        certificationParam,
+        courseData?.modules,
+        providerParam,
+    ])
 
     useEffect(() => {
 
@@ -289,18 +333,19 @@ const FreeCodeCamp: FC<{}> = () => {
                 )
                 navigate(completedPath)
             })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         certificateProgress,
         certificationParam,
-        navigate,
-        providerParam,
         profile?.handle,
-        setCertificateProgress,
+        profile?.userId,
+        providerParam,
     ])
 
     useEffect(() => {
         if (courseDataReady && courseData) {
-            const moduleParamData: LearnModule = courseData.modules.find(m => m.key === moduleParam) ?? courseData.modules[0]
+            const moduleParamData: LearnModule = courseData.modules.find(m => m.key === moduleParam)
+                ?? courseData.modules[0]
             const lessonParamExists: boolean = !!moduleParamData?.lessons.find(l => l.dashedName === lessonParam)
 
             if (!lessonParamExists) {
@@ -314,13 +359,13 @@ const FreeCodeCamp: FC<{}> = () => {
                 navigate(lessonPath)
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         certificationParam,
         courseData,
         courseDataReady,
         lessonParam,
         moduleParam,
-        navigate,
         providerParam,
     ])
 

diff --git a/yarn.lock b/yarn.lock
@@ -2070,6 +2070,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@sprig-technologies/sprig-browser@^2.20.1":
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/@sprig-technologies/sprig-browser/-/sprig-browser-2.20.1.tgz#4c655052dc02514370e92886724cc740337b7d16"
+  integrity sha512-Qkt1yEhSz9FIXpDMjMzWklscF0HmKCmLebYDvVpJxqbEeYzCEQjzeD4WW5RTpvCgyuwzXT0At4Xx9UijCWAS8Q==
+
 "@stripe/react-stripe-js@1.13.0":
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.13.0.tgz#8e0bde2b116870d2aca52976f46a92d81983e235"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { triggerForUser as surveyTriggerForUser } from './survey.functions'