+
{steps.map(step => (
{
disabled: disableNav,
});
+ const menuClassNames = ClassNames(`SideNavigation__menu ${ah ? '' : 'flex-child-grow'} flex-container flex-dir-column`);
+
return (
-
+
+
{menuItems.map(item => _renderMenuItem(item, disableNav))}
diff --git a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx
index 0fa5028e5..6ba4f00fa 100644
--- a/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx
+++ b/app/hub/Views/SideNavigationView/SideNavigationViewContainer.jsx
@@ -13,10 +13,15 @@
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 } = globals;
+const { IS_CLIQZ, BROWSER_INFO } = globals;
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
+
+// Flag to display alternate hub view (used for A/B testing ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
/**
* @class Implement the Side Navigation View for the Ghostery Hub
@@ -49,15 +54,19 @@ 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') },
{ href: '/tutorial', icon: 'tutorial', text: t('hub_side_navigation_tutorial') },
{ href: '/plus', icon: 'plus', text: t('get_ghostery_plus') },
- ...((IS_CLIQZ) ? [] : [{ href: '/rewards', icon: 'rewards', text: t('hub_side_navigation_rewards') }]),
- { href: '/products', icon: 'products', text: t('hub_side_navigation_products') }
+ ...((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 },
diff --git a/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap b/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap
index 09a5d9f7f..a53d7c338 100644
--- a/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap
+++ b/app/hub/Views/SideNavigationView/__tests__/__snapshots__/SideNavigationView.test.jsx.snap
@@ -5,11 +5,11 @@ exports[`app/hub/Views/SideNavigationView component More Snapshot tests with rea
className="SideNavigation flex-container flex-dir-column"
>
{
- const { sendMountActions, steps } = props;
+ const { sendMountActions, steps, isAndroid } = props;
return (
-
+
{steps.map(step => (
diff --git a/app/hub/Views/TutorialView/TutorialView.scss b/app/hub/Views/TutorialView/TutorialView.scss
index ae47ef2ec..eebb3226e 100644
--- a/app/hub/Views/TutorialView/TutorialView.scss
+++ b/app/hub/Views/TutorialView/TutorialView.scss
@@ -149,8 +149,17 @@
left: 1%;
padding-right: 12%;
margin-bottom: 30px;
+ @media only screen and (max-width: 740px) {
+ left: auto;
+ padding-right: 0;
+ }
+ }
+ &.layout-detailed {
+ left: -11%;
+ @media only screen and (max-width: 740px) {
+ left: auto;
+ }
}
- &.layout-detailed { left: -11%; }
}
@media only screen and (max-width: 960px) {
.TutorialLayoutView .TutorialView__tagline {
diff --git a/app/hub/Views/TutorialView/TutorialViewContainer.jsx b/app/hub/Views/TutorialView/TutorialViewContainer.jsx
index f42b3985f..db683ea04 100644
--- a/app/hub/Views/TutorialView/TutorialViewContainer.jsx
+++ b/app/hub/Views/TutorialView/TutorialViewContainer.jsx
@@ -14,6 +14,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TutorialView from './TutorialView';
+import globals from '../../../../src/classes/Globals';
// Component Views
import TutorialVideoView from '../TutorialViews/TutorialVideoView';
@@ -23,6 +24,9 @@ import TutorialLayoutView from '../TutorialViews/TutorialLayoutView';
import TutorialTrustView from '../TutorialViews/TutorialTrustView';
import TutorialAntiSuiteView from '../TutorialViews/TutorialAntiSuiteView';
+const { BROWSER_INFO } = globals;
+const IS_ANDROID = (BROWSER_INFO.os === 'android');
+
/**
* @class Implement the Tutorial View for the Ghostery Hub
* @extends Component
@@ -88,7 +92,7 @@ class TutorialViewContainer extends Component {
},
];
- return (
+const TutorialAntiSuiteView = ({ isAndroid }) => (
- 
+ { !isAndroid && (
+
@@ -26,17 +27,21 @@ const TutorialAntiSuiteView = () => (
-
- {t('detailed_view')}
-
-
+ { !isAndroid && (
+
+
+
+ )}
+ {t('detailed_view')}
+
+
+
@@ -82,6 +87,8 @@ const TutorialAntiSuiteView = () => (
);
-// No need for PropTypes. The SideNavigationViewContainer has no props.
+TutorialAntiSuiteView.propTypes = {
+ isAndroid: PropTypes.bool.isRequired
+};
export default TutorialAntiSuiteView;
diff --git a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx
index 5313f9b07..0f322785c 100644
--- a/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialAntiSuiteView/TutorialAntiSuiteViewContainer.jsx
@@ -51,7 +51,8 @@ class TutorialAntiSuiteViewContainer extends Component {
* @return {JSX} JSX for rendering the Tutorial Anti Suite View of the Hub app
*/
render() {
- return
- detailed_view
+
+
-
+ detailed_view
+
+
(
+const TutorialBlockingView = ({ isAndroid }) => (
- 
+ { !isAndroid && (
+
@@ -26,17 +27,21 @@ const TutorialBlockingView = () => (
-
- {t('hub_tutorial_detailed_expanded_view')}
-
-
+ { !isAndroid && (
+
+
+
+ )}
+ {t('hub_tutorial_detailed_expanded_view')}
+
+
+
@@ -60,6 +65,8 @@ const TutorialBlockingView = () => (
);
-// No need for PropTypes. The SideNavigationViewContainer has no props.
+TutorialBlockingView.propTypes = {
+ isAndroid: PropTypes.bool.isRequired
+};
export default TutorialBlockingView;
diff --git a/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx
index 5210ca461..856309f8a 100644
--- a/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialBlockingView/TutorialBlockingViewContainer.jsx
@@ -44,7 +44,8 @@ class TutorialBlockingViewContainer extends Component {
* @return {JSX} JSX for rendering the Tutorial Blocking View of the Hub app
*/
render() {
- return
- hub_tutorial_detailed_expanded_view
+
+
-
+ hub_tutorial_detailed_expanded_view
+
+
(
+const TutorialLayoutView = ({ isAndroid }) => (
- ![simple_view]()
(
+const TutorialTrackerListView = ({ isAndroid }) => (
@@ -38,6 +39,8 @@ const TutorialTrackerListView = () => (
);
-// No need for PropTypes. The SideNavigationViewContainer has no props.
+TutorialTrackerListView.propTypes = {
+ isAndroid: PropTypes.bool.isRequired
+};
export default TutorialTrackerListView;
diff --git a/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx
index 9aeab240b..dfe809712 100644
--- a/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialTrackerListView/TutorialTrackerListViewContainer.jsx
@@ -44,13 +44,15 @@ class TutorialTrackerListViewContainer extends Component {
* @return {JSX} JSX for rendering the Tutorial Tracker List View of the Hub app
*/
render() {
- return 
- 
+ { !isAndroid && (
+
+
@@ -43,6 +44,8 @@ const TutorialLayoutView = () => (
);
-// No need for PropTypes. The SideNavigationViewContainer has no props.
+TutorialLayoutView.propTypes = {
+ isAndroid: PropTypes.bool.isRequired
+};
export default TutorialLayoutView;
diff --git a/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx
index 59c5f0208..384bcfaa5 100644
--- a/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialLayoutView/TutorialLayoutViewContainer.jsx
@@ -44,7 +44,8 @@ class TutorialLayoutViewContainer extends Component {
* @return {JSX} JSX for rendering the Tutorial Layout View of the Hub app
*/
render() {
- return
@@ -26,17 +27,21 @@ const TutorialTrustView = () => (
-
- {t('detailed_view')}
-
-
+ { !isAndroid && (
+
+
+
+ )}
+ {t('detailed_view')}
+
+
+
@@ -63,6 +68,8 @@ const TutorialTrustView = () => (
);
-// No need for PropTypes. The SideNavigationViewContainer has no props.
+TutorialTrustView.propTypes = {
+ isAndroid: PropTypes.bool.isRequired
+};
export default TutorialTrustView;
diff --git a/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx
index 42d8e341e..949d361af 100644
--- a/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx
+++ b/app/hub/Views/TutorialViews/TutorialTrustView/TutorialTrustViewContainer.jsx
@@ -44,7 +44,8 @@ class TutorialTrustViewContainer extends Component {
* @return {JSX} JSX for rendering the Tutorial Trust View of the Hub app
*/
render() {
- return
- detailed_view
+
+
-
+ detailed_view
+
+
(
-
+
{t('hub_upgrade_already_protected')}
);
+// Whether we are displaying this Upgrade Plan view in the alternate or the default Hub layout (as per the A/B test in ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
/**
- * A React class component for rendering the Upgrade Plan View
+ * A React function component for rendering the Upgrade Plan View
* @return {JSX} JSX for rendering the Upgrade Plan View of the Hub app
* @memberof HubComponents
*/
const UpgradePlanView = (props) => {
+ useEffect(() => {
+ const title = t('hub_upgrade_page_title');
+ window.document.title = title;
+ }, []);
+
const {
protection_level,
show_yearly_prices,
@@ -173,7 +182,8 @@ const UpgradePlanView = (props) => {
const plusCTAButton = (position) => {
const utm_campaign = (position === 'top' ? 'c_1' : 'c_2');
- const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${params}&utm_campaign=intro_hub_${utm_campaign}`;
+ const utm_content = (ah ? '2' : '1');
+ const plusCheckoutLink = `${globals.CHECKOUT_BASE_URL}/plus?${params}&utm_campaign=intro_hub_${utm_campaign}&utm_content=${utm_content}`;
return (
@@ -184,7 +194,8 @@ const UpgradePlanView = (props) => {
const premiumCTAButton = (position) => {
const utm_campaign = (position === 'top' ? 'c_3' : 'c_4');
- const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${params}&utm_campaign=intro_hub_${utm_campaign}`;
+ const utm_content = (ah ? '2' : '1');
+ const premiumCheckoutLink = `${globals.CHECKOUT_BASE_URL}/premium?${params}&utm_campaign=intro_hub_${utm_campaign}&utm_content=${utm_content}`;
return (
@@ -400,7 +411,7 @@ const UpgradePlanView = (props) => {
-
+
{t('hub_upgrade_already_protected')}
@@ -482,7 +493,7 @@ const UpgradePlanView = (props) => {
{t('hub_upgrade_plan_free')}
{t('hub_upgrade_basic_protection')}
@@ -113,12 +114,20 @@ const premiumAlreadyProtectedButton = () => (
-
+
{t('hub_upgrade_already_protected')}
diff --git a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss
index e6e73f46d..0d75ecd9e 100644
--- a/app/hub/Views/UpgradePlanView/UpgradePlanView.scss
+++ b/app/hub/Views/UpgradePlanView/UpgradePlanView.scss
@@ -550,11 +550,8 @@ section.home-template .section.section-pricing {
text-transform: none;
white-space: nowrap;
font-family: 'Open Sans';
- background-color: $price-blue;
font-weight: 600;
- &:hover {
- background-color: $price-blue-hover;
- }
+ background-color: $price-blue;
}
.button-gold {
@@ -749,6 +746,7 @@ section.home-template .section.section-pricing {
align-items: center;
}
@include breakpoint($medium-large-breakpoint down) {
+ max-width: 100%;
padding-left: rem-calc(20);
padding-right: rem-calc(20);
}
diff --git a/app/hub/index.jsx b/app/hub/index.jsx
index 6e8f215ab..aa9e73e1d 100644
--- a/app/hub/index.jsx
+++ b/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,6 +35,9 @@ import UpgradePlanView from './Views/UpgradePlanView';
const store = createStore();
+// Flag to display alternate hub view (used for A/B testing ticket GH-2097)
+const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
+
/**
* Top-Level Component for the Ghostery Hub
* @memberof HubComponents
@@ -41,7 +45,7 @@ const store = createStore();
const Hub = () => (