diff --git a/client/me/notification-settings/wpcom-settings/email-category.jsx b/client/me/notification-settings/wpcom-settings/email-category.jsx
new file mode 100644
index 0000000000000..7fce06c136730
--- /dev/null
+++ b/client/me/notification-settings/wpcom-settings/email-category.jsx
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies
+ */
+import FormCheckbox from 'components/forms/form-checkbox';
+import FormFieldset from 'components/forms/form-fieldset';
+import FormLegend from 'components/forms/form-legend';
+import FormLabel from 'components/forms/form-label';
+import { toggleWPcomEmailSetting } from 'lib/notification-settings-store/actions';
+
+const EmailCategory = React.createClass( {
+ propTypes() {
+ return {
+ name: React.PropTypes.string,
+ isEnabled: React.PropTypes.bool,
+ title: React.PropTypes.string,
+ description: React.PropTypes.string
+ };
+ },
+
+ toggleSetting() {
+ toggleWPcomEmailSetting( this.props.name );
+ },
+
+ render() {
+ return (
+
+ { this.props.title }
+
+
+ { this.props.description }
+
+
+ );
+ }
+} );
+
+export default EmailCategory;
diff --git a/client/me/notification-settings/wpcom-settings/index.jsx b/client/me/notification-settings/wpcom-settings/index.jsx
index 20b6931b11265..ea8895aed53d9 100644
--- a/client/me/notification-settings/wpcom-settings/index.jsx
+++ b/client/me/notification-settings/wpcom-settings/index.jsx
@@ -14,15 +14,12 @@ import twoStepAuthorization from 'lib/two-step-authorization';
import MeSidebarNavigation from 'me/sidebar-navigation';
import Navigation from '../navigation';
import Card from 'components/card';
-import FormCheckbox from 'components/forms/form-checkbox';
-import FormFieldset from 'components/forms/form-fieldset';
-import FormLegend from 'components/forms/form-legend';
-import FormLabel from 'components/forms/form-label';
import FormSectionHeading from 'components/forms/form-section-heading';
import ActionButtons from '../settings-form/actions';
import store from 'lib/notification-settings-store';
import { fetchSettings, toggleWPcomEmailSetting, saveSettings } from 'lib/notification-settings-store/actions';
import { successNotice, errorNotice } from 'state/notices/actions';
+import EmailCategory from './email-category';
/**
* Module variables
@@ -32,7 +29,8 @@ const options = {
research: 'research',
community: 'community',
promotion: 'promotion',
- news: 'news'
+ news: 'news',
+ digest: 'digest'
};
const WPCOMNotifications = React.createClass( {
@@ -71,53 +69,60 @@ const WPCOMNotifications = React.createClass( {
toggleWPcomEmailSetting( setting );
},
+ saveSettings() {
+ saveSettings( 'wpcom', this.state.settings );
+ },
+
renderWpcomPreferences() {
return (
-
{ this.translate( 'We\'ll always send important emails regarding your account, security, privacy, and purchase transactions, but you can get some fun extras, too!' ) }
-
-
- { this.translate( 'Suggestions' ) }
-
-
- { this.translate( 'Tips for getting the most out of WordPress.com.' ) }
-
-
-
-
- { this.translate( 'Research' ) }
-
-
- { this.translate( 'Opportunities to participate in WordPress.com research & surveys.' ) }
-
-
-
-
- { this.translate( 'Community' ) }
-
-
- { this.translate( 'Information on WordPress.com courses and events (online & in-person).' ) }
-
-
-
-
- { this.translate( 'Promotions' ) }
-
-
- { this.translate( 'Promotions and deals on upgrades.' ) }
-
-
-
-
- { this.translate( 'News' ) }
-
-
- { this.translate( 'WordPress.com news and announcements.' ) }
-
-
+
+ { this.translate(
+ 'We\'ll always send important emails regarding your account, security, ' +
+ 'privacy, and purchase transactions, but you can get some fun extras, too!'
+ ) }
+
+
+
+
+
+
+
+
+
+
+
+
+
saveSettings( 'wpcom', this.state.settings ) }
+ onSave={ this.saveSettings }
disabled={ ! this.state.hasUnsavedChanges }
/>
@@ -139,7 +144,7 @@ const WPCOMNotifications = React.createClass( {
-
+
{ this.translate( 'Email from WordPress.com' ) }
{ this.state.settings ? this.renderWpcomPreferences() : this.renderPlaceholder() }