Updates to the Setup flow: added Rewards

_locales/en/messages.json

@@ -1341,7 +1341,7 @@
 		"message": "One-Click Setup"
 	},
 	"setup_choice_view_share_data": {
-		"message": "Share my analytics and Human Web data to improve Ghostery’s performance."
+		"message": "Participate in Ghostery Rewards and share Human Web & analytics data."
 	},
 	"setup_choice_view_share_data_no_human_web": {
 		"message": "Share my analytics data to improve Ghostery’s performance."
@@ -1355,6 +1355,23 @@
 	"setup_choice_view_answer_questions": {
 		"message": "Choose my own settings by answering a few short questions."
 	},
+	"setup_choice_view_legal": {
+		"message": "By installing Ghostery, you agree to Ghostery's $LINK_PP_START$Privacy Policy$LINK_PP_END$ and $LINK_TERMS_START$Terms of Use$LINK_TERMS_END$.",
+		"placeholders": {
+			"link_pp_start": {
+				"content": "<a href=\"https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/\" target=\"_blank\">"
+			},
+			"link_pp_end": {
+				"content": "</a>"
+			},
+			"link_terms_start": {
+				"content": "<a href=\"https://www.ghostery.com/about-ghostery/browser-extension-end-user-license-agreement/\" target=\"_blank\">"
+			},
+			"link_terms_end": {
+				"content": "</a>"
+			}
+		}
+	},
 	"setup_blocking_view_title": {
 		"message": "Ghostery can block trackers to make your browsing cleaner, faster, and safer. What would you like to block?"
 	},
@@ -1447,26 +1464,6 @@
 	"setup_login_view_password_error": {
 		"message": "Use between 8 and 50 characters."
 	},
-	"setup_login_view_terms_error": {
-		"message": "You must accept this."
-	},
-	"setup_login_view_terms": {
-		"message": "I agree to Ghostery's $LINK_PP_START$Privacy Policy$LINK_PP_END$ and $LINK_TERMS_START$Terms of Use$LINK_TERMS_END$",
-		"placeholders": {
-			"link_pp_start": {
-				"content": "<a href=\"https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/\" target=\"_blank\">"
-			},
-			"link_pp_end": {
-				"content": "</a>"
-			},
-			"link_terms_start": {
-				"content": "<a href=\"https://www.ghostery.com/about-ghostery/browser-extension-end-user-license-agreement/\" target=\"_blank\">"
-			},
-			"link_terms_end": {
-				"content": "</a>"
-			}
-		}
-	},
 	"setup_login_view_create_account": {
 		"message": "Don't have an account? Create one."
 	},
@@ -1477,10 +1474,10 @@
 		"message": "Signed in as"
 	},
 	"setup_data_view_title": {
-		"message": "Would you like to help improve Ghostery?"
+		"message": "Would you like to support Ghostery?"
 	},
 	"setup_data_view_desc": {
-		"message": "We use anonymous analytics and Human Web data to improve Ghostery’s performance, without collecting any personal data. $LINK_START$Learn more$LINK_END$.",
+		"message": "We use anonymous analytics and Human Web data to improve Ghostery’s performance, and provide Rewards without collecting any personal data. $LINK_START$Learn more$LINK_END$.",
 		"placeholders": {
 			"link_start": {
 				"content": "<a href=\"https://www.ghostery.com/faqs/\" target=\"_blank\">"

app/scss/setup.scss

@@ -72,7 +72,7 @@ body {
 	//Don't show blue border on click
 	*:focus {
 	    outline: none;
-	}	
+	}
 	#header {
 		height: 53px;
 		color: $white;
@@ -166,6 +166,10 @@ body {
 	#navigation {
 		background-color: $whisper;
 		padding: 0 0 35px;
+		.legal-notice {
+			text-align: center;
+			font-style: italic;
+		}
 		.navigation-dots {
 			width: 250px;
 			max-width: 250px;

app/setup/components/Navigation.jsx

@@ -88,6 +88,14 @@ class Navigation extends Component {
 		this.props.actions.close();
 	}
 
+	/**
+	 * Wrapper function for dangerouslySetInnerHTML. Provides extra security
+	 * @return {Object}
+	 */
+	createLegalMarkup() {
+		return { __html: t('setup_choice_view_legal') };
+	}
+
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the Navigation
@@ -97,38 +105,43 @@ class Navigation extends Component {
 		const { nextButtons } = this.props;
 		return (
 			<div id="navigation">
-				<div className={`${(pathname === '/' || pathname === '/upgrade') ? 'hide' : ''} row align-center align-middle`}>
-					<div className="columns shrink">
-						<button className="button hollow ghostery-button" onClick={this._prev}>
-							{ t('setup_button_previous') }
-						</button>
-					</div>
-					<div className="columns text-center navigation-dots">
-						<div className="circles">
-							<NavLink to="/" exact />
-							<NavLink to="/blocking" exact />
-							<NavLink to="/additional-features" exact />
-							<NavLink to="/display" exact />
-							<NavLink to="/log-in" exact />
-							<NavLink to="/data-collection" exact />
-							<NavLink to="/done" exact />
+				{pathname === '/' && (
+					<div className="legal-notice" dangerouslySetInnerHTML={this.createLegalMarkup()} />
+				)}
+				{pathname !== '/' && pathname !== '/upgrade' && (
+					<div className="row align-center align-middle">
+						<div className="columns shrink">
+							<button className="button hollow ghostery-button" onClick={this._prev}>
+								{ t('setup_button_previous') }
+							</button>
 						</div>
-					</div>
-					{nextButtons.map((button, i) => {
-						const buttonClasses = ClassNames('button ghostery-button', {
-							hollow: nextButtons.length > 1 && i === 0,
-							loading: this.props.loading && i === 1,
-						});
-						return (
-							<div key={button.title} className="columns shrink" >
-								<button onClick={this[`_${button.action}`]} className={buttonClasses}>
-									<span className="title">{button.title}</span>
-									<span className="loader" />
-								</button>
+						<div className="columns text-center navigation-dots">
+							<div className="circles">
+								<NavLink to="/" exact />
+								<NavLink to="/blocking" exact />
+								<NavLink to="/additional-features" exact />
+								<NavLink to="/display" exact />
+								<NavLink to="/log-in" exact />
+								<NavLink to="/data-collection" exact />
+								<NavLink to="/done" exact />
 							</div>
-						);
-					})}
-				</div>
+						</div>
+						{nextButtons.map((button, i) => {
+							const buttonClasses = ClassNames('button ghostery-button', {
+								hollow: nextButtons.length > 1 && i === 0,
+								loading: this.props.loading && i === 1,
+							});
+							return (
+								<div key={button.title} className="columns shrink" >
+									<button onClick={this[`_${button.action}`]} className={buttonClasses}>
+										<span className="title">{button.title}</span>
+										<span className="loader" />
+									</button>
+								</div>
+							);
+						})}
+					</div>
+				)}
 			</div>
 		);
 	}

app/setup/components/Views/LogInView.jsx

@@ -31,7 +31,6 @@ class LogInView extends Component {
 			password: '',
 			firstName: '',
 			lastName: '',
-			policy: true,
 		};
 	}
 
@@ -245,8 +244,6 @@ class LogInView extends Component {
 		this.confirmEmailInput.blur();
 		this.passwordInput.focus();
 		this.passwordInput.blur();
-		this.policyInput.focus();
-		this.policyInput.blur();
 		return (
 			this._isValid({
 				target: {
@@ -265,12 +262,6 @@ class LogInView extends Component {
 					name: 'password',
 					value: this.state.password,
 				},
-			}) &&
-			this._isValid({
-				target: {
-					name: 'policy',
-					value: this.state.policy,
-				},
 			}) || false);
 	}
 
@@ -289,8 +280,6 @@ class LogInView extends Component {
 			case 'password':
 				return this.state.password.length >= 8 &&
 					this.state.password.length <= 50 || false;
-			case 'policy':
-				return this.state.policy === true;
 			default:
 				return true;
 		}
@@ -327,11 +316,6 @@ class LogInView extends Component {
 					password: event.target.value,
 				});
 				break;
-			case 'policy':
-				this.setState({
-					policy: event.target.checked,
-				});
-				break;
 			default: break;
 		}
 	}
@@ -348,14 +332,6 @@ class LogInView extends Component {
 		}
 	}
 
-	/**
-	 * Wrapper function for dangerouslySetInnerHTML. Provides extra security
-	 * @return {Object}
-	 */
-	createTermsMarkup() {
-		return { __html: t('setup_login_view_terms') };
-	}
-
 	/**
 	 * React's required render function. Returns JSX
 	 * @return {JSX} JSX for rendering the #log-in step of the setup flow
@@ -433,24 +409,7 @@ class LogInView extends Component {
 											<span className="form-error">{ t('setup_login_view_password_error') }</span>
 										</span>
 									</div>
-									<div className="columns">
-										<input
-											name="policy"
-											type="checkbox"
-											id="log-in-view-policy-input"
-											checked={this.state.policy}
-											onChange={this._onChange}
-											onBlur={this._onBlur}
-											required
-											ref={(ref) => { this.policyInput = ref; }}
-										/>
-										<label htmlFor="log-in-view-policy-input">
-											<span dangerouslySetInnerHTML={this.createTermsMarkup()} />
-										</label>
-										<span className="form-error-container">
-											<span className="form-error">{ t('setup_login_view_terms_error') }</span>
-										</span>
-									</div>
+									<div className="columns" />
 									<div className="columns">
 										<a onClick={this._toggleSignIn}>{ t('setup_login_view_log_in') }</a>
 									</div>