feat: add dismissable profile completion indicator (#5294)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: AmarTrebinjac

packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.spec.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type {
   ProfileCompletion as ProfileCompletionData,
   LoggedUser,
 } from '../../../../lib/user';
 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>,
   );
 };
 

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;
@@ -75,6 +78,7 @@ export const ProfileCompletion = ({
   className,
 }: ProfileCompletionProps): ReactElement | null => {
   const { user } = useAuthContext();
+  const { dismissIndicator } = useProfileCompletionIndicator();
   const profileCompletion = user?.profileCompletion;
 
   const items = useMemo(
@@ -103,16 +107,21 @@ 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,
+      )}
+    >
+      <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="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">
               <InfoIcon
@@ -152,8 +161,8 @@ export const ProfileCompletion = ({
               color="help"
             />
           </div>
-        </div>
-      </a>
-    </Link>
+        </a>
+      </Link>
+    </div>
   );
 };

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 = [

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,
     };
   };