feat(integrations): keep activate button clickable on inactive plugin

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

Author: chickenn00dle

packages/components/src/card-feature/README.md

@@ -11,7 +11,7 @@ A card component for presenting a named feature or setting with a predictable, s
 
 | State | Condition | Button | Dropdown | Badge |
 |---|---|---|---|---|
-| **Unmet requirements** | `requirements` is set | "Enable" — disabled | Hidden | Error badge with `requirements` text |
+| **Unmet requirements** | `requirements` is set | "Enable" — disabled (clickable if `requirementsActionable`) | Hidden | Error badge with `requirements` text |
 | **Disabled** | `!enabled`, no requirements | "Enable" | Hidden | None |
 | **Enabled** | `enabled`, no requirements | "Configure" | Shown if `moreControls` provided | Success badge ("Enabled") |
 
@@ -155,6 +155,7 @@ import { __ } from '@wordpress/i18n';
 | `icon` | `CardFeatureIcon` | — | Icon displayed on the right. See `CardFeatureIcon` below. |
 | `enabled` | `boolean` | `false` | Whether the feature is currently enabled |
 | `requirements` | `string` | — | When set, enters the unmet-requirements state; value is used as the error badge text |
+| `requirementsActionable` | `boolean` | `false` | When `requirements` is set, keep the primary button clickable so it can remediate the unmet requirement |
 | `enableLabel` | `string` | `"Enable"` | Primary button label when not enabled |
 | `configureLabel` | `string` | `"Configure"` | Primary button label when enabled |
 | `onEnable` | `() => void` | — | Called when the primary button is clicked and the feature is not enabled |

packages/components/src/card-feature/index.tsx

@@ -49,10 +49,17 @@ type CardFeatureProps = {
 	/** Whether the feature is currently enabled. */
 	enabled?: boolean;
 	/**
-	 * When set, the card enters the "unmet requirements" state: the primary
-	 * button is disabled and an error badge displays this string.
+	 * When set, the card enters the "unmet requirements" state: an error
+	 * badge displays this string and the title/description are muted. By
+	 * default the primary button is disabled — set `requirementsActionable`
+	 * if the primary button is the remediation for the unmet requirement.
 	 */
 	requirements?: string;
+	/**
+	 * When `requirements` is set, keep the primary button clickable so the
+	 * user can remediate the unmet requirement from this card.
+	 */
+	requirementsActionable?: boolean;
 	/** Primary button label when not enabled. Default: "Enable". */
 	enableLabel?: string;
 	/** Primary button label when enabled. Default: "Configure". */
@@ -83,6 +90,7 @@ const CardFeature = ( {
 	icon,
 	enabled = false,
 	requirements,
+	requirementsActionable = false,
 	enableLabel,
 	configureLabel,
 	onEnable,
@@ -151,7 +159,7 @@ const CardFeature = ( {
 							<HStack expanded={ false } spacing="8px">
 								<Button
 									variant={ isConfigureState ? 'tertiary' : 'secondary' }
-									disabled={ isMuted }
+									disabled={ isMuted && ! requirementsActionable }
 									onClick={ handleButtonClick }
 									size="compact"
 								>

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

@@ -61,7 +61,7 @@ export const SettingsSection = ( { integrations, loading, onToggleEnabled, onAct
 							const missingPlugins = getMissingPlugins( integration );
 							const uninstalledPlugin = missingPlugins.find( plugin => ! plugin.is_installed );
 							const activatablePlugin = missingPlugins.length && ! uninstalledPlugin ? missingPlugins[ 0 ] : null;
-							const requirements = uninstalledPlugin
+							const requirements = missingPlugins.length
 								? sprintf(
 										/* translators: %s: comma-separated list of required plugin names. */
 										__( 'Requires %s', 'newspack-plugin' ),
@@ -87,6 +87,7 @@ export const SettingsSection = ( { integrations, loading, onToggleEnabled, onAct
 									icon={ INTEGRATION_ICONS[ id ] || DEFAULT_ICON }
 									enabled={ isEnabled }
 									requirements={ requirements }
+									requirementsActionable={ !! activatablePlugin }
 									enableLabel={ enableLabel }
 									configureLabel={ needsSetup ? __( 'Configure', 'newspack-plugin' ) : undefined }
 									onEnable={ onEnable }