feat(ras): custom newsletter list selection on registration

assets/components/src/sortable-newsletter-list-control/index.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, chevronUp, chevronDown, trash } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import ActionCard from '../action-card';
+import Button from '../button';
+import './style.scss';
+
+export default function SortableNewsletterListControl( {
+	lists,
+	selected = [],
+	onChange = () => {},
+} ) {
+	const getList = id => lists.find( list => list.id === id );
+	const getAvailableLists = () => {
+		return lists.filter( list => list.active && ! selected.find( ( { id } ) => id === list.id ) );
+	};
+	return (
+		<div className="newspack__newsletter-list-control">
+			<div className="newspack__newsletter-list-control__selected">
+				{ selected.map( selectedList => {
+					const list = getList( selectedList.id );
+					if ( ! list ) {
+						return null;
+					}
+					return (
+						<ActionCard
+							key={ `selected-${ selectedList.id }` }
+							title={ list.name }
+							description={ () => (
+								<>
+									<input
+										type="checkbox"
+										checked={ selectedList.checked }
+										onChange={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											const newSelected = [ ...selected ];
+											newSelected[ index ].checked = ! newSelected[ index ].checked;
+											onChange( newSelected );
+										} }
+									/>
+									{ __( 'Checked by default', 'newspack' ) }
+								</>
+							) }
+							isSmall
+							actionText={
+								<>
+									<Button
+										onClick={ () =>
+											onChange( selected.filter( ( { id } ) => id !== selectedList.id ) )
+										}
+										label={ __( 'Remove', 'newspack' ) }
+										icon={ trash }
+									/>
+								</>
+							}
+						>
+							{ selected.length > 1 && (
+								<span className="newspack__newsletter-list-control__sort-handle">
+									<button
+										onClick={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											if ( index === 0 ) {
+												return;
+											}
+											const newSelected = [ ...selected ];
+											newSelected.splice( index, 1 );
+											newSelected.splice( index - 1, 0, selectedList );
+											onChange( newSelected );
+										} }
+										className={
+											selected.findIndex( ( { id } ) => id === selectedList.id ) === 0
+												? 'disabled'
+												: ''
+										}
+									>
+										<Icon icon={ chevronUp } />
+									</button>
+									<button
+										onClick={ () => {
+											const index = selected.findIndex( ( { id } ) => id === selectedList.id );
+											const newSelected = [ ...selected ];
+											newSelected.splice( index, 1 );
+											newSelected.splice( index + 1, 0, selectedList );
+											onChange( newSelected );
+										} }
+										className={
+											selected.findIndex( ( { id } ) => id === selectedList.id ) ===
+											selected.length - 1
+												? 'disabled'
+												: ''
+										}
+									>
+										<Icon icon={ chevronDown } />
+									</button>
+								</span>
+							) }
+						</ActionCard>
+					);
+				} ) }
+			</div>
+			{ getAvailableLists().length > 0 && (
+				<p className="newspack__newsletter-list-control__lists">
+					{ selected.length > 0 ? (
+						<strong>{ __( 'Add more lists:', 'newspack' ) }</strong>
+					) : (
+						<strong>{ __( 'Select lists:', 'newspack' ) }</strong>
+					) }{ ' ' }
+					{ getAvailableLists().map( list => {
+						return (
+							<Button
+								key={ list.id }
+								variant="secondary"
+								onClick={ () => onChange( [ ...selected, { id: list.id, checked: true } ] ) }
+							>
+								{ list.name }
+							</Button>
+						);
+					} ) }
+				</p>
+			) }
+		</div>
+	);
+}

assets/components/src/sortable-newsletter-list-control/style.scss

@@ -0,0 +1,45 @@
+.newspack__newsletter-list-control {
+	&__selected {
+		.newspack-card {
+			display: flex;
+			justify-content: center;
+			min-height: 40px;
+			flex-direction: row;
+			.newspack-action-card__region {
+				align-items: center;
+				display: flex;
+				justify-content: space-between;
+				margin: 0;
+			}
+			.newspack-action-card__region-top {
+				flex: 1;
+				order: 2;
+			}
+			.newspack-action-card__region-children {
+				padding: 12px;
+			}
+		}
+	}
+	&__sort-handle {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		button {
+			background: transparent;
+			border: none;
+			margin: 0;
+			padding: 0;
+			height: 20px;
+			&.disabled {
+				cursor: default;
+				opacity: 0.3;
+			}
+		}
+	}
+	&__lists {
+		button {
+			margin-right: 0.5rem;
+		}
+	}
+}

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

@@ -25,6 +25,7 @@ import Prerequisite from '../../components/prerequisite';
 import ActiveCampaign from '../../components/active-campaign';
 import Mailchimp from '../../components/mailchimp';
 import { HANDOFF_KEY } from '../../../../components/src/consts';
+import SortableNewsletterListControl from '../../../../components/src/sortable-newsletter-list-control';
 
 export default withWizardScreen( ( { wizardApiFetch } ) => {
 	const [ inFlight, setInFlight ] = useState( false );
@@ -277,6 +278,26 @@ export default withWizardScreen( ( { wizardApiFetch } ) => {
 						</>
 					) }
 
+					<SectionHeader title={ __( 'Newsletter Subscription Lists', 'newspack' ) } />
+					<ActionCard
+						title={ __( 'Custom newsletter lists on registration', 'newspack' ) }
+						description={ __(
+							"Choose which of the Newspack Newsletters's subscription lists should be available upon registration.",
+							'newspack'
+						) }
+						toggleChecked={ config.use_custom_lists }
+						toggleOnChange={ value => updateConfig( 'use_custom_lists', value ) }
+					/>
+					{ config.use_custom_lists && (
+						<SortableNewsletterListControl
+							lists={ newspack_engagement_wizard.available_newsletter_lists }
+							selected={ config.newsletter_lists }
+							onChange={ selected => updateConfig( 'newsletter_lists', selected ) }
+						/>
+					) }
+
+					<hr />
+
 					<SectionHeader
 						title={ __( 'Email Service Provider (ESP) Advanced Settings', 'newspack' ) }
 						description={ __( 'Settings for Newspack Newsletters integration.', 'newspack' ) }
@@ -331,6 +352,8 @@ export default withWizardScreen( ( { wizardApiFetch } ) => {
 									mailchimp_audience_id: config.mailchimp_audience_id,
 									active_campaign_master_list: config.active_campaign_master_list,
 									memberships_require_all_plans: membershipsConfig.require_all_plans,
+									use_custom_lists: config.use_custom_lists,
+									newsletter_lists: config.newsletter_lists,
 								} );
 							} }
 							disabled={ inFlight }

includes/reader-activation/class-reader-activation.php

@@ -171,6 +171,8 @@ private static function get_settings_config() {
 			'enabled_account_link'        => true,
 			'account_link_menu_locations' => [ 'tertiary-menu' ],
 			'newsletters_label'           => __( 'Subscribe to our newsletters:', 'newspack-plugin' ),
+			'use_custom_lists'            => false,
+			'newsletter_lists'            => [],
 			'terms_text'                  => '',
 			'terms_url'                   => '',
 			'sync_esp'                    => true,
@@ -303,6 +305,34 @@ public static function is_esp_configured() {
 		return false;
 	}
 
+	/**
+	 * Get the newsletter lists that should be rendered during registration.
+	 *
+	 * @return array
+	 */
+	public static function get_registration_newsletter_lists() {
+		if ( ! method_exists( 'Newspack_Newsletters_Subscription', 'get_lists' ) ) {
+			return [];
+		}
+		$use_custom_lists = self::get_setting( 'use_custom_lists' );
+		$available_lists  = \Newspack_Newsletters_Subscription::get_lists_config();
+		if ( ! $use_custom_lists ) {
+			return $available_lists;
+		}
+		$lists = self::get_setting( 'newsletter_lists' );
+		if ( empty( $lists ) ) {
+			return [];
+		}
+		$registration_lists = [];
+		foreach ( $lists as $list ) {
+			if ( isset( $available_lists[ $list['id'] ] ) ) {
+				$registration_lists[ $list['id'] ]            = $available_lists[ $list['id'] ];
+				$registration_lists[ $list['id'] ]['checked'] = $list['checked'] ?? false;
+			}
+		}
+		return $registration_lists;
+	}
+
 	/**
 	 * Are all Reader Revenue features configured and ready to use?
 	 * Platform must be "Newspack" and all donation settings must be configured.
@@ -949,7 +979,7 @@ private static function get_account_link() {
 	 * Render a honeypot field to guard against bot form submissions. Note that
 	 * this field is named `email` to hopefully catch more bots who might be
 	 * looking for such fields, where as the "real" field is named "npe".
-	 * 
+	 *
 	 * Not rendered if reCAPTCHA is enabled as it's a superior spam protection.
 	 *
 	 * @param string $placeholder Placeholder text to render in the field.
@@ -1003,7 +1033,7 @@ public static function render_auth_form( $is_inline = false ) {
 
 		$newsletters_label = self::get_setting( 'newsletters_label' );
 		if ( method_exists( 'Newspack_Newsletters_Subscription', 'get_lists_config' ) ) {
-			$lists_config = \Newspack_Newsletters_Subscription::get_lists_config();
+			$lists_config = self::get_registration_newsletter_lists();
 			if ( ! \is_wp_error( $lists_config ) ) {
 				$lists = $lists_config;
 			}
@@ -1091,7 +1121,14 @@ public static function render_auth_form( $is_inline = false ) {
 								<?php
 								self::render_subscription_lists_inputs(
 									$lists,
-									array_keys( $lists ),
+									array_keys(
+										array_filter(
+											$lists,
+											function( $list ) {
+												return $list['checked'] ?? false;
+											}
+										)
+									),
 									[
 										'single_label' => $newsletters_label,
 									]
@@ -1228,8 +1265,8 @@ public static function render_subscription_lists_inputs( $lists = [], $checked =
 			]
 		);
 
-		if ( empty( $lists ) && method_exists( 'Newspack_Newsletters_Subscription', 'get_lists_config' ) ) {
-			$lists = \Newspack_Newsletters_Subscription::get_lists_config();
+		if ( empty( $lists ) ) {
+			$lists = self::get_registration_newsletter_lists();
 		}
 
 		/**

includes/wizards/class-engagement-wizard.php

@@ -411,6 +411,10 @@ public function enqueue_scripts_and_styles() {
 			$data['new_subscription_lists_url'] = \Newspack\Newsletters\Subscription_Lists::get_add_new_url();
 		}
 
+		if ( method_exists( 'Newspack_Newsletters_Subscription', 'get_lists' ) ) {
+			$data['available_newsletter_lists'] = \Newspack_Newsletters_Subscription::get_lists();
+		}
+
 		$newspack_popups = Configuration_Managers::configuration_manager_class_for_plugin_slug( 'newspack-popups' );
 		if ( $newspack_popups->is_configured() ) {
 			$data['preview_query_keys'] = $newspack_popups->preview_query_keys();