Reader: Connect email subs component (Automattic#13288)

* Reader: Connect email subs component

* Two fixes: hide time selector when disabled, also pick up on deliveryFrequency changes in state

* address comment by @fraying re. loading state

* improve style a bit

client/blocks/reader-subscription-list-item/email-settings.jsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import React, { PropTypes, Component } from 'react';
-import { noop } from 'lodash';
+import { connect } from 'react-redux';
+import { find, get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -13,17 +14,33 @@ import Popover from 'components/popover/index';
 import SegmentedControl from 'components/segmented-control';
 import ControlItem from 'components/segmented-control/item';
 import FormToggle from 'components/forms/form-toggle';
+import { getReaderFollows } from 'state/selectors';
+import {
+ subscribeToNewPostEmail,
+ updateNewPostEmailSubscription,
+ unsubscribeToNewPostEmail,
+ subscribeToNewCommentEmail,
+ unsubscribeToNewCommentEmail,
+} from 'state/reader/follows/actions';
 
 class ReaderEmailSubscriptionSettingsPopout extends Component {
  static displayName = 'ReaderEmailSubscriptionSettingsPopout';
  static propTypes = {
- feedId: PropTypes.number,
  siteId: PropTypes.number,
+ deliveryFrequency: PropTypes.string,
  };
+
  state = {
  showPopover: false,
+ selected: this.props.deliveryFrequency,
  };
 
+ componentWillReceiveProps( nextProps ) {
+ if ( nextProps.deliveryFrequency !== this.props.deliveryFrequency ) {
+ this.setState( { selected: nextProps.deliveryFrequency } );
+ }
+ }
+
  togglePopoverVisibility = () => {
  this.setState( { showPopover: ! this.state.showPopover } );
  }
@@ -37,11 +54,33 @@ class ReaderEmailSubscriptionSettingsPopout extends Component {
  }
 
  setSelected = text => () => {
+ const { siteId } = this.props;
  this.setState( { selected: text } );
+ this.props.updateNewPostEmailSubscription( siteId, text );
+ }
+
+ toggleNewPostEmail = () => {
+ const toggleSubscription = this.props.notifyOnNewPosts
+ ? this.props.unsubscribeToNewPostEmail
+ : this.props.subscribeToNewPostEmail;
+
+ toggleSubscription( this.props.siteId );
+ }
+
+ toggleNewCommentEmail = () => {
+ const toggleSubscription = this.props.notifyOnNewComments
+ ? this.props.unsubscribeToNewCommentEmail
+ : this.props.subscribeToNewCommentEmail;
+
+ toggleSubscription( this.props.siteId );
  }
 
  render() {
- const { translate } = this.props;
+ const { translate, notifyOnNewComments, notifyOnNewPosts } = this.props;
+
+ if ( ! this.props.siteId ) {
+ return null;
+ }
 
  return (
  <div>
@@ -68,35 +107,37 @@ class ReaderEmailSubscriptionSettingsPopout extends Component {
  <div className="reader-subscription-list-item__email-popout-toggle">
  { translate( 'New posts' ) }
  <FormToggle
- onChange={ noop /* fire off dispatch */ }
- checked={ true /* get from selector*/ }
+ onChange={ this.toggleNewPostEmail }
+ checked={ notifyOnNewPosts }
  />
  </div>
- <SegmentedControl>
- <ControlItem
- selected={ this.state.selected === 'instant' }
- onClick={ this.setSelected( 'instant' ) }
- >
- { translate( 'Instant' ) }
- </ControlItem>
- <ControlItem
- selected={ this.state.selected === 'daily' }
- onClick={ this.setSelected( 'daily' ) }
- >
- { translate( 'Daily' ) }
- </ControlItem>
- <ControlItem
- selected={ this.state.selected === 'weekly' }
- onClick={ this.setSelected( 'weekly' ) }
- >
- { translate( 'Weekly' ) }
- </ControlItem>
- </SegmentedControl>
+ { notifyOnNewPosts && (
+ <SegmentedControl>
+ <ControlItem
+ selected={ this.state.selected === 'instantly' }
+ onClick={ this.setSelected( 'instantly' ) }
+ >
+ { translate( 'Instantly' ) }
+ </ControlItem>
+ <ControlItem
+ selected={ this.state.selected === 'daily' }
+ onClick={ this.setSelected( 'daily' ) }
+ >
+ { translate( 'Daily' ) }
+ </ControlItem>
+ <ControlItem
+ selected={ this.state.selected === 'weekly' }
+ onClick={ this.setSelected( 'weekly' ) }
+ >
+ { translate( 'Weekly' ) }
+ </ControlItem>
+ </SegmentedControl>
+ ) }
  <div className="reader-subscription-list-item__email-popout-toggle">
  New comments
  <FormToggle
- onChange={ noop /* fire off dispatch */ }
- checked={ false /* get from selector*/ }
+ onChange={ this.toggleNewCommentEmail }
+ checked={ notifyOnNewComments }
  />
  </div>
  </div>
@@ -106,5 +147,27 @@ class ReaderEmailSubscriptionSettingsPopout extends Component {
  }
 }
 
-export default localize( ReaderEmailSubscriptionSettingsPopout );
+const mapStateToProps = ( state, ownProps ) => {
+ const follow = find( getReaderFollows( state ), { blog_ID: ownProps.siteId } );
+
+ const deliveryMethods = get( follow, [ 'delivery_methods', 'email' ], {} );
+ const { send_posts, post_delivery_frequency, send_comments } = deliveryMethods;
+
+ return {
+ notifyOnNewComments: !! send_comments,
+ notifyOnNewPosts: !! send_posts,
+ deliveryFrequency: post_delivery_frequency,
+ };
+};
+
+export default connect(
+ mapStateToProps,
+ {
+ subscribeToNewPostEmail,
+ unsubscribeToNewPostEmail,
+ updateNewPostEmailSubscription,
+ subscribeToNewCommentEmail,
+ unsubscribeToNewCommentEmail,
+ }
+)( localize( ReaderEmailSubscriptionSettingsPopout ) );
 

client/blocks/reader-subscription-list-item/index.jsx

@@ -24,6 +24,7 @@ function ReaderSubscriptionListItem( {
  className = '',
  translate,
  followSource,
+ isEmailBlocked,
 } ) {
  const siteTitle = getSiteName( { feed, site } );
  const siteAuthor = site && site.owner;
@@ -69,7 +70,7 @@ function ReaderSubscriptionListItem( {
  </div>
  <div className="reader-subscription-list-item__options">
  <FollowButton siteUrl={ siteUrl } followSource={ followSource } />
- { isFollowing && <EmailSettings /> }
+ { isFollowing && ! isEmailBlocked && <EmailSettings siteId={ siteId } /> }
  </div>
  </div>
  );

client/reader/following-manage/connected-subscription-list-item.jsx

@@ -9,6 +9,7 @@ import { localize } from 'i18n-calypso';
  */
 import connectSite from 'lib/reader-connect-site';
 import SubscriptionListItem from 'blocks/reader-subscription-list-item/';
+import userSettings from 'lib/user-settings';
 
 export default localize( connectSite(
  ( { feed, site, translate, url, feedId, siteId } ) => (
@@ -19,6 +20,7 @@ export default localize( connectSite(
  site={ site }
  feed={ feed }
  url={ url }
+ isEmailBlocked={ userSettings.getSetting( 'subscription_delivery_email_blocked' ) }
  />
  )
 ) );

client/reader/following-manage/index.jsx

@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { trim, debounce } from 'lodash';
 import { localize } from 'i18n-calypso';
@@ -23,7 +23,7 @@ import SitesWindowScroller from './sites-window-scroller';
 
 class FollowingManage extends Component {
  static propTypes = {
- query: React.PropTypes.string,
+ query: PropTypes.string,
  };
  state = { width: 800 };
 

client/reader/following-manage/subscriptions.jsx

@@ -18,7 +18,7 @@ import FollowingManageSearchFollowed from './search-followed';
 class FollowingManageSubscriptions extends Component {
  static propTypes = {
  follows: PropTypes.array.isRequired,
- }
+ };
 
  render() {
  const { follows, width, translate } = this.props;