Reader Onboarding: Setup basic framework and feature flag (#95230)

* Setup basic framework and feature flag

* Make the modal fullscreen

client/reader/following/main.jsx

@@ -1,9 +1,11 @@
+import config from '@automattic/calypso-config';
 import clsx from 'clsx';
 import { translate } from 'i18n-calypso';
 import AsyncLoad from 'calypso/components/async-load';
 import BloganuaryHeader from 'calypso/components/bloganuary-header';
 import NavigationHeader from 'calypso/components/navigation-header';
 import withDimensions from 'calypso/lib/with-dimensions';
+import ReaderOnboarding from 'calypso/reader/onboarding';
 import SuggestionProvider from 'calypso/reader/search-stream/suggestion-provider';
 import Stream, { WIDE_DISPLAY_CUTOFF } from 'calypso/reader/stream';
 import ReaderListFollowedSites from 'calypso/reader/stream/reader-list-followed-sites';
@@ -28,6 +30,7 @@ function FollowingStream( { ...props } ) {
 					} ) }
 				/>
 				<FollowingIntro />
+				{ config.isEnabled( 'reader/onboarding' ) && <ReaderOnboarding /> }
 			</Stream>
 			<AsyncLoad require="calypso/lib/analytics/track-resurrections" placeholder={ null } />
 		</>

client/reader/onboarding/index.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+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 );
+
+	return (
+		<>
+			<div className="reader-onboarding">
+				<div className="reader-onboarding__intro-column">
+					<h2>Your personal reading adventure</h2>
+					<p>Tailor your feed, connect with your favorite topics</p>
+				</div>
+				<div className="reader-onboarding__steps-column">
+					<ul>
+						<li>
+							<button
+								className="reader-onboarding__link-button"
+								onClick={ () => setIsInterestsModalOpen( true ) }
+							>
+								Select some of your interests
+							</button>
+						</li>
+						<li>
+							<button
+								className="reader-onboarding__link-button"
+								onClick={ () => setIsDiscoverModalOpen( true ) }
+							>
+								Discover and subscribe to sites you'll love
+							</button>
+						</li>
+					</ul>
+				</div>
+			</div>
+
+			<InterestsModal
+				isOpen={ isInterestsModalOpen }
+				onClose={ () => setIsInterestsModalOpen( false ) }
+			/>
+			<SubscribeModal
+				isOpen={ isDiscoverModalOpen }
+				onClose={ () => setIsDiscoverModalOpen( false ) }
+			/>
+		</>
+	);
+};
+
+export default ReaderOnboarding;

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

@@ -0,0 +1,20 @@
+import { Modal } from '@wordpress/components';
+import React from 'react';
+
+interface InterestsModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+const InterestsModal: React.FC< InterestsModalProps > = ( { isOpen, onClose } ) => {
+	return (
+		isOpen && (
+			<Modal title="Select Your Interests" onRequestClose={ onClose } isFullScreen>
+				<p>Interest content here.</p>
+				<button onClick={ onClose }>Close</button>
+			</Modal>
+		)
+	);
+};
+
+export default InterestsModal;

client/reader/onboarding/style.scss

@@ -0,0 +1,30 @@
+.reader-onboarding {
+	display: flex;
+	width: 100%;
+	flex-wrap: wrap;
+
+	&__link-button {
+		background: none;
+		border: none;
+		padding: 0;
+		color: #00e;
+		text-decoration: underline;
+		cursor: pointer;
+		font: inherit;
+	}
+
+	&__intro-column,
+	&__steps-column {
+		flex: 1 1 300px;
+		min-width: 300px; // Minimum width before wrapping
+		padding: 20px;
+	}
+
+	&__intro-column {
+		background-color: #aaa;
+	}
+
+	&__steps-column {
+		background-color: #eee;
+	}
+}

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

@@ -0,0 +1,20 @@
+import { Modal } from '@wordpress/components';
+import React from 'react';
+
+interface SubscribeModalProps {
+	isOpen: boolean;
+	onClose: () => void;
+}
+
+const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } ) => {
+	return (
+		isOpen && (
+			<Modal title="Discover and Subscribe" onRequestClose={ onClose } isFullScreen>
+				<p>Subscription content here.</p>
+				<button onClick={ onClose }>Close</button>
+			</Modal>
+		)
+	);
+};
+
+export default SubscribeModal;

config/development.json

@@ -197,6 +197,7 @@
 		"reader/full-errors": true,
 		"reader/list-management": true,
 		"reader/public-tag-pages": true,
+		"reader/onboarding": true,
 		"readymade-templates/showcase": true,
 		"redirect-fallback-browsers": false,
 		"rum-tracking/logstash": true,