Set the setup_step ConfData property for Welcome and Login/Create Acc…

…ount screens

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

@@ -18,6 +18,7 @@ import { BLOCKING_POLICY_RECOMMENDED } from '../../../shared-hub/constants/Block
 
 // Component Views
 import WelcomeView from '../OnboardingViews/Step0_WelcomeView';
+import Step1_CreateAccountView from '../OnboardingViews/Step1_CreateAccountView';
 import LoginView from '../OnboardingViews/Step1_LoginView';
 import BlockSettingsView from '../OnboardingViews/Step2_BlockSettingsView';
 import ChooseDefaultSearchView from '../OnboardingViews/Step3_ChooseDefaultSearchView';
@@ -89,7 +90,7 @@ class OnboardingViewContainer extends Component {
 			{
 				index: 1,
 				path: `/${ONBOARDING}/${LOGIN}`,
-				bodyComponents: [LoginView],
+				bodyComponents: [Step1_CreateAccountView],
 			},
 			{
 				index: 2,

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

@@ -19,15 +19,19 @@ import { NavLink } from 'react-router-dom';
  * @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: 1 })}>
+				<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_CreateAccountForm/index.js

@@ -21,7 +21,7 @@ const actionCreators = {
 	setToast,
 	register,
 	getUser,
-	handleEmailPreferencesCheckboxChange
+	handleEmailPreferencesCheckboxChange,
 };
 
 export default buildReduxHOC(stateSlices, actionCreators, Step1_CreateAccountFormContainer);

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

@@ -12,6 +12,7 @@
  */
 
 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';
@@ -61,22 +62,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 +90,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: 2 })}>
+					<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: 2 })}>
+					<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);