Merge pull request #807 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/lib/helpers.ts

@@ -32,6 +32,18 @@ export function subTrackLabelToHumanName(label: string): string {
             return 'First2Finish'
         case 'CONCEPTUALIZATION':
             return 'Conceptualization'
+        case 'SPECIFICATION':
+            return 'Specification'
+        case 'BUG_HUNT':
+            return 'Bug Hunt'
+        case 'TEST_SUITES':
+            return 'Test Suites'
+        case 'TEST_SCENARIOS':
+            return 'Test Scenarios'
+        case 'CONTENT_CREATION':
+            return 'Content Creation'
+        case 'COPILOT_POSTING':
+            return 'Copilot Posting'
         default: return label
     }
 

src/apps/profiles/src/member-profile/links/MemberLinks.tsx

@@ -83,7 +83,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
         }, 1000)
     }
 
-    return !loading && (canEdit || memberLinks?.links) ? (
+    return !loading && (canEdit || memberLinks?.links?.length) ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
                 <p className='body-main-bold'>Links</p>

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -96,8 +96,6 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
                 </div>
             </div>
 
-            {/* <MemberTCActivityInfo profile={props.profile} /> */}
-
         </ContentLayout>
 
         <OnboardingCompleted authProfile={props.authProfile} />

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

@@ -7,17 +7,48 @@ import styles from './HowSkillsWorkModal.module.scss'
 interface HowSkillsWorkModalProps {
     onClose: () => void
     isTalentSearch?: boolean
+    canEdit?: boolean
 }
 
 const HowSkillsWorkModal: FC<HowSkillsWorkModalProps> = (props: HowSkillsWorkModalProps) => (
     <BaseModal
         onClose={props.onClose}
         open
-        title='How Skills Work?'
+        title='How Skills Work'
         size='lg'
     >
         {
-            props.isTalentSearch ? (
+            !!props.canEdit && (
+                <div className={styles.container}>
+                    <p className='body-large-bold'>
+                        Topcoder Proven Skills
+                    </p>
+                    <p className={styles.checkIconRow}>
+                        Look for the proven
+                        <IconOutline.CheckCircleIcon />
+                        next to skills.
+                    </p>
+                    <p>Here’s how it works:</p>
+                    <ul>
+                        <li>You perform specific Topcoder opportunities</li>
+                        <li>Each opportunity has associated skills (ex: javascript, HTML)</li>
+                        <li>
+                            You can prove you 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>
+                        You can also self-proclaim skills that have not yet been proven.
+                        These will display as skills without a checkmark.
+                    </p>
+                </div>
+            )
+        }
+
+        {
+            !props.canEdit && props.isTalentSearch && (
                 <div className={styles.container}>
                     <p className='body-large-bold'>
                         Topcoder Skill Matching
@@ -44,7 +75,11 @@ const HowSkillsWorkModal: FC<HowSkillsWorkModalProps> = (props: HowSkillsWorkMod
                         These will display as skills without a checkmark.
                     </p>
                 </div>
-            ) : (
+            )
+        }
+
+        {
+            !props.canEdit && !props.isTalentSearch && (
                 <div className={styles.container}>
                     <p className='body-large-bold'>
                         Topcoder Proven Skills

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

@@ -41,6 +41,9 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const [isTalentSearch, setIsTalentSearch]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const [skillsToRender, setSkillsToRender]: [number, Dispatch<SetStateAction<number>>]
+        = useState<number>(10)
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.skills) {
             setIsEditMode(true)
@@ -75,6 +78,10 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
+    function handleExpandSkillsClick(): void {
+        setSkillsToRender(memberEMSISkills.length)
+    }
+
     return memberEMSISkills ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -98,18 +105,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
 
             <div className={styles.skillsWrap}>
                 {memberEMSISkills?.length > 0
-                    ? memberEMSISkills.map((memberEMSISkill: UserEMSISkill) => (
-                        <div
-                            className={classNames(
-                                styles.skillItem,
-                                isVerifiedSkill(memberEMSISkill.skillSources) ? styles.verifiedSkillItem : '',
-                            )}
-                            key={memberEMSISkill.id}
-                        >
-                            {memberEMSISkill.name}
-                            {isVerifiedSkill(memberEMSISkill.skillSources) && <IconOutline.CheckCircleIcon />}
-                        </div>
-                    ))
+                    ? memberEMSISkills.slice(0, skillsToRender)
+                        .map((memberEMSISkill: UserEMSISkill) => (
+                            <div
+                                className={classNames(
+                                    styles.skillItem,
+                                    isVerifiedSkill(memberEMSISkill.skillSources) ? styles.verifiedSkillItem : '',
+                                )}
+                                key={memberEMSISkill.id}
+                            >
+                                {memberEMSISkill.name}
+                                {isVerifiedSkill(memberEMSISkill.skillSources) && <IconOutline.CheckCircleIcon />}
+                            </div>
+                        ))
                     : (
                         <EmptySection
                             title='Topcoder verifies and tracks skills as our members complete projects and challenges.'
@@ -121,6 +129,15 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                             they complete project tasks.
                         </EmptySection>
                     )}
+                {
+                    memberEMSISkills?.length > skillsToRender && (
+                        <Button
+                            primary
+                            label={`+ ${memberEMSISkills.length - skillsToRender}`}
+                            onClick={handleExpandSkillsClick}
+                        />
+                    )
+                }
             </div>
             {canEdit && !memberEMSISkills?.length && (
                 <AddButton
@@ -143,6 +160,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <HowSkillsWorkModal
                         onClose={handleHowSkillsWorkClose}
                         isTalentSearch={isTalentSearch}
+                        canEdit={canEdit}
                     />
                 )
             }

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWin/ChallengeWin.module.scss

@@ -0,0 +1,18 @@
+@import "@libs/ui/styles/includes";
+
+.winWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 $sp-2;
+    cursor: pointer;
+    min-width: 115px;
+
+    .winCnt {
+        font-family: $font-barlow-condensed;
+        font-size: 32px;
+        font-weight: 500;
+        line-height: 34px;
+        margin-top: $sp-8;
+    }
+}

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWin/ChallengeWin.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react'
+
+import styles from './ChallengeWin.module.scss'
+
+interface ChallengeWinProps {
+    typeName: string
+    onClick: () => void
+    winCnt: number
+    winLabel?: string
+}
+
+const ChallengeWin: FC<ChallengeWinProps> = (props: ChallengeWinProps) => (
+    <div className={styles.winWrapper} onClick={props.onClick}>
+        <p className={styles.winCnt}>
+            {props.winCnt}
+            {' '}
+        </p>
+        <p className='body-ultra-small-bold'>{props.winLabel || 'WINS'}</p>
+        <p className='body-small-bold'>{props.typeName}</p>
+    </div>
+)
+
+export default ChallengeWin

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWin/index.ts

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

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss

@@ -23,7 +23,7 @@
         margin-bottom: $sp-8;
         background-image: linear-gradient(90deg, #7B21A7, #1974AD);
         color: $tc-white;
-        padding: $sp-8;
+        padding: $sp-4;
 
         @include ltelg {
             padding: $sp-4;
@@ -36,21 +36,8 @@
         .wins {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-evenly;
+            justify-content: center;
             width: 100%;
-
-            .winWrapper {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .winCnt {
-                    font-size: 44px;
-                    font-weight: 500;
-                    line-height: 34px;
-                    margin-top: $sp-8;
-                }
-            }
         }
     }
 }