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() }