GH-2220: Onboarding - Telemetry

app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx

@@ -18,7 +18,7 @@ import { BLOCKING_POLICY_RECOMMENDED } from '../../../shared-hub/constants/Block
 
 // Component Views
 import WelcomeView from '../OnboardingViews/Step0_WelcomeView';
-import LoginView from '../OnboardingViews/Step1_LoginView';
+import Step1_CreateAccountView from '../OnboardingViews/Step1_CreateAccountView';
 import BlockSettingsView from '../OnboardingViews/Step2_BlockSettingsView';
 import ChooseDefaultSearchView from '../OnboardingViews/Step3_ChooseDefaultSearchView';
 import ChoosePlanView from '../OnboardingViews/Step4_ChoosePlanView';
@@ -54,7 +54,7 @@ class OnboardingViewContainer extends Component {
 
 		// TODO modify this as needed
 		const { actions, setup } = this.props;
-		actions.setSetupStep({ setup_step: 7 });
+		actions.setSetupStep({ setup_step: 7, origin: ONBOARDING });
 		actions.initSetupProps(setup);
 
 		// TODO modify this as needed
@@ -66,7 +66,7 @@ class OnboardingViewContainer extends Component {
 			this.state = {
 				sendMountActions: true
 			};
-			actions.setSetupStep({ setup_step: 8 });
+			actions.setSetupStep({ setup_step: 8, origin: ONBOARDING });
 			actions.setBlockingPolicy({ blockingPolicy: BLOCKING_POLICY_RECOMMENDED });
 			actions.setAntiTracking({ enable_anti_tracking: true }); // covered
 			actions.setAdBlock({ enable_ad_block: true }); // covered
@@ -89,7 +89,7 @@ class OnboardingViewContainer extends Component {
 			{
 				index: 1,
 				path: `/${ONBOARDING}/${LOGIN}`,
-				bodyComponents: [LoginView],
+				bodyComponents: [Step1_CreateAccountView],
 			},
 			{
 				index: 2,
@@ -104,7 +104,7 @@ class OnboardingViewContainer extends Component {
 			{
 				index: 4,
 				path: `/${ONBOARDING}/${CHOOSE_PLAN}`,
-				bodyComponents: [ChoosePlanView, LoginView],
+				bodyComponents: [ChoosePlanView],
 			},
 			{
 				index: 5,

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx

@@ -13,21 +13,26 @@
 
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { LOGIN, WELCOME } from '../../OnboardingView/OnboardingConstants';
 
 /**
  * A Functional React component for rendering the Browser Welcome View
  * @return {JSX} JSX for rendering the Browser Welcome View of the Hub app
  * @memberof GhosteryBrowserHubViews
  */
-const WelcomeView = () => (
-	<div className="WelcomeView__container">
-		<div className="WelcomeView__title">{t('ghostery_browser_hub_onboarding_welcome')}</div>
-		<div className="WelcomeView__subtitle">{t('ghostery_browser_hub_onboarding_lets_begin')}</div>
-		<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
-		<NavLink className="WelcomeView__ctaButton" to="/onboarding/1">
-			<span>{ t('ghostery_browser_hub_onboarding_lets_do_this') }</span>
-		</NavLink>
-	</div>
-);
+const WelcomeView = (props) => {
+	const { actions } = props;
+	const { setSetupStep } = actions;
+	return (
+		<div className="WelcomeView__container">
+			<div className="WelcomeView__title">{t('ghostery_browser_hub_onboarding_welcome')}</div>
+			<div className="WelcomeView__subtitle">{t('ghostery_browser_hub_onboarding_lets_begin')}</div>
+			<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
+			<NavLink className="WelcomeView__ctaButton" to="/onboarding/1" onClick={() => setSetupStep({ setup_step: LOGIN, origin: WELCOME })}>
+				<span>{t('ghostery_browser_hub_onboarding_lets_do_this')}</span>
+			</NavLink>
+		</div>
+	);
+};
 
 export default WelcomeView;

app/ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/index.js

@@ -11,6 +11,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
+import { buildReduxHOC } from '../../../../shared-hub/utils';
 import WelcomeView from './WelcomeView';
+import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
 
-export default WelcomeView;
+const actionCreators = {
+	setSetupStep,
+};
+
+export default buildReduxHOC([], actionCreators, WelcomeView);

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountFormContainer.jsx

@@ -162,6 +162,7 @@ class CreateAccountFormContainer extends Component {
 		});
 		actions.register(email, confirmEmail, firstName, lastName, password).then((success) => {
 			if (success) {
+				// User is automatically logged in, and redirected to the logged in view of BrowserCreateAccountForm
 				actions.getUser().then(() => {
 					if (isUpdatesChecked) actions.handleEmailPreferencesCheckboxChange('global', isUpdatesChecked);
 				});
@@ -170,7 +171,6 @@ class CreateAccountFormContainer extends Component {
 					toastMessage: t('hub_create_account_toast_success'),
 					toastClass: 'success'
 				});
-				// Route to next screen
 			} else {
 				actions.setToast({
 					toastMessage: t('hub_create_account_toast_error'),

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx

@@ -12,11 +12,13 @@
  */
 
 import React, { Fragment, useRef, useState } from 'react';
+import { NavLink } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
 import Step1_LogInForm from '../Step1_LogInForm';
 import Step1_CreateAccountForm from '../Step1_CreateAccountForm';
 import globals from '../../../../../src/classes/Globals';
+import { LOGIN, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 const SIGN_IN = 'SIGN_IN';
 const CREATE_ACCOUNT = 'CREATE_ACCOUNT';
@@ -61,22 +63,14 @@ const renderFAQListItem = (icon, label, description) => (
 	</div>
 );
 
-const renderSkipLink = () => (
-	<div className="row align-center-middle">
-		<div className="columns small-10 medium-5" />
-		<div className="columns small-10 medium-5">
-			<div className="Step1_CreateAccountView__skip">{t('ghostery_browser_hub_onboarding_skip')}</div>
-		</div>
-	</div>
-);
-
 /**
  * A Functional React component for rendering the Browser Create Account View
  * @return {JSX} JSX for rendering the Browser Create Account View of the Hub app
  * @memberof GhosteryBrowserHubViews
  */
 const Step1_CreateAccountView = (props) => {
-	const { user } = props;
+	const { user, actions } = props;
+	const { setSetupStep } = actions;
 	const email = user && user.email;
 
 	const [expanded, setExpanded] = useState(false);
@@ -97,13 +91,25 @@ const Step1_CreateAccountView = (props) => {
 		setExpanded(!expanded);
 	};
 
+	const renderSkipLink = () => (
+		<div className="row align-center-middle">
+			<div className="columns small-10 medium-5" />
+			<div className="columns small-10 medium-5">
+				<NavLink className="Step1_CreateAccountView__skip" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}>
+					<span>{t('ghostery_browser_hub_onboarding_skip')}</span>
+				</NavLink>
+			</div>
+		</div>
+	);
+
 	return (user ? (
 		<div className="Step1_CreateAccountView__alreadySignedIn">
 			<div className="Step1_CreateAccountView__title">{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}</div>
 			<div className="Step1_CreateAccountView__email">{email}</div>
 			<div className="Step1_CreateAccountView__ctaButtonContainer">
-				{/* Link to next page */}
-				<button type="submit" className="Step1_CreateAccountView__ctaButton">{t('next')}</button>
+				<NavLink className="Step1_CreateAccountView__ctaButton" to="/onboarding/2" onClick={() => setSetupStep({ setup_step: LOGIN, origin: ONBOARDING })}>
+					<span>{t('next')}</span>
+				</NavLink>
 			</div>
 		</div>
 	) : (

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js

@@ -14,5 +14,10 @@
 import { withRouter } from 'react-router-dom';
 import { buildReduxHOC } from '../../../../shared-hub/utils';
 import Step1_CreateAccountView from './Step1_CreateAccountView';
+import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
 
-export default withRouter(buildReduxHOC(['account'], null, Step1_CreateAccountView));
+const actionCreators = {
+	setSetupStep,
+};
+
+export default withRouter(buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView));

app/ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/index.js

@@ -22,6 +22,7 @@ import {
 } from '../../../../Account/AccountActions';
 import { getTheme } from '../../../../panel/actions/PanelActions';
 import setToast from '../../../../shared-hub/actions/ToastActions';
+import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
 
 const stateSlices = ['account'];
 const actionCreators = {
@@ -30,7 +31,8 @@ const actionCreators = {
 	getUser,
 	getUserSettings,
 	getTheme,
-	resetPassword
+	resetPassword,
+	setSetupStep,
 };
 
 export default buildReduxHOC(stateSlices, actionCreators, Step1_LogInFormContainer);

app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -16,6 +16,7 @@ import React, { Component } from 'react';
 // import Tooltip from '../../../../panel/components/Tooltip';
 import RadioButton from '../../../../shared-components/RadioButton/RadioButton';
 import ToggleCheckbox from '../../../../shared-components/ToggleCheckbox/ToggleCheckbox';
+import { CHOOSE_DEFAULT_SEARCH, ONBOARDING } from '../../OnboardingView/OnboardingConstants';
 
 /**
  * @class Implement the Block Settings View for the Ghostery Browser Hub
@@ -65,9 +66,11 @@ class BlockSettingsView extends Component {
 
 		// Will only change user settings if all questions are answered
 		if (blockAds !== null && kindsOfTrackers !== null && antiTracking !== null && smartBrowsing !== null) {
+			const { actions } = this.props;
 			const {
-				setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy
-			} = this.props;
+				setAdBlock, setAntiTracking, setSmartBlocking, setBlockingPolicy, setSetupStep
+			} = actions;
+			const { history } = this.props;
 
 			setAdBlock(blockAds);
 			setAntiTracking(antiTracking);
@@ -88,6 +91,8 @@ class BlockSettingsView extends Component {
 					break;
 			}
 			setBlockingPolicy({ blockingPolicy });
+			setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: ONBOARDING });
+			history.push('/onboarding/3');
 		} else {
 			const { setToast } = this.props;
 

app/ghostery-browser-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js

@@ -16,13 +16,15 @@ import { buildReduxHOC } from '../../../../shared-hub/utils';
 import { setAntiTracking, setAdBlock, setSmartBlocking } from '../../../../shared-hub/actions/AntiSuiteActions';
 import setBlockingPolicy from '../../../../shared-hub/actions/BlockingPolicyActions';
 import setToast from '../../../../shared-hub/actions/ToastActions';
+import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
 
 const actionCreators = {
 	setAntiTracking,
 	setAdBlock,
 	setSmartBlocking,
 	setBlockingPolicy,
 	setToast,
+	setSetupStep,
 };
 
 export default buildReduxHOC(null, actionCreators, BlockSettingsView);

app/ghostery-browser-hub/Views/OnboardingViews/Step3_ChooseDefaultSearchView/ChooseDefaultSearchView.jsx

@@ -13,6 +13,7 @@
 
 import React from 'react';
 
+// TODO: Add setSetupStep({ setup_step: CHOOSE_DEFAULT_SEARCH, origin: WELCOME }) to next button
 const ChooseDefaultSearchView = () => <h1>Step 3: Choose Default Search View</h1>;
 
 export default ChooseDefaultSearchView;