Talent search UI fixes

src/apps/talent-search/src/lib/services/sprig-survey.ts

@@ -3,6 +3,10 @@ import { UserProfile } from '~/libs/core'
 
 import { SPRIG_CES_SURVEY_ID } from '../../config'
 
-export function triggerSprigSurvey({ userId }: UserProfile): void {
-    sprigTriggerForUser(SPRIG_CES_SURVEY_ID, userId)
+export function triggerSprigSurvey(profile?: UserProfile): void {
+    if (profile?.userId) {
+        sprigTriggerForUser(SPRIG_CES_SURVEY_ID, profile?.userId)
+    } else {
+        sprigTriggerForUser(SPRIG_CES_SURVEY_ID)
+    }
 }

src/apps/talent-search/src/routes/search-page/SearchPage.tsx

@@ -1,24 +1,30 @@
-import { FC, useRef, useState } from 'react'
+import { FC, useContext, useEffect, useRef, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 
+import { profileContext, ProfileContextData } from '~/libs/core'
 import { ContentLayout, IconOutline } from '~/libs/ui'
 import { Skill } from '~/libs/shared'
 
 import { SearchInput } from '../../components/search-input'
 import { PopularSkills } from '../../components/popular-skills'
 import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
 import { encodeUrlQuerySearch } from '../../lib/utils/search-query'
+import { triggerSprigSurvey } from '../../lib/services'
 
 import styles from './SearchPage.module.scss'
 
 export const SearchPage: FC = () => {
+    const sprigFlag = useRef(false)
+
     const [params] = useSearchParams()
     const isMissingProfileRoute = params.get('memberNotFound') !== null
 
     const searchInputRef = useRef<HTMLInputElement>()
     const navigate = useNavigate()
     const [skillsFilter, setSkillsFilter] = useState<Skill[]>([])
 
+    const { profile }: ProfileContextData = useContext(profileContext)
+
     function navigateToResults(): void {
         const searchParams = encodeUrlQuerySearch(skillsFilter)
         navigate(`${TALENT_SEARCH_PATHS.results}?${searchParams}`)
@@ -29,6 +35,18 @@ export const SearchPage: FC = () => {
         searchInputRef.current?.focus()
     }
 
+    useEffect(() => {
+        if (!sprigFlag.current) {
+            if (profile?.userId) {
+                triggerSprigSurvey(profile)
+            } else {
+                triggerSprigSurvey()
+            }
+
+            sprigFlag.current = true
+        }
+    }, [profile, skillsFilter])
+
     function renderHeader(): JSX.Element {
         return isMissingProfileRoute ? (
             <>

src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx

@@ -1,25 +1,21 @@
-import { FC, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { FC, useCallback, useState } from 'react'
 import classNames from 'classnames'
 
-import { profileContext, ProfileContextData } from '~/libs/core'
 import { Button, ContentLayout, LinkButton, LoadingCircles } from '~/libs/ui'
-import { EmsiSkillSources, HowSkillsWorkModal, SkillPill } from '~/libs/shared'
+import { HowSkillsWorkModal } from '~/libs/shared'
 
 import { TalentCard } from '../../components/talent-card'
 import { SearchInput } from '../../components/search-input'
 import { useUrlQuerySearchParms } from '../../lib/utils/search-query'
 import {
     InfiniteTalentMatchesResposne,
-    triggerSprigSurvey,
     useInfiniteTalentMatches,
 } from '../../lib/services'
 
 import styles from './SearchResultsPage.module.scss'
 
 const SearchResultsPage: FC = () => {
-    const sprigFlag = useRef(false)
     const [showSkillsModal, setShowSkillsModal] = useState(false)
-    const { profile }: ProfileContextData = useContext(profileContext)
 
     const [skills, setSkills] = useUrlQuerySearchParms('q')
     const {
@@ -34,20 +30,15 @@ const SearchResultsPage: FC = () => {
 
     const skillsModalTriggerBtn = (
         <div className={styles.skillsPill}>
-            <SkillPill
-                skill={{ name: 'Proven skills', skillSources: [EmsiSkillSources.challengeWin] }}
+            <Button
+                link
+                label='Proven skills'
                 onClick={toggleSkillsModal}
+                variant='linkblue'
             />
         </div>
     )
 
-    useEffect(() => {
-        if (profile?.userId && matches?.length && !sprigFlag.current) {
-            sprigFlag.current = true
-            triggerSprigSurvey(profile)
-        }
-    }, [profile, matches])
-
     return (
         <>
             <div className={styles.headerWrap}>