add private sites module

_inc/client/lib/plans/constants.js

@@ -92,6 +92,7 @@ export const FEATURE_SEO_TOOLS_JETPACK = 'seo-tools-jetpack';
 export const FEATURE_WORDADS_JETPACK = 'wordads-jetpack';
 export const FEATURE_GOOGLE_ANALYTICS_JETPACK = 'google-analytics-jetpack';
 export const FEATURE_SEARCH_JETPACK = 'search-jetpack';
+export const FEATURE_PRIVATE_JETPACK = 'private-jetpack';
 
 export function isMonthly( plan ) {
 	return includes( JETPACK_MONTHLY_PLANS, plan );

_inc/client/traffic/index.jsx

@@ -15,6 +15,7 @@ import QuerySite from 'components/data/query-site';
 import { SEO } from './seo';
 import { GoogleAnalytics } from './google-analytics';
 import { Ads } from './ads';
+import Private from './private';
 import { SiteStats } from './site-stats';
 import { RelatedPosts } from './related-posts';
 import Search from './search';
@@ -42,6 +43,7 @@ export class Traffic extends React.Component {
 			foundVerification = this.props.isModuleFound( 'verification-tools' ),
 			foundSitemaps = this.props.isModuleFound( 'sitemaps' ),
 			foundSearch = this.props.isModuleFound( 'search' ),
+			foundPrivateSites = this.props.isModuleFound( 'private' ),
 			foundAnalytics = this.props.isModuleFound( 'google-analytics' );
 
 		if ( ! this.props.searchTerm && ! this.props.active ) {
@@ -56,6 +58,7 @@ export class Traffic extends React.Component {
 			! foundVerification &&
 			! foundSitemaps &&
 			! foundAnalytics &&
+			! foundPrivateSites &&
 			! foundSearch
 		) {
 			return null;
@@ -64,6 +67,13 @@ export class Traffic extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+				{
+					foundPrivateSites && (
+						<Private
+							{ ...commonProps }
+						/>
+					)
+				}
 				{
 					foundSearch && (
 						<Search

_inc/client/traffic/private.jsx

@@ -0,0 +1,59 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { translate as __ } from 'i18n-calypso';
+
+/**
+ * Internal dependencies
+ */
+import { FEATURE_PRIVATE_JETPACK } from 'lib/plans/constants';
+import { ModuleSettingsForm as moduleSettingsForm } from 'components/module-settings/module-settings-form';
+import { ModuleToggle } from 'components/module-toggle';
+import SettingsCard from 'components/settings-card';
+import SettingsGroup from 'components/settings-group';
+import { FormFieldset } from 'components/forms';
+
+class Private extends React.Component {
+	render() {
+		const module_enabled = this.props.getOptionValue( 'private' );
+		return (
+			<SettingsCard
+				{ ...this.props }
+				module="private"
+				feature={ FEATURE_PRIVATE_JETPACK }
+				hideButton
+			>
+				<SettingsGroup
+					hasChild
+					module={ { module: 'private' } }
+					support={ {
+						text: __( 'Jetpack private sites' ),
+						link: 'https://jetpack.com/support/private',
+					} }>
+					<p>{ __( 'Private sites can only be seen by you and users your approve.' ) } </p>
+
+					<ModuleToggle
+						slug="private"
+						compact
+						activated={ module_enabled }
+						toggling={ this.props.isSavingAnyOption( 'private' ) }
+						toggleModule={ this.props.toggleModuleNow }>
+						{ __( 'Make your site private' ) }
+					</ModuleToggle>
+
+					{ module_enabled && (
+						<FormFieldset>
+							<p className="jp-form-setting-explanation">
+								{ __( 'Your site is only visible to you and users you approve.' ) }
+							</p>
+						</FormFieldset>
+					) }
+				</SettingsGroup>
+			</SettingsCard>
+		);
+	}
+}
+
+export default moduleSettingsForm( Private );
+