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: () => {},
};