MP-168 how skills work modal

Author: kkartunov

src/apps/profiles/src/config/constants.ts

@@ -8,6 +8,8 @@ export const TC_VERIFIED_SKILL_LABEL: string = 'Topcoder Verified'
 
 export const EDIT_MODE_QUERY_PARAM: string = 'edit-mode'
 
+export const TALENT_SEARCH_MODE_QUERY_PARAM: string = 'talent-search'
+
 export enum profileEditModes {
     aboutMe = 'aboutMe',
     languages = 'languages',

src/apps/profiles/src/member-profile/skills/HowSkillsWorkModal/HowSkillsWorkModal.module.scss

@@ -0,0 +1,30 @@
+@import '@libs/ui/styles/includes';
+
+.container {
+    display: flex;
+    flex-direction: column;
+
+    p {
+        margin-bottom: $sp-4;
+    }
+
+    ul {
+        list-style: disc;
+        margin: 0 0 $sp-2 $sp-4;
+
+        li {
+            margin-bottom: $sp-4;
+        }
+    }
+
+    .checkIconRow {
+        display: flex;
+
+        svg {
+            margin: 0 $sp-2;
+            width: 24px;
+            height: 24px;
+            color: $turq-120;
+        }
+    }
+}

src/apps/profiles/src/member-profile/skills/HowSkillsWorkModal/HowSkillsWorkModal.tsx

@@ -0,0 +1,79 @@
+import { FC } from 'react'
+
+import { BaseModal, IconOutline } from '~/libs/ui'
+
+import styles from './HowSkillsWorkModal.module.scss'
+
+interface HowSkillsWorkModalProps {
+    onClose: () => void
+    isTalentSearch?: boolean
+}
+
+const HowSkillsWorkModal: FC<HowSkillsWorkModalProps> = (props: HowSkillsWorkModalProps) => (
+    <BaseModal
+        onClose={props.onClose}
+        open
+        title='How Skills Work?'
+        size='lg'
+    >
+        {
+            props.isTalentSearch ? (
+                <div className={styles.container}>
+                    <p className='body-large-bold'>
+                        Topcoder Skill Matching
+                    </p>
+                    <p>Topcoder identifies experts that will best match the skills you are searching for.</p>
+                    <p className={styles.checkIconRow}>
+                        Look for the proven
+                        <IconOutline.CheckCircleIcon />
+                        next to skills.
+                    </p>
+                    <p>Here’s how it works:</p>
+                    <ul>
+                        <li>Experts perform specific Topcoder opportunities</li>
+                        <li>Each opportunity has associated skills (ex: javascript, HTML)</li>
+                        <li>
+                            Experts prove they are proficient in these skills
+                            by completing opportunities on the platform
+                        </li>
+                        <li>Topcoder tracks and labels these skills, displaying what skills have been proven</li>
+                        <li>The more opportunities our experts complete the higher they rate for associated skills</li>
+                    </ul>
+                    <p>
+                        Experts can also self-proclaim skills that have not yet been proven.
+                        These will display as skills without a checkmark.
+                    </p>
+                </div>
+            ) : (
+                <div className={styles.container}>
+                    <p className='body-large-bold'>
+                        Topcoder Proven Skills
+                    </p>
+                    <p>Our experts work hard to prove their skills through Topcoder opportunities.</p>
+                    <p className={styles.checkIconRow}>
+                        Look for the proven
+                        <IconOutline.CheckCircleIcon />
+                        next to skills.
+                    </p>
+                    <p>Here’s how it works:</p>
+                    <ul>
+                        <li>Experts perform specific Topcoder opportunities</li>
+                        <li>Each opportunity has associated skills (ex: javascript, HTML)</li>
+                        <li>
+                            Experts prove they are proficient in these skills
+                            by completing opportunities on the platform
+                        </li>
+                        <li>Topcoder tracks and labels these skills, displaying what skills have been proven</li>
+                        <li>The more opportunities our experts complete the higher they rate for associated skills</li>
+                    </ul>
+                    <p>
+                        Experts can also self-proclaim skills that have not yet been proven.
+                        These will display as skills without a checkmark.
+                    </p>
+                </div>
+            )
+        }
+    </BaseModal>
+)
+
+export default HowSkillsWorkModal

src/apps/profiles/src/member-profile/skills/HowSkillsWorkModal/index.ts

@@ -0,0 +1 @@
+export { default as HowSkillsWorkModal } from './HowSkillsWorkModal'

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss

@@ -57,13 +57,4 @@
             }
         }
     }
-
-    .legendWrap {
-        display: flex;
-        color: $link-blue-dark;
-
-        &:hover {
-            text-decoration: underline;
-        }
-    }
 }

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -3,12 +3,13 @@ import { useSearchParams } from 'react-router-dom'
 import classNames from 'classnames'
 
 import { isVerifiedSkill, UserEMSISkill, UserProfile } from '~/libs/core'
-import { IconOutline } from '~/libs/ui'
+import { Button, IconOutline } from '~/libs/ui'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
-import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
+import { EDIT_MODE_QUERY_PARAM, profileEditModes, TALENT_SEARCH_MODE_QUERY_PARAM } from '../../config'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
+import { HowSkillsWorkModal } from './HowSkillsWorkModal'
 import styles from './MemberSkillsInfo.module.scss'
 
 interface MemberSkillsInfoProps {
@@ -20,6 +21,7 @@ interface MemberSkillsInfoProps {
 const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProps) => {
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
+    const talentSearchQuery: string | null = queryParams.get(TALENT_SEARCH_MODE_QUERY_PARAM)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
@@ -33,10 +35,20 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const [howSkillsWorkVisible, setHowSkillsWorkVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
+    const [isTalentSearch, setIsTalentSearch]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.skills) {
             setIsEditMode(true)
         }
+
+        if (talentSearchQuery === 'true') {
+            setIsTalentSearch(true)
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.authProfile])
 
@@ -55,6 +67,14 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         }, 1500)
     }
 
+    function handleHowSkillsWorkClick(): void {
+        setHowSkillsWorkVisible(true)
+    }
+
+    function handleHowSkillsWorkClose(): void {
+        setHowSkillsWorkVisible(false)
+    }
+
     return memberEMSISkills ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -68,12 +88,12 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                         )
                     }
                 </div>
-                <a
-                    className={styles.legendWrap}
-                    href='/'
-                >
-                    How skills work?
-                </a>
+                <Button
+                    link
+                    label='How skills work?'
+                    onClick={handleHowSkillsWorkClick}
+                    variant='linkblue'
+                />
             </div>
 
             <div className={styles.skillsWrap}>
@@ -117,6 +137,15 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     />
                 )
             }
+
+            {
+                howSkillsWorkVisible && (
+                    <HowSkillsWorkModal
+                        onClose={handleHowSkillsWorkClose}
+                        isTalentSearch={isTalentSearch}
+                    />
+                )
+            }
         </div>
     ) : <></>
 }