Merge pull request #1513 from topcoder-platform/PM-4182_open-to-work-tweaks

PM-4182 tweaks for open to work status

Author: vas3a

src/apps/onboarding/src/pages/open-to-work/index.tsx

@@ -116,7 +116,7 @@ export const PageOpenToWorkContent: FC<PageOpenToWorkContentProps> = props => {
         try {
             const [, updatedTraits] = await Promise.all([
                 // profile flag
-                props.updateMemberOpenForWork(formValue.availableForGigs),
+                props.updateMemberOpenForWork(!!formValue.availableForGigs),
 
                 // personalization trait
                 updateOrCreateMemberTraitsAsync(props.profileHandle, [{

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

@@ -12,6 +12,7 @@ import styles from './OpenForGigs.module.scss'
 
 interface OpenForGigsProps {
     canEdit: boolean
+    isOpenToWork: boolean | null
     authProfile: UserProfile | undefined
     profile: UserProfile
     refreshProfile: (handle: string) => void
@@ -27,7 +28,7 @@ const OpenForGigs: FC<OpenForGigsProps> = (props: OpenForGigsProps) => {
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const openForWork = props.profile.availableForGigs
+    const openForWork = props.isOpenToWork
 
     useEffect(() => {
         if (props.authProfile && editMode === profileEditModes.openForWork) {
@@ -53,9 +54,16 @@ const OpenForGigs: FC<OpenForGigsProps> = (props: OpenForGigsProps) => {
 
     return props.canEdit || openForWork || props.isPrivilegedViewer ? (
         <div className={styles.container}>
-            <p className={classNames('body-main-bold', !openForWork ? styles.notOopenToWork : '')}>
-                {openForWork ? 'open to work' : 'not open to work'}
-            </p>
+            {openForWork === null ? (
+                <p className={classNames('body-main-bold', styles.unknownOopenToWork)}>
+                    Unknown
+                </p>
+            ) : (
+                <p className={classNames('body-main-bold', !openForWork ? styles.notOopenToWork : '')}>
+                    {openForWork ? 'open to work' : 'not open to work'}
+                </p>
+            )}
+
             {
                 props.canEdit && (
                     <EditMemberPropertyBtn
@@ -69,6 +77,7 @@ const OpenForGigs: FC<OpenForGigsProps> = (props: OpenForGigsProps) => {
                         onClose={handleModifyOpenForWorkClose}
                         onSave={handleModifyOpenForWorkSave}
                         profile={props.profile}
+                        openForWork={openForWork}
                         memberPersonalizationTraits={props.memberPersonalizationTraits}
                         mutatePersonalizationTraits={props.mutatePersonalizationTraits}
                     />

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

@@ -22,6 +22,7 @@ interface OpenForGigsModifyModalProps {
     onClose: () => void
     onSave: () => void
     profile: UserProfile
+    openForWork: boolean | null
     memberPersonalizationTraits?: UserTrait[]
     mutatePersonalizationTraits: () => void
 }
@@ -34,7 +35,7 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
 
     const [formValue, setFormValue] = useState<OpenToWorkData>({
         availability: undefined,
-        availableForGigs: !!props.profile.availableForGigs,
+        availableForGigs: props.openForWork,
         preferredRoles: [],
     })
 
@@ -56,12 +57,12 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         setFormValue(prev => ({
             ...prev,
             availability: openToWorkItem?.availability,
-            availableForGigs: !!props.profile.availableForGigs,
+            availableForGigs: props.openForWork,
             preferredRoles: openToWorkItem?.preferredRoles ?? [],
         }))
     }, [
         memberPersonalizationTraits,
-        props.profile.availableForGigs,
+        props.openForWork,
     ])
 
     function handleFormChange(nextValue: OpenToWorkData): void {
@@ -152,8 +153,8 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         >
             <div className={styles.modalBody}>
                 <p>
-                    By selecting “Open to Work” our talent management team will know
-                    that you are available for engagement opportunities.
+                    By selecting “Open to Work” our customers will know that
+                    you are available for engagement opportunities.
                 </p>
             </div>
 

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

@@ -1,4 +1,5 @@
 /* eslint-disable complexity */
+/* eslint-disable unicorn/no-null */
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
 import { Location, useLocation, useSearchParams } from 'react-router-dom'
 import { KeyedMutator } from 'swr'
@@ -70,7 +71,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         [state?.queriedSkills],
     )
 
-    const activeTooltipText = canEdit ? `You have been active in the past 3 months. 
+    const activeTooltipText = canEdit ? `You have been active in the past 3 months.
 (this information is visible to you only)` : `${props.profile.firstName} has been active in the past 3 months.`
 
     useEffect(() => {
@@ -146,13 +147,15 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         (item: UserTrait) => !!item?.openToWork,
     )
 
+    const isOpenToWork = hasOpenToWork ? props.profile.availableForGigs : null
+
     function renderOpenForWork(): JSX.Element {
         const showMyStatusLabel = canEdit
         const showAdminLabel = isPrivilegedViewer
 
         const content = (
             <div className={styles.profileActions}>
-                {showMyStatusLabel && <span>My status:</span>}
+                {showMyStatusLabel && <span>Engagement status:</span>}
 
                 {showAdminLabel && (
                     <span>
@@ -169,6 +172,7 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
                     isPrivilegedViewer={isPrivilegedViewer}
                     memberPersonalizationTraits={memberPersonalizationTraits}
                     mutatePersonalizationTraits={mutateTraits}
+                    isOpenToWork={isOpenToWork}
                 />
             </div>
         )

src/libs/core/lib/profile/modify-user-profile.model.ts

@@ -8,7 +8,7 @@ export interface UpdateProfileRequest {
         streetAddr2?: string
         zip?: string
     }>
-    availableForGigs?: boolean,
+    availableForGigs?: boolean | null,
     competitionCountryCode?: string
     homeCountryCode?: string
     email?: string

src/libs/shared/lib/components/modify-open-to-work-modal/ModifyOpenToWorkModal.module.scss

@@ -22,3 +22,16 @@
     }
   }
 }
+
+.radioGroup {
+    display: flex;
+    margin-bottom: $sp-6;
+    > * {
+        flex: 1;
+    }
+
+    @include ltemd {
+        flex-direction: column;
+        gap: $sp-4;
+    }
+}

src/libs/shared/lib/components/modify-open-to-work-modal/ModifyOpenToWorkModal.tsx

@@ -1,13 +1,13 @@
 import { ChangeEvent, FC, useCallback } from 'react'
 
-import { InputMultiselect, InputMultiselectOption, InputSelect, InputText } from '~/libs/ui'
+import { InputMultiselect, InputMultiselectOption, InputRadio, InputSelect } from '~/libs/ui'
 
 import styles from './ModifyOpenToWorkModal.module.scss'
 
 export type AvailabilityType = 'FULL_TIME' | 'PART_TIME'
 
 export interface OpenToWorkData {
-    availableForGigs: boolean
+    availableForGigs: boolean | null
     availability?: AvailabilityType
     preferredRoles?: string[]
 }
@@ -57,10 +57,12 @@ export const validateOpenToWork = (value: OpenToWorkData): { [key: string]: stri
 }
 
 const OpenToWorkForm: FC<OpenToWorkFormProps> = (props: OpenToWorkFormProps) => {
-    function toggleOpenForWork(): void {
+    function handleOpenForWorkChange(e: ChangeEvent<HTMLInputElement>): void {
+        const openForWork = e.target.value === 'true'
+
         props.onChange({
             ...props.value,
-            availableForGigs: !props.value.availableForGigs,
+            availableForGigs: openForWork,
         })
     }
 
@@ -96,20 +98,32 @@ const OpenToWorkForm: FC<OpenToWorkFormProps> = (props: OpenToWorkFormProps) =>
 
     return (
         <div className={styles.container}>
-            <InputText
-                name='openForWork'
-                type='checkbox'
-                label='Yes, I’m open to work'
-                checked={props.value.availableForGigs}
-                onChange={toggleOpenForWork}
-                disabled={props.disabled}
-            />
+            <div className={styles.radioGroup}>
+                <InputRadio
+                    id='openForWorkYes'
+                    name='openForWork'
+                    value='true'
+                    label="Yes, I'm open to work"
+                    checked={props.value.availableForGigs === true}
+                    onChange={handleOpenForWorkChange}
+                    disabled={props.disabled}
+                />
+                <InputRadio
+                    id='openForWorkNo'
+                    name='openForWork'
+                    value='false'
+                    label="No, I'm not open to work"
+                    checked={props.value.availableForGigs === false}
+                    onChange={handleOpenForWorkChange}
+                    disabled={props.disabled}
+                />
+            </div>
 
             {props.value.availableForGigs && (
                 <>
                     <InputSelect
                         name='availability'
-                        label='Availability'
+                        label='Availability *'
                         placeholder='Select availability'
                         options={availabilityOptions}
                         value={props.value.availability}
@@ -123,7 +137,7 @@ const OpenToWorkForm: FC<OpenToWorkFormProps> = (props: OpenToWorkFormProps) =>
                     <InputMultiselect
                         className={styles.inputMultiSelect}
                         name='preferredRoles'
-                        label='Preferred Roles'
+                        label='Preferred Roles *'
                         placeholder='Select preferred roles'
                         additionalPlaceholder='Add more...'
                         onFetchOptions={fetchPreferredRoles}