Jetpack Settings: Introduce a Publishing Tools card under Writing (#1…

…0663) * Jetpack Settings: Introduce a Publishing Tools card * Jetpack Settings: Enable CSS of the new Publishing Tools card * Jetpack Settings: Integrate Publishing Tools card into Writing settings * Jetpack Settings: Adapt PublishingTools to use wrapSettingsForm * Jetpack Settings: Implement post by email regenerating in PublishingTools * Jetpack Settings: Remove obsolete QueryJetpackSettings from PublishingTools * Jetpack Settings: Allow empty email address in PublishingTools card * Jetpack Settings: Autogenerate post by email if active but there is no email * Jetpack Settings: Remove Save Settings button * Jetpack Settings: Disable instead of hiding subsettings in Publishing Tools * Jetpack Settings: Dim disabled label in Publishing Tools
Automattic · 9208d11bc9354027dc04fdee3206ef11ad9a29ee · tyxla committed on GitHub Jan 27, 2017 · Jan 27, 2017 · 9208d11
1 parent 0522fb0
commit 9208d11bc9354027dc04fdee3206ef11ad9a29ee
diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss
@@ -320,6 +320,7 @@
 @import 'my-sites/site-settings/jetpack-module-toggle/style';
 @import 'my-sites/site-settings/jetpack-sync-panel/style';
 @import 'my-sites/site-settings/press-this/style';
+@import 'my-sites/site-settings/publishing-tools/style';
 @import 'my-sites/site-settings/site-icon-setting/style';
 @import 'my-sites/site-settings/subscriptions/style';
 @import 'my-sites/site-settings/taxonomies/style';
diff --git a/client/my-sites/site-settings/form-writing.jsx b/client/my-sites/site-settings/form-writing.jsx
@@ -30,6 +30,7 @@ import { getSelectedSiteId } from 'state/ui/selectors';
 import { requestPostTypes } from 'state/post-types/actions';
 import CustomPostTypeFieldset from './custom-post-types-fieldset';
 import ThemeEnhancements from './theme-enhancements';
+import PublishingTools from './publishing-tools';
 import QueryJetpackModules from 'components/data/query-jetpack-modules';
 
 class SiteSettingsFormWriting extends Component {
@@ -209,18 +210,28 @@ class SiteSettingsFormWriting extends Component {
 								isSavingSettings={ isSavingSettings }
 								isRequestingSettings={ isRequestingSettings }
 								fields={ fields }
+							/>
+
+							{ config.isEnabled( 'press-this' ) &&
+								<PublishingTools
+									onSubmitForm={ this.submitFormAndActivateCustomContentModule }
+									isSavingSettings={ isSavingSettings }
+									isRequestingSettings={ isRequestingSettings }
+									fields={ fields }
 								/>
+							}
 						</div>
 					)
 				}
 
-				{ config.isEnabled( 'press-this' ) && (
+				{ config.isEnabled( 'press-this' ) && ! ( this.props.isJetpackSite || this.props.jetpackSettingsUISupported ) && (
 					<div>
 						{
 							this.renderSectionHeader( translate( 'Press This', {
 								context: 'name of browser bookmarklet tool'
 							} ), false )
 						}
+
 						<PressThis />
 					</div>
 				) }
@@ -256,7 +267,8 @@ const getFormSettings = partialRight( pick, [
 	'infinite_scroll_google_analytics',
 	'wp_mobile_excerpt',
 	'wp_mobile_featured_images',
-	'wp_mobile_app_promos'
+	'wp_mobile_app_promos',
+	'post_by_email_address'
 ] );
 
 export default flowRight(
diff --git a/client/my-sites/site-settings/publishing-tools/index.jsx b/client/my-sites/site-settings/publishing-tools/index.jsx
@@ -0,0 +1,172 @@
+/**
+ * External dependencies
+ */
+import React, { Component, PropTypes } from 'react';
+import { localize } from 'i18n-calypso';
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import config from 'config';
+import SectionHeader from 'components/section-header';
+import Card from 'components/card';
+import Button from 'components/button';
+import JetpackModuleToggle from '../jetpack-module-toggle';
+import FormLegend from 'components/forms/form-legend';
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLabel from 'components/forms/form-label';
+import { getSelectedSiteId } from 'state/ui/selectors';
+import { isJetpackModuleActive } from 'state/selectors';
+import { regeneratePostByEmail } from 'state/jetpack/settings/actions';
+import { isRegeneratingPostByEmail } from 'state/jetpack/settings/selectors';
+import InfoPopover from 'components/info-popover';
+import ExternalLink from 'components/external-link';
+import ClipboardButtonInput from 'components/clipboard-button-input';
+import PressThis from '../press-this';
+
+class PublishingTools extends Component {
+	componentDidUpdate() {
+		const {
+			fields,
+			postByEmailAddressModuleActive,
+			regeneratingPostByEmail,
+			selectedSiteId
+		} = this.props;
+
+		if ( postByEmailAddressModuleActive && regeneratingPostByEmail === null && ! fields.post_by_email_address ) {
+			this.props.regeneratePostByEmail( selectedSiteId );
+		}
+	}
+
+	onRegenerateButtonClick = () => {
+		this.props.regeneratePostByEmail( this.props.selectedSiteId );
+	}
+
+	isFormPending() {
+		const {
+			isRequestingSettings,
+			isSavingSettings,
+		} = this.props;
+
+		return isRequestingSettings || isSavingSettings;
+	}
+
+	renderPostByEmailSettings() {
+		const { fields, translate, postByEmailAddressModuleActive, regeneratingPostByEmail } = this.props;
+		const isFormPending = this.isFormPending();
+		const email = fields.post_by_email_address && fields.post_by_email_address !== 'regenerate' ? fields.post_by_email_address : '';
+		const labelClassName = regeneratingPostByEmail || ! postByEmailAddressModuleActive ? 'is-disabled' : null;
+
+		return (
+			<div className="publishing-tools__module-settings is-indented">
+				<FormLabel className={ labelClassName }>
+					{ translate( 'Email Address' ) }
+				</FormLabel>
+				<ClipboardButtonInput
+					className="publishing-tools__email-address"
+					disabled={ regeneratingPostByEmail || ! postByEmailAddressModuleActive }
+					value={ email }
+				/>
+				<Button
+					compact
+					onClick={ this.onRegenerateButtonClick }
+					disabled={ isFormPending || regeneratingPostByEmail || ! postByEmailAddressModuleActive }
+				>
+					{ regeneratingPostByEmail
+						? translate( 'Regenerating…' )
+						: translate( 'Regenerate address' )
+					}
+				</Button>
+			</div>
+		);
+	}
+
+	renderPostByEmailModule() {
+		const {
+			selectedSiteId,
+			translate
+		} = this.props;
+		const formPending = this.isFormPending();
+
+		return (
+			<FormFieldset>
+				<div className="publishing-tools__info-link-container">
+					<InfoPopover position={ 'left' }>
+						<ExternalLink href={ 'https://jetpack.com/support/post-by-email/' } target="_blank">
+							{ translate( 'Learn more about Post by Email' ) }
+						</ExternalLink>
+					</InfoPopover>
+				</div>
+
+				<JetpackModuleToggle
+					siteId={ selectedSiteId }
+					moduleSlug="post-by-email"
+					label={ translate( 'Publish posts by sending an email.' ) }
+					disabled={ formPending }
+					/>
+
+				{ this.renderPostByEmailSettings() }
+			</FormFieldset>
+		);
+	}
+
+	renderPressThis() {
+		const { translate } = this.props;
+		if ( ! config.isEnabled( 'press-this' ) ) {
+			return null;
+		}
+
+		return (
+			<div>
+				<FormLegend>{ translate( 'Press This' ) }</FormLegend>
+				<PressThis />
+			</div>
+		);
+	}
+
+	render() {
+		const { translate } = this.props;
+
+		return (
+			<div>
+				<SectionHeader label={ translate( 'Publishing Tools' ) } />
+
+				<Card className="publishing-tools__card site-settings">
+					{ this.renderPostByEmailModule() }
+					<hr />
+					{ this.renderPressThis() }
+				</Card>
+			</div>
+		);
+	}
+}
+
+PublishingTools.defaultProps = {
+	isSavingSettings: false,
+	isRequestingSettings: true,
+	fields: {}
+};
+
+PublishingTools.propTypes = {
+	onSubmitForm: PropTypes.func.isRequired,
+	isSavingSettings: PropTypes.bool,
+	isRequestingSettings: PropTypes.bool,
+	fields: PropTypes.object,
+};
+
+export default connect(
+	( state ) => {
+		const selectedSiteId = getSelectedSiteId( state );
+		const regeneratingPostByEmail = isRegeneratingPostByEmail( state, selectedSiteId );
+
+		return {
+			selectedSiteId,
+			regeneratingPostByEmail,
+			postByEmailAddressModuleActive: !! isJetpackModuleActive( state, selectedSiteId, 'post-by-email' ),
+		};
+	},
+	{
+		regeneratePostByEmail
+	}
+)( localize( PublishingTools ) );
diff --git a/client/my-sites/site-settings/publishing-tools/style.scss b/client/my-sites/site-settings/publishing-tools/style.scss
@@ -0,0 +1,36 @@
+.publishing-tools__card {
+	.press-this {
+		.card {
+			margin: 0;
+			padding: 0;
+			box-shadow: none;
+		}
+
+		.pressthis {
+			margin-bottom: 0;
+		}
+	}
+}
+
+.publishing-tools__module-settings.is-indented {
+	margin: 16px 32px;
+
+	.form-label {
+		&.is-disabled {
+			opacity: 0.3;
+		}
+	}
+
+	.form-toggle__switch {
+		margin-right: 8px;
+	}
+
+	.publishing-tools__email-address {
+		display: block;
+		margin-bottom: 8px;
+	}
+}
+
+.publishing-tools__info-link-container {
+	float: right;
+}
diff --git a/client/my-sites/site-settings/style.scss b/client/my-sites/site-settings/style.scss
@@ -192,6 +192,10 @@
 		flex: 0 1 100%;
 		margin-left: 12px;
 	}
+
+	hr {
+		margin: 0 -24px 1.5em;
+	}
 }
 
 .site-settings__discussion-settings {