PM-3352 Validate skills during onboarding

src/apps/onboarding/src/pages/onboarding/index.tsx

@@ -1,12 +1,10 @@
 import { FC, useContext, useEffect } from 'react'
 import { Outlet, Routes, useLocation } from 'react-router-dom'
-import { Provider, useDispatch, useSelector } from 'react-redux'
+import { Provider, useDispatch } from 'react-redux'
 import classNames from 'classnames'
 
 import { routerContext, RouterContextData } from '~/libs/core'
-import { Member } from '~/apps/talent-search/src/lib/models'
 import { SharedSwrConfig } from '~/libs/shared'
-import { EnvironmentConfig } from '~/config'
 
 import { onboardRouteId } from '../../onboarding.routes'
 import { fetchMemberInfo, fetchMemberTraits } from '../../redux/actions/member'
@@ -20,7 +18,6 @@ const OnboardingContent: FC<{
     const { getChildRoutes }: RouterContextData = useContext(routerContext)
     const location = useLocation()
     const dispatch = useDispatch()
-    const reduxMemberInfo: Member = useSelector((state: any) => state.member.memberInfo)
 
     useEffect(() => {
         dispatch(fetchMemberInfo())
@@ -43,11 +40,6 @@ const OnboardingContent: FC<{
                     {getChildRoutes(onboardRouteId)}
                 </Routes>
             </div>
-            <span className={styles.textFooter}>
-                I will complete this onboarding later,
-                <a href={`${EnvironmentConfig.USER_PROFILE_URL}/${reduxMemberInfo?.handle}`}> skip for now</a>
-                .
-            </span>
         </>
     )
 }

src/apps/onboarding/src/pages/onboarding/styles.module.scss

@@ -68,19 +68,3 @@
         text-transform: none;
     }
 }
-
-.textFooter {
-    color: $black-80;
-    margin-top: 64px;
-    text-align: center;
-
-    @include ltemd {
-        margin-top: 32px;
-        max-width: 284px;
-    }
-
-    a {
-        color: $turq-160;
-        font-weight: 500;
-    }
-}

src/apps/onboarding/src/pages/skills/index.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom'
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { connect } from 'react-redux'
 import classNames from 'classnames'
 
@@ -17,8 +17,15 @@ export const PageSkillsContent: FC<{
     const navigate: any = useNavigate()
     const [loading, setLoading] = useState(false)
     const editor: MemberSkillEditor = useMemberSkillEditor()
+    const [showValidationError, setShowValidationError] = useState(false)
 
     async function saveSkills(): Promise<void> {
+        if (!editor.hasValidSkills()) {
+            setShowValidationError(true)
+            return
+        }
+
+        setShowValidationError(false)
         setLoading(true)
         try {
             await editor.saveSkills()
@@ -29,6 +36,12 @@ export const PageSkillsContent: FC<{
         navigate('../open-to-work')
     }
 
+    useEffect(() => {
+        if (editor.hasValidSkills()) {
+            setShowValidationError(false)
+        }
+    }, [editor])
+
     return (
         <div className={classNames('d-flex flex-column', styles.container)}>
             <h2>
@@ -56,6 +69,11 @@ export const PageSkillsContent: FC<{
                 progress={1}
                 maxStep={5}
             />
+            {showValidationError && (
+                <span className={styles.validationError}>
+                    * Please select at least one skill in both Principal and Additional Skills.
+                </span>
+            )}
 
             <div className={classNames('d-flex justify-content-end', styles.blockFooter)}>
                 <Button

src/apps/onboarding/src/pages/skills/styles.module.scss

@@ -14,4 +14,9 @@
 
 .blockSkilTags {
   gap: 10px;
-}
+}
+
+.validationError {
+  color: #EA1900;
+  font-size: small;
+}

src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx

@@ -21,6 +21,7 @@ import { InputSkillSelector } from '../input-skill-selector'
 export interface MemberSkillEditor {
     formInput: ReactNode
     saveSkills: () => Promise<void>,
+    hasValidSkills: () => boolean
 }
 
 /**
@@ -152,10 +153,16 @@ export const useMemberSkillEditor = ({
         return () => { mounted = false }
     }, [profile?.userId])
 
+    const hasValidSkills = (): boolean => {
+        const principalCount = principalSkills.length
+        const additionalCount = additionalSkills.length
+        return principalCount > 0 && additionalCount > 0
+    }
+
     // build the form input
     const formInput = useMemo(() => (
         <>
-            <p className='body-main-bold'>Principal Skills</p>
+            <p className='body-main-bold'>Principal Skills *</p>
             <p>
                 Add up to 10 of the skills that are central to your expertise.
                 These will be showcased at the top of your profile.
@@ -168,7 +175,7 @@ export const useMemberSkillEditor = ({
                 limit={MAX_PRINCIPAL_SKILLS_COUNT}
             />
 
-            <p className='body-main-bold'>Additional skills</p>
+            <p className='body-main-bold'>Additional skills *</p>
             <p>
                 All your other skills that make you a valuable asset on a project or a team.
             </p>
@@ -184,6 +191,7 @@ export const useMemberSkillEditor = ({
 
     return {
         formInput,
+        hasValidSkills,
         saveSkills,
     }
 }