Add WhoIsThisTrackForView, pass down seniority level

app/javascript/components/modals/track-welcome-modal/LHS/TrackWelcomeModal.machine.ts

@@ -1,4 +1,4 @@
-import { assign, createMachine } from 'xstate'
+import { createMachine } from 'xstate'
 
 export type StateEvent =
   | 'HAS_LEARNING_MODE'

app/javascript/components/modals/track-welcome-modal/TrackWelcomeModal.tsx

@@ -12,6 +12,7 @@ import {
 } from './TrackWelcomeModal.types'
 import { ErrorBoundary, ErrorMessage } from '@/components/ErrorBoundary'
 import { ErrorFallback } from '@/components/common/ErrorFallback'
+import { SeniorityLevel } from '../welcome-modal/WelcomeModal'
 
 const DEFAULT_ERROR = new Error('Unable to dismiss modal')
 
@@ -20,16 +21,19 @@ export const TrackContext = createContext<{
   currentState: CurrentState
   send: any
   links: TrackWelcomeModalLinks
+  userSeniority: SeniorityLevel
 }>({
   track: {} as Track,
   currentState: {} as CurrentState,
   send: () => {},
   links: {} as TrackWelcomeModalLinks,
+  userSeniority: '' as SeniorityLevel,
 })
 
 export const TrackWelcomeModal = ({
   links,
   track,
+  userSeniority,
 }: Omit<ModalProps, 'className' | 'open' | 'onClose'> &
   TrackWelcomeModalProps): JSX.Element => {
   const {
@@ -46,7 +50,9 @@ export const TrackWelcomeModal = ({
       onClose={() => null}
       className="m-track-welcome-modal"
     >
-      <TrackContext.Provider value={{ track, currentState, send, links }}>
+      <TrackContext.Provider
+        value={{ track, currentState, send, links, userSeniority }}
+      >
         <div className="flex">
           <LHS />
           <RHS />

app/javascript/components/modals/track-welcome-modal/TrackWelcomeModal.types.tsx

@@ -2,10 +2,12 @@ import { State, ResolveTypegenMeta, BaseActionObject, ServiceMap } from 'xstate'
 import { StateEvent } from './LHS/TrackWelcomeModal.machine'
 import { Typegen0 } from './LHS/TrackWelcomeModal.machine.typegen'
 import { Track } from '@/components/types'
+import { SeniorityLevel } from '../welcome-modal/WelcomeModal'
 
 export type TrackWelcomeModalProps = {
   track: Track
   links: TrackWelcomeModalLinks
+  userSeniority: SeniorityLevel
 }
 
 export type TrackWelcomeModalLinks = Record<

app/javascript/components/modals/track-welcome-modal/TrackWelcomeModalRHS.tsx

@@ -1,9 +1,15 @@
 import React, { useContext } from 'react'
 import VimeoEmbed from '@/components/common/VimeoEmbed'
 import { TrackContext } from './TrackWelcomeModal'
+import { Track } from '@/components/types'
 
 export function TrackWelcomeModalRHS(): JSX.Element {
-  const { track } = useContext(TrackContext)
+  const { track, currentState } = useContext(TrackContext)
+
+  return <VideoStepView track={track} />
+}
+
+function VideoStepView({ track }: { track: Track }): JSX.Element {
   return (
     <div className="rhs">
       <div className="rounded-8 p-20 bg-backgroundColorD border-1 border-borderColor7">
@@ -21,3 +27,21 @@ export function TrackWelcomeModalRHS(): JSX.Element {
     </div>
   )
 }
+
+function WhoIsThisTrackForView({ track }: { track: Track }): JSX.Element {
+  return (
+    <div className="rhs">
+      <h2 className="text-h2 mb-16">Who is this track for?</h2>
+      <p className="mb-16">
+        {track.title} is for developers who are new to {track.title} and want to
+        learn the basics. If you're already familiar with {track.title}, you
+        might want to skip this track.
+      </p>
+      <p className="mb-16">
+        If you're not sure, it's a good idea to start with the Learning Mode.
+        This mode will guide you through the basics and help you get up to
+        speed.
+      </p>
+    </div>
+  )
+}