From 9ef0e6d1de8d4dafda4d2af1304206d0f8190b15 Mon Sep 17 00:00:00 2001
From: Jared Rethman <jaredrethman@gmail.com>
Date: Thu, 25 Apr 2024 10:51:27 -0500
Subject: [PATCH] feat(ras): skip campaign setup (#3051)

* feat(ras): skip campaign setup boilerplate

added new route, added fe logic

* feat(ras): added `is_skipped` to prerequisite status endpoint

* refactor: moved callback to named function

added ui to indicate async skipping flow

* feat: added skip logic to prerequisite component

combined "skipped" and "active" into single `isValid` const

* feat: `is_skipped` property to prerequisite type

added skip logic to RAS wizard

* fix: circle ci / typescript

* fix: ci / eslint

* refactor: remove redirect after skip

added allow continue when skipped.

* refactor: allow parametrized skip

* refactor: revert any type cast

* feat: pr feedback - added redirect, activation skip and remove `activationStep[0]`

* feat: pr feedback, appended `[skipped]` to select items
---
 .../engagement/components/prerequisite.tsx    | 19 +++---
 assets/wizards/engagement/components/types.ts |  1 +
 .../views/reader-activation/campaign.js       | 65 ++++++++++++++++++-
 .../views/reader-activation/complete.js       | 63 ++++++++++++++----
 .../views/reader-activation/index.js          |  4 +-
 .../views/reader-activation/style.scss        |  4 ++
 .../class-reader-activation.php               |  3 +-
 includes/wizards/class-engagement-wizard.php  | 33 +++++++++-
 8 files changed, 162 insertions(+), 30 deletions(-)

diff --git a/assets/wizards/engagement/components/prerequisite.tsx b/assets/wizards/engagement/components/prerequisite.tsx
index 0c8b9aa825..16ae5b86fd 100644
--- a/assets/wizards/engagement/components/prerequisite.tsx
+++ b/assets/wizards/engagement/components/prerequisite.tsx
@@ -23,10 +23,11 @@ export default function Prerequisite( {
 	saveConfig,
 }: PrequisiteProps ) {
 	const { href } = prerequisite;
+	const isValid = Boolean( prerequisite.active || prerequisite.is_skipped );
 
 	// If the prerequisite is active but has empty fields, show a warning.
 	const hasEmptyFields = () => {
-		if ( prerequisite.active && prerequisite.fields && prerequisite.warning ) {
+		if ( isValid && prerequisite.fields && prerequisite.warning ) {
 			const emptyValues = Object.keys( prerequisite.fields ).filter(
 				fieldName => '' === config[ fieldName as keyof Config ]
 			);
@@ -93,9 +94,7 @@ export default function Prerequisite( {
 									: sprintf(
 											// Translators: Save or Update settings.
 											__( '%s settings', 'newspack-plugin' ),
-											prerequisite.active
-												? __( 'Update', 'newspack-plugin' )
-												: __( 'Save', 'newspack-plugin' )
+											isValid ? __( 'Update', 'newspack-plugin' ) : __( 'Save', 'newspack-plugin' )
 									  ) }
 							</Button>
 						</div>
@@ -138,7 +137,7 @@ export default function Prerequisite( {
 									} }
 								>
 									{ /* eslint-disable no-nested-ternary */ }
-									{ ( prerequisite.active
+									{ ( isValid
 										? __( 'Update ', 'newspack-plugin' )
 										: prerequisite.fields
 										? __( 'Save ', 'newspack-plugin' )
@@ -158,8 +157,10 @@ export default function Prerequisite( {
 	);
 
 	let status = __( 'Pending', 'newspack-plugin' );
-	if ( prerequisite.active ) {
-		status = __( 'Ready', 'newspack-plugin' );
+	if ( isValid ) {
+		status = `${ __( 'Ready', 'newspack-plugin' ) } ${
+			prerequisite.is_skipped ? `(${ __( 'Skipped', 'newspack-plugin' ) })` : ''
+		}`;
 	}
 	if ( prerequisite.is_unavailable ) {
 		status = __( 'Unavailable', 'newspack-plugin' );
@@ -170,14 +171,14 @@ export default function Prerequisite( {
 			className="newspack-ras-wizard__prerequisite"
 			isMedium
 			expandable={ ! prerequisite.is_unavailable }
-			collapse={ prerequisite.active }
+			collapse={ isValid }
 			title={ prerequisite.label }
 			description={ sprintf(
 				/* translators: %s: Prerequisite status */
 				__( 'Status: %s', 'newspack-plugin' ),
 				status
 			) }
-			checkbox={ prerequisite.active ? 'checked' : 'unchecked' }
+			checkbox={ isValid ? 'checked' : 'unchecked' }
 			notificationLevel="info"
 			notification={ hasEmptyFields() }
 		>
diff --git a/assets/wizards/engagement/components/types.ts b/assets/wizards/engagement/components/types.ts
index e1e947d277..dc577e72e3 100644
--- a/assets/wizards/engagement/components/types.ts
+++ b/assets/wizards/engagement/components/types.ts
@@ -127,6 +127,7 @@ export type PrequisiteProps = {
 		action_enabled?: boolean;
 		disabled_text?: string;
 		is_unavailable?: boolean;
+		is_skipped?: boolean;
 	};
 };
 
diff --git a/assets/wizards/engagement/views/reader-activation/campaign.js b/assets/wizards/engagement/views/reader-activation/campaign.js
index 66bca1d63e..b9e216ab05 100644
--- a/assets/wizards/engagement/views/reader-activation/campaign.js
+++ b/assets/wizards/engagement/views/reader-activation/campaign.js
@@ -16,16 +16,26 @@ import {
 	SectionHeader,
 	Waiting,
 	withWizardScreen,
+	utils,
 } from '../../../../components/src';
 import Prompt from '../../components/prompt';
+import Router from '../../../../components/src/proxied-imports/router';
 import './style.scss';
 
+const { useHistory } = Router;
+
 export default withWizardScreen( () => {
+	const { is_skipped_campaign_setup, reader_activation_url } = newspack_engagement_wizard;
+
 	const [ inFlight, setInFlight ] = useState( false );
 	const [ error, setError ] = useState( false );
 	const [ prompts, setPrompts ] = useState( null );
 	const [ allReady, setAllReady ] = useState( false );
-	const { reader_activation_url } = newspack_engagement_wizard;
+	const [ skipped, setSkipped ] = useState( {
+		status: '',
+		isSkipped: is_skipped_campaign_setup === '1',
+	} );
+	const history = useHistory();
 
 	const fetchPrompts = () => {
 		setError( false );
@@ -40,6 +50,45 @@ export default withWizardScreen( () => {
 			.finally( () => setInFlight( false ) );
 	};
 
+	/**
+	 * Display prompt requiring editors to confirm skipping, on confirmation send request to
+	 * server to store skipped option in options table and redirect back to RAS
+	 *
+	 * @return {void}
+	 */
+	async function onSkipCampaignSetup() {
+		if (
+			! utils.confirmAction(
+				__(
+					'Are you sure you want to skip setting up a reader activation campaign?',
+					'newspack-plugin'
+				)
+			)
+		) {
+			return;
+		}
+		setError( false );
+		setSkipped( { ...skipped, status: 'pending' } );
+		try {
+			const request = await apiFetch( {
+				path: '/newspack/v1/wizard/newspack-engagement-wizard/reader-activation/skip-campaign-setup',
+				method: 'POST',
+				data: { skip: ! skipped.isSkipped },
+			} );
+			if ( ! request.updated ) {
+				setError( { message: __( 'Server not updated', 'newspack-plugin' ) } );
+				setSkipped( { isSkipped: false, status: '' } );
+				return;
+			}
+			setSkipped( { isSkipped: Boolean( request.skipped ), status: '' } );
+			newspack_engagement_wizard.is_skipped_campaign_setup = request.skipped ? '1' : '';
+			history.push( '/reader-activation/complete' );
+		} catch ( err ) {
+			setError( err );
+			setSkipped( { isSkipped: false, status: '' } );
+		}
+	}
+
 	useEffect( () => {
 		window.scrollTo( 0, 0 );
 		fetchPrompts();
@@ -83,9 +132,21 @@ export default withWizardScreen( () => {
 					/>
 				) ) }
 			<div className="newspack-buttons-card">
+				<Button
+					isTertiary
+					disabled={ inFlight || skipped.isSkipped || skipped.status === 'pending' }
+					onClick={ onSkipCampaignSetup }
+				>
+					{ /* eslint-disable-next-line no-nested-ternary */ }
+					{ skipped.status === 'pending'
+						? __( 'Skipping…', 'newspack-plugin' )
+						: skipped.isSkipped
+						? __( 'Skipped', 'newspack-plugin' )
+						: __( 'Skip', 'newspack-plugin' ) }
+				</Button>
 				<Button
 					isPrimary
-					disabled={ inFlight || ! allReady }
+					disabled={ inFlight || ( ! allReady && ! skipped.isSkipped ) }
 					href={ `${ reader_activation_url }/complete` }
 				>
 					{ __( 'Continue', 'newspack-plugin' ) }
diff --git a/assets/wizards/engagement/views/reader-activation/complete.js b/assets/wizards/engagement/views/reader-activation/complete.js
index 78be902a09..22e2bb5a7f 100644
--- a/assets/wizards/engagement/views/reader-activation/complete.js
+++ b/assets/wizards/engagement/views/reader-activation/complete.js
@@ -22,18 +22,26 @@ import {
 } from '../../../../components/src';
 
 const listItems = [
-	__(
-		'Your <strong>current segments and prompts</strong> will be deactivated and archived.',
-		'newspack-plugin'
-	),
-	__(
-		'<strong>Reader registration</strong> will be activated to enable better targeting for driving engagement and conversations.',
-		'newspack-plugin'
-	),
-	__(
-		'The <strong>Reader Activation campaign</strong> will be activated with default segments and settings.',
-		'newspack-plugin'
-	),
+	{
+		text: __(
+			'Your <strong>current segments and prompts</strong> will be deactivated and archived.',
+			'newspack-plugin'
+		),
+		isSkipped: '<span class="is-skipped">[skipped]</span>',
+	},
+	{
+		text: __(
+			'<strong>Reader registration</strong> will be activated to enable better targeting for driving engagement and conversations.',
+			'newspack-plugin'
+		),
+	},
+	{
+		text: __(
+			'The <strong>Reader Activation campaign</strong> will be activated with default segments and settings.',
+			'newspack-plugin'
+		),
+		isSkipped: '<span class="is-skipped">[skipped]</span>',
+	},
 ];
 
 const activationSteps = [
@@ -42,6 +50,8 @@ const activationSteps = [
 	__( 'Activating Reader Activation Campaign…', 'newspack-plugin' ),
 ];
 
+const activationStepsCount = activationSteps.length;
+
 /**
  * Get a random number between min and max.
  *
@@ -60,7 +70,29 @@ export default withWizardScreen( () => {
 	const [ progressLabel, setProgressLabel ] = useState( false );
 	const [ completed, setCompleted ] = useState( false );
 	const timer = useRef();
-	const { reader_activation_url } = newspack_engagement_wizard;
+	const { reader_activation_url, is_skipped_campaign_setup = '' } = newspack_engagement_wizard;
+	const isSkippedCampaignSetup = is_skipped_campaign_setup === '1';
+
+	/**
+	 * If skipped, remove first item.
+	 */
+	if ( isSkippedCampaignSetup && activationSteps.length !== activationStepsCount - 1 ) {
+		activationSteps.shift();
+	}
+
+	/**
+	 * Generate step list strings
+	 */
+	for ( const listItemIndex in listItems ) {
+		if ( ! listItems[ listItemIndex ].text ) {
+			continue;
+		}
+		const suffix = isSkippedCampaignSetup ? ` ${ listItems[ listItemIndex ].isSkipped ?? '' }` : '';
+		listItems[ listItemIndex ] = `${ listItems[ listItemIndex ].text }${ suffix }`;
+		if ( isSkippedCampaignSetup ) {
+			listItems[ listItemIndex ] += ` ${ listItems[ listItemIndex ].isSkipped ?? '' }`;
+		}
+	}
 
 	useEffect( () => {
 		if ( timer.current ) {
@@ -80,7 +112,7 @@ export default withWizardScreen( () => {
 			setProgressLabel( __( 'Done!', 'newspack-plugin' ) );
 			setTimeout( () => {
 				setInFlight( false );
-				window.location = reader_activation_url;
+				// window.location = reader_activation_url;
 			}, 3000 );
 		}
 	}, [ completed, progress ] );
@@ -95,6 +127,9 @@ export default withWizardScreen( () => {
 				await apiFetch( {
 					path: '/newspack/v1/wizard/newspack-engagement-wizard/reader-activation/activate',
 					method: 'post',
+					data: {
+						skip_activation: isSkippedCampaignSetup,
+					},
 				} )
 			);
 		} catch ( err ) {
diff --git a/assets/wizards/engagement/views/reader-activation/index.js b/assets/wizards/engagement/views/reader-activation/index.js
index 1507278dbe..dfd2c7ffb8 100644
--- a/assets/wizards/engagement/views/reader-activation/index.js
+++ b/assets/wizards/engagement/views/reader-activation/index.js
@@ -96,7 +96,9 @@ export default withWizardScreen( ( { wizardApiFetch } ) => {
 		const _allReady =
 			! missingPlugins.length &&
 			prerequisites &&
-			Object.keys( prerequisites ).every( key => prerequisites[ key ]?.active );
+			Object.keys( prerequisites ).every(
+				key => prerequisites[ key ]?.active || prerequisites[ key ]?.skipped
+			);
 
 		setAllReady( _allReady );
 
diff --git a/assets/wizards/engagement/views/reader-activation/style.scss b/assets/wizards/engagement/views/reader-activation/style.scss
index 878daf7ea6..6083db16d9 100644
--- a/assets/wizards/engagement/views/reader-activation/style.scss
+++ b/assets/wizards/engagement/views/reader-activation/style.scss
@@ -4,6 +4,10 @@
 	margin-top: 0 !important;
 }
 
+span.is-skipped {
+	color: wp-colors.$gray-700;
+}
+
 .newspack-ras-campaign {
 	&__prompt-wizard,
 	&__completed {
diff --git a/includes/reader-activation/class-reader-activation.php b/includes/reader-activation/class-reader-activation.php
index a1bcce29a5..44f865a617 100644
--- a/includes/reader-activation/class-reader-activation.php
+++ b/includes/reader-activation/class-reader-activation.php
@@ -407,7 +407,7 @@ public static function is_transactional_email_configured() {
 	 * TODO: Make this dynamic once the third UI screen to generate the prompts is built.
 	 */
 	public static function is_ras_campaign_configured() {
-		return self::is_enabled();
+		return self::is_enabled() || get_option( Engagement_Wizard::SKIP_CAMPAIGN_SETUP_OPTION, '' ) === '1';
 	}
 
 	/**
@@ -500,6 +500,7 @@ public static function get_prerequisites_status() {
 			],
 			'ras_campaign'     => [
 				'active'         => self::is_ras_campaign_configured(),
+				'is_skipped'     => get_option( Engagement_Wizard::SKIP_CAMPAIGN_SETUP_OPTION, '' ) === '1',
 				'plugins'        => [
 					'newspack-popups' => class_exists( '\Newspack_Popups_Model' ),
 				],
diff --git a/includes/wizards/class-engagement-wizard.php b/includes/wizards/class-engagement-wizard.php
index 1a99b7206a..37f9dc9bb6 100644
--- a/includes/wizards/class-engagement-wizard.php
+++ b/includes/wizards/class-engagement-wizard.php
@@ -7,7 +7,10 @@
 
 namespace Newspack;
 
-use WP_Error, WP_Query;
+use TypeError;
+use WP_Error;
+use WP_REST_Request;
+use WP_REST_Response;
 
 defined( 'ABSPATH' ) || exit;
 
@@ -18,6 +21,8 @@
  */
 class Engagement_Wizard extends Wizard {
 
+	const SKIP_CAMPAIGN_SETUP_OPTION = '_newspack_ras_skip_campaign_setup';
+
 	/**
 	 * The slug of this wizard.
 	 *
@@ -108,6 +113,24 @@ public function register_api_endpoints() {
 				'permission_callback' => [ $this, 'api_permissions_check' ],
 			]
 		);
+		register_rest_route(
+			NEWSPACK_API_NAMESPACE,
+			'/wizard/' . $this->slug . '/reader-activation/skip-campaign-setup',
+			[
+				'methods'             => \WP_REST_Server::EDITABLE,
+				'callback'            => function( $request ) {
+					$skip = $request->get_param( 'skip' );
+					$skip_campaign_setup = update_option( static::SKIP_CAMPAIGN_SETUP_OPTION, $skip );
+					return rest_ensure_response( 
+						[ 
+							'skipped' => $skip,
+							'updated' => $skip_campaign_setup,
+						]
+					);
+				},
+				'permission_callback' => [ $this, 'api_permissions_check' ],
+			]
+		);
 		register_rest_route(
 			NEWSPACK_API_NAMESPACE,
 			'/wizard/' . $this->slug . '/newsletters',
@@ -262,10 +285,12 @@ public function api_update_reader_activation_settings( $request ) {
 	/**
 	 * Activate reader activation and publish RAS prompts/segments.
 	 *
+	 * @param WP_REST_Request $request WP Rest Request object.
 	 * @return WP_REST_Response
 	 */
-	public function api_activate_reader_activation() {
-		$response = Reader_Activation::activate();
+	public function api_activate_reader_activation( WP_REST_Request $request ) {
+		$skip_activation = $request->get_param( 'skip_activation' ) ?? false;
+		$response = $skip_activation ? true : Reader_Activation::activate();
 
 		if ( \is_wp_error( $response ) ) {
 			return new \WP_REST_Response( [ 'message' => $response->get_error_message() ], 400 );
@@ -429,6 +454,8 @@ public function enqueue_scripts_and_styles() {
 			$data['preview_archive']    = $newspack_popups->preview_archive();
 		}
 
+		$data['is_skipped_campaign_setup'] = get_option( static::SKIP_CAMPAIGN_SETUP_OPTION, '' );
+
 		\wp_localize_script(
 			'newspack-engagement-wizard',
 			'newspack_engagement_wizard',