MP-168 updated for self editing view

Author: kkartunov

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/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

@@ -143,6 +143,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <HowSkillsWorkModal
                         onClose={handleHowSkillsWorkClose}
                         isTalentSearch={isTalentSearch}
+                        canEdit={canEdit}
                     />
                 )
             }