TSJR-217 - add principal skills section modal

vas3a · vas3a · commit 8fcbbb21c8d8 · 2023-11-13T12:24:10.000+02:00
diff --git a/src/apps/profiles/src/config/constants.ts b/src/apps/profiles/src/config/constants.ts
@@ -24,3 +24,5 @@ export enum profileEditModes {
 }
 
 export const CES_SURVEY_ID = EnvironmentConfig.USERFLOW_SURVEYS.PROFILES
+
+export const MAX_PRINCIPAL_SKILLS_COUNT = 10
diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx
@@ -3,14 +3,15 @@ import { useSearchParams } from 'react-router-dom'
 import { filter, orderBy } from 'lodash'
 
 import { UserProfile, UserSkill, UserSkillDisplayModes } from '~/libs/core'
-import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill } from '~/libs/shared'
+import { GroupedSkillsUI, HowSkillsWorkModal, isSkillVerified, SkillPill, useLocalStorage } from '~/libs/shared'
 import { Button } from '~/libs/ui'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { MemberProfileContextValue, useMemberProfileContext } from '../MemberProfile.context'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
+import { PrincipalSkillsModal } from './PrincipalSkillsModal'
 import styles from './MemberSkillsInfo.module.scss'
 
 interface MemberSkillsInfoProps {
@@ -24,6 +25,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
+    const [hasSeenPrincipalIntro, setHasSeenPrincipalIntro] = useLocalStorage('seen-principal-intro', {} as any)
 
     const { skillsRenderer, isTalentSearch }: MemberProfileContextValue = useMemberProfileContext()
 
@@ -46,10 +48,11 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {}
 
         additionalSkills.forEach((skill: UserSkill) => {
-            if (grouped[skill.category.name]) {
-                grouped[skill.category.name].push(skill)
+            const categoryName = skill.category?.name ?? ''
+            if (grouped[categoryName]) {
+                grouped[categoryName].push(skill)
             } else {
-                grouped[skill.category.name] = [skill]
+                grouped[categoryName] = [skill]
             }
         })
 
@@ -68,6 +71,9 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
     const [howSkillsWorkVisible, setHowSkillsWorkVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const [principalIntroModalVisible, setPrincipalIntroModalVisible]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(false)
+
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.skills) {
             setIsEditMode(true)
@@ -76,6 +82,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.authProfile])
 
+    useEffect(() => {
+        if (
+            !canEdit
+            || !props.authProfile
+            || hasSeenPrincipalIntro[props.authProfile.handle]
+            || isTalentSearch
+        ) {
+            return
+        }
+
+        setPrincipalIntroModalVisible(true)
+    }, [hasSeenPrincipalIntro, canEdit, isTalentSearch, props.authProfile, setHasSeenPrincipalIntro])
+
     function handleEditSkillsClick(): void {
         setIsEditMode(true)
     }
@@ -99,6 +118,19 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setHowSkillsWorkVisible(false)
     }
 
+    function handlePrincipalIntroShow(): void {
+        setPrincipalIntroModalVisible(true)
+    }
+
+    function handlePrincipalIntroClose(): void {
+        setHasSeenPrincipalIntro((prevValue: any) => ({
+            ...prevValue,
+            [props.authProfile?.handle ?? '']: true,
+        }))
+
+        setPrincipalIntroModalVisible(false)
+    }
+
     return (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -185,6 +217,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <ModifySkillsModal
                         onClose={handleModyfSkillsModalClose}
                         onSave={handleModyfSkillsSave}
+                        showPrincipalIntroModal={handlePrincipalIntroShow}
                     />
                 )
             }
@@ -198,6 +231,14 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     />
                 )
             }
+
+            {
+                principalIntroModalVisible && (
+                    <PrincipalSkillsModal
+                        onClose={handlePrincipalIntroClose}
+                    />
+                )
+            }
         </div>
     )
 }
diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss
@@ -10,10 +10,6 @@
     display: flex;
     flex-direction: column;
 
-    .skillPicker {
-        margin-top: $sp-4;
-    }
-
     :global(.input-wrapper) {
         margin-top: $sp-2;
     }
@@ -34,3 +30,15 @@
 .skillsModalBody {
     overflow: visible !important;
 }
+
+.principalIntroLink {
+    display: flex;
+    justify-content: flex-end;
+    > span {
+        color: $link-blue-dark;
+        cursor: pointer;
+        &:hover {
+            color: darken($link-blue-dark, 5);
+        }
+    }
+}
diff --git a/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx b/src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.tsx
@@ -9,6 +9,7 @@ import styles from './ModifySkillsModal.module.scss'
 interface ModifySkillsModalProps {
     onClose: () => void
     onSave: () => void
+    showPrincipalIntroModal: () => void
 }
 
 const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalProps) => {
@@ -44,7 +45,7 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
                 <div className={styles.skillsModalHeader}>
                     <h3>Your skills</h3>
                     <p className='body-main-normal'>
-                        We use your skills to connect you to the right opportunities.
+                        We use your skills to connect you to the best opportunities.
                     </p>
                 </div>
             )}
@@ -68,6 +69,14 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
                 <div className={styles.skillPicker}>
                     {editor.formInput}
                 </div>
+                <div
+                    className={styles.principalIntroLink}
+                    onClick={props.showPrincipalIntroModal}
+                >
+                    <span className='body-main-link'>
+                        See what Principal skills are
+                    </span>
+                </div>
             </div>
         </BaseModal>
     )
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.module.scss b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.module.scss
@@ -0,0 +1,20 @@
+@import '@libs/ui/styles/includes';
+
+.verified {
+    display: inline-flex;
+
+    svg {
+        margin: 0 $sp-2;
+        color: $turq-120;
+    }
+}
+
+.container {
+    strong {
+        font-weight: bold;
+    }
+}
+
+.mb1 {
+    margin-bottom: $sp-2;
+}
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/PrincipalSkillsModal.tsx
@@ -0,0 +1,52 @@
+import { FC } from 'react'
+
+import { BaseModal, IconOutline } from '~/libs/ui'
+
+import styles from './PrincipalSkillsModal.module.scss'
+import { MAX_PRINCIPAL_SKILLS_COUNT } from '../../../config'
+import principalSectionImg from './principal-section.png'
+import principalInputImg from './principal-input.png'
+
+interface PrincipalSkillsModalProps {
+    onClose: () => void
+}
+
+const PrincipalSkillsModal: FC<PrincipalSkillsModalProps> = (props: PrincipalSkillsModalProps) => (
+    <BaseModal
+        onClose={props.onClose}
+        open
+        title='Highlight your Principal skills'
+        size='lg'
+    >
+        <div className={styles.container}>
+            <p>
+                <div className={styles.mb1}>
+                    Now you can highlight your most important skills using the&nbsp;
+                    <strong>Principal skills</strong>
+                    &nbsp;section!
+                </div>
+                <img src={principalSectionImg} alt="" />
+            </p>
+            <br />
+            <p>
+                <div className={styles.mb1}>
+                    Just move the skills you want to highlight by typing them in the&nbsp;
+                    <strong>principal skills input</strong>
+                    &nbsp;when you edit your skills.
+                </div>
+                <img src={principalInputImg} alt="" />
+            </p>
+            <br />
+            <p>
+                <strong>NOTE:</strong>
+                &nbsp;You can add up to {MAX_PRINCIPAL_SKILLS_COUNT} skills to your principal section.
+            </p>
+            <br />
+            <p>
+                To move a skill back to the <strong>additional section</strong>, just type it in the <strong>additional skills input</strong>.
+            </p>
+        </div>
+    </BaseModal>
+)
+
+export default PrincipalSkillsModal
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/index.ts b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/index.ts
@@ -0,0 +1 @@
+export { default as PrincipalSkillsModal } from './PrincipalSkillsModal'
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-input.png b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-input.png
diff --git a/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-section.png b/src/apps/profiles/src/member-profile/skills/PrincipalSkillsModal/principal-section.png
diff --git a/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx b/src/libs/shared/lib/components/member-skill-editor/use-member-skill-editor.tsx
@@ -8,6 +8,7 @@ import {
     UserSkillDisplayModes,
     useUserSkillsDisplayModes,
 } from '~/libs/core'
+import { MAX_PRINCIPAL_SKILLS_COUNT } from '~/apps/profiles/src/config'
 
 import {
     createMemberSkills,
@@ -149,21 +150,23 @@ export const useMemberSkillEditor = ({
                 These will be showcased at the top of your profile.
             </p>
             <InputSkillSelector
+                label='Select Principal skills'
                 value={principalSkills}
                 onChange={handleOnChange(UserSkillDisplayModes.principal)}
                 loading={loading}
-                limit={10}
+                limit={MAX_PRINCIPAL_SKILLS_COUNT}
             />
 
             <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>
             <InputSkillSelector
+                label='Select Additional skills'
                 value={additionalSkills}
                 onChange={handleOnChange(UserSkillDisplayModes.additional)}
                 loading={loading}
-                limit={limit ? limit - 10 : 0}
+                limit={limit ? limit - MAX_PRINCIPAL_SKILLS_COUNT : 0}
             />
         </>
     ), [principalSkills, handleOnChange, loading, additionalSkills, limit])

Original file line number	Diff line number	Diff line change
`@@ -24,3 +24,5 @@ export enum profileEditModes {`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`export const CES_SURVEY_ID = EnvironmentConfig.USERFLOW_SURVEYS.PROFILES`
	`27`	`+`
	`28`	`+export const MAX_PRINCIPAL_SKILLS_COUNT = 10`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export { default as PrincipalSkillsModal } from './PrincipalSkillsModal'`