TAL-53 - handle display name in talent search results card -> dev

src/apps/talent-search/src/components/talent-card/TalentCard.tsx

@@ -8,7 +8,7 @@ import { IconSolid } from '~/libs/ui'
 import { isSkillVerified, ProfilePicture, Skill, SkillPill } from '~/libs/shared'
 
 import { ProfileMatch } from '../profile-match'
-import { Member } from '../../lib/models'
+import { Member, MemberDisplayName } from '../../lib/models'
 import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
 import { useIsMatchingSkill } from '../../lib/utils'
 
@@ -93,16 +93,20 @@ const TalentCard: FC<TalentCardProps> = props => {
                 <ProfilePicture member={props.member} className={styles.profilePic} />
                 <div className={styles.detailsContainer}>
                     <div className={styles.talentInfo}>
-                        <div className={styles.talentInfoName}>
-                            {props.member.firstName}
-                            {' '}
-                            {props.member.lastName?.slice(0, 1) || ''}
-                        </div>
-                        <div className={styles.talentInfoHandle}>
-                            <span className='body-medium-normal'>
-                                {props.member.handle}
-                            </span>
-                        </div>
+                        {props.member.namesAndHandleAppearance !== MemberDisplayName.handleOnly && (
+                            <div className={styles.talentInfoName}>
+                                {props.member.firstName}
+                                {' '}
+                                {props.member.lastName?.slice(0, 1) || ''}
+                            </div>
+                        )}
+                        {props.member.namesAndHandleAppearance !== MemberDisplayName.nameOnly && (
+                            <div className={styles.talentInfoHandle}>
+                                <span className='body-medium-normal'>
+                                    {props.member.handle}
+                                </span>
+                            </div>
+                        )}
                         {(!!props.member.addresses?.length || !!props.member.homeCountryCode) && (
                             <div className={styles.talentInfoLocation}>
                                 <IconSolid.LocationMarkerIcon className='icon-xxl' />

src/apps/talent-search/src/lib/models/Member.ts

@@ -1,3 +1,4 @@
+import { MemberDisplayName } from './MemberDisplayName'
 import MemberAddress from './MemberAddress'
 import MemberEmsiSkill from './MemberEmsiSkill'
 import MemberMaxRating from './MemberMaxRating'
@@ -16,6 +17,7 @@ export default interface Member {
     handle: string;
     homeCountryCode: string;
     lastName: string;
+    namesAndHandleAppearance: MemberDisplayName
     maxRating: MemberMaxRating;
     numberOfChallengesPlaced: number;
     numberOfChallengesWon: number;

src/apps/talent-search/src/lib/models/MemberDisplayName.ts

@@ -0,0 +1,5 @@
+export enum MemberDisplayName {
+    both = 'namesAndHandle',
+    handleOnly = 'handleOnly',
+    nameOnly = 'namesOnly',
+}

src/apps/talent-search/src/lib/models/index.ts

@@ -2,3 +2,4 @@ export type { default as Member } from './Member'
 export type { default as MemberEmsiSkill } from './MemberEmsiSkill'
 export type { default as MemberMaxRating } from './MemberMaxRating'
 export type { default as MemberStats } from './MemberStats'
+export { MemberDisplayName } from './MemberDisplayName'