diff --git a/_locales/en/messages.json b/_locales/en/messages.json index fea5b9082..07ba8bba7 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -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." }, diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx index e3e30de9f..13cc9fe6d 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx @@ -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 = () =>

Step 2: Block Settings View

; +// 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 ( +
+
{t('ghostery_browser_hub_onboarding_which_privacy_plan')}
+
{t('ghostery_browser_hub_onboarding_tell_us_your_preferences')}
+
+
+ this.toggleRecommendedChoices(!recommendedChoices)} + /> +
{t('ghostery_browser_hub_onboarding_recommended_choices')}
+
+
    +
  1. {t('ghostery_browser_hub_onboarding_question_block_ads')}
    2. +
    +
    + this.handleAnswerChange('blockAds', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    +
    +
    +
    + this.handleAnswerChange('blockAds', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    +
    +
  2. +
    + {t('ghostery_browser_hub_onboarding_question_kinds_of_trackers')} +
    +
    +
    3. +
    +
    + this.handleAnswerChange('kindsOfTrackers', 0)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_all')}
    +
    +
    +
    + this.handleAnswerChange('kindsOfTrackers', 1)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_ad_and_analytics')}
    +
    +
    +
    + this.handleAnswerChange('kindsOfTrackers', 2)} altDesign /> +
    +
    {t('ghostery_browser_hub_onboarding_kinds_of_trackers_none')}
    +
    +
  3. + {t('ghostery_browser_hub_onboarding_question_anti_tracking')} +
    +
    4. +
    +
    + this.handleAnswerChange('antiTracking', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    +
    +
    +
    + this.handleAnswerChange('antiTracking', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    +
    +
  4. + {t('ghostery_browser_hub_onboarding_question_smart_browsing')} +
    +
    5. +
    +
    + this.handleAnswerChange('smartBrowsing', true)} altDesign /> +
    +
    {t('hub_setup_modal_button_yes')}
    +
    +
    +
    + this.handleAnswerChange('smartBrowsing', false)} altDesign /> +
    +
    {t('hub_setup_modal_button_no')}
    +
    +
+
+ +
+ ); + } +} export default BlockSettingsView; diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss new file mode 100644 index 000000000..fb5731d04 --- /dev/null +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.scss @@ -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; +} diff --git a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js index ec251f216..93095cc5a 100644 --- a/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js +++ b/app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js @@ -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); diff --git a/app/images/hub/setup/info.svg b/app/images/hub/setup/info.svg new file mode 100644 index 000000000..7bcbcb9ef --- /dev/null +++ b/app/images/hub/setup/info.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/app/scss/hub_ghostery_browser.scss b/app/scss/hub_ghostery_browser.scss index 6b44586a6..3c6f67af5 100644 --- a/app/scss/hub_ghostery_browser.scss +++ b/app/scss/hub_ghostery_browser.scss @@ -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