Uses the banner component to display an upgrade notice.

_inc/client/components/settings-card/index.jsx

@@ -2,27 +2,135 @@
  * External dependencies
  */
 import React from 'react';
+import { connect } from 'react-redux';
 import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import {
+	PLAN_JETPACK_PREMIUM,
+	PLAN_JETPACK_BUSINESS,
+	FEATURE_SECURITY_SCANNING_JETPACK,
+	FEATURE_SEO_TOOLS_JETPACK,
+	FEATURE_VIDEO_HOSTING_JETPACK,
+	getPlanClass
+} from 'lib/plans/constants';
+import { getSiteRawUrl } from 'state/initial-state';
+import {
+	getSitePlan,
+	isFetchingSiteData
+} from 'state/site';
 import SectionHeader from 'components/section-header';
+import Banner from 'components/banner';
 import Button from 'components/button';
 
-const SettingsCard = props => {
+export const SettingsCard = props => {
 	let module = props.module
 			? props.getModule( props.module )
 			: false,
 		header = props.header
 			? props.header
 			: '',
-		isSaving = props.isSavingAnyOption();
+		isSaving = props.isSavingAnyOption(),
+		feature = props.feature
+			? props.feature
+			: false,
+		siteRawUrl = props.siteRawUrl;
 
 	if ( '' === header && module ) {
 		header = module.name;
 	}
 
+	let getBanner = ( feature ) => {
+		let planClass = getPlanClass( props.sitePlan.product_slug );
+		let list;
+		let commonProps = {
+			feature: feature,
+			href: 'https://jetpack.com/redirect/?source=plans-compare-personal&site=' + siteRawUrl
+		};
+
+		switch( feature ) {
+			case FEATURE_VIDEO_HOSTING_JETPACK:
+				if (
+					'is-premium-plan' === planClass
+					|| 'is-business-plan' === planClass
+				) {
+					return '';
+				}
+
+				return (
+					<Banner
+						title={ __( 'Add premium video' ) }
+						description={ __( 'Upgrade to the Premium plan to easily upload videos to your website and display them using a fast, unbranded, customizable player.' ) }
+						plan={ PLAN_JETPACK_PREMIUM }
+						{ ...commonProps }
+					/>
+				);
+
+			case FEATURE_SECURITY_SCANNING_JETPACK:
+				if ( 'is-business-plan' === planClass ) {
+					return '';
+				}
+
+				list =  [
+					__( 'Automatic backups of every single aspect of your site' ),
+					__( 'Comprehensive and automated scanning for any security vulnerabilites or threats' ),
+				];
+
+				if ( 'is-premium-plan' !== planClass ) {
+					list.unshift(
+						__( 'State-of-the-art spam defence powered by Akismet' )
+					);
+				}
+
+				return (
+					<Banner
+						title={ __( 'Upgrade to further protect your site' ) }
+						list={ list }
+						plan={
+							'is-premium-plan' !== planClass
+							? PLAN_JETPACK_PREMIUM
+							: PLAN_JETPACK_BUSINESS
+						}
+						{ ...commonProps }
+					/>
+				);
+
+			case FEATURE_SEO_TOOLS_JETPACK:
+				if ( 'is-business-plan' === planClass ) {
+					return '';
+				}
+
+				list =  [
+					__( 'SEO tools to optimize your site for search engines and social media sharing' ),
+					__( 'Google Analytics tracking settings to complement WordPress.com stats' ),
+				];
+
+				if ( 'is-premium-plan' !== planClass ) {
+					list.unshift(
+						__( 'Enable advertisements on your site to earn money from impressions' )
+					);
+				}
+
+				return (
+					<Banner
+						title={ __( 'Upgrade to monetize your site and unlock more tools' ) }
+						list={ list }
+						plan={
+							'is-premium-plan' !== planClass
+							? PLAN_JETPACK_PREMIUM
+							: PLAN_JETPACK_BUSINESS
+						}
+						{ ...commonProps }
+					/>
+				);
+
+			default:
+				return '';
+		}
+	};
+
 	return (
 		<form className="jp-form-settings-card">
 			<SectionHeader label={ header }>
@@ -36,16 +144,25 @@ const SettingsCard = props => {
 							disabled={ isSaving || ! props.isDirty() }>
 							{
 								isSaving
-									? __( 'Saving…', { context: 'Button caption' } )
-									: __( 'Save settings', { context: 'Button caption' } )
+								? __( 'Saving…', { context: 'Button caption' } )
+								: __( 'Save settings', { context: 'Button caption' } )
 							}
 						</Button>
 					)
 				}
 			</SectionHeader>
 			{ props.children }
+			{ getBanner( feature ) }
 		</form>
 	);
 };
 
-export default SettingsCard;
+export default connect(
+	( state ) => {
+		return {
+			sitePlan: getSitePlan( state ),
+			fetchingSiteData: isFetchingSiteData( state ),
+			siteRawUrl: getSiteRawUrl( state ),
+		};
+	}
+)( SettingsCard );

_inc/client/components/settings-card/test/component.js

@@ -9,7 +9,7 @@ import sinon from 'sinon';
 /**
  * Internal dependencies
  */
-import SettingsCard from '../index';
+import { SettingsCard } from '../index';
 
 describe( 'SettingsCard', () => {
 
@@ -25,7 +25,10 @@ describe( 'SettingsCard', () => {
 		isSavingAnyOption: () => false,
 		isDirty: () => true,
 		header: '',
-		support: ''
+		support: '',
+		sitePlan: {
+			product_slug: 'jetpack_free'
+		}
 	};
 
 	const wrapper = shallow( <SettingsCard { ...testProps } /> );

_inc/client/security/backups-scan.jsx

@@ -7,6 +7,7 @@ import { translate as __ } from 'i18n-calypso';
 /**
  * Internal dependencies
  */
+import { FEATURE_SECURITY_SCANNING_JETPACK } from 'lib/plans/constants';
 import ExternalLink from 'components/external-link';
 import { ModuleSettingsForm as moduleSettingsForm } from 'components/module-settings/module-settings-form';
 import SettingsCard from 'components/settings-card';
@@ -22,6 +23,7 @@ export const BackupsScan = moduleSettingsForm(
 		render() {
 			return (
 				<SettingsCard
+					feature={ FEATURE_SECURITY_SCANNING_JETPACK }
 					{ ...this.props }
 					header={ __( 'Backups and security scanning', { context: 'Settings header' } ) }
 					hideButton>

_inc/client/traffic/seo.jsx

@@ -8,6 +8,7 @@ import ExternalLink from 'components/external-link';
 /**
  * Internal dependencies
  */
+import { FEATURE_SEO_TOOLS_JETPACK } from 'lib/plans/constants';
 import { ModuleSettingsForm as moduleSettingsForm } from 'components/module-settings/module-settings-form';
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
@@ -20,6 +21,7 @@ export const SEO = moduleSettingsForm(
 				<SettingsCard
 					{ ...this.props }
 					header={ __( 'Search engine optimization', { context: 'Settings header' } ) }
+					feature={ FEATURE_SEO_TOOLS_JETPACK }
 					hideButton>
 					<SettingsGroup disableInDevMode module={ { module: 'seo-tools' } } support="https://jetpack.com/support/seo-tools/">
 						<p>

_inc/client/writing/media.jsx

@@ -9,6 +9,7 @@ import CompactFormToggle from 'components/form/form-toggle/compact';
 /**
  * Internal dependencies
  */
+import { FEATURE_VIDEO_HOSTING_JETPACK } from 'lib/plans/constants';
 import {
 	FormFieldset,
 	FormLegend,
@@ -77,7 +78,10 @@ const Media = moduleSettingsForm(
 				isCarouselActive = this.props.getOptionValue( 'carousel' );
 
 			let photonSettings = (
-				<SettingsGroup hasChild disableInDevMode module={ photon }>
+				<SettingsGroup
+					hasChild
+					disableInDevMode
+					module={ photon }>
 					<ModuleToggle
 						slug="photon"
 						disabled={ this.props.isUnavailableInDevMode( 'photon' ) }
@@ -142,7 +146,8 @@ const Media = moduleSettingsForm(
 			return (
 				<SettingsCard
 					{ ...this.props }
-					header={ __( 'Media' ) }>
+					header={ __( 'Media' ) }
+					feature={ FEATURE_VIDEO_HOSTING_JETPACK }>
 					{ this.props.isModuleFound( 'photon' ) && photonSettings }
 					{ this.props.isModuleFound( 'carousel' ) && carouselSettings }
 				</SettingsCard>

webpack.config.js

@@ -60,6 +60,10 @@ var webpackConfig = {
 			{
 				test: /\.scss$/,
 				loader: ExtractTextPlugin.extract( 'style-loader', 'css!sass' )
+			},
+			{
+				test: /\.svg/,
+				loader: 'url-loader'
 			}
 		]
 	},