diff --git a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.module.scss b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.module.scss index 5273eb6a6..b063cd748 100644 --- a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.module.scss +++ b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.module.scss @@ -18,6 +18,14 @@ font-weight: 900; } + small { + font-family: $font-roboto; + font-weight: 400; + font-size: 16px; + line-height: 24px; + color: #EF476F; + } + @include ltemd { font-size: 24px; line-height: 28px; diff --git a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx index 10d87cdb4..d02e7906b 100644 --- a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx +++ b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx @@ -1,4 +1,5 @@ -import { FC, useEffect } from 'react' +import { FC, useEffect, useMemo } from 'react' +import { startCase } from 'lodash' import { useProfileCompleteness, UserProfile } from '~/libs/core' @@ -21,10 +22,39 @@ const ProfileCompleteness: FC = props => { useEffect(() => { completeness?.mutate() }, [props.profile]) + const [count, incompleteEntries] = useMemo(() => { + const fields = Object.entries(completeness.entries) + .filter(([, value]) => !value) + .map(([key]) => startCase(key)) + + if (fields.length === 2) { + return [2, fields.join(' and ')] + } + + if (fields.length >= 2) { + fields[fields.length - 1] = `and ${fields[fields.length - 1]}` + } + + return [fields.length, fields.join(', ')] + }, [completeness.entries]) + return hideCompletenessMeter ? <> : (
Profile: {`${completed}% Complete`} +
+ + Only + {' '} + {incompleteEntries} + {' '} + left to fill. Please add + {' '} + {count === 1 ? 'it' : 'them'} + {' '} + to make your profile more discoverable. + +
) } diff --git a/src/libs/core/lib/profile/data-providers/useProfileCompleteness.ts b/src/libs/core/lib/profile/data-providers/useProfileCompleteness.ts index ed6e4809b..23a2fe1c8 100644 --- a/src/libs/core/lib/profile/data-providers/useProfileCompleteness.ts +++ b/src/libs/core/lib/profile/data-providers/useProfileCompleteness.ts @@ -3,6 +3,7 @@ import useSWR, { KeyedMutator, SWRResponse } from 'swr' import { getProfileUrl } from '../profile-functions' export function useProfileCompleteness(memberHandle?: string): { + entries: {[key: string]: boolean}, isLoading: boolean, mutate: KeyedMutator, percent: number | undefined, @@ -13,6 +14,7 @@ export function useProfileCompleteness(memberHandle?: string): { const percentComplete = data?.data?.percentComplete return { + entries: data?.data ?? {}, isLoading: percentComplete === undefined, mutate, percent: (percentComplete ?? 0) * 100,