GH-1607: Remove Ghostery rewards toggle, and add language for Cliqz Browser

_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": "<a href=\"https://www.ghostery.com/faqs/what-are-the-new-ghostery-8-features/\" target=\"_blank\" rel=\"noopener noreferrer\">"
+			},
+			"link_lm_end": {
+				"content": "</a>"
+			}
+		}
+	},
 	"hub_setup_ghosteryrewards_name_rewards": {
 		"message": "Rewards"
 	},

app/hub/Views/SetupViews/SetupAntiSuiteView/SetupAntiSuiteView.jsx

@@ -40,6 +40,7 @@ const SetupAntiSuiteView = props => (
 								<ToggleSwitch
 									checked={feature.enabled}
 									onChange={feature.toggle}
+									locked={feature.locked}
 								/>
 							</div>
 						</div>
@@ -61,13 +62,12 @@ const SetupAntiSuiteView = props => (
 										<ToggleSwitch
 											checked={feature.enabled}
 											onChange={feature.toggle}
+											locked={feature.locked}
 										/>
 									</div>
 								</div>
 							</div>
-							<div className="SetupAntiSuite__featureDescription">
-								{feature.description}
-							</div>
+							<div className="SetupAntiSuite__featureDescription" dangerouslySetInnerHTML={{ __html: feature.description }} />
 						</div>
 					</div>
 				);

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 <SetupAntiSuiteView features={features} />;
 	}
@@ -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,
 };

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
         </div>
         <div
           className="SetupAntiSuite__featureDescription"
-        >
-          The first test feature
-        </div>
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "The first test feature",
+            }
+          }
+        />
       </div>
     </div>
     <div
@@ -157,9 +160,12 @@ exports[`app/hub/Views/SetupViews/SetupAntiSuiteView component Snapshot tests wi
         </div>
         <div
           className="SetupAntiSuite__featureDescription"
-        >
-          The second test feature
-        </div>
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "The second test feature",
+            }
+          }
+        />
       </div>
     </div>
   </div>

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;

app/shared-components/ToggleSwitch/ToggleSwitch.scss

@@ -49,3 +49,6 @@
 	margin-left: 14px;
 	background-color: #1dafed;
 }
+.ToggleSwitch.ToggleSwitch--locked {
+	cursor: not-allowed;
+}

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