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..08302f49b 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,48 @@ 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 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 (!IS_CLIQZ) { + 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 +153,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..7c029049b 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.jsx +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.jsx @@ -23,6 +23,7 @@ import ClassNames from 'classnames'; const ToggleSwitch = (props) => { const switchClassNames = ClassNames('ToggleSwitch', { 'ToggleSwitch--active': props.checked, + 'ToggleSwitch--locked': props.locked }); return ( @@ -36,7 +37,12 @@ const ToggleSwitch = (props) => { // PropTypes ensure we pass required props of the correct type ToggleSwitch.propTypes = { checked: PropTypes.bool.isRequired, + locked: 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 90b0547d4..1d1e51be2 100644 --- a/app/shared-components/ToggleSwitch/ToggleSwitch.scss +++ b/app/shared-components/ToggleSwitch/ToggleSwitch.scss @@ -49,3 +49,6 @@ margin-left: 14px; background-color: #1dafed; } +.ToggleSwitch.ToggleSwitch--locked { + cursor: not-allowed; +} diff --git a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx index 188f7afcd..55648ff79 100644 --- a/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx +++ b/app/shared-components/ToggleSwitch/__tests__/ToggleSwitch.test.jsx @@ -21,6 +21,7 @@ describe('app/shared-components/ToggleSwitch component', () => { test('toggle switch is rendered correctly when checked', () => { const initialState = { checked: true, + locked: false, onChange: () => {}, };