From c3ca7c85becb648e161e3bd32db42a190885f840 Mon Sep 17 00:00:00 2001
From: Dusty Reagan <dusty@dustyreagan.com>
Date: Tue, 22 Oct 2024 08:57:45 -0500
Subject: [PATCH] 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         |  1 +
 client/reader/onboarding/index.tsx             | 18 +++++++++++++++---
 .../onboarding/subscribe-modal/index.tsx       | 18 ++++++++++++++----
 3 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 client/reader/onboarding/constants.tsx

diff --git a/client/reader/onboarding/constants.tsx b/client/reader/onboarding/constants.tsx
new file mode 100644
index 0000000000000..064c17bb765b5
--- /dev/null
+++ b/client/reader/onboarding/constants.tsx
@@ -0,0 +1 @@
+export const READER_ONBOARDING_PREFERENCE_KEY = 'has_completed_reader_onboarding';
diff --git a/client/reader/onboarding/index.tsx b/client/reader/onboarding/index.tsx
index 1e77424912bee..4337b0684d2a8 100644
--- a/client/reader/onboarding/index.tsx
+++ b/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 );
diff --git a/client/reader/onboarding/subscribe-modal/index.tsx b/client/reader/onboarding/subscribe-modal/index.tsx
index 881b1da7ca45a..48a7e49b1b90a 100644
--- a/client/reader/onboarding/subscribe-modal/index.tsx
+++ b/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 );