change logic to check if step 2 is done

Automattic · Jan 24, 2025 · c9aeea7 · c9aeea7
1 parent c3e2eb8
commit c9aeea7
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 25 deletions.
diff --git a/client/reader/onboarding/index.tsx b/client/reader/onboarding/index.tsx
@@ -18,6 +18,7 @@ import {
 } from 'calypso/state/current-user/selectors';
 import { savePreference } from 'calypso/state/preferences/actions';
 import { getPreference, hasReceivedRemotePreferences } from 'calypso/state/preferences/selectors';
+import { getReaderFollows } from 'calypso/state/reader/follows/selectors';
 import { getReaderFollowedTags } from 'calypso/state/reader/tags/selectors';
 import getUserSettings from 'calypso/state/selectors/get-user-settings';
 import './style.scss';
@@ -32,7 +33,7 @@ const ReaderOnboarding = ( {
 	const [ isInterestsModalOpen, setIsInterestsModalOpen ] = useState( false );
 	const [ isDiscoverModalOpen, setIsDiscoverModalOpen ] = useState( false );
 	const followedTags = useSelector( getReaderFollowedTags );
-	const hasCompletedOnboarding = useSelector( ( state ) =>
+	let hasCompletedOnboarding = !! useSelector( ( state ) =>
 		getPreference( state, READER_ONBOARDING_PREFERENCE_KEY )
 	);
 	const hasSeenOnboarding = useSelector( ( state ) =>
@@ -41,16 +42,45 @@ const ReaderOnboarding = ( {
 	const preferencesLoaded = useSelector( hasReceivedRemotePreferences );
 	const userRegistrationDate = useSelector( getCurrentUserDate );
 	const isEmailVerified = useSelector( isCurrentUserEmailVerified );
+	const follows = useSelector( getReaderFollows );
+
+	const userSettings = useSelector( getUserSettings );
+	const hasCompletedAccountProfile = !! (
+		userSettings?.has_gravatar &&
+		userSettings?.description &&
+		userSettings?.first_name &&
+		userSettings?.last_name
+	);
+	let accountProfileTitle = translate( 'Add your avatar and fill out your profile' );
+	if ( ! hasCompletedAccountProfile && userSettings?.has_gravatar ) {
+		accountProfileTitle = translate( 'Fill out your profile' );
+	}
+
+	const taskOneCompleted = followedTags ? followedTags.length > 2 : false;
+	const taskTwoCompleted = follows?.length > 2;
 
 	const dispatch = useDispatch();
 
+	// If the user has completed the onboarding, save the preference and track the event.
+	if (
+		! hasCompletedOnboarding &&
+		taskOneCompleted &&
+		taskTwoCompleted &&
+		hasCompletedAccountProfile
+	) {
+		dispatch( savePreference( READER_ONBOARDING_PREFERENCE_KEY, true ) );
+		recordTracksEvent( `${ READER_ONBOARDING_TRACKS_EVENT_PREFIX }completed` );
+		hasCompletedOnboarding = true;
+	}
+
 	const shouldShowOnboarding =
 		forceShow ||
 		isEnabled( 'reader/force-onboarding' ) ||
 		( preferencesLoaded &&
 			! hasCompletedOnboarding &&
 			userRegistrationDate &&
 			isEmailVerified &&
+			! hasCompletedAccountProfile &&
 			new Date( userRegistrationDate ) >= new Date( '2024-10-01T00:00:00Z' ) );
 
 	// Modal state handlers with tracking.
@@ -109,27 +139,13 @@ const ReaderOnboarding = ( {
 		}
 	}, [ shouldShowOnboarding, hasSeenOnboarding, dispatch ] );
 
-	const userSettings = useSelector( getUserSettings );
-	const hasCompletedAccountProfile = !! (
-		userSettings?.has_gravatar &&
-		userSettings?.description &&
-		userSettings?.first_name &&
-		userSettings?.last_name
-	);
-	let accountProfileTitle = translate( 'Add your avatar and fill out your profile' );
-	if ( ! hasCompletedAccountProfile && userSettings?.has_gravatar ) {
-		accountProfileTitle = translate( 'Fill out your profile' );
-	}
-
 	// Notify the parent component if onboarding will render.
 	onRender?.( shouldShowOnboarding );
 
 	if ( ! shouldShowOnboarding ) {
 		return null;
 	}
 
-	const taskOneCompleted = followedTags ? followedTags.length > 2 : false;
-
 	const tasks: Task[] = [
 		{
 			id: 'select-interests',
@@ -142,15 +158,15 @@ const ReaderOnboarding = ( {
 			id: 'discover-sites',
 			title: translate( "Discover and subscribe to sites you'll love" ),
 			actionDispatch: openDiscoverModal,
-			completed: false,
+			completed: taskTwoCompleted,
 			disabled: ! taskOneCompleted,
 		},
 		{
 			id: 'account-profile',
 			title: accountProfileTitle,
 			actionDispatch: redirectToAccountProfile,
 			completed: hasCompletedAccountProfile,
-			disabled: ! taskOneCompleted,
+			disabled: ! taskTwoCompleted,
 		},
 	];
 

diff --git a/client/reader/onboarding/subscribe-modal/index.tsx b/client/reader/onboarding/subscribe-modal/index.tsx
@@ -10,14 +10,10 @@ import { AnyAction } from 'redux';
 import ConnectedReaderSubscriptionListItem from 'calypso/blocks/reader-subscription-list-item/connected';
 import wpcom from 'calypso/lib/wp';
 import { trackScrollPage } from 'calypso/reader/controller-helper';
-import {
-	READER_ONBOARDING_PREFERENCE_KEY,
-	READER_ONBOARDING_TRACKS_EVENT_PREFIX,
-} from 'calypso/reader/onboarding/constants';
+import { READER_ONBOARDING_TRACKS_EVENT_PREFIX } from 'calypso/reader/onboarding/constants';
 import { curatedBlogs } from 'calypso/reader/onboarding/curated-blogs';
 import Stream from 'calypso/reader/stream';
 import { useDispatch } from 'calypso/state';
-import { savePreference } from 'calypso/state/preferences/actions';
 import { requestFollows } from 'calypso/state/reader/follows/actions';
 import { getReaderFollows } from 'calypso/state/reader/follows/selectors';
 import {
@@ -272,9 +268,6 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 	}, [ dispatch, onClose ] );
 
 	const handleContinue = useCallback( () => {
-		dispatch( savePreference( READER_ONBOARDING_PREFERENCE_KEY, true ) );
-		recordTracksEvent( `${ READER_ONBOARDING_TRACKS_EVENT_PREFIX }completed` );
-
 		// Invalidate the subscriptions count query to refresh the Recent stream.
 		queryClient.invalidateQueries( {
 			queryKey: [ 'read', 'subscriptions-count' ],