GH-2273, GH-2285, GH-2286: Optimizations to onboarding login & logout UX

_locales/en/messages.json

@@ -1959,6 +1959,9 @@
 	"ghostery_dawn_onboarding_toast_alert": {
 		"message": "Error: "
 	},
+	"ghostery_dawn_onboarding_toast_logout": {
+		"message": "You are now signed out"
+	},
 	"enable_when_paused": {
 		"message": "To use this function, Resume Ghostery."
 	},

app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.jsx

@@ -11,7 +11,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 import { ONBOARDING, WELCOME, SETUP_STARTED } from '../../OnboardingView/OnboardingConstants';
@@ -24,12 +24,36 @@ import { ONBOARDING, WELCOME, SETUP_STARTED } from '../../OnboardingView/Onboard
 const WelcomeView = (props) => {
 	const { actions } = props;
 	const { setSetupStep } = actions;
+
+	const [getUserResolved, setGetUserResolved] = useState(false);
+
+	const gateSetupStep = (e) => {
+		if (getUserResolved) {
+			setSetupStep({
+				setup_step: WELCOME,
+				dawn_setup_number: SETUP_STARTED,
+				origin: ONBOARDING
+			});
+		} else {
+			e.preventDefault();
+		}
+	};
+
+	useEffect(() => {
+		actions.getUser();
+		const timer = setTimeout(() => setGetUserResolved(true), 1000);
+
+		return () => {
+			clearTimeout(timer);
+		};
+	}, []);
+
 	return (
 		<div className="WelcomeView__container">
 			<div className="WelcomeView__title">{t('ghostery_dawn_onboarding_welcome')}</div>
 			<div className="WelcomeView__subtitle">{t('ghostery_dawn_onboarding_welcome_message')}</div>
 			<img className="WelcomeView__rocketShip" src="/app/images/hub/welcome/rocketShip.png" />
-			<NavLink className="WelcomeView__ctaButton" to="/onboarding/1" onClick={() => setSetupStep({ setup_step: WELCOME, dawn_setup_number: SETUP_STARTED, origin: ONBOARDING })}>
+			<NavLink className="WelcomeView__ctaButton" to={getUserResolved ? '/onboarding/1' : '#'} onClick={gateSetupStep}>
 				<span>{t('ghostery_dawn_onboarding_lets_do_this')}</span>
 			</NavLink>
 		</div>

app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/__tests__/__snapshots__/WelcomeView.test.jsx.snap

@@ -19,10 +19,11 @@ exports[`app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.test.j
     src="/app/images/hub/welcome/rocketShip.png"
   />
   <a
-    aria-current={null}
-    className="WelcomeView__ctaButton"
-    href="/onboarding/1"
+    aria-current="page"
+    className="WelcomeView__ctaButton active"
+    href="/"
     onClick={[Function]}
+    style={Object {}}
   >
     <span>
       ghostery_dawn_onboarding_lets_do_this

app/dawn-hub/Views/OnboardingViews/Step0_WelcomeView/index.js

@@ -14,9 +14,11 @@
 import { buildReduxHOC } from '../../../../shared-hub/utils';
 import WelcomeView from './WelcomeView';
 import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
+import { getUser } from '../../../../Account/AccountActions';
 
 const actionCreators = {
 	setSetupStep,
+	getUser
 };
 
 export default buildReduxHOC([], actionCreators, WelcomeView);

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.jsx

@@ -60,7 +60,7 @@ const renderFAQListItem = (icon, label, description) => (
  */
 const Step1_CreateAccountView = (props) => {
 	const { actions, step, user } = props;
-	const { setSetupStep, setToast } = actions;
+	const { setSetupStep, setToast, logout } = actions;
 	const email = user && user.email;
 
 	const [view, setView] = useState(CREATE_ACCOUNT);
@@ -94,6 +94,16 @@ const Step1_CreateAccountView = (props) => {
 		prev();
 	};
 
+	const handleLogout = () => {
+		logout().then(() => {
+			setView(SIGN_IN);
+			setToast({
+				toastMessage: '',
+				toastClass: 'logout'
+			});
+		});
+	};
+
 	const renderSkipLink = () => (
 		<div className="row align-center-middle">
 			<div className="columns small-10 medium-6" />
@@ -126,6 +136,12 @@ const Step1_CreateAccountView = (props) => {
 					</NavLink>
 				)}
 			</div>
+			<div className="Step1_CreateAccountView__signOutContainer">
+				{t('ghostery_dawn_onboarding_or').toLocaleLowerCase()}
+				<div className="Step1_CreateAccountView__signOut" onClick={() => handleLogout()}>
+					<span>{t('sign_out')}</span>
+				</div>
+			</div>
 		</div>
 	) : (
 		<div className="Step1_CreateAccountView">

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss

@@ -51,7 +51,7 @@ $color-create-account-form-error-red: #e74055;
 }
 
 .Step1_CreateAccountView__alreadySignedIn {
-	margin-top: 245px;
+	margin-top: 146px;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -60,13 +60,14 @@ $color-create-account-form-error-red: #e74055;
 .Step1_CreateAccountView__email {
 	font-size: 24px;
 	color: $ghosty-blue;
+	margin-top: 16px;
 }
 .Step1_CreateAccountView__ctaButtonContainer {
 	display: flex;
 	justify-content: center;
+	margin-top: 32px;
 
 	.Step1_CreateAccountView__ctaButton {
-		margin: 48px auto 0 auto;
 		min-height: 44px;
 		width: 162px;
 		padding: 7.7px 14px;
@@ -133,6 +134,21 @@ $color-create-account-form-error-red: #e74055;
 		}
 	}
 }
+.Step1_CreateAccountView__signOutContainer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-top: 32px;
+	color: $ghosty-blue;
+	font-size: 16px;
+}
+.Step1_CreateAccountView__signOut {
+	text-decoration: underline;
+	&:hover {
+		color: $link-blue;
+		cursor: pointer;
+	}
+}
 .Step1_CreateAccountView--addMarginSide {
 	margin-left: 10px;
 	margin-right: 10px;

app/dawn-hub/Views/OnboardingViews/Step1_CreateAccountView/index.js

@@ -15,10 +15,12 @@ import { buildReduxHOC } from '../../../../shared-hub/utils';
 import Step1_CreateAccountView from './Step1_CreateAccountView';
 import { setSetupStep } from '../../../../shared-hub/actions/SetupLifecycleActions';
 import setToast from '../../../../shared-hub/actions/ToastActions';
+import { logout } from '../../../../Account/AccountActions';
 
 const actionCreators = {
 	setSetupStep,
-	setToast
+	setToast,
+	logout
 };
 
 export default buildReduxHOC(['account'], actionCreators, Step1_CreateAccountView);

app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/BlockSettingsView.jsx

@@ -203,16 +203,15 @@ class BlockSettingsView extends Component {
 		const {
 			enable_ad_block, kindsOfTrackers, enable_anti_tracking, enable_smart_block
 		} = this.state;
-		const { actions } = this.props;
-		const { logout } = actions;
 
 		const recommendedChoicesActive = this.recommendedChoicesActive();
+
 		return (
 			<Fragment>
 				<div className="BlockSettingsView__relativeContainer">
 					<div className="BlockSettingsView__backContainer">
 						<span className="BlockSettingsView__caret left" />
-						<NavLink to="/onboarding/1" onClick={() => logout()}>
+						<NavLink to="/onboarding/1">
 							<span className="BlockSettingsView__back">{t('ghostery_dawn_onboarding_back')}</span>
 						</NavLink>
 					</div>
@@ -263,7 +262,6 @@ export default BlockSettingsView;
 // PropTypes ensure we pass required props of the correct type
 BlockSettingsView.propTypes = {
 	actions: PropTypes.shape({
-		logout: PropTypes.func.isRequired,
 		setAntiTracking: PropTypes.func.isRequired,
 		setAdBlock: PropTypes.func.isRequired,
 		setSmartBlocking: PropTypes.func.isRequired,

app/dawn-hub/Views/OnboardingViews/Step2_BlockSettingsView/index.js

@@ -14,14 +14,12 @@
 import { withRouter } from 'react-router-dom';
 import BlockSettingsView from './BlockSettingsView';
 import { buildReduxHOC } from '../../../../shared-hub/utils';
-import { logout } from '../../../../Account/AccountActions';
 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, setBlockSetupSeen } from '../../../../shared-hub/actions/SetupLifecycleActions';
 
 const actionCreators = {
-	logout,
 	setAntiTracking,
 	setAdBlock,
 	setSmartBlocking,

app/images/hub/toast/toast-logout.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="shb53jtila" d="M11.011 22c0 .6-.4 1-1.001 1H5.004C3.302 23 2 21.7 2 20V4c0-1.7 1.302-3 3.004-3h5.006c.6 0 1.001.4 1.001 1s-.4 1-1.001 1H5.004c-.601 0-1.001.4-1.001 1v16c0 .6.4 1 1 1h5.007c.6 0 1.001.4 1.001 1zm10.914-9.6c.1-.2.1-.5 0-.8-.1-.1-.1-.2-.2-.3l-4.005-4c-.4-.4-1.002-.4-1.402 0-.4.4-.4 1 0 1.4L18.62 11H9.009c-.601 0-1.001.4-1.001 1s.4 1 1 1h9.613l-2.303 2.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3.201 0 .501-.1.702-.3l4.005-4c.1-.1.2-.2.2-.3z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g>
+            <g transform="translate(-165 -71) translate(165 71)">
+                <mask id="w4yjt6ryhb" fill="#fff">
+                    <use xlink:href="#shb53jtila"/>
+                </mask>
+                <use fill="#000" fill-rule="nonzero" xlink:href="#shb53jtila"/>
+                <g fill="#4A4A4A" mask="url(#w4yjt6ryhb)">
+                    <path d="M0 0H24V24H0z"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

app/shared-components/ToastMessage/ToastMessage.jsx

@@ -31,7 +31,7 @@ const ToastMessage = ({
 
 	return (
 		<div className={`ToastMessage full-width ${dawnHubClass}`}>
-			{toastText && (
+			{(toastText || dawnToastText) && (
 				<div className="callout-container">
 					<div className={`callout toast ${toastClass}`}>
 						<div className={`flex-container ${dawnLayout}`}>

app/shared-components/ToastMessage/ToastMessage.scss

@@ -32,6 +32,10 @@
 			background-color: #dff0d8;
 			.callout-text {color: #417505;}
 		}
+		.logout {
+			background-color: #f9edbe;
+			.callout-text { color: #4a4a4a;}
+		}
 		.ToastMessage__close {
 			background-image: buildIconX(#000000);
 		}