At a Glance: Improve Akismet Upgrade and Activate Flow

_inc/client/at-a-glance/akismet.jsx

@@ -5,19 +5,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { numberFormat, translate as __ } from 'i18n-calypso';
-import { PLAN_JETPACK_PREMIUM } from 'lib/plans/constants';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import analytics from 'lib/analytics';
+import { PLAN_JETPACK_PREMIUM } from 'lib/plans/constants';
 import Card from 'components/card';
 import DashItem from 'components/dash-item';
+import restApi from 'rest-api';
 import QueryAkismetData from 'components/data/query-akismet-data';
 import { getAkismetData } from 'state/at-a-glance';
 import { getSitePlan } from 'state/site';
 import { isDevMode } from 'state/connection';
-import { getUpgradeUrl } from 'state/initial-state';
+import { getApiNonce, getUpgradeUrl } from 'state/initial-state';
 import JetpackBanner from 'components/jetpack-banner';
 
 class DashAkismet extends Component {
@@ -38,14 +40,6 @@ class DashAkismet extends Component {
 		isDevMode: '',
 	};
 
-	trackInstallClick() {
-		analytics.tracks.recordJetpackClick( {
-			type: 'install-link',
-			target: 'at-a-glance',
-			feature: 'anti-spam',
-		} );
-	}
-
 	trackActivateClick() {
 		analytics.tracks.recordJetpackClick( {
 			type: 'activate-link',
@@ -54,9 +48,21 @@ class DashAkismet extends Component {
 		} );
 	}
 
+	onActivateClick = () => {
+		this.trackActivateClick();
+
+		restApi.activateAkismet().then( () => {
+			window.location.href = this.props.siteAdminUrl + 'admin.php?page=akismet-key-config';
+		} );
+
+		return false;
+	};
+
 	getContent() {
 		const akismetData = this.props.akismetData;
 		const labelName = __( 'Anti-spam' );
+		const isSiteOnFreePlan =
+			'jetpack_free' === get( this.props.sitePlan, 'product_slug', 'jetpack_free' );
 
 		const support = {
 			text: __(
@@ -66,6 +72,30 @@ class DashAkismet extends Component {
 			privacyLink: 'https://automattic.com/privacy/',
 		};
 
+		const getAkismetUpgradeBanner = () => {
+			const description = __( 'Already have a key? {{a}}Activate Akismet{{/a}}', {
+				components: {
+					a: <a href="javascript:void(0)" onClick={ this.onActivateClick } />,
+				},
+			} );
+
+			return (
+				<JetpackBanner
+					callToAction={ __( 'Upgrade' ) }
+					title={ __(
+						'Automatically clear spam from your comments and forms so you can get back to your business.'
+					) }
+					description={ description }
+					disableHref="false"
+					href={ this.props.upgradeUrl }
+					eventFeature="akismet"
+					path="dashboard"
+					plan={ PLAN_JETPACK_PREMIUM }
+					icon="flag"
+				/>
+			);
+		};
+
 		if ( 'N/A' === akismetData ) {
 			return (
 				<DashItem label={ labelName } module="akismet" support={ support } pro={ true }>
@@ -76,88 +106,65 @@ class DashAkismet extends Component {
 
 		const hasSitePlan = false !== this.props.sitePlan;
 
-		if ( 'not_installed' === akismetData ) {
-			return (
-				<DashItem
-					label={ labelName }
-					module="akismet"
-					support={ support }
-					className="jp-dash-item__is-inactive"
-					status={ hasSitePlan ? 'pro-uninstalled' : 'no-pro-uninstalled-or-inactive' }
-					pro={ true }
-				>
-					<p className="jp-dash-item__description">
-						{ __( 'For state-of-the-art spam defense, please {{a}}install Akismet{{/a}}.', {
-							components: {
-								a: (
-									<a
-										href={ 'https://wordpress.com/plugins/akismet/' + this.props.siteRawUrl }
-										onClick={ this.trackInstallClick }
-										target="_blank"
-										rel="noopener noreferrer"
-									/>
-								),
-							},
-						} ) }
-					</p>
-				</DashItem>
-			);
+		if ( isSiteOnFreePlan ) {
+			if ( 'not_installed' === akismetData ) {
+				return (
+					<DashItem
+						label={ labelName }
+						module="akismet"
+						support={ support }
+						className="jp-dash-item__is-inactive"
+						status={ hasSitePlan ? 'pro-uninstalled' : 'no-pro-uninstalled-or-inactive' }
+						pro={ true }
+						overrideContent={ getAkismetUpgradeBanner() }
+					/>
+				);
+			}
+
+			if ( 'not_active' === akismetData ) {
+				return (
+					<DashItem
+						label={ labelName }
+						module="akismet"
+						support={ support }
+						status={ hasSitePlan ? 'pro-inactive' : 'no-pro-uninstalled-or-inactive' }
+						className="jp-dash-item__is-inactive"
+						pro={ true }
+						overrideContent={ getAkismetUpgradeBanner() }
+					/>
+				);
+			}
+
+			if ( 'invalid_key' === akismetData ) {
+				return (
+					<DashItem
+						label={ labelName }
+						module="akismet"
+						support={ support }
+						className="jp-dash-item__is-inactive"
+						pro={ true }
+						overrideContent={ getAkismetUpgradeBanner() }
+					/>
+				);
+			}
 		}
 
-		if ( 'not_active' === akismetData ) {
+		if ( [ 'not_installed', 'not_active', 'invalid_key' ].includes( akismetData ) ) {
 			return (
 				<DashItem
 					label={ labelName }
 					module="akismet"
 					support={ support }
-					status={ hasSitePlan ? 'pro-inactive' : 'no-pro-uninstalled-or-inactive' }
 					className="jp-dash-item__is-inactive"
 					pro={ true }
 				>
-					<p className="jp-dash-item__description">
-						{ __( 'For state-of-the-art spam defense, please {{a}}activate Akismet{{/a}}.', {
-							components: {
-								a: (
-									<a
-										href={ 'https://wordpress.com/plugins/akismet/' + this.props.siteRawUrl }
-										onClick={ this.trackActivateClick }
-										target="_blank"
-										rel="noopener noreferrer"
-									/>
-								),
-							},
-						} ) }
-					</p>
+					{ __(
+						"Your Jetpack plan provides anti-spam protection through Akismet. Click 'set up' to enable it on your site."
+					) }
 				</DashItem>
 			);
 		}
 
-		if ( 'invalid_key' === akismetData ) {
-			return (
-				<DashItem
-					label={ labelName }
-					module="akismet"
-					support={ support }
-					className="jp-dash-item__is-inactive"
-					pro={ true }
-					overrideContent={
-						<JetpackBanner
-							callToAction={ __( 'Upgrade' ) }
-							title={ __(
-								'Automatically clear spam from your comments and forms so you can get back to your business.'
-							) }
-							disableHref="false"
-							href={ this.props.upgradeUrl }
-							eventFeature="akismet"
-							path="dashboard"
-							plan={ PLAN_JETPACK_PREMIUM }
-							icon="flag"
-						/>
-					}
-				/>
-			);
-		}
-
 		return [
 			<DashItem
 				key="comment-moderation"
@@ -202,4 +209,5 @@ export default connect( state => ( {
 	sitePlan: getSitePlan( state ),
 	isDevMode: isDevMode( state ),
 	upgradeUrl: getUpgradeUrl( state, 'aag-akismet' ),
+	nonce: getApiNonce( state ),
 } ) )( DashAkismet );

_inc/client/pro-status/index.jsx

@@ -241,9 +241,10 @@ class ProStatus extends React.Component {
 						! this.props.isAkismetKeyValid &&
 						! this.props.fetchingAkismetData &&
 						active &&
-						installed
+						installed &&
+						! hasFree
 					) {
-						return this.getProActions( 'invalid_key', 'anti-spam' );
+						return this.getSetUpButton( feature );
 					}
 					break;
 			}

_inc/client/rest-api/index.js

@@ -157,6 +157,11 @@ function JetpackRestApiClient( root, nonce ) {
 				.then( checkStatus )
 				.then( parseJsonResponse ),
 
+		activateAkismet: () =>
+			postRequest( `${ apiRoot }jetpack/v4/plugins/akismet/activate`, postParams )
+				.then( checkStatus )
+				.then( parseJsonResponse ),
+
 		getAkismetData: () =>
 			getRequest( `${ apiRoot }jetpack/v4/module/akismet/data`, getParams )
 				.then( checkStatus )

_inc/lib/class.core-rest-api-endpoints.php

@@ -367,6 +367,12 @@ public static function register_endpoints() {
 			'permission_callback' => __CLASS__ . '::activate_plugins_permission_check',
 		) );
 
+		register_rest_route( 'jetpack/v4', '/plugins/akismet/activate', array(
+			'methods' => WP_REST_Server::EDITABLE,
+			'callback' => __CLASS__ . '::activate_akismet',
+			'permission_callback' => __CLASS__ . '::activate_plugins_permission_check',
+		) );
+
 		// Plugins: check if the plugin is active.
 		register_rest_route( 'jetpack/v4', '/plugin/(?P<plugin>[a-z\/\.\-_]+)', array(
 			'methods' => WP_REST_Server::READABLE,
@@ -3039,6 +3045,30 @@ public static function get_plugins() {
 		return new WP_Error( 'not_found', esc_html__( 'Unable to list plugins.', 'jetpack' ), array( 'status' => 404 ) );
 	}
 
+	/**
+	 * Ensures that Akismet is installed and activated.
+	 *
+	 * @since 7.7
+	 *
+	 * @return WP_REST_Response A response indicating whether or not the installation was successful.
+	 */
+	public static function activate_akismet() {
+		jetpack_require_lib( 'plugins' );
+		$result = Jetpack_Plugins::install_and_activate_plugin('akismet');
+
+		if ( is_wp_error( $result ) ) {
+			return rest_ensure_response( array(
+				'code'    => 'failure',
+				'message' => esc_html__( 'Unable to activate Akismet', 'jetpack' )
+			) );
+		} else {
+			return rest_ensure_response( array(
+				'code'    => 'success',
+				'message' => esc_html__( 'Activated Akismet', 'jetpack' )
+			) );
+		}
+	}
+
 	/**
 	 * Get data about the queried plugin. Currently it only returns whether the plugin is active or not.
 	 *