PM-3357 - profile completeness messaging

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;

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<ProfileCompletenessProps> = 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 ? <></> : (
         <div className={styles.wrap}>
             <strong>Profile: </strong>
             {`${completed}% Complete`}
+            <div>
+                <small>
+                    Only
+                    {' '}
+                    {incompleteEntries}
+                    {' '}
+                    left to fill. Please add
+                    {' '}
+                    {count === 1 ? 'it' : 'them'}
+                    {' '}
+                    to make your profile more discoverable.
+                </small>
+            </div>
         </div>
     )
 }

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<any>,
     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,