feat(reader-activation): settings wizard

assets/reader-activation/auth.scss

@@ -134,6 +134,8 @@
 			max-width: 544px;
 			background: #fff;
 			position: relative;
+			max-height: 100vh;
+			overflow-y: auto;
 		}
 
 		&__header {
@@ -230,6 +232,15 @@
 				outline-offset: -1px;
 			}
 		}
+
+		&__terms-text {
+			font-size: 0.8em;
+			margin: 0.5rem 0;
+			color: #757575;
+			a {
+				color: inherit;
+			}
+		}
 	}
 
 	/**

assets/wizards/engagement/index.js

@@ -1,3 +1,4 @@
+/* global newspack_engagement_wizard */
 import '../../shared/js/public-path';
 
 /**
@@ -15,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import { withWizard } from '../../components/src';
 import Router from '../../components/src/proxied-imports/router';
-import { Commenting, Newsletters, Social, RelatedContent } from './views';
+import { ReaderActivation, Commenting, Newsletters, Social, RelatedContent } from './views';
 
 const { HashRouter, Redirect, Route, Switch } = Router;
 
@@ -72,6 +73,10 @@ class EngagementWizard extends Component {
 		const { relatedPostsEnabled, relatedPostsError, relatedPostsMaxAge, relatedPostsUpdated } =
 			this.state;
 
+		const defaultPath = newspack_engagement_wizard.has_reader_activation
+			? '/reader-activation'
+			: '/newsletters';
+
 		const tabbed_navigation = [
 			{
 				label: __( 'Newsletters', 'newspack' ),
@@ -92,6 +97,13 @@ class EngagementWizard extends Component {
 				path: '/recirculation',
 			},
 		];
+		if ( newspack_engagement_wizard.has_reader_activation ) {
+			tabbed_navigation.unshift( {
+				label: __( 'Reader Activation', 'newspack' ),
+				path: '/reader-activation',
+				exact: true,
+			} );
+		}
 		const props = {
 			headerText: __( 'Engagement', 'newspack' ),
 			tabbedNavigation: tabbed_navigation,
@@ -101,6 +113,17 @@ class EngagementWizard extends Component {
 				<HashRouter hashType="slash">
 					<Switch>
 						{ pluginRequirements }
+						{ newspack_engagement_wizard.has_reader_activation && (
+							<Route
+								path="/reader-activation"
+								render={ () => (
+									<ReaderActivation
+										subHeaderText={ __( 'Configure your reader activation settings', 'newspack' ) }
+										{ ...props }
+									/>
+								) }
+							/>
+						) }
 						<Route
 							path="/newsletters"
 							render={ () => (
@@ -149,7 +172,7 @@ class EngagementWizard extends Component {
 								/>
 							) }
 						/>
-						<Redirect to="/newsletters" />
+						<Redirect to={ defaultPath } />
 					</Switch>
 				</HashRouter>
 			</Fragment>

assets/wizards/engagement/views/index.js

@@ -1,4 +1,5 @@
 export { default as Newsletters } from './newsletters';
+export { default as ReaderActivation } from './reader-activation';
 export { default as Social } from './social';
 export { default as RelatedContent } from './related-content';
 export { default as Commenting } from './commenting';

assets/wizards/engagement/views/reader-activation/index.js

@@ -0,0 +1,110 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { CheckboxControl } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { useEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Notice,
+	Grid,
+	Card,
+	Button,
+	SectionHeader,
+	TextControl,
+	withWizardScreen,
+} from '../../../../components/src';
+
+export default withWizardScreen( () => {
+	const [ inFlight, setInFlight ] = useState( false );
+	const [ config, setConfig ] = useState( {} );
+	const [ error, setError ] = useState( null );
+	const updateConfig = ( key, val ) => {
+		setConfig( { ...config, [ key ]: val } );
+	};
+	const fetchConfig = () => {
+		setInFlight( true );
+		apiFetch( {
+			path: '/newspack/v1/wizard/newspack-engagement-wizard/reader-activation',
+		} )
+			.then( setConfig )
+			.catch( setError )
+			.finally( () => setInFlight( false ) );
+	};
+	const saveConfig = () => {
+		setInFlight( true );
+		apiFetch( {
+			path: '/newspack/v1/wizard/newspack-engagement-wizard/reader-activation',
+			method: 'post',
+			data: config,
+		} )
+			.then( setConfig )
+			.catch( setError )
+			.finally( () => setInFlight( false ) );
+	};
+	useEffect( fetchConfig, [] );
+	return (
+		<>
+			{ error && (
+				<Notice
+					noticeText={ error?.message || __( 'Something went wrong.', 'newspack' ) }
+					isError
+				/>
+			) }
+			<Card noBorder>
+				<SectionHeader
+					title={ __( 'Reader Activation', 'newspack' ) }
+					description={ __( 'Configure a set of features for reader activation.', 'newspack' ) }
+				/>
+				<CheckboxControl
+					label={ __( 'Enable Reader Activation', 'newspack' ) }
+					help={ __( 'Whether to enable reader activation features for your site.', 'newspack' ) }
+					checked={ !! config.enabled }
+					onChange={ value => updateConfig( 'enabled', value ) }
+				/>
+				<hr />
+				<CheckboxControl
+					label={ __( 'Enable Sign In/Account link', 'newspack' ) }
+					help={ __(
+						'Display an account link in the site header. It will allow readers to register and access their account.',
+						'newspack'
+					) }
+					checked={ !! config.enabled_account_link }
+					onChange={ value => updateConfig( 'enabled_account_link', value ) }
+				/>
+				<TextControl
+					label={ __( 'Newsletter subscription text on registration', 'newspack' ) }
+					help={ __(
+						'The text to display while subscribing to newsletters on the registration modal.',
+						'newspack'
+					) }
+					value={ config.newsletters_label }
+					onChange={ value => updateConfig( 'newsletters_label', value ) }
+				/>
+				<Grid columns={ 2 } gutter={ 16 }>
+					<TextControl
+						label={ __( 'Terms & Conditions Text', 'newspack' ) }
+						help={ __( 'Terms and conditions text to display on registration.', 'newspack' ) }
+						value={ config.terms_text }
+						onChange={ value => updateConfig( 'terms_text', value ) }
+					/>
+					<TextControl
+						label={ __( 'Terms & Conditions URL', 'newspack' ) }
+						help={ __( 'URL to the page containing the terms and conditions.', 'newspack' ) }
+						value={ config.terms_url }
+						onChange={ value => updateConfig( 'terms_url', value ) }
+					/>
+				</Grid>
+			</Card>
+			<div className="newspack-buttons-card">
+				<Button isPrimary onClick={ saveConfig } disabled={ inFlight }>
+					{ __( 'Save Changes', 'newspack' ) }
+				</Button>
+			</div>
+		</>
+	);
+} );