Release hotfixes

.environments/.env.prod

@@ -14,7 +14,7 @@ REACT_APP_DATADOG_PUBLIC_TOKEN=puba0825671e469d16f940c5a30dc738f11
 
 REACT_APP_MEMBER_VERIFY_LOOKER=3322
 
-REACT_APP_SPRIG_ENV_ID=bUcousVQ0-yF
+REACT_APP_SPRIG_ENV_ID=a-IZBZ6-r7bU
 
 # Filestack configuration for uploading Submissions
 REACT_APP_FILESTACK_API_KEY=

src/apps/profiles/src/lib/helpers.ts

@@ -71,6 +71,8 @@ export function subTrackLabelToHumanName(label: string): string {
             return 'Development'
         case 'ARCHITECTURE':
             return 'Architecture'
+        case 'UI_PROTOTYPE_COMPETITION':
+            return 'UI Prototype Competition'
 
         default: return label
     }

src/apps/profiles/src/member-profile/MemberProfilePage.tsx

@@ -31,7 +31,7 @@ const MemberProfilePage: FC<{}> = () => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
                 .then(userProfile => {
-                    setProfile(userProfile)
+                    setProfile({ ...userProfile } as UserProfile)
                     setProfileReady(true)
                 })
             // TODO: NOT FOUND PAGE redirect/dispaly
@@ -41,7 +41,7 @@ const MemberProfilePage: FC<{}> = () => {
     const refreshProfile = useCallback((handle: string) => (
         profileGetPublicAsync(handle)
             .then(userProfile => {
-                setProfile(userProfile)
+                setProfile({ ...userProfile } as UserProfile)
                 if (userProfile) {
                     notifyUniNavi(userProfile)
                     triggerSprigSurvey(userProfile)

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -14,7 +14,7 @@ import {
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { MemberTCAInfo } from '../tca-info'
-import { notifyUniNavi, triggerSprigSurvey } from '../../lib'
+import { triggerSprigSurvey } from '../../lib'
 
 import { ModifyEducationModal } from './ModifyEducationModal'
 import { EducationCard } from './EducationCard'
@@ -23,6 +23,7 @@ import styles from './EducationAndCertifications.module.scss'
 interface EducationAndCertificationsProps {
     profile: UserProfile
     authProfile: UserProfile | undefined
+    refreshProfile: (handle: string) => void
 }
 
 const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props: EducationAndCertificationsProps) => {
@@ -70,7 +71,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
         setTimeout(() => {
             setIsEditMode(false)
             mutateTraits()
-            notifyUniNavi(props.profile)
+            props.refreshProfile(props.profile.handle)
             triggerSprigSurvey(props.profile)
         }, 1000)
     }

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -27,7 +27,6 @@ interface ProfilePageLayoutProps {
 }
 
 const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutProps) => (
-
     <div className={styles.container}>
 
         <PageTitle>{`${props.profile.handle} | Community Profile | Topcoder`}</PageTitle>
@@ -81,7 +80,7 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
                 </div>
                 <div className={styles.profileInfoRight}>
                     {props.authProfile?.handle === props.profile.handle && (
-                        <ProfileCompleteness profile={props.authProfile} />
+                        <ProfileCompleteness profile={props.profile} authProfile={props.authProfile} />
                     )}
                     <div className={styles.sectionWrap}>
                         <div className={styles.skillsWrap}>
@@ -101,13 +100,15 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
                                 <WorkExpirence
                                     profile={props.profile}
                                     authProfile={props.authProfile}
+                                    refreshProfile={props.refreshProfile}
                                 />
                             </div>
                         </div>
                         <div className={styles.sectionWrap}>
                             <EducationAndCertifications
                                 profile={props.profile}
                                 authProfile={props.authProfile}
+                                refreshProfile={props.refreshProfile}
                             />
                         </div>
                     </div>

src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx

@@ -1,22 +1,26 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
 
 import { useProfileCompleteness, UserProfile } from '~/libs/core'
 
 import styles from './ProfileCompleteness.module.scss'
 
 interface ProfileCompletenessProps {
     profile: UserProfile
+    authProfile: UserProfile
 }
 
 const ProfileCompleteness: FC<ProfileCompletenessProps> = props => {
-    const completed = useProfileCompleteness(props.profile.handle)
-    const isLoading = completed === undefined
+    const completeness = useProfileCompleteness(props.profile.handle)
+    const completed = completeness.percent
+    const isLoading = completeness.isLoading
     const isCompleted = completed === 100
 
-    const isCustomer = props.profile.roles.some(r => r.indexOf(' Customer') > -1)
+    const isCustomer = props.authProfile.roles.some(r => r.indexOf(' Customer') > -1)
 
     const hideCompletenessMeter = isLoading || isCompleted || isCustomer
 
+    useEffect(() => { completeness?.mutate() }, [props.profile])
+
     return hideCompletenessMeter ? <></> : (
         <div className={styles.wrap}>
             <strong>Profile: </strong>

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx

@@ -86,7 +86,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                 </div>
                 <Button
                     link
-                    label='How skills work?'
+                    label='How skills work'
                     onClick={handleHowSkillsWorkClick}
                     variant='linkblue'
                 />

src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
 import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
-import { notifyUniNavi, triggerSprigSurvey } from '../../lib'
+import { triggerSprigSurvey } from '../../lib'
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 
 import { ModifyWorkExpirenceModal } from './ModifyWorkExpirenceModal'
@@ -14,6 +14,7 @@ import styles from './WorkExpirence.module.scss'
 interface WorkExpirenceProps {
     profile: UserProfile
     authProfile: UserProfile | undefined
+    refreshProfile: (handle: string) => void
 }
 
 const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
@@ -50,7 +51,7 @@ const WorkExpirence: FC<WorkExpirenceProps> = (props: WorkExpirenceProps) => {
         setTimeout(() => {
             setIsEditMode(false)
             mutateTraits()
-            notifyUniNavi(props.profile)
+            props.refreshProfile(props.profile.handle)
             triggerSprigSurvey(props.profile)
         }, 1000)
     }

src/config/environments/default.env.ts

@@ -54,7 +54,7 @@ export const URLS = {
 
 export const MEMBER_VERIFY_LOOKER = getReactEnv<number>('MEMBER_VERIFY_LOOKER', 3322)
 
-export const ENABLE_TCA_CERT_MONETIZATION = getReactEnv<boolean>('ENABLE_TCA_CERT_MONETIZATION', false)
+export const ENABLE_TCA_CERT_MONETIZATION = false
 export const ENABLE_EMSI_SKILLS = getReactEnv<boolean>('ENABLE_EMSI_SKILLS', false)
 
 export const TERMS_URL = 'https://www.topcoder-dev.com/challenges/terms/detail/317cd8f9-d66c-4f2a-8774-63c612d99cd4'

src/libs/core/lib/profile/data-providers/useProfileCompleteness.ts

@@ -1,12 +1,20 @@
-import useSWR, { SWRResponse } from 'swr'
+import useSWR, { KeyedMutator, SWRResponse } from 'swr'
 
 import { getProfileUrl } from '../profile-functions'
 
-export function useProfileCompleteness(memberHandle?: string): number | undefined {
-    const { data }: SWRResponse = useSWR(`${getProfileUrl(memberHandle ?? '')}/profileCompleteness`, {
+export function useProfileCompleteness(memberHandle?: string): {
+    isLoading: boolean,
+    mutate: KeyedMutator<any>,
+    percent: number | undefined,
+} {
+    const { data, mutate }: SWRResponse = useSWR(`${getProfileUrl(memberHandle ?? '')}/profileCompleteness`, {
         isPaused: () => !memberHandle,
     })
 
     const percentComplete = data?.data?.percentComplete
-    return percentComplete === undefined ? percentComplete : (percentComplete ?? 0) * 100
+    return {
+        isLoading: percentComplete === undefined,
+        mutate,
+        percent: (percentComplete ?? 0) * 100,
+    }
 }

src/libs/shared/lib/components/expandable-list/ExpandableList.tsx

@@ -54,7 +54,7 @@ const ExpandableList: FC<ExpandableListProps> = props => {
     return (
         <>
             {renderList()}
-            {listCount >= props.visible && renderToggleBtn()}
+            {listCount > props.visible && renderToggleBtn()}
         </>
     )
 }

src/libs/ui/lib/components/form/form-groups/form-input/input-select/InputSelect.tsx

@@ -8,6 +8,7 @@ import {
     MutableRefObject,
     ReactNode,
     SetStateAction,
+    useEffect,
     useRef,
     useState,
 } from 'react'
@@ -76,7 +77,11 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
         option ? option.label ?? option.value : ''
     )
 
-    const toggleMenu: () => void = () => setMenuIsVisible(wasVisible => !wasVisible)
+    const toggleMenu = (toggle?: boolean): void => {
+        setTimeout(setMenuIsVisible, 150, wasVisible => (
+            typeof toggle === 'boolean' ? toggle : !wasVisible
+        ))
+    }
 
     const select: (option: InputSelectOption) => (event: MouseEvent<HTMLDivElement>) => void
     = (option: InputSelectOption) => (
@@ -87,32 +92,38 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
         props.onChange({
             target: { value: option.value },
         } as unknown as ChangeEvent<HTMLInputElement>)
-        buttonRef.current?.focus() // this will close the dropdown menu
+        toggleMenu(false)
     }
 
     function toggleIfNotDisabled(event:
         MouseEvent<HTMLButtonElement>
         | FocusEvent<HTMLButtonElement>
         | KeyboardEvent<HTMLButtonElement>
-        | undefined)
+        | undefined, toggle?: boolean)
     : void {
         event?.stopPropagation()
         event?.preventDefault()
         if (props.disabled) {
             return
         }
 
-        toggleMenu()
+        toggleMenu(toggle)
     }
 
-    useClickOutside(triggerRef.current, () => setMenuIsVisible(false))
+    useClickOutside(triggerRef.current, () => setMenuIsVisible(false), menuIsVisible)
 
     function handleKeyDown(event: KeyboardEvent<HTMLButtonElement> | undefined): void {
         if (event?.key === 'Enter') {
             toggleIfNotDisabled(event)
         }
     }
 
+    useEffect(() => {
+        if (menuIsVisible) {
+            popper.update?.()
+        }
+    }, [menuIsVisible])
+
     return (
         <InputWrapper
             {...props}
@@ -135,7 +146,7 @@ const InputSelect: FC<InputSelectProps> = (props: InputSelectProps) => {
                 disabled={!!props.disabled}
                 onFocus={function onFocus(event: FocusEvent<HTMLButtonElement> | undefined) {
                     setIsFocus(true)
-                    toggleIfNotDisabled(event)
+                    toggleIfNotDisabled(event, true)
                 }}
                 onBlur={function onBlur() {
                     setIsFocus(false)