TCA-755 #comment This commit adds the Sprig SDK and creates a wrapper function for surveys. #time 1h

Author: brooketopcoder

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",

public/index.html

@@ -46,19 +46,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-
-    <script>
-        (function (l, e, a, p) {
-            if (window.Sprig) return;
-            window.Sprig = function () { S._queue.push(arguments) }
-            var S = window.Sprig; S.appId = a; S._queue = []; window.UserLeap = S;
-            a = l.createElement('script');
-            a.async = 1; a.src = e + '?id=' + S.appId;
-            p = l.getElementsByTagName('script')[0];
-            p.parentNode.insertBefore(a, p);
-        })(document, 'https://cdn.sprig.com/shim.js', 'bUcousVQ0-yF');
-    </script>
-
 </body>
 
 </html>

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:

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:

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'

src-ts/lib/functions/survey-functions/index.ts

@@ -0,0 +1 @@
+export { triggerForUser as surveyTriggerForUser } from './survey.functions'

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}`,
+    })
+}

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

src-ts/lib/index.ts

@@ -18,6 +18,7 @@ export {
     logError,
     logInfo,
     logInitialize,
+    surveyTriggerForUser,
     textFormatDateLocaleShortString,
     textFormatGetSafeString,
     textFormatMoneyLocaleString,

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

@@ -17,6 +17,7 @@ import {
     LoadingSpinner,
     profileContext,
     ProfileContextData,
+    surveyTriggerForUser,
     textFormatGetSafeString,
 } from '../../../lib'
 import {
@@ -203,43 +204,55 @@ const FreeCodeCamp: FC<{}> = () => {
             }, 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) => {
+
         const currentLesson: { [key: string]: string } = {
             lesson: lessonParam,
             module: moduleParam,
             uuid: challengeUuid,
         }
-        if (certificateProgress) {
-            userCertificationProgressUpdateAsync(
-                certificateProgress.id,
-                UserCertificationUpdateProgressActions.completeLesson,
-                currentLesson,
-            )
-                .then((progress: LearnUserCertificationProgress) => {
 
-                    setCertificateProgress(progress)
+        if (!certificateProgress) {
+            return
+        }
 
-                    // if this is the last lesson of the first module, show the survey
-                    const firstModule: LearnModuleProgress = progress.modules[0]
+        userCertificationProgressUpdateAsync(
+            certificateProgress.id,
+            UserCertificationUpdateProgressActions.completeLesson,
+            currentLesson,
+        )
+            .then((progress: LearnUserCertificationProgress) => {
 
-                    if (moduleParam === firstModule.module
-                        && firstModule.moduleStatus === LearnModuleStatus.completed) {
+                setCertificateProgress(progress)
 
-                        // TODO: use the Sprig SDK to send the event w/the user
-                        window.Sprig('track', 'TCA First Module Completed')
-                    }
-                })
-        }
+                // 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
      */
     const handleFccLastLessonNavigation: () => void = useCallback(() => {
+
         if (!certificateProgress) {
             return
         }
@@ -284,7 +297,12 @@ const FreeCodeCamp: FC<{}> = () => {
 
         navigate(nextLessonPath)
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
+    }, [
+        certificateProgress,
+        certificationParam,
+        courseData?.modules,
+        providerParam,
+    ])
 
     useEffect(() => {
 
@@ -315,13 +333,13 @@ const FreeCodeCamp: FC<{}> = () => {
                 )
                 navigate(completedPath)
             })
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         certificateProgress,
         certificationParam,
-        navigate,
-        providerParam,
         profile?.handle,
-        setCertificateProgress,
+        profile?.userId,
+        providerParam,
     ])
 
     useEffect(() => {
@@ -341,13 +359,13 @@ const FreeCodeCamp: FC<{}> = () => {
                 navigate(lessonPath)
             }
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         certificationParam,
         courseData,
         courseDataReady,
         lessonParam,
         moduleParam,
-        navigate,
         providerParam,
     ])