Skip to content

Commit

Permalink
Update components to use localize
Browse files Browse the repository at this point in the history
  • Loading branch information
@akirk
akirk committed Aug 11, 2017
1 parent 49a00ee commit b5ddd63
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 37 deletions.
50 changes: 30 additions & 20 deletions client/mailing-lists/main.jsx
View file
Expand Up @@ -4,6 +4,7 @@
import page from 'page';
import React from 'react';
import Gridicon from 'gridicons';
import { localize } from 'i18n-calypso';

/**
* Internal dependencies
Expand Down Expand Up @@ -49,7 +50,7 @@ const MainComponent = React.createClass( {
},

getSubscribedMessage() {
return this.translate( 'Subscribed to {{em}}%(categoryName)s{{/em}}', {
return this.props.translate( 'Subscribed to {{em}}%(categoryName)s{{/em}}', {
args: {
categoryName: this.getCategoryName()
},
Expand All @@ -60,7 +61,7 @@ const MainComponent = React.createClass( {
},

getUnsubscribedMessage() {
return this.translate( 'Unsubscribed from {{em}}%(categoryName)s{{/em}}', {
return this.props.translate( 'Unsubscribed from {{em}}%(categoryName)s{{/em}}', {
args: {
categoryName: this.getCategoryName()
},
Expand All @@ -71,7 +72,7 @@ const MainComponent = React.createClass( {
},

getSubscribedErrorMessage() {
return this.translate( 'Error subscribing to {{em}}%(categoryName)s{{/em}} mailing list! Try again later.', {
return this.props.translate( 'Error subscribing to {{em}}%(categoryName)s{{/em}} mailing list! Try again later.', {
args: {
categoryName: this.getCategoryName()
},
Expand All @@ -82,7 +83,7 @@ const MainComponent = React.createClass( {
},

getUnsubscribedErrorMessage() {
return this.translate( 'Error unsubscribing from {{em}}%(categoryName)s{{/em}} mailing list! Try again later.', {
return this.props.translate( 'Error unsubscribing from {{em}}%(categoryName)s{{/em}} mailing list! Try again later.', {
args: {
categoryName: this.getCategoryName()
},
Expand All @@ -94,27 +95,27 @@ const MainComponent = React.createClass( {

getCategoryName() {
if ( 'marketing' === this.props.category ) {
return this.translate( 'Suggestions' );
return this.props.translate( 'Suggestions' );
} else if ( 'research' === this.props.category ) {
return this.translate( 'Research' );
return this.props.translate( 'Research' );
} else if ( 'community' === this.props.category ) {
return this.translate( 'Community' );
return this.props.translate( 'Community' );
} else if ( 'digest' === this.props.category ) {
return this.translate( 'Digests' );
return this.props.translate( 'Digests' );
}

return this.props.category;
},

getCategoryDescription() {
if ( 'marketing' === this.props.category ) {
return this.translate( 'Tips for getting the most out of WordPress.com.' );
return this.props.translate( 'Tips for getting the most out of WordPress.com.' );
} else if ( 'research' === this.props.category ) {
return this.translate( 'Opportunities to participate in WordPress.com research and surveys.' );
return this.props.translate( 'Opportunities to participate in WordPress.com research and surveys.' );
} else if ( 'community' === this.props.category ) {
return this.translate( 'Information on WordPress.com courses and events (online and in-person).' );
return this.props.translate( 'Information on WordPress.com courses and events (online and in-person).' );
} else if ( 'digest' === this.props.category ) {
return this.translate( 'Popular content from the blogs you follow, and reports on your own site and its performance.' );
return this.props.translate( 'Popular content from the blogs you follow, and reports on your own site and its performance.' );
}

return null;
Expand Down Expand Up @@ -143,12 +144,13 @@ const MainComponent = React.createClass( {
},

render() {
const translate = this.props.translate;
var headingLabel = this.state.isSubscribed
? this.translate( 'You\'re subscribed' )
: this.translate( 'We\'ve unsubscribed your email.' ),
? translate( 'You\'re subscribed' )
: translate( 'We\'ve unsubscribed your email.' ),
messageLabel = this.state.isSubscribed
? this.translate( 'We\'ll send you updates for this mailing list.' )
: this.translate( 'You will no longer receive updates for this mailing list.' );
? translate( 'We\'ll send you updates for this mailing list.' )
: translate( 'You will no longer receive updates for this mailing list.' );

return(
<div className="mailing-lists">
Expand All @@ -165,14 +167,22 @@ const MainComponent = React.createClass( {
<h4>{ this.getCategoryName() }</h4>
<p>{ this.getCategoryDescription() }</p>
{ this.state.isSubscribed
? <button className="button is-primary" onClick={ this.onUnsubscribeClick }>{ this.translate( 'Unsubscribe' ) }</button>
: <button className="button" onClick={ this.onResubscribeClick }>{ this.translate( 'Resubscribe' ) }</button> }
? <button className="mailing-lists__unsubscribe-button button is-primary" onClick={ this.onUnsubscribeClick }>
{ translate( 'Unsubscribe' ) }
</button>
: <button className="mailing-lists__resubscribe-button button" onClick={ this.onResubscribeClick }>
{ translate( 'Resubscribe' ) }
</button> }
</Card>

<p className="mailing-lists__manage-link"><button className="button is-link" onClick={ this.onManageUpdatesClick }>{ this.translate( 'Manage all your email subscriptions' ) }</button></p>
<p className="mailing-lists__manage-link">
<button className="mailing-lists__manage-button button is-link" onClick={ this.onManageUpdatesClick }>
{ translate( 'Manage all your email subscriptions' ) }
</button>
</p>
</div>
);
}
} );

export default MainComponent;
export default localize( MainComponent );
36 changes: 19 additions & 17 deletions client/me/notification-settings/wpcom-settings/index.jsx
View file
Expand Up @@ -4,6 +4,7 @@
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { localize } from 'i18n-calypso';

/**
* Internal dependencies
Expand Down Expand Up @@ -55,11 +56,11 @@ const WPCOMNotifications = React.createClass( {
const state = store.getStateFor( 'wpcom' );

if ( state.error ) {
this.props.errorNotice( this.translate( 'There was a problem saving your changes. Please, try again.' ) );
this.props.errorNotice( this.props.translate( 'There was a problem saving your changes. Please, try again.' ) );
}

if ( state.status === 'success' ) {
this.props.successNotice( this.translate( 'Settings saved successfully!' ) );
this.props.successNotice( this.props.translate( 'Settings saved successfully!' ) );
}

this.setState( state );
Expand All @@ -77,7 +78,7 @@ const WPCOMNotifications = React.createClass( {
return (
<div>
<p>
{ this.translate(
{ this.props.translate(
'We\'ll always send important emails regarding your account, security, ' +
'privacy, and purchase transactions, but you can get some helpful extras, too.'
) }
Expand All @@ -86,39 +87,40 @@ const WPCOMNotifications = React.createClass( {
<EmailCategory
name={ options.marketing }
isEnabled={ this.state.settings.get( options.marketing ) }
title={ this.translate( 'Suggestions' ) }
description={ this.translate( 'Tips for getting the most out of WordPress.com.' ) }
title={ this.props.translate( 'Suggestions' ) }
description={ this.props.translate( 'Tips for getting the most out of WordPress.com.' ) }
/>

<EmailCategory
name={ options.research }
isEnabled={ this.state.settings.get( options.research ) }
title={ this.translate( 'Research' ) }
description={ this.translate( 'Opportunities to participate in WordPress.com research and surveys.' ) }
title={ this.props.translate( 'Research' ) }
description={ this.props.translate( 'Opportunities to participate in WordPress.com research and surveys.' ) }
/>

<EmailCategory
name={ options.community } isEnabled={ this.state.settings.get( options.community ) }
title={ this.translate( 'Community' ) }
description={ this.translate( 'Information on WordPress.com courses and events (online and in-person).' ) }
title={ this.props.translate( 'Community' ) }
description={ this.props.translate( 'Information on WordPress.com courses and events (online and in-person).' ) }
/>

<EmailCategory
name={ options.promotion } isEnabled={ this.state.settings.get( options.promotion ) }
title={ this.translate( 'Promotions' ) }
description={ this.translate( 'Promotions and deals on upgrades.' ) }
title={ this.props.translate( 'Promotions' ) }
description={ this.props.translate( 'Promotions and deals on upgrades.' ) }
/>

<EmailCategory
name={ options.news } isEnabled={ this.state.settings.get( options.news ) }
title={ this.translate( 'News' ) }
description={ this.translate( 'WordPress.com news and announcements.' ) }
title={ this.props.translate( 'News' ) }
description={ this.props.translate( 'WordPress.com news and announcements.' ) }
/>

<EmailCategory
name={ options.digest } isEnabled={ this.state.settings.get( options.digest ) }
title={ this.translate( 'Digests' ) }
description={ this.translate( 'Popular content from the blogs you follow, and reports on your own site and its performance.' ) }
title={ this.props.translate( 'Digests' ) }
description={ this.props.translate( 'Popular content from the blogs you follow, and reports on ' +
'your own site and its performance.' ) }
/>

<ActionButtons
Expand All @@ -145,7 +147,7 @@ const WPCOMNotifications = React.createClass( {

<Card>
<FormSectionHeading>
{ this.translate( 'Email from WordPress.com' ) }
{ this.props.translate( 'Email from WordPress.com' ) }
</FormSectionHeading>
{ this.state.settings ? this.renderWpcomPreferences() : this.renderPlaceholder() }
</Card>
Expand All @@ -157,4 +159,4 @@ const WPCOMNotifications = React.createClass( {
export default connect(
null,
dispatch => bindActionCreators( { successNotice, errorNotice }, dispatch )
)( WPCOMNotifications );
)( localize( WPCOMNotifications ) );

0 comments on commit b5ddd63

Please sign in to comment.