apply the onboarding result

Author: medyo

src/features/onboarding/components/OnboardingModal.tsx

@@ -1,7 +1,16 @@
 import { useEffect } from 'react'
 import ReactModal from 'react-modal'
 import { Steps } from 'src/components/Elements'
-import { trackOnboardingFinish, trackOnboardingSkip, trackOnboardingStart } from 'src/lib/analytics'
+import { SUPPORTED_CARDS } from 'src/config'
+import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
+import {
+  identifyUserCards,
+  identifyUserLanguages,
+  identifyUserOccupation,
+  trackOnboardingFinish,
+  trackOnboardingSkip,
+  trackOnboardingStart,
+} from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { HelloTab } from './steps/HelloTab'
 import { LanguagesTab } from './steps/LanguagesTab'
@@ -14,7 +23,8 @@ type OnboardingModalProps = {
 }
 
 export const OnboardingModal = ({ showOnboarding, setShowOnboarding }: OnboardingModalProps) => {
-  const { markOnboardingAsCompleted } = useUserPreferences()
+  const { markOnboardingAsCompleted, setTags, setCards } = useUserPreferences()
+  const { supportedTags } = useRemoteConfigStore()
 
   useEffect(() => {
     trackOnboardingStart()
@@ -52,6 +62,29 @@ export const OnboardingModal = ({ showOnboarding, setShowOnboarding }: Onboardin
             if (tabsData) {
               const { icon, ...occupation } = tabsData
               markOnboardingAsCompleted(occupation)
+              identifyUserOccupation(occupation.title)
+
+              const tags =
+                (occupation.tags
+                  .map((tag) => supportedTags.find((st) => st.value === tag))
+                  .filter(Boolean) as Tag[]) || []
+
+              setTags(tags)
+              identifyUserLanguages(tags.map((tag) => tag.value))
+
+              const cards =
+                occupation.sources
+                  .map((source) => SUPPORTED_CARDS.find((sc) => sc.value === source))
+                  .filter(Boolean)
+                  .map((source, index) => {
+                    return {
+                      id: index,
+                      name: source?.value || '',
+                    }
+                  }) || []
+
+              setCards(cards)
+              identifyUserCards(cards.map((card) => card.name))
             }
 
             setShowOnboarding(false)

src/features/onboarding/components/steps/LanguagesTab.tsx

@@ -2,7 +2,12 @@ import { ChipsSet, StepProps } from 'src/components/Elements'
 import { useRemoteConfigStore } from 'src/features/remoteConfig'
 import { Occupation } from '../../types'
 
-export const LanguagesTab = ({ moveToPrevious, moveToNext, tabsData }: StepProps<Occupation>) => {
+export const LanguagesTab = ({
+  moveToPrevious,
+  moveToNext,
+  setTabsData,
+  tabsData,
+}: StepProps<Occupation>) => {
   const { supportedTags } = useRemoteConfigStore()
 
   const sources = supportedTags
@@ -21,7 +26,14 @@ export const LanguagesTab = ({ moveToPrevious, moveToNext, tabsData }: StepProps
         <p className="tabBody">Select the languages you're interested in following.</p>
       </div>
       <div className="tabContent sources">
-        <ChipsSet options={sources} defaultValues={tabsData.tags} />
+        <ChipsSet
+          canSelectMultiple={true}
+          options={sources}
+          defaultValues={tabsData.tags}
+          onChange={(_, selectedChips) => {
+            setTabsData({ ...tabsData, tags: selectedChips.map((chip) => chip.value) })
+          }}
+        />
       </div>
       <div className="tabFooter">
         <button onClick={() => moveToPrevious && moveToPrevious()}>Back</button>

src/features/onboarding/components/steps/SourcesTab.tsx

@@ -3,7 +3,12 @@ import { ChipsSet, StepProps } from 'src/components/Elements'
 import { SUPPORTED_CARDS } from '../../../../config'
 import { Occupation } from '../../types'
 
-export const SourcesTab = ({ moveToPrevious, moveToNext, tabsData }: StepProps<Occupation>) => {
+export const SourcesTab = ({
+  moveToPrevious,
+  moveToNext,
+  setTabsData,
+  tabsData,
+}: StepProps<Occupation>) => {
   const sources = SUPPORTED_CARDS.map((source) => {
     return {
       label: source.label,
@@ -19,7 +24,19 @@ export const SourcesTab = ({ moveToPrevious, moveToNext, tabsData }: StepProps<O
         <p className="tabBody">Select the sources you're interested in following.</p>
       </div>
       <div className="tabContent sources">
-        <ChipsSet options={sources} defaultValues={tabsData.sources} />
+        <ChipsSet
+          canSelectMultiple={true}
+          options={sources}
+          defaultValues={tabsData.sources}
+          onChange={(_, selectedChips) => {
+            console.log(
+              'sources',
+              selectedChips.map((chip) => chip.value)
+            )
+
+            setTabsData({ ...tabsData, sources: selectedChips.map((chip) => chip.value) })
+          }}
+        />
       </div>
       <div className="tabFooter">
         <button onClick={() => moveToPrevious && moveToPrevious()}>Back</button>

src/lib/analytics.ts

@@ -90,7 +90,7 @@ export const setupIdentification = () => {
   identifyUserSearchEngine(searchEngine)
   identifyUserLinksInNewTab(openLinksNewTab)
   if (onboardingResult?.title) {
-    identifyUserProperty(Attributes.OCCUPATION, onboardingResult.title)
+    identifyUserOccupation(onboardingResult.title)
   }
 }
 
@@ -297,6 +297,10 @@ export const identifyUserSearchEngine = (searchEngineName: string) => {
 export const identifyUserLinksInNewTab = (enabled: boolean) => {
   identifyUserProperty(Attributes.TARGET, enabled ? 'New Tab' : 'Same Tab')
 }
+export const identifyUserOccupation = (occupation: string) => {
+  identifyUserProperty(Attributes.OCCUPATION, occupation)
+}
+
 // Private functions
 type trackEventProps = {
   object: Exclude<Objects, null | undefined>