From aa4b5c90221a9646b3ba375c2913ffe3aa89d4a4 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Tue, 13 Jan 2026 14:50:57 +0200
Subject: [PATCH 1/3] PM-3357 - profile completeness messaging

---
 .../ProfileCompleteness.module.scss           |  6 +++++
 .../ProfileCompleteness.tsx                   | 22 ++++++++++++++++++-
 .../data-providers/useProfileCompleteness.ts  |  2 ++
 3 files changed, 29 insertions(+), 1 deletion(-)

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..68ed3d77e 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,12 @@
         font-weight: 900;
     }
 
+    small {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 24px;
+    }
+
     @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..b71e2ba60 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,29 @@ 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]);
+
     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>
     )
 }
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<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,

From c0ee28c08a6e542e022270319b70bd536550f846 Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Tue, 13 Jan 2026 15:38:51 +0200
Subject: [PATCH 2/3] lint fixes

---
 .../ProfileCompleteness.tsx                   | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

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 b71e2ba60..4be2ec0a9 100644
--- a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx
+++ b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx
@@ -1,5 +1,5 @@
 import { FC, useEffect, useMemo } from 'react'
-import { startCase } from 'lodash';
+import { startCase } from 'lodash'
 
 import { useProfileCompleteness, UserProfile } from '~/libs/core'
 
@@ -25,25 +25,33 @@ const ProfileCompleteness: FC<ProfileCompletenessProps> = props => {
     const [count, incompleteEntries] = useMemo(() => {
         const fields = Object.entries(completeness.entries)
             .filter(([, value]) => !value)
-            .map(([key]) => startCase(key));
+            .map(([key]) => startCase(key))
 
-            if (fields.length === 2) {
-                return [2, fields.join(' and ')];
-            }
+        if (fields.length === 2) {
+            return [2, fields.join(' and ')]
+        }
 
-            if (fields.length >= 2) {
-                fields[fields.length - 1] = `and ${fields[fields.length - 1]}`;
-            }
+        if (fields.length >= 2) {
+            fields[fields.length - 1] = `and ${fields[fields.length - 1]}`
+        }
 
         return [fields.length, fields.join(', ')]
-    }, [completeness]);
+    }, [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>
+                <small>
+                    Only
+                    {incompleteEntries}
+                    {' '}
+                    left to fill. Please add
+                    {count === 1 ? 'it' : 'them'}
+                    {' '}
+                    to make your profile more discoverable.
+                </small>
             </div>
         </div>
     )

From f8f7de9c5c5af17672bbbdfe9b3c88a6c32317ae Mon Sep 17 00:00:00 2001
From: Vasilica Olariu <olariu.vasilica@gmail.com>
Date: Wed, 14 Jan 2026 09:36:43 +0200
Subject: [PATCH 3/3] fix styling

---
 .../profile-completeness/ProfileCompleteness.module.scss      | 4 +++-
 .../profile-completeness/ProfileCompleteness.tsx              | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

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 68ed3d77e..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
@@ -19,9 +19,11 @@
     }
 
     small {
+        font-family: $font-roboto;
         font-weight: 400;
-        font-size: 20px;
+        font-size: 16px;
         line-height: 24px;
+        color: #EF476F;
     }
 
     @include ltemd {
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 4be2ec0a9..d02e7906b 100644
--- a/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx
+++ b/src/apps/profiles/src/member-profile/profile-completeness/ProfileCompleteness.tsx
@@ -45,9 +45,11 @@ const ProfileCompleteness: FC<ProfileCompletenessProps> = props => {
             <div>
                 <small>
                     Only
+                    {' '}
                     {incompleteEntries}
                     {' '}
                     left to fill. Please add
+                    {' '}
                     {count === 1 ? 'it' : 'them'}
                     {' '}
                     to make your profile more discoverable.