Merge branch 'ghostery-browser-intro-hub' into GH-2207

_locales/en/messages.json

@@ -1734,13 +1734,37 @@
 	"hub_create_account_toast_error": {
 		"message": "That email address is already in use. Please choose another."
 	},
-	"hub_browser_yay_youre_all_set": {
+	"ghostery_browser_hub_onboarding_page_title": {
+	  "message": "Ghostery Browser Hub - Welcome"
+	},
+  	"ghostery_browser_hub_onboarding_header_title_login": {
+	  "message": "Ghostery Browser Hub - Login"
+	},
+	"ghostery_browser_hub_onboarding_header_title_block_settings": {
+	  "message": "Ghostery Browser Hub - Block Settings"
+	},
+	"ghostery_browser_hub_onboarding_header_title_search_choice": {
+	  "message": "Ghostery Browser Hub - Search Choice"
+	},
+	"ghostery_browser_hub_onboarding_header_title_plan_choices": {
+	  "message": "Ghostery Browser Hub - Plan Choices"
+	},
+	"ghostery_browser_hub_onboarding_welcome": {
+		"message": "Welcome to Ghostery Browser"
+	},
+	"ghostery_browser_hub_onboarding_lets_begin": {
+		"message": "Let's begin by choosing your privacy settings. This will be quick, we promise!"
+	},
+	"ghostery_browser_hub_onboarding_lets_do_this": {
+		"message": "Let's do this"
+	},
+	"ghostery_browser_hub_onboarding_yay_youre_all_set": {
 		"message": "Yay! You're all set."
 	},
-	"hub_browser_start_browsing_the_web_with": {
+	"ghostery_browser_hub_onboarding_start_browsing_the_web_with": {
 		"message": "Start browsing the web with"
 	},
-	"hub_browser_lets_search": {
+	"ghostery_browser_hub_onboarding_lets_search": {
 		"message": "Let's search"
 	},
 	"enable_when_paused": {

app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.jsx

@@ -13,6 +13,18 @@
 
 import React from 'react';
 
-const SuccessView = () => <h1>Step 5: Success View</h1>;
+/**
+ * A Functional React component for rendering the Browser Success View
+ * @return {JSX} JSX for rendering the Browser Success View of the Hub app
+ * @memberof HubComponents
+ */
+const SuccessView = () => (
+	<div className="SuccessView__container">
+		<div className="SuccessView__title">{t('ghostery_browser_hub_onboarding_yay_youre_all_set')}</div>
+		<div className="SuccessView__subtitle">{`${t('ghostery_browser_hub_onboarding_start_browsing_the_web_with')} Ghostery`}</div>
+		<img className="SuccessView__ghosterySuite" src="/app/images/hub/success/ghostery-suite.png" />
+		<button className="SuccessView__ctaButton" type="button">{t('ghostery_browser_hub_onboarding_lets_search')}</button>
+	</div>
+);
 
 export default SuccessView;

app/hub/Views/BrowserSuccessView/BrowserSuccessView.scss → app/ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss

@@ -1,32 +1,32 @@
-.BrowserSuccessView__container {
+.SuccessView__container {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 }
 
-.BrowserSuccessView__title {
+.SuccessView__title {
 	margin-top: 125px;
 	font-size: 24px;
 	font-weight: 600;
 	line-height: 2.33;
 }
 
-.BrowserSuccessView__subtitle {
+.SuccessView__subtitle {
 	margin-bottom: 47px;
 	width: 392px;
 	font-size: 18px;
 	line-height: 2.33;
 	text-align: center;
 }
 
-.BrowserSuccessView__ghosterySuite {
+.SuccessView__ghosterySuite {
 	margin-bottom: 77px;
 	height: 298px;
 	width: 545px;
 }
 
-.BrowserSuccessView__ctaButton {
+.SuccessView__ctaButton {
 	display: flex;
 	justify-content: center;
 	margin: auto;

app/scss/hub.scss

@@ -86,7 +86,8 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
-@import '../hub/Views/BrowserSuccessView/BrowserSuccessView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';