From 363cb0af6317dcb5fc12104f7414ab992723d422 Mon Sep 17 00:00:00 2001 From: Ben Date: Mon, 16 Sep 2019 14:28:41 -0400 Subject: [PATCH 1/2] Remove ghostery rewards toggle and add language for Cliqz Browser --- _locales/en/messages.json | 11 ++++ .../SetupAntiSuiteView/SetupAntiSuiteView.jsx | 6 +-- .../SetupAntiSuiteViewContainer.jsx | 52 +++++++++++-------- .../SetupAntiSuiteView.test.jsx.snap | 18 ++++--- .../ToggleSwitch/ToggleSwitch.jsx | 9 ++++ .../ToggleSwitch/ToggleSwitch.scss | 6 +++ .../__tests__/ToggleSwitch.test.jsx | 2 + 7 files changed, 73 insertions(+), 31 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 65b1786c2..960ddf419 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1535,6 +1535,17 @@ "hub_setup_smartblocking_description_smartblocking": { "message": "Automatically block and unblock trackers to optimize page performance." }, + "hub_setup_feature_already_active": { + "message": "This feature is already active in Cliqz by default. $LINK_LM_START$Learn More$LINK_LM_END$", + "placeholders": { + "link_lm_start": { + "content": "" + }, + "link_lm_end": { + "content": "" + } + } + }, "hub_setup_ghosteryrewards_name_rewards": { "message": "Rewards" }, diff --git a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx index e30542062..530d74dff 100644 --- a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx +++ b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx @@ -40,6 +40,7 @@ const SetupAntiSuiteView = props => ( @@ -61,13 +62,12 @@ const SetupAntiSuiteView = props => ( -
- {feature.description} -
+
); diff --git a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx index fe1653d79..e81a488dd 100644 --- a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx +++ b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx @@ -14,6 +14,9 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import SetupAntiSuiteView from './SetupAntiSuiteView'; +import globals from '../../../../../src/classes/Globals'; +// simple consts +const { IS_CLIQZ } = globals; /** * @class Implement the Setup Anti-Suite View for the Ghostery Hub @@ -43,7 +46,7 @@ class SetupAntiSuiteViewContainer extends Component { enable_anti_tracking, enable_ad_block, enable_smart_block, - enable_ghostery_rewards, + enable_ghostery_rewards } = setup; props.actions.setSetupStep({ setup_step: 9 }); props.actions.setAntiTracking({ enable_anti_tracking }); @@ -94,44 +97,49 @@ class SetupAntiSuiteViewContainer extends Component { enable_smart_block, enable_ghostery_rewards, } = this.props.setup; + + const anti_tracking_enabled = IS_CLIQZ ? false : enable_anti_tracking; + const ad_block_enabled = IS_CLIQZ ? false : enable_ad_block; + const ghostery_rewards_enabled = !IS_CLIQZ; const features = [ { id: 'anti-tracking', name: t('hub_setup_antisuite_name_antitracking'), - enabled: enable_anti_tracking, - toggle: () => { - this._handleToggle('anti-tracking'); - }, - description: t('hub_setup_antisuite_description_antitracking'), + enabled: anti_tracking_enabled, + locked: IS_CLIQZ, + toggle: IS_CLIQZ ? + () => {} : + () => this._handleToggle('anti-tracking'), + description: IS_CLIQZ ? t('hub_setup_feature_already_active') : t('hub_setup_antisuite_description_antitracking') }, { id: 'ad-block', name: t('hub_setup_adblock_name_adblocking'), - enabled: enable_ad_block, - toggle: () => { - this._handleToggle('ad-block'); - }, - description: t('hub_setup_adblock_description_adblocking'), + enabled: ad_block_enabled, + locked: IS_CLIQZ, + toggle: IS_CLIQZ ? + () => {} : + () => this._handleToggle('ad-block'), + description: IS_CLIQZ ? t('hub_setup_feature_already_active') : t('hub_setup_adblock_description_adblocking'), }, { id: 'smart-blocking', name: t('hub_setup_smartblocking_name_smartblocking'), enabled: enable_smart_block, - toggle: () => { - this._handleToggle('smart-blocking'); - }, + toggle: () => this._handleToggle('smart-blocking'), description: t('hub_setup_smartblocking_description_smartblocking'), - }, - { + } + ]; + + if (ghostery_rewards_enabled) { + features.push({ id: 'ghostery-rewards', name: t('hub_setup_ghosteryrewards_name_rewards'), enabled: enable_ghostery_rewards, - toggle: () => { - this._handleToggle('ghostery-rewards'); - }, + toggle: () => this._handleToggle('ghostery-rewards'), description: t('hub_setup_ghosteryrewards_description_rewards'), - }, - ]; + }); + } return ; } @@ -146,7 +154,7 @@ SetupAntiSuiteViewContainer.propTypes = { setAntiTracking: PropTypes.func.isRequired, setAdBlock: PropTypes.func.isRequired, setSmartBlocking: PropTypes.func.isRequired, - setGhosteryRewards: PropTypes.func.isRequired, + setGhosteryRewards: PropTypes.func.isRequired }).isRequired, sendMountActions: PropTypes.bool.isRequired, }; diff --git a/app/hub/Views/SetupViews/SetupAntiSuiteView/__tests__/__snapshots__/SetupAntiSuiteView.test.jsx.snap b/app/hub/Views/SetupViews/SetupAntiSuiteView/__tests__/__snapshots__/SetupAntiSuiteView.test.jsx.snap index 05e6e63a7..ae5d25fe6 100644 --- a/app/hub/Views/SetupViews/SetupAntiSuiteView/__tests__/__snapshots__/SetupAntiSuiteView.test.jsx.snap +++ b/app/hub/Views/SetupViews/SetupAntiSuiteView/__tests__/__snapshots__/SetupAntiSuiteView.test.jsx.snap @@ -87,9 +87,12 @@ exports[`app/hub/Views/SetupViews/SetupAntiSuiteView component Snapshot tests wi
- The first test feature -
+ dangerouslySetInnerHTML={ + Object { + "__html": "The first test feature", + } + } + />
- The second test feature -
+ dangerouslySetInnerHTML={ + Object { + "__html": "The second test feature", + } + } + />
diff --git a/app/shared-components/ToggleSwitch/ToggleSwitch.jsx b/app/shared-components/ToggleSwitch/ToggleSwitch.jsx index f8cbd57ee..a2f13c309 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.jsx +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.jsx @@ -23,8 +23,15 @@ import ClassNames from 'classnames'; const ToggleSwitch = (props) => { const switchClassNames = ClassNames('ToggleSwitch', { 'ToggleSwitch--active': props.checked, + 'ToggleSwitch--locked': props.locked, + 'ToggleSwitch--removed': props.removed }); + ToggleSwitch.defaultProps = { + locked: false, + removed: false + }; + return (
@@ -36,6 +43,8 @@ const ToggleSwitch = (props) => { // PropTypes ensure we pass required props of the correct type ToggleSwitch.propTypes = { checked: PropTypes.bool.isRequired, + locked: PropTypes.bool, + removed: PropTypes.bool, onChange: PropTypes.func.isRequired, }; diff --git a/app/shared-components/ToggleSwitch/ToggleSwitch.scss b/app/shared-components/ToggleSwitch/ToggleSwitch.scss index 90b0547d4..a035cfb21 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.scss +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.scss @@ -49,3 +49,9 @@ margin-left: 14px; background-color: #1dafed; } +.ToggleSwitch.ToggleSwitch--locked { + cursor: not-allowed; +} +.ToggleSwitch.ToggleSwitch--removed { + display: none; +} diff --git a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx index 188f7afcd..93ce29dba 100644 --- a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx +++ b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx @@ -21,6 +21,8 @@ describe('app/shared-components/ToggleSwitch component', () => { test('toggle switch is rendered correctly when checked', () => { const initialState = { checked: true, + locked: false, + removed: false, onChange: () => {}, }; From caba482a263829e67cc571eb7f5fd581ced63971 Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 17 Sep 2019 13:12:30 -0400 Subject: [PATCH 2/2] Move default props to bottom of file. Remove variable name for clarity. Remove unused scss and props --- .../SetupAntiSuiteViewContainer.jsx | 3 +-- app/shared-components/ToggleSwitch/ToggleSwitch.jsx | 13 +++++-------- .../ToggleSwitch/ToggleSwitch.scss | 3 --- .../ToggleSwitch/__tests__/ToggleSwitch.test.jsx | 1 - 4 files changed, 6 insertions(+), 14 deletions(-) diff --git a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx index e81a488dd..08302f49b 100644 --- a/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx +++ b/app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteViewContainer.jsx @@ -100,7 +100,6 @@ class SetupAntiSuiteViewContainer extends Component { const anti_tracking_enabled = IS_CLIQZ ? false : enable_anti_tracking; const ad_block_enabled = IS_CLIQZ ? false : enable_ad_block; - const ghostery_rewards_enabled = !IS_CLIQZ; const features = [ { id: 'anti-tracking', @@ -131,7 +130,7 @@ class SetupAntiSuiteViewContainer extends Component { } ]; - if (ghostery_rewards_enabled) { + if (!IS_CLIQZ) { features.push({ id: 'ghostery-rewards', name: t('hub_setup_ghosteryrewards_name_rewards'), diff --git a/app/shared-components/ToggleSwitch/ToggleSwitch.jsx b/app/shared-components/ToggleSwitch/ToggleSwitch.jsx index a2f13c309..7c029049b 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.jsx +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.jsx @@ -23,15 +23,9 @@ import ClassNames from 'classnames'; const ToggleSwitch = (props) => { const switchClassNames = ClassNames('ToggleSwitch', { 'ToggleSwitch--active': props.checked, - 'ToggleSwitch--locked': props.locked, - 'ToggleSwitch--removed': props.removed + 'ToggleSwitch--locked': props.locked }); - ToggleSwitch.defaultProps = { - locked: false, - removed: false - }; - return (
@@ -44,8 +38,11 @@ const ToggleSwitch = (props) => { ToggleSwitch.propTypes = { checked: PropTypes.bool.isRequired, locked: PropTypes.bool, - removed: PropTypes.bool, onChange: PropTypes.func.isRequired, }; +ToggleSwitch.defaultProps = { + locked: false +}; + export default ToggleSwitch; diff --git a/app/shared-components/ToggleSwitch/ToggleSwitch.scss b/app/shared-components/ToggleSwitch/ToggleSwitch.scss index a035cfb21..1d1e51be2 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.scss +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.scss @@ -52,6 +52,3 @@ .ToggleSwitch.ToggleSwitch--locked { cursor: not-allowed; } -.ToggleSwitch.ToggleSwitch--removed { - display: none; -} diff --git a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx index 93ce29dba..55648ff79 100644 --- a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx +++ b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx @@ -22,7 +22,6 @@ describe('app/shared-components/ToggleSwitch component', () => { const initialState = { checked: true, locked: false, - removed: false, onChange: () => {}, };