Reader Onboarding: Hide onboarding when user clicks final "Continue" …

…button (#95567)

* Hide reader onboarding once completed

* Use absolute import path

client/reader/onboarding/constants.tsx

@@ -0,0 +1 @@
+export const READER_ONBOARDING_PREFERENCE_KEY = 'has_completed_reader_onboarding';

client/reader/onboarding/index.tsx

@@ -3,16 +3,28 @@ import { CircularProgressBar } from '@automattic/components';
 import { Checklist, ChecklistItem, Task } from '@automattic/launchpad';
 import { translate } from 'i18n-calypso';
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { READER_ONBOARDING_PREFERENCE_KEY } from 'calypso/reader/onboarding/constants';
+import InterestsModal from 'calypso/reader/onboarding/interests-modal';
+import SubscribeModal from 'calypso/reader/onboarding/subscribe-modal';
+import { useSelector } from 'calypso/state';
+import { getPreference, hasReceivedRemotePreferences } from 'calypso/state/preferences/selectors';
 import { getReaderFollowedTags } from 'calypso/state/reader/tags/selectors';
-import InterestsModal from './interests-modal';
-import SubscribeModal from './subscribe-modal';
+
 import './style.scss';
 
 const ReaderOnboarding = () => {
 	const [ isInterestsModalOpen, setIsInterestsModalOpen ] = useState( false );
 	const [ isDiscoverModalOpen, setIsDiscoverModalOpen ] = useState( false );
 	const followedTags = useSelector( getReaderFollowedTags );
+	const hasCompletedOnboarding = useSelector( ( state ) =>
+		getPreference( state, READER_ONBOARDING_PREFERENCE_KEY )
+	);
+	const preferencesLoaded = useSelector( hasReceivedRemotePreferences );
+
+	// Don't render anything until preferences are loaded or if onboarding is completed.
+	if ( ! preferencesLoaded || hasCompletedOnboarding ) {
+		return null;
+	}
 
 	const handleInterestsContinue = () => {
 		setIsInterestsModalOpen( false );

client/reader/onboarding/subscribe-modal/index.tsx

@@ -6,11 +6,13 @@ import React, { useMemo, useState, ComponentType, useEffect, useCallback } from
 import { connect, useSelector } from 'react-redux';
 import ConnectedReaderSubscriptionListItem from 'calypso/blocks/reader-subscription-list-item/connected';
 import wpcom from 'calypso/lib/wp';
+import { READER_ONBOARDING_PREFERENCE_KEY } 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 { requestPage } from 'calypso/state/reader/streams/actions';
 import { getReaderFollowedTags } from 'calypso/state/reader/tags/selectors';
-import { curatedBlogs } from '../curated-blogs';
 
 import './style.scss';
 
@@ -134,7 +136,7 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 		} );
 
 		return finalRec;
-	}, [ followedTagSlugs, apiRecommendedSites ] );
+	}, [ followedTagSlugs, apiRecommendedSites, dispatch ] );
 
 	const displayedRecommendations = useMemo( () => {
 		const startIndex = currentPage * 6;
@@ -182,6 +184,11 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 			.replace( /\/$/, '' ); // Remove trailing slash
 	};
 
+	const handleContinue = useCallback( () => {
+		dispatch( savePreference( READER_ONBOARDING_PREFERENCE_KEY, true ) );
+		onClose();
+	}, [ dispatch, onClose ] );
+
 	return (
 		isOpen && (
 			<Modal
@@ -232,7 +239,10 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 								{ loadMoreText }
 							</Button>
 						) }
-						<Button className="subscribe-modal__continue-button is-primary" onClick={ onClose }>
+						<Button
+							className="subscribe-modal__continue-button is-primary"
+							onClick={ handleContinue }
+						>
 							{ __( 'Continue' ) }
 						</Button>
 					</div>
@@ -265,4 +275,4 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 	);
 };
 
-export default connect( null, { requestPage } )( SubscribeModal );
+export default connect( null, { requestPage, savePreference } )( SubscribeModal );