Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-2209: Onboarding - Step 2 - Choose Privacy & Ad Block Settings #643

Merged
merged 1 commit into from Dec 10, 2020
+364 −3
Merged

GH-2209: Onboarding - Step 2 - Choose Privacy & Ad Block Settings #643

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Loading status checks…

Update BlockSettingsView and localization messages

  • Loading branch information
@leuryr
leuryr committed Dec 9, 2020
commit 044b4825f20cb6f68f7768f2c1eb143b4ce0b600
42 _locales/en/messages.json
View file
Open in desktop
@@ -1839,6 +1839,48 @@
"ghostery_browser_hub_onboarding_lets_search": {
"message": "Let's search"
},
"ghostery_browser_hub_onboarding_which_privacy_plan": {
"message": "Which privacy plan is right for you?"
},
"ghostery_browser_hub_onboarding_tell_us_your_preferences": {
"message": "Tell us your preferences, we'll offer you our recommendation."
},
"ghostery_browser_hub_onboarding_recommended_choices": {
"message": "Recommended choices"
},
"ghostery_browser_hub_onboarding_question_block_ads": {
"message": "Do you want to block ads?"
},
"ghostery_browser_hub_onboarding_question_kinds_of_trackers": {
"message": "What kinds of trackers do you want to block?"
},
"ghostery_browser_hub_onboarding_kinds_of_trackers_all": {
"message": "All trackers"
},
"ghostery_browser_hub_onboarding_kinds_of_trackers_none": {
"message": "No trackers"
},
"ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics": {
"message": "All ad and analytics trackers"
},
"ghostery_browser_hub_onboarding_question_anti_tracking": {
"message": "Do you want to turn on anti-tracking?"
},
"ghostery_browser_hub_onboarding_question_smart_browsing": {
"message": "Do you want to turn on smart-browsing?"
},
"ghostery_browser_hub_info_blocking_all": {
"message": "Blocking \"all trackers\" may cause some websites to break."
},
"ghostery_browser_hub_info_anti_tracking": {
"message": "Anti-tracking anonymizes uniquely identifiable data that trackers try to collect"
},
"ghostery_browser_hub_info_smart_browsing": {
"message": "Smart-browsing adjusts your blocking settings to decrease page breakage and accelerate page loads."
},
"ghostery_browser_hub_toast_error": {
"message": "Please answer all questions"
},
"enable_when_paused": {
"message": "To use this function, Resume Ghostery."
},
188 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx
View file
Open in desktop
@@ -11,8 +11,192 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import React from 'react';
import React, { Component } from 'react';

const BlockSettingsView = () => <h1>Step 2: Block Settings View</h1>;
// import Tooltip from '../../../../panel/components/Tooltip';
import RadioButton from '../../../../shared-components/RadioButton/RadioButton';
import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox';

/**
* @class Implement the Block Settings View for the Ghostery Browser Hub
* @extends Component
* @memberof HubComponents
*/
class BlockSettingsView extends Component {
constructor(props) {
super(props);
this.state = {
recommendedChoices: false,
blockAds: null,
kindsOfTrackers: null,
antiTracking: null,
smartBrowsing: null
};
}

toggleRecommendedChoices = (value) => {
if (value === true) {
this.setState({
recommendedChoices: true,
blockAds: true,
kindsOfTrackers: 1,
antiTracking: true,
smartBrowsing: true
});
} else {
this.setState({
recommendedChoices: false,
blockAds: null,
kindsOfTrackers: null,
antiTracking: null,
smartBrowsing: null
});
}
}

handleAnswerChange = (category, answer) => {
this.setState({ [category]: answer });
}

handleSubmit = () => {
const {
blockAds, kindsOfTrackers, antiTracking, smartBrowsing
} = this.state;

// Will only change user settings if all questions are answered
if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) {
const {
setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy
} = this.props;

setAdBlock(blockAds);
setAntiTracking(antiTracking);
setSmartBlocking(smartBrowsing);

let blockingPolicy;
switch (kindsOfTrackers) {
case 0:
blockingPolicy = 'BLOCKING_POLICY_EVERYTHING';
break;
case 1:
blockingPolicy = 'BLOCKING_POLICY_RECOMMENDED';
break;
case 2:
blockingPolicy = 'BLOCKING_POLICY_NOTHING';
break;
default:
break;
}
setBlockingPolicy({ blockingPolicy });
} else {
const { setToast } = this.props;

setToast({
toastMessage: t('ghostery_browser_hub_toast_error'),
toastClass: 'error'
});
}
}

render() {
const {
recommendedChoices, blockAds, kindsOfTrackers, antiTracking, smartBrowsing
} = this.state;
return (
<div className="BlockSettingsView__container">
<div className="BlockSettingsView__title">{t('ghostery_browser_hub_onboarding_which_privacy_plan')}</div>
<div className="BlockSettingsView__subtitle">{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}</div>
<div className="BlockSettingsView_formBlock">
<div className="BlockSettingsView_checkboxBlock">
<ToggleCheckbox
className="BlockSettingsView_checkbox"
checked={recommendedChoices}
onChange={() => this.toggleRecommendedChoices(!recommendedChoices)}
/>
<div>{t('ghostery_browser_hub_onboarding_recommended_choices')}</div>
</div>
<ol>
<li className="BlockSettingsView_question">{t('ghostery_browser_hub_onboarding_question_block_ads')}</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === true} handleClick={() => this.handleAnswerChange('blockAds', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={blockAds === false} handleClick={() => this.handleAnswerChange('blockAds', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<li className="BlockSettingsView_question">
<div className="BlockSettingsView_questionBlock">
{t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')}
<div className="BlockSettingsView__infoIcon" />
</div>
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 0} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 0)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 1} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 1)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={kindsOfTrackers === 2} handleClick={() => this.handleAnswerChange('kindsOfTrackers', 2)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}</div>
</div>
<li className="BlockSettingsView_question">
{t('ghostery_browser_hub_onboarding_question_anti_tracking')}
<div className="BlockSettingsView__infoIcon" />
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === true} handleClick={() => this.handleAnswerChange('antiTracking', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={antiTracking === false} handleClick={() => this.handleAnswerChange('antiTracking', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
<li className="BlockSettingsView_question">
{t('ghostery_browser_hub_onboarding_question_smart_browsing')}
<div className="BlockSettingsView__infoIcon" src="/app/images/hub/setup/info.svg" />
</li>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === true} handleClick={() => this.handleAnswerChange('smartBrowsing', true)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_yes')}</div>
</div>
<div className="BlockSettingsView_answerBlock">
<div className="BlockSettingsView__radioButtonContainer">
<RadioButton checked={smartBrowsing === false} handleClick={() => this.handleAnswerChange('smartBrowsing', false)} altDesign />
</div>
<div className="BlockSettingsView_answerText">{t('hub_setup_modal_button_no')}</div>
</div>
</ol>
</div>
<button
className="BlockSettingsView__ctaButton"
type="button"
onClick={() => this.handleSubmit()}
>
{t('next')}
</button>
</div>
);
}
}

export default BlockSettingsView;
95 ...ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss
View file
Open in desktop
@@ -0,0 +1,95 @@
.BlockSettingsView__container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 18px;
line-height: 2.33;
color: $tundora;
margin: 45px auto 83px auto;
}

.BlockSettingsView__title {
font-size: 24px;
font-weight: 500;
line-height: 2.33;
text-align: center;
}

.BlockSettingsView__subtitle {
margin-bottom: 47px;
text-align: center;
}

.BlockSettingsView_formBlock {
align-self: stretch;
text-align: left;
}

.BlockSettingsView__ctaButton {
display: flex;
justify-content: center;
margin: auto;
height: 44px;
width: 162px;
padding: 7.7px 14px;
line-height: 22px;
background: linear-gradient(
45deg,
#ff7e74 50%,
#00aef0
);
background-size: 200% 100%;
background-position: 100% 50%;
transition: 0.25s all;
border: none;
&:hover {
background-position: 0% 50%;
transition: 0.25s all;
}
color: #FFF;
font-size: 14.1px;
font-weight: 700;
border-radius: 3.5px;
text-align: center;
line-height: 2.05;
cursor: pointer;
}

.BlockSettingsView_question {
font-weight: 500;
}

.BlockSettingsView__radioButtonContainer {
padding: 11px;
display: flex;
justify-content: center;
cursor: pointer;
}

.BlockSettingsView_answerBlock {
display: flex;
align-items: center;
}

.BlockSettingsView_checkboxBlock {
display: flex;
align-items: center;
font-size: 14px;
}

.BlockSettingsView_checkbox {
width: 18px;
height: 18px;
}

.BlockSettingsView__infoIcon {
width: 18px;
background-repeat: no-repeat;
background-image: url('/app/images/hub/setup/info.svg');
margin-left: 8px;
}

.BlockSettingsView_questionBlock {
display: flex;
}
23 app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js
View file
Open in desktop
@@ -11,6 +11,27 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import BlockSettingsView from './BlockSettingsView';
import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions';
import { setBlockingPolicy } from '../../../../shared-hub/actions/BlockingPolicyActions';
import { setToast } from '../../../../shared-hub/actions/ToastActions';

/**
* Bind the component's action creators using Redux's bindActionCreators.
* @param {function} dispatch redux store method which dispatches actions
* @return {function} to be used as an argument in redux connect call
*/
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({
setAntiTracking,
setAdBlock,
setSmartBlocking,
setBlockingPolicy,
setToast,
}, dispatch),
});

export default BlockSettingsView;
export default connect(null, mapDispatchToProps)(BlockSettingsView);
18 app/images/hub/setup/info.svg
View file
Open in desktop
@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="17" viewBox="0 0 17 17">
<defs>
<path id="smspeb1vqa" d="M8.5.708C4.18.708.708 4.18.708 8.5c0 4.32 3.471 7.792 7.792 7.792 4.32 0 7.792-3.471 7.792-7.792C16.292 4.18 12.82.708 8.5.708zm0 14.167c-3.542 0-6.375-2.833-6.375-6.375S4.958 2.125 8.5 2.125s6.375 2.833 6.375 6.375-2.833 6.375-6.375 6.375zM9.208 8.5v2.833c0 .425-.283.709-.708.709s-.708-.284-.708-.709V8.5c0-.425.283-.708.708-.708s.708.283.708.708zm-.212-3.33c.141.143.212.284.212.497 0 .212-.07.354-.212.495-.142.142-.284.213-.496.213h-.142c-.07 0-.07 0-.141-.07-.071 0-.071-.072-.142-.072-.07 0-.07-.07-.07-.07-.143-.142-.213-.284-.213-.496 0-.213.07-.354.212-.496l.071-.071c.07 0 .07-.07.142-.07.07 0 .07 0 .141-.072.213 0 .496.071.638.213z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<g>
<g transform="translate(-536 -540) translate(536 540)">
<mask id="0b6hxvf6yb" fill="#fff">
<use xlink:href="#smspeb1vqa"/>
</mask>
<use fill="#000" fill-rule="nonzero" xlink:href="#smspeb1vqa"/>
<g fill="#4A4A4A" mask="url(#0b6hxvf6yb)">
<path d="M0 0H17V17H0z"/>
</g>
</g>
</g>
</g>
</svg>
1 app/scss/hub_ghostery_browser.scss
View file
Open in desktop
@@ -75,6 +75,7 @@ html, body, #root {
@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss';
@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss';
@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss';
@import '../ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss';
@import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss';

// Imports from ../shared-components directory
ProTip! Use n and p to navigate between commits in a pull request.