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( - - - , + + + + + , ); }; diff --git a/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx b/packages/shared/src/features/profile/components/ProfileWidgets/ProfileCompletion.tsx index 9b3eca595b..89b51bb094 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; @@ -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 ( - - -
+
+
+ +
+ +
-
-
- + + +
); }; 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, }; };