Blocks: Show Blocks if they're missing a plan, add Upgrade Nudge

class.jetpack-gutenberg.php

@@ -185,9 +185,13 @@ public static function set_extension_available( $slug ) {
 	 *
 	 * @param string $slug Slug of the extension.
 	 * @param string $reason A string representation of why the extension is unavailable.
+	 * @param array  $details A free-form array containing more information on why the extension is unavailable.
 	 */
-	public static function set_extension_unavailable( $slug, $reason ) {
-		self::$availability[ self::remove_extension_prefix( $slug ) ] = $reason;
+	public static function set_extension_unavailable( $slug, $reason, $details = array() ) {
+		self::$availability[ self::remove_extension_prefix( $slug ) ] = array(
+			'reason'  => $reason,
+			'details' => $details,
+		);
 	}
 
 	/**
@@ -371,8 +375,10 @@ public static function get_availability() {
 			);
 
 			if ( ! $is_available ) {
-				$reason = isset( self::$availability[ $extension ] ) ? self::$availability[ $extension ] : 'missing_module';
+				$reason  = isset( self::$availability[ $extension ] ) ? self::$availability[ $extension ]['reason'] : 'missing_module';
+				$details = isset( self::$availability[ $extension ] ) ? self::$availability[ $extension ]['details'] : array();
 				$available_extensions[ $extension ]['unavailable_reason'] = $reason;
+				$available_extensions[ $extension ]['details']            = $details;
 			}
 		}
 

extensions/shared/get-jetpack-extension-availability.js

@@ -23,9 +23,10 @@ export default function getJetpackExtensionAvailability( name ) {
 		[ 'available_blocks', name, 'unavailable_reason' ],
 		'unknown'
 	);
+	const details = get( data, [ 'available_blocks', name, 'details' ], [] );
 
 	return {
 		available,
-		...( ! available && { unavailableReason } ),
+		...( ! available && { details, unavailableReason } ),
 	};
 }

extensions/shared/register-jetpack-block.js

@@ -8,9 +8,17 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import extensionList from '../index.json';
 import getJetpackExtensionAvailability from './get-jetpack-extension-availability';
+import wrapPaidBlock from './wrap-paid-block';
 
 const betaExtensions = extensionList.beta || [];
 
+function requiresPlan( unavailableReason, details ) {
+	if ( unavailableReason === 'missing_plan' ) {
+		return details.required_plan;
+	}
+	return false;
+}
+
 /**
  * Registers a gutenberg block if the availability requirements are met.
  *
@@ -20,9 +28,11 @@ const betaExtensions = extensionList.beta || [];
  * @returns {object|false} Either false if the block is not available, or the results of `registerBlockType`
  */
 export default function registerJetpackBlock( name, settings, childBlocks = [] ) {
-	const { available, unavailableReason } = getJetpackExtensionAvailability( name );
+	const { available, details, unavailableReason } = getJetpackExtensionAvailability( name );
 
-	if ( ! available ) {
+	const requiredPlan = requiresPlan( unavailableReason, details );
+
+	if ( ! available && ! requiredPlan ) {
 		if ( 'production' !== process.env.NODE_ENV ) {
 			// eslint-disable-next-line no-console
 			console.warn(
@@ -32,12 +42,13 @@ export default function registerJetpackBlock( name, settings, childBlocks = [] )
 		return false;
 	}
 
-	const result = registerBlockType(
-		`jetpack/${ name }`,
-		betaExtensions.includes( name )
-			? { ...settings, title: `${ settings.title } (beta)` }
-			: settings
-	);
+	const result = registerBlockType( `jetpack/${ name }`, {
+		...settings,
+		title: betaExtensions.includes( name ) ? `${ settings.title } (beta)` : settings.title,
+		edit: requiredPlan
+			? wrapPaidBlock( { feature: details.required_feature, requiredPlan } )( settings.edit )
+			: settings.edit,
+	} );
 
 	// Register child blocks. Using `registerBlockType()` directly avoids availability checks -- if
 	// their parent is available, we register them all, without checking for their individual availability.

extensions/shared/upgrade-nudge/index.jsx

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+import { __, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import Gridicon from 'gridicons';
+
+/**
+ * Internal dependencies
+ */
+import getSiteFragment from '../get-site-fragment';
+import './store';
+
+import './style.scss';
+
+const UpgradeNudge = ( { feature, plan, planName } ) => (
+	<div className="jetpack-upgrade-nudge">
+		<Gridicon className="jetpack-upgrade-nudge__icon" icon="star" size={ 18 } />
+		<div className="jetpack-upgrade-nudge__info">
+			<span className="jetpack-upgrade-nudge__title">
+				{ sprintf( __( 'Upgrade to %(planName)s', 'jetpack' ), {
+					planName,
+				} ) }
+			</span>
+			<span className="jetpack-upgrade-nudge__message">
+				{ __( 'To make this block visible on your site', 'jetpack' ) }
+			</span>
+		</div>
+		<Button
+			className="jetpack-upgrade-nudge__button"
+			href={ addQueryArgs( `https://wordpress.com/plans/${ getSiteFragment() }`, {
+				feature,
+				plan,
+			} ) }
+			isDefault
+		>
+			{ __( 'Upgrade', 'jetpack' ) }
+		</Button>
+	</div>
+);
+export default withSelect( ( select, { plan: planSlug } ) => {
+	const plan = select( 'wordpress-com/plans' ).getPlan( planSlug );
+	return { planName: get( plan, [ 'product_name_short' ] ) };
+} )( UpgradeNudge );

extensions/shared/upgrade-nudge/store.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+const actions = {
+	setPlans( plans ) {
+		return {
+			type: 'SET_PLANS',
+			plans,
+		};
+	},
+
+	fetchFromAPI( url ) {
+		return {
+			type: 'FETCH_FROM_API',
+			url,
+		};
+	},
+};
+
+registerStore( 'wordpress-com/plans', {
+	reducer( state = [], action ) {
+		switch ( action.type ) {
+			case 'SET_PLANS':
+				return action.plans;
+		}
+
+		return state;
+	},
+
+	actions,
+
+	selectors: {
+		getPlan( state, planSlug ) {
+			return state.find( plan => plan.product_slug === planSlug );
+		},
+	},
+
+	controls: {
+		FETCH_FROM_API( { url } ) {
+			// We cannot use `@wordpress/api-fetch` here since it unconditionally sends
+			// the `X-WP-Nonce` header, which is disallowed by WordPress.com.
+			// (To reproduce, note that you need to call `apiFetch` with `
+			// `{ credentials: 'same-origin', mode: 'cors' }`, since its defaults are
+			// different from `fetch`'s.)
+			return fetch( url ).then( response => response.json() );
+		},
+	},
+
+	resolvers: {
+		*getPlan() {
+			const url = 'https://public-api.wordpress.com/rest/v1.5/plans';
+			const plans = yield actions.fetchFromAPI( url );
+			return actions.setPlans( plans );
+		},
+	},
+} );

extensions/shared/upgrade-nudge/style.scss

@@ -0,0 +1,35 @@
+.jetpack-upgrade-nudge {
+	border-left: 3px solid var( --color-plan-premium );
+	box-shadow: 0 0 0 1px var( --color-border-subtle );
+	display: flex;
+	margin: 0 -1px 1em 0;
+	padding: 12px 16px;
+	text-align: left;
+	width: 100%;
+}
+
+.jetpack-upgrade-nudge__icon {
+	background: var( --color-plan-premium );
+	border-radius: 50%;
+	box-sizing: content-box;
+	margin-right: 16px;
+	color: var( --color-white );
+	padding: 6px;
+	align-self: center;
+	flex: 0 0 auto;
+	fill: var( --color-white );
+}
+
+.jetpack-upgrade-nudge__title {
+	font-size: 14px;
+}
+
+.jetpack-upgrade-nudge__message {
+	color: var( --color-text-subtle );
+	font-size: 12px;
+	display: block;
+}
+
+.jetpack-upgrade-nudge__button {
+	margin-left: auto;
+}

extensions/shared/wrap-paid-block/index.jsx

@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import UpgradeNudge from '../upgrade-nudge';
+
+import './style.scss';
+
+export default ( { feature, requiredPlan } ) =>
+	createHigherOrderComponent(
+		WrappedComponent => props => (
+			// Wraps the input component in a container, without mutating it. Good!
+			<div className="jetpack-paid-block__wrapper">
+				<UpgradeNudge feature={ feature } plan={ requiredPlan } />
+				<div className="jetpack-paid-block__disabled">
+					<WrappedComponent { ...props } />
+				</div>
+			</div>
+		),
+		'wrapPaidBlock'
+	);

extensions/shared/wrap-paid-block/style.scss

@@ -0,0 +1,8 @@
+.jetpack-paid-block__wrapper {
+	border: 1px solid var( --color-border-subtle );
+}
+
+.jetpack-paid-block__disabled {
+	opacity: 0.5;
+	padding: 10px;
+}

modules/simple-payments/simple-payments.php

@@ -64,7 +64,15 @@ function register_gutenberg_block() {
 		if ( $this->is_enabled_jetpack_simple_payments() ) {
 			jetpack_register_block( 'jetpack/simple-payments' );
 		} else {
-			Jetpack_Gutenberg::set_extension_unavailable( 'jetpack/simple-payments', 'missing_plan' );
+			$required_plan = ( defined( 'IS_WPCOM' ) && IS_WPCOM ) ? 'value_bundle' : 'jetpack_premium';
+			Jetpack_Gutenberg::set_extension_unavailable(
+				'jetpack/simple-payments',
+				'missing_plan',
+				array(
+					'required_feature' => 'simple-payments',
+					'required_plan' => ( defined( 'SHOW_BLOCK_UPGRADE_NUDGE' ) && SHOW_BLOCK_UPGRADE_NUDGE ) ? $required_plan : false
+				)
+			);
 		}
 	}