feat(integrations): add inactive plugin state

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: chickenn00dle

includes/reader-activation/class-integrations.php

@@ -424,13 +424,14 @@ public static function get_all_integration_settings() {
 				continue;
 			}
 			$result[ $id ] = [
-				'id'          => $id,
-				'name'        => $integration->get_name(),
-				'description' => $integration->get_description(),
-				'enabled'     => self::is_enabled( $id ),
-				'is_set_up'   => $integration->is_set_up(),
-				'setup_url'   => $integration->get_setup_url(),
-				'settings'    => $integration->get_settings_config(),
+				'id'               => $id,
+				'name'             => $integration->get_name(),
+				'description'      => $integration->get_description(),
+				'enabled'          => self::is_enabled( $id ),
+				'is_set_up'        => $integration->is_set_up(),
+				'setup_url'        => $integration->get_setup_url(),
+				'settings'         => $integration->get_settings_config(),
+				'required_plugins' => $integration->get_required_plugins(),
 			];
 		}
 		return $result;

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

@@ -64,6 +64,23 @@ public function get_setup_url() {
 		return $newsletters_configuration_manager->get_settings_url();
 	}
 
+	/**
+	 * Get the plugins this integration depends on, with their install/active status.
+	 *
+	 * @return array List of associative arrays with keys `slug`, `name`, `is_active`, `is_installed`.
+	 */
+	public function get_required_plugins() {
+		$status = \Newspack\Plugin_Manager::get_managed_plugin_status( 'newspack-newsletters' );
+		return [
+			[
+				'slug'         => 'newspack-newsletters',
+				'name'         => __( 'Newspack Newsletters', 'newspack-plugin' ),
+				'is_active'    => 'active' === $status,
+				'is_installed' => 'uninstalled' !== $status,
+			],
+		];
+	}
+
 	/**
 	 * Register the settings fields declared by this integration.
 	 *

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

@@ -151,6 +151,19 @@ public function get_setup_url() {
 		return '';
 	}
 
+	/**
+	 * Get the plugins this integration depends on, with their active status.
+	 *
+	 * Child classes should override this to declare any plugins that must be
+	 * active for the integration to function. The integrations UI uses this
+	 * to surface a "requirements" affordance on the integration card.
+	 *
+	 * @return array List of associative arrays with keys `slug`, `name`, `is_active`.
+	 */
+	public function get_required_plugins() {
+		return [];
+	}
+
 	/**
 	 * Whether this integration supports frontend reader registration.
 	 *

src/wizards/audience/views/integrations/index.js

@@ -88,6 +88,15 @@ const AudienceIntegrations = ( props, ref ) => {
 			} );
 	}, [] );
 
+	const handleActivatePlugin = useCallback(
+		pluginSlug =>
+			apiFetch( {
+				path: `/newspack/v1/plugins/${ pluginSlug }/activate`,
+				method: 'POST',
+			} ).then( () => fetchSettings() ),
+		[ fetchSettings ]
+	);
+
 	const sharedProps = {
 		integrations,
 		pendingChanges,
@@ -97,6 +106,7 @@ const AudienceIntegrations = ( props, ref ) => {
 		onFieldChange: handleFieldChange,
 		onSave: handleSave,
 		onToggleEnabled: handleToggleEnabled,
+		onActivatePlugin: handleActivatePlugin,
 	};
 
 	return (

src/wizards/audience/views/integrations/settings-section.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Icon, envelope } from '@wordpress/icons';
 
 /**
@@ -32,7 +32,9 @@ const DEFAULT_ICON = {
 	backgroundColor: colors[ 'neutral-100' ],
 };
 
-export const SettingsSection = ( { integrations, loading, onToggleEnabled, history } ) => {
+const getMissingPlugins = integration => ( integration.required_plugins || [] ).filter( plugin => ! plugin.is_active );
+
+export const SettingsSection = ( { integrations, loading, onToggleEnabled, onActivatePlugin, history } ) => {
 	const integrationIds = Object.keys( integrations );
 
 	return (
@@ -54,22 +56,40 @@ export const SettingsSection = ( { integrations, loading, onToggleEnabled, histo
 				{ ! loading && integrationIds.length > 0 && (
 					<Grid columns={ 2 } gutter={ 16 }>
 						{ integrationIds.map( id => {
-							const { enabled, is_set_up: isSetUp, setup_url, name, description } = integrations[ id ];
+							const integration = integrations[ id ];
+							const { enabled, is_set_up: isSetUp, setup_url, name, description } = integration;
+							const missingPlugins = getMissingPlugins( integration );
+							const uninstalledPlugin = missingPlugins.find( plugin => ! plugin.is_installed );
+							const activatablePlugin = missingPlugins.length && ! uninstalledPlugin ? missingPlugins[ 0 ] : null;
+							const requirements = uninstalledPlugin
+								? sprintf(
+										/* translators: %s: comma-separated list of required plugin names. */
+										__( 'Requires %s', 'newspack-plugin' ),
+										missingPlugins.map( plugin => plugin.name ).join( ', ' )
+								  )
+								: undefined;
 							const isEnabled = enabled;
 							const needsSetup = ! isSetUp && !! setup_url;
 							const goToSetup = () => {
 								window.location.href = setup_url;
 							};
+							let enableLabel = isSetUp ? __( 'Enable', 'newspack-plugin' ) : __( 'Connect', 'newspack-plugin' );
+							let onEnable = needsSetup ? goToSetup : () => onToggleEnabled( id, true );
+							if ( activatablePlugin ) {
+								enableLabel = __( 'Activate', 'newspack-plugin' );
+								onEnable = () => onActivatePlugin( activatablePlugin.slug );
+							}
 							return (
 								<CardFeature
 									key={ id }
 									title={ name }
 									description={ description }
 									icon={ INTEGRATION_ICONS[ id ] || DEFAULT_ICON }
 									enabled={ isEnabled }
-									enableLabel={ isSetUp ? __( 'Enable', 'newspack-plugin' ) : __( 'Connect', 'newspack-plugin' ) }
+									requirements={ requirements }
+									enableLabel={ enableLabel }
 									configureLabel={ needsSetup ? __( 'Configure', 'newspack-plugin' ) : undefined }
-									onEnable={ needsSetup ? goToSetup : () => onToggleEnabled( id, true ) }
+									onEnable={ onEnable }
 									onConfigure={ needsSetup ? goToSetup : () => history?.push( `/settings/${ id }` ) }
 									moreControls={
 										isEnabled