From 1e8b3cc2b6e92eb5d24215be0bc52a9a828c94fb Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Tue, 13 Jan 2026 17:05:19 +0100
Subject: [PATCH 1/3] feat: add dismissable profile completion indicator

Add dismiss button to profile completion card in dropdown menu. When dismissed, both the yellow indicator dot on the profile button and the card are permanently hidden. Uses the action pattern for persistent dismissal tracking.

- Add DismissProfileCompletionIndicator action type
- Update useProfileCompletionIndicator to check dismissal status
- Add showDismiss prop to ProfileCompletion component
- Display dismiss button above card content in dropdown only
- Remove feature flag and always show indicator for incomplete profiles

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../components/ProfileMenu/ProfileMenu.tsx    |  2 +-
 .../ProfileWidgets/ProfileCompletion.tsx      | 42 +++++++++++++------
 packages/shared/src/graphql/actions.ts        |  1 +
 .../profile/useProfileCompletionIndicator.ts  | 22 +++++++---
 4 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
index 7c38a2d63c..20a1a5fa71 100644
--- a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
+++ b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
@@ -62,7 +62,7 @@ export default function ProfileMenu({
       position={InteractivePopupPosition.ProfileMenu}
       className="flex w-full max-w-80 flex-col gap-3 !rounded-10 border border-border-subtlest-tertiary !bg-accent-pepper-subtlest p-3"
     >
-      {showProfileCompletion && <ProfileCompletion />}
+      {showProfileCompletion && <ProfileCompletion showDismiss />}
       <ProfileMenuHeader />
 
       <UpgradeToPlus
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
index 9b3eca595b..12dac92d24 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
@@ -14,6 +14,9 @@ import Link from '../../../../components/utilities/Link';
 import { anchorDefaultRel } from '../../../../lib/strings';
 import { webappUrl } from '../../../../lib/constants';
 import { useAuthContext } from '../../../../contexts/AuthContext';
+import CloseButton from '../../../../components/CloseButton';
+import { ButtonSize } from '../../../../components/buttons/Button';
+import { useProfileCompletionIndicator } from '../../../../hooks/profile/useProfileCompletionIndicator';
 
 type CompletionItem = {
   label: string;
@@ -23,6 +26,7 @@ type CompletionItem = {
 
 type ProfileCompletionProps = {
   className?: string;
+  showDismiss?: boolean;
 };
 
 const getCompletionItems = (
@@ -73,8 +77,10 @@ const formatDescription = (incompleteItems: CompletionItem[]): string => {
 
 export const ProfileCompletion = ({
   className,
+  showDismiss = false,
 }: ProfileCompletionProps): ReactElement | null => {
   const { user } = useAuthContext();
+  const { dismissIndicator } = useProfileCompletionIndicator();
   const profileCompletion = user?.profileCompletion;
 
   const items = useMemo(
@@ -103,16 +109,26 @@ export const ProfileCompletion = ({
   }
 
   return (
-    <Link href={redirectPath}>
-      <a
-        href={redirectPath}
-        rel={anchorDefaultRel}
-        className={classNames(
-          'flex cursor-pointer flex-col gap-6 border border-action-help-active bg-action-help-float p-4 hover:bg-action-help-hover laptop:rounded-16',
-          className,
-        )}
-      >
-        <div className="flex w-full items-center gap-6">
+    <div
+      className={classNames(
+        'flex cursor-pointer flex-col border border-action-help-active bg-action-help-float hover:bg-action-help-hover laptop:rounded-16',
+        className,
+      )}
+    >
+      {showDismiss && (
+        <div className="flex justify-end px-2 pt-2">
+          <CloseButton size={ButtonSize.XSmall} onClick={dismissIndicator} />
+        </div>
+      )}
+      <Link href={redirectPath}>
+        <a
+          href={redirectPath}
+          rel={anchorDefaultRel}
+          className={classNames(
+            'flex w-full items-center gap-6 p-4',
+            showDismiss && 'pt-0',
+          )}
+        >
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             <div className="flex items-center gap-1">
               <InfoIcon
@@ -152,8 +168,8 @@ export const ProfileCompletion = ({
               color="help"
             />
           </div>
-        </div>
-      </a>
-    </Link>
+        </a>
+      </Link>
+    </div>
   );
 };
diff --git a/packages/shared/src/graphql/actions.ts b/packages/shared/src/graphql/actions.ts
index 1e4a28c6a3..d774f40a8e 100644
--- a/packages/shared/src/graphql/actions.ts
+++ b/packages/shared/src/graphql/actions.ts
@@ -56,6 +56,7 @@ export enum ActionType {
   ProfileCompleted = 'profile_completed',
   ClickedOpportunityNavigation = 'click_opportunity_navigation',
   ProfileCompletionCard = 'profile_completion_card',
+  DismissProfileCompletionIndicator = 'dismiss_profile_completion_indicator',
 }
 
 export const cvActions = [
diff --git a/packages/shared/src/hooks/profile/useProfileCompletionIndicator.ts b/packages/shared/src/hooks/profile/useProfileCompletionIndicator.ts
index 2932c52c87..dd5dda09dd 100644
--- a/packages/shared/src/hooks/profile/useProfileCompletionIndicator.ts
+++ b/packages/shared/src/hooks/profile/useProfileCompletionIndicator.ts
@@ -1,21 +1,31 @@
+import { useCallback } from 'react';
 import { useAuthContext } from '../../contexts/AuthContext';
-import { useFeature } from '../../components/GrowthBookProvider';
-import { featureProfileCompletionIndicator } from '../../lib/featureManagement';
+import { useActions } from '../useActions';
+import { ActionType } from '../../graphql/actions';
 
 interface UseProfileCompletionIndicator {
   showIndicator: boolean;
+  dismissIndicator: () => void;
 }
 
 export const useProfileCompletionIndicator =
   (): UseProfileCompletionIndicator => {
     const { user } = useAuthContext();
+    const { checkHasCompleted, completeAction, isActionsFetched } =
+      useActions();
     const profileCompletionPercentage =
       user?.profileCompletion?.percentage ?? 100;
-    const profileCompletionThreshold = useFeature(
-      featureProfileCompletionIndicator,
-    );
+
+    const isDismissed =
+      isActionsFetched &&
+      checkHasCompleted(ActionType.DismissProfileCompletionIndicator);
+
+    const dismissIndicator = useCallback(() => {
+      completeAction(ActionType.DismissProfileCompletionIndicator);
+    }, [completeAction]);
 
     return {
-      showIndicator: profileCompletionPercentage < profileCompletionThreshold,
+      showIndicator: profileCompletionPercentage < 100 && !isDismissed,
+      dismissIndicator,
     };
   };

From 1670f68fbf28b05c9704b23b066794a13f094b29 Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Tue, 13 Jan 2026 17:17:24 +0100
Subject: [PATCH 2/3] test: add QueryClientProvider to ProfileCompletion tests

The ProfileCompletion component now uses useProfileCompletionIndicator
which relies on useActions that requires QueryClientProvider.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../ProfileWidgets/ProfileCompletion.spec.tsx | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx
index 74922ca082..32778fca44 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type {
   ProfileCompletion as ProfileCompletionData,
   LoggedUser,
@@ -7,6 +8,14 @@ import type {
 import { ProfileCompletion } from './ProfileCompletion';
 import { AuthContextProvider } from '../../../../contexts/AuthContext';
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
 const createMockUser = (
   profileCompletion: ProfileCompletionData,
 ): LoggedUser => ({
@@ -27,20 +36,22 @@ const createMockUser = (
 
 const renderWithAuth = (user: LoggedUser | null) => {
   return render(
-    <AuthContextProvider
-      user={user}
-      updateUser={jest.fn()}
-      tokenRefreshed
-      getRedirectUri={jest.fn()}
-      closeLogin={jest.fn()}
-      loadingUser={false}
-      loadedUserFromCache
-      refetchBoot={jest.fn()}
-      firstLoad={false}
-      isValidSession
-    >
-      <ProfileCompletion />
-    </AuthContextProvider>,
+    <QueryClientProvider client={queryClient}>
+      <AuthContextProvider
+        user={user}
+        updateUser={jest.fn()}
+        tokenRefreshed
+        getRedirectUri={jest.fn()}
+        closeLogin={jest.fn()}
+        loadingUser={false}
+        loadedUserFromCache
+        refetchBoot={jest.fn()}
+        firstLoad={false}
+        isValidSession
+      >
+        <ProfileCompletion />
+      </AuthContextProvider>
+    </QueryClientProvider>,
   );
 };
 

From 3a54ef200019ae877ee133b403b939dd1ecb7fc7 Mon Sep 17 00:00:00 2001
From: Amar Trebinjac <amartrebinjac@gmail.com>
Date: Tue, 13 Jan 2026 17:27:04 +0100
Subject: [PATCH 3/3] refactor: always show dismiss button on ProfileCompletion

Remove showDismiss prop and always display the dismiss button
regardless of where the component is rendered.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/ProfileMenu/ProfileMenu.tsx    |  2 +-
 .../ProfileWidgets/ProfileCompletion.tsx          | 15 ++++-----------
 2 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
index 20a1a5fa71..7c38a2d63c 100644
--- a/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
+++ b/packages/shared/src/components/ProfileMenu/ProfileMenu.tsx
@@ -62,7 +62,7 @@ export default function ProfileMenu({
       position={InteractivePopupPosition.ProfileMenu}
       className="flex w-full max-w-80 flex-col gap-3 !rounded-10 border border-border-subtlest-tertiary !bg-accent-pepper-subtlest p-3"
     >
-      {showProfileCompletion && <ProfileCompletion showDismiss />}
+      {showProfileCompletion && <ProfileCompletion />}
       <ProfileMenuHeader />
 
       <UpgradeToPlus
diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
index 12dac92d24..89b51bb094 100644
--- a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
+++ b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx
@@ -26,7 +26,6 @@ type CompletionItem = {
 
 type ProfileCompletionProps = {
   className?: string;
-  showDismiss?: boolean;
 };
 
 const getCompletionItems = (
@@ -77,7 +76,6 @@ const formatDescription = (incompleteItems: CompletionItem[]): string => {
 
 export const ProfileCompletion = ({
   className,
-  showDismiss = false,
 }: ProfileCompletionProps): ReactElement | null => {
   const { user } = useAuthContext();
   const { dismissIndicator } = useProfileCompletionIndicator();
@@ -115,19 +113,14 @@ export const ProfileCompletion = ({
         className,
       )}
     >
-      {showDismiss && (
-        <div className="flex justify-end px-2 pt-2">
-          <CloseButton size={ButtonSize.XSmall} onClick={dismissIndicator} />
-        </div>
-      )}
+      <div className="flex justify-end px-2 pt-2">
+        <CloseButton size={ButtonSize.XSmall} onClick={dismissIndicator} />
+      </div>
       <Link href={redirectPath}>
         <a
           href={redirectPath}
           rel={anchorDefaultRel}
-          className={classNames(
-            'flex w-full items-center gap-6 p-4',
-            showDismiss && 'pt-0',
-          )}
+          className="flex w-full items-center gap-6 p-4 pt-0"
         >
           <div className="flex min-w-0 flex-1 flex-col gap-1">
             <div className="flex items-center gap-1">