Skip to content

Commit

Permalink
Add new settings route and page for Privacy settings (#8993)
Browse files Browse the repository at this point in the history
* Add new settings route for /privacy

* add basic option for toggling, connected to setting

* Add smooth scroll when user clicks Privacy link so they're taken up to where the navigation bar is so they don't miss the content and think nothing happened

* Add PropTypes and declare props. Combine selectors imported from the same path. Introduce ModuleSettingsForm to use getOptionValue and isSavingAnyOption so ththe toggle now works. Simplify mapStateToProps and mapDispatchToProps. Simplify other minor code.

* Combine sentence to save option with an existing one to avoid duplicating code.

* Add link to privacy policy plus placeholder text

* Add link to privacy blog

* Update code to work with PR #9003 so we save this setting by user

* Update privacy texts and links.
  • Loading branch information
dereksmart authored and zinigor committed Mar 26, 2018
1 parent 9049a36 commit 4d6e28b
Show file tree
Hide file tree
Showing 9 changed files with 179 additions and 7 deletions.
1 change: 1 addition & 0 deletions _inc/client/admin.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@ function render() {
<Route path="/sharing" name={ i18n.translate( 'Sharing', { context: 'Navigation item.' } ) } component={ Main } />
<Route path="/wpbody-content" component={ Main } />
<Route path="/wp-toolbar" component={ Main } />
<Route path="/privacy" component={ Main } />
<Route path="*" component={ Main } />
</Router>
</Provider>
Expand Down
15 changes: 11 additions & 4 deletions _inc/client/components/footer/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ import {
import DevCard from 'components/dev-card';
import onKeyDownCallback from 'utils/onkeydown-callback';

const smoothScroll = () => {
const jpContentY = document.getElementById( 'jp-navigation' ).offsetTop;
window.scrollTo( 0, window.scrollY - jpContentY / 1.5 );
if ( window.scrollY > jpContentY ) {
window.requestAnimationFrame( smoothScroll );
}
};

export class Footer extends React.Component {
static displayName = 'Footer';

Expand All @@ -49,6 +57,7 @@ export class Footer extends React.Component {
};

trackPrivacyClick = () => {
window.requestAnimationFrame( smoothScroll );
analytics.tracks.recordJetpackClick( {
target: 'footer_link',
link: 'privacy'
Expand Down Expand Up @@ -145,8 +154,7 @@ export class Footer extends React.Component {
onClick={ this.trackVersionClick }
href="https://jetpack.com"
target="_blank"
rel="noopener noreferrer"
className="jp-footer__link"
rel="noopener noreferrer" className="jp-footer__link"
title={ __( 'Jetpack version' ) }
>
{
Expand All @@ -170,8 +178,7 @@ export class Footer extends React.Component {
<li className="jp-footer__link-item">
<a
onClick={ this.trackPrivacyClick }
href="https://automattic.com/privacy/"
target="_blank"
href="#/privacy"
rel="noopener noreferrer"
title={ __( "Automattic's Privacy Policy" ) }
className="jp-footer__link">
Expand Down
2 changes: 1 addition & 1 deletion _inc/client/components/navigation-settings/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -242,7 +242,7 @@ export const NavigationSettings = createReactClass( {
}

return (
<div className="dops-navigation">
<div id="jp-navigation" className="dops-navigation">
<QuerySitePlugins />
<SectionNav selectedText={ this.props.route.name }>
{ navItems }
Expand Down
2 changes: 1 addition & 1 deletion _inc/client/components/navigation/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export class Navigation extends React.Component {
);
}
return (
<div className="dops-navigation">
<div id="jp-navigation" className="dops-navigation">
<SectionNav selectedText={ this.props.route.name }>
{ navTabs }
</SectionNav>
Expand Down
4 changes: 3 additions & 1 deletion _inc/client/main.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@ class Main extends React.Component {
case '/discussion':
case '/writing':
case '/sharing':
case '/privacy':
navComponent = settingsNav;
pageComponent = <SearchableSettings
route={ this.props.route }
Expand Down Expand Up @@ -309,7 +310,8 @@ window.wpNavMenuClassChange = function() {
'#/security',
'#/traffic',
'#/writing',
'#/sharing'
'#/sharing',
'#/privacy',
],
dashboardRoutes = [
'#/',
Expand Down
136 changes: 136 additions & 0 deletions _inc/client/privacy/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
/**
* External dependencies
*/
import React from 'react';
import PropTypes from 'prop-types';
import { translate as __ } from 'i18n-calypso';
import { connect } from 'react-redux';

/**
* Internal dependencies
*/
import { ModuleSettingsForm as moduleSettingsForm } from 'components/module-settings/module-settings-form';
import SettingsCard from 'components/settings-card';
import SettingsGroup from 'components/settings-group';
import { ModuleToggle } from 'components/module-toggle';
import ExternalLink from 'components/external-link';
import { updateSettings, getSettings } from 'state/settings';
import analytics from 'lib/analytics';

const trackPrivacyPolicyView = () => analytics.tracks.recordJetpackClick( {
target: 'privacy-policy',
feature: 'privacy'
} );

const trackWhatJetpackSyncView = () => analytics.tracks.recordJetpackClick( {
target: 'what-data-jetpack-sync',
feature: 'privacy'
} );

const trackPrivacyBlogView = () => analytics.tracks.recordJetpackClick( {
target: 'privacy-blog',
feature: 'privacy'
} );

class Privacy extends React.Component {
static displayName = 'PrivacySettings';

static propTypes = {
searchTerm: PropTypes.string,
active: PropTypes.bool,

// Connected
toggleTracking: PropTypes.func,

// Provided by moduleSettingsForm
getOptionValue: PropTypes.func,
isSavingAnyOption: PropTypes.func,
};

static defaultProps = {
searchTerm: '',
active: false,
};

togglePrivacy = () => this.props.toggleTracking( this.props.getOptionValue( 'jetpack_event_tracking' ) );

render() {
const {
searchTerm,
active,
getOptionValue,
isSavingAnyOption,
} = this.props;

if ( ! searchTerm && ! active ) {
return null;
}

return (
<div>
<SettingsCard
{ ...this.props }
header={ __( 'Privacy Settings', { context: 'Settings header' } ) }
hideButton
>
<SettingsGroup hasChild support="https://jetpack.com/support/privacy">
<p>
{
__( 'We are committed to your privacy and security. ' )
}
<br />
{ __(
'Read about how Jetpack uses your data in {{pp}}Automattic Privacy Policy{{/pp}} ' +
'and {{js}}What Data Does Jetpack Sync{{/js}}?', {
components: {
pp: <ExternalLink
href="https://automattic.com/privacy/"
onClick={ trackPrivacyPolicyView }
target="_blank" rel="noopener noreferrer"
/>,
js: <ExternalLink
href="https://jetpack.com/support/what-data-does-jetpack-sync/"
onClick={ trackWhatJetpackSyncView }
target="_blank" rel="noopener noreferrer"
/>
}
} )
}
</p>
<p>
<ModuleToggle
compact
activated={ getOptionValue( 'jetpack_event_tracking' ) }
toggling={ isSavingAnyOption( 'jetpack_event_tracking' ) }
toggleModule={ this.togglePrivacy }>
{ __( 'Send information to help us improve our products.' ) }
</ModuleToggle>
</p>
<p>
{ __(
'See more WordPress privacy information and resources on {{a}}privacy.blog{{/a}}.', {
components: {
a: <ExternalLink
href="https://privacy.blog/"
onClick={ trackPrivacyBlogView }
target="_blank" rel="noopener noreferrer"
/>
}
} )
}
</p>
</SettingsGroup>
</SettingsCard>
</div>
);
}
}

export default connect(
state => ( {
settings: getSettings( state ),
} ),
{
toggleTracking: isEnabled => updateSettings( { jetpack_event_tracking: ! isEnabled } ),
}
)( moduleSettingsForm( Privacy ) );
5 changes: 5 additions & 0 deletions _inc/client/settings/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Traffic from 'traffic';
import Writing from 'writing/index.jsx';
import Sharing from 'sharing/index.jsx';
import SearchableModules from 'searchable-modules/index.jsx';
import Privacy from 'privacy/index.jsx';

export default class extends React.Component {
static displayName = 'SearchableSettings';
Expand Down Expand Up @@ -69,6 +70,10 @@ export default class extends React.Component {
active={ ( '/sharing' === this.props.route.path ) }
{ ...commonProps }
/>
<Privacy
active={ ( '/privacy' === this.props.route.path ) }
{ ...commonProps }
/>
<SearchableModules searchTerm={ this.props.searchTerm } />
</div>
);
Expand Down
9 changes: 9 additions & 0 deletions _inc/lib/class.core-rest-api-endpoints.php
Original file line number Diff line number Diff line change
Expand Up @@ -1908,6 +1908,15 @@ public static function get_updateable_data_list( $selector = '' ) {
'jp_group' => 'settings',
),

// Whether user allows usage statistics.
'jetpack_event_tracking' => array(
'description' => 'Disables event tracking.',
'type' => 'boolean',
'default' => 0,
'validate_callback' => __CLASS__ . '::validate_boolean',
'jp_group' => 'settings',
),

);

// Add modules to list so they can be toggled
Expand Down
12 changes: 12 additions & 0 deletions _inc/lib/core-api/class.jetpack-core-api-module-endpoints.php
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,11 @@ public function get_all_options() {
);
break;

case 'jetpack_event_tracking':
jetpack_require_lib( 'class.jetpack-user-event-tracking' );
$response[ $setting ] = Jetpack_User_Event_Tracking::is_enabled( get_current_user_id() );
break;

default:
$response[ $setting ] = Jetpack_Core_Json_Api_Endpoints::cast_value( get_option( $setting ), $settings[ $setting ] );
break;
Expand Down Expand Up @@ -950,6 +955,13 @@ public function update_data( $request ) {
}
break;

case 'jetpack_event_tracking':
jetpack_require_lib( 'class.jetpack-user-event-tracking' );
$updated = $value
? Jetpack_User_Event_Tracking::enable( get_current_user_id() )
: Jetpack_User_Event_Tracking::disable( get_current_user_id() );
break;

case 'show_welcome_for_new_plan':
// If option value was the same, consider it done.
$updated = get_option( $option ) !== $value ? update_option( $option, (bool) $value ) : true;
Expand Down

0 comments on commit 4d6e28b

Please sign in to comment.