feat(subscribers): add subscribers management UX prototype

includes/class-newspack.php

@@ -176,6 +176,7 @@ private function includes() {
 
 		include_once NEWSPACK_ABSPATH . 'includes/wizards/class-setup-wizard.php';
 		include_once NEWSPACK_ABSPATH . 'includes/wizards/class-components-demo.php';
+		include_once NEWSPACK_ABSPATH . 'includes/wizards/class-subscribers-demo.php';
 
 		// Listings Wizard.
 		include_once NEWSPACK_ABSPATH . 'includes/wizards/class-listings-wizard.php';

includes/class-wizards.php

@@ -42,6 +42,7 @@ public static function init() {
 	public static function init_wizards() {
 		self::$wizards = [
 			'components-demo'         => new Components_Demo(),
+			'subscribers-demo'        => new Subscribers_Demo(),
 			// v2 Information Architecture.
 			'newspack-dashboard'      => new Newspack_Dashboard(),
 			'setup'                   => new Setup_Wizard(),

includes/wizards/class-subscribers-demo.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Newspack Subscribers Demo.
+ *
+ * @package Newspack
+ */
+
+namespace Newspack;
+
+defined( 'ABSPATH' ) || exit;
+
+require_once NEWSPACK_ABSPATH . '/includes/wizards/class-wizard.php';
+
+/**
+ * Subscribers demo wizard.
+ */
+class Subscribers_Demo extends Wizard {
+
+	/**
+	 * The slug of this wizard.
+	 *
+	 * @var string
+	 */
+	protected $slug = 'newspack-subscribers-demo';
+
+	/**
+	 * The capability required to access this wizard.
+	 *
+	 * @var string
+	 */
+	protected $capability = 'manage_options';
+
+	/**
+	 * Whether the wizard should be displayed in the Newspack submenu.
+	 *
+	 * @var bool
+	 */
+	protected $hidden = true;
+
+	/**
+	 * Get the name for this wizard.
+	 *
+	 * @return string The wizard name.
+	 */
+	public function get_name() {
+		return esc_html__( 'Subscribers demo', 'newspack' );
+	}
+
+	/**
+	 * Enqueue Subscribers Demo scripts and styles.
+	 */
+	public function enqueue_scripts_and_styles() {
+		parent::enqueue_scripts_and_styles();
+
+		if ( filter_input( INPUT_GET, 'page', FILTER_SANITIZE_FULL_SPECIAL_CHARS ) !== $this->slug ) {
+			return;
+		}
+
+		wp_enqueue_script(
+			'newspack-subscribers-demo',
+			Newspack::plugin_url() . '/dist/subscribersDemo.js',
+			$this->get_script_dependencies( [ 'wp-html-entities' ] ),
+			NEWSPACK_PLUGIN_VERSION,
+			true
+		);
+
+		wp_enqueue_style(
+			'newspack-subscribers-demo',
+			Newspack::plugin_url() . '/dist/subscribersDemo.css',
+			[ 'wp-components' ],
+			NEWSPACK_PLUGIN_VERSION
+		);
+	}
+}

includes/wizards/class-wizard.php

@@ -190,8 +190,9 @@ public function enqueue_scripts_and_styles() {
 		}
 
 		if ( Newspack::is_debug_mode() && current_user_can( 'manage_options' ) ) {
-			$urls['components_demo'] = esc_url( admin_url( 'admin.php?page=newspack-components-demo' ) );
-			$urls['setup_wizard']    = esc_url( admin_url( 'admin.php?page=newspack-setup-wizard' ) );
+			$urls['components_demo']  = esc_url( admin_url( 'admin.php?page=newspack-components-demo' ) );
+			$urls['subscribers_demo'] = esc_url( admin_url( 'admin.php?page=newspack-subscribers-demo' ) );
+			$urls['setup_wizard']     = esc_url( admin_url( 'admin.php?page=newspack-setup-wizard' ) );
 			$urls['reset_url']       = esc_url(
 				add_query_arg(
 					array(

packages/components/src/footer/index.js

@@ -16,6 +16,7 @@ import './style.scss';
 const Footer = ( { simple = undefined } ) => {
 	const {
 		components_demo: componentsDemo = false,
+		subscribers_demo: subscribersDemo = false,
 		support = false,
 		setup_wizard: setupWizard = false,
 		reset_url: resetUrl = false,
@@ -47,6 +48,12 @@ const Footer = ( { simple = undefined } ) => {
 			url: componentsDemo,
 		} );
 	}
+	if ( subscribersDemo ) {
+		footerElements.push( {
+			label: __( 'Subscribers Demo', 'newspack-plugin' ),
+			url: subscribersDemo,
+		} );
+	}
 	if ( setupWizard ) {
 		footerElements.push( {
 			label: __( 'Setup Wizard', 'newspack-plugin' ),