Implement A/B test for hub with modified tabs

app/hub/Views/SideNavigationView/SideNavigationView.jsx

@@ -15,6 +15,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
 import { NavLink } from 'react-router-dom';
+import QueryString from 'query-string';
+
+// Flag to display alternate hub view (used in A/B testing)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
 
 /**
  * Helper render function for rendering a list item for the Navigation Main section
@@ -94,10 +98,12 @@ const SideNavigationView = (props) => {
 		disabled: disableNav,
 	});
 
+	const menuClassNames = ClassNames(`SideNavigation__menu ${!ah ? 'flex-child-grow' : ''} flex-container flex-dir-column`);
+
 	return (
 		<div className={containerClassNames}>
 			<NavLink to="/" className={topClassNames} />
-			<div className="SideNavigation__menu flex-child-grow flex-container flex-dir-column">
+			<div className={menuClassNames}>
 				{menuItems.map(item => _renderMenuItem(item, disableNav))}
 			</div>
 			<div className="SideNavigation__bottom flex-container flex-dir-column">

app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx

@@ -13,12 +13,16 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import QueryString from 'query-string';
 import SideNavigationView from './SideNavigationView';
 import globals from '../../../../src/classes/Globals';
 
 const { IS_CLIQZ, BROWSER_INFO } = globals;
 const IS_ANDROID = (BROWSER_INFO.os === 'android');
 
+// Flag to display alternate hub view (used in A/B testing)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 /**
  * @class Implement the Side Navigation View for the Ghostery Hub
  * @extends Component
@@ -50,7 +54,10 @@ class SideNavigationViewContainer extends Component {
 		const { user, location } = this.props;
 		const disableRegEx = /^(\/setup(?!\/4$))|(\/tutorial(?!\/6$))/;
 
-		const menuItems = [
+		const menuItems = ah ? [
+			{ href: '/home', icon: 'home', text: t('hub_side_navigation_home') },
+			{ href: '/setup', icon: 'setup', text: t('customize_setup') },
+		] : [
 			{ href: '/home', icon: 'home', text: t('hub_side_navigation_home') },
 			{ href: '/', icon: 'shield', text: t('hub_side_navigation_upgrade_plan') },
 			{ href: '/setup', icon: 'setup', text: t('customize_setup') },
@@ -59,6 +66,7 @@ class SideNavigationViewContainer extends Component {
 			...((IS_CLIQZ || IS_ANDROID) ? [] : [{ href: '/rewards', icon: 'rewards', text: t('hub_side_navigation_rewards') }]),
 			...((IS_ANDROID) ? [] : [{ href: '/products', icon: 'products', text: t('hub_side_navigation_products') }])
 		];
+
 		const bottomItems = user ? [
 			{ id: 'email', href: `${globals.ACCOUNT_BASE_URL}/`, text: user.email },
 			{ id: 'logout', text: t('sign_out'), clickHandler: this._handleLogoutClick },

app/hub/index.jsx

@@ -17,6 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { Provider } from 'react-redux';
+import QueryString from 'query-string';
 import createStore from './createStore';
 
 // Containers
@@ -34,14 +35,17 @@ import UpgradePlanView from './Views/UpgradePlanView';
 
 const store = createStore();
 
+// Flag to display alternate hub view (used in A/B testing)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
 /**
  * Top-Level Component for the Ghostery Hub
  * @memberof HubComponents
  */
 const Hub = () => (
 	<AppView>
 		<Route exact path="/" component={UpgradePlanView} />
-		<Route exact path="/home" component={HomeView} />
+		<Route exact path="/home" component={ah ? UpgradePlanView : HomeView} />
 		<Route path="/setup" component={SetupView} />
 		<Route path="/tutorial" component={TutorialView} />
 		<Route exact path="/plus" component={PlusView} />

manifest.json

@@ -114,5 +114,6 @@
 		"cliqz/offers-templates/reminder.html",
 		"cliqz/offers-templates/checkout.html",
 		"cliqz/offers-templates/control-center.html"
-	]
+	],
+	"debug": true
 }

src/background.js

@@ -1129,6 +1129,17 @@ function setupHubPromoABTest() {
 	}
 }
 
+/**
+ * Set option for Hub Layout A/B test based
+ * on the results returned from the abtest endpoint.
+ * @memberOf Background
+ */
+function setupHubLayoutABTest() {
+	if (abtest.hasTest('hub_alternate')) {
+		conf.hub_layout = 'alternate';
+	}
+}
+
 /**
  * Adjust antitracking parameters based on the current state
  * of ABTest and availability of Human Web.
@@ -1151,6 +1162,7 @@ function setupABTest() {
 	}
 
 	setupHubPromoABTest();
+	setupHubLayoutABTest();
 }
 
 /**
@@ -1759,10 +1771,13 @@ function initializeGhosteryModules() {
 			// We need to do this after running scheduledTasks for the first time
 			// because of an A/B test that determines which promo variant is shown in the Hub on install
 			if (globals.JUST_INSTALLED) {
-				const route = ((conf.hub_promo_variant === 'upgrade' || conf.hub_promo_variant === 'not_yet_set') && !IS_ANDROID) ? '' : '#home';
-				const showPremiumPromoModal = (conf.hub_promo_variant === 'midnight' && !IS_ANDROID);
+				// const route = ((conf.hub_promo_variant === 'upgrade' || conf.hub_promo_variant === 'not_yet_set') && !IS_ANDROID) ? '' : '#home';
+				// const showPremiumPromoModal = (conf.hub_promo_variant === 'midnight' && !IS_ANDROID);
+				const showAlternateHub = conf.hub_layout === 'alternate';
+				const route = conf.hub_layout === 'alternate' ? '#home' : '';
 				chrome.tabs.create({
-					url: chrome.runtime.getURL(`./app/templates/hub.html?$justInstalled=true&pm=${showPremiumPromoModal}${route}`),
+					// url: chrome.runtime.getURL(`./app/templates/hub.html?$justInstalled=true&pm=${showPremiumPromoModal}${route}`),
+					url: chrome.runtime.getURL(`./app/templates/hub.html?$justInstalled=true&ah=${showAlternateHub}${route}`),
 					active: true
 				});
 			}

src/classes/ConfData.js

@@ -117,6 +117,7 @@ class ConfData {
 			_initProperty('expand_all_trackers', true);
 			_initProperty('hide_alert_trusted', false);
 			_initProperty('hub_promo_variant', 'not_yet_set');
+			_initProperty('hub_layout', 'default');
 			_initProperty('ignore_first_party', true);
 			_initProperty('import_callout_dismissed', true);
 			_initProperty('insights_promo_modal_last_seen', 0);