MP-90 work status

Author: kkartunov

src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.module.scss

@@ -11,4 +11,8 @@
         color: $black-100;
         padding-right: $sp-2;
     }
+
+    .notOopenToWork {
+        color: $red-100;
+    }
 }

src/apps/profiles/src/member-profile/profile-header/OpenForGigs/OpenForGigs.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
+import classNames from 'classnames'
 
 import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
 
@@ -60,7 +61,7 @@ const OpenForGigs: FC<OpenForGigsProps> = (props: OpenForGigsProps) => {
 
     return props.canEdit || openForWork ? (
         <div className={styles.container}>
-            <p className='body-main-bold'>
+            <p className={classNames('body-main-bold', !openForWork?.availableForGigs ? styles.notOopenToWork : '')}>
                 {openForWork?.availableForGigs ? 'open to work' : 'not open to work'}
             </p>
             {

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx

@@ -53,11 +53,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     }
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
 
-    const openForWork: UserTrait | undefined
-        = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
-            (trait: UserTrait) => trait.availableForGigs,
-        ), [memberPersonalizationTraits])
-
     const namesAndHandleAppearanceData: UserTrait | undefined
         = useMemo(() => memberPersonalizationTraits?.[0]?.traits?.data?.find(
             (trait: UserTrait) => trait.namesAndHandleAppearance,
@@ -113,9 +108,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     function renderOpenForWork(): JSX.Element {
         return (
             <div className={styles.profileActions}>
-                <span>
-                    {canEdit ? 'I am' : `${props.profile.firstName} is`}
-                </span>
+                <span>My status:</span>
                 <OpenForGigs canEdit={canEdit} authProfile={props.authProfile} profile={props.profile} />
                 {/* Enable this with talent search app */}
                 {/* {
@@ -208,7 +201,9 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
             )}
 
             {
-                openForWork || canEdit ? renderOpenForWork() : undefined
+                // Showing only when they can edit until we have the talent search app
+                // and enough data to make this useful
+                canEdit ? renderOpenForWork() : undefined
             }
 
             {