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

_locales/en/messages.json

@@ -1737,66 +1737,99 @@
 	"hub_create_account_toast_error": {
 		"message": "That email address is already in use. Please choose another."
 	},
-	"hub_browser_create_a_ghostery_account": {
+	"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_create_a_ghostery_account": {
 		"message": "Create a Ghostery Account"
 	},
-	"hub_browser_sync_settings": {
+	"ghostery_browser_hub_onboarding_sync_settings": {
 		"message": "Allows you to sync settings across browsers and devices"
 	},
-	"hub_browser_already_have_account": {
+	"ghostery_browser_hub_onboarding_already_have_account": {
 		"message": "I already have an account."
 	},
-	"hub_browser_send_me": {
+	"ghostery_browser_hub_onboarding_send_me": {
 		"message": "Send me"
 	},
-	"hub_browser_updates_and_promotions": {
+	"ghostery_browser_hub_onboarding_updates_and_promotions": {
 		"message": "updates & promotions."
 	},
-	"hub_browser_skip": {
+	"ghostery_browser_hub_onboarding_skip": {
 		"message": "Skip"
 	},
-	"hub_browser_we_take_your_privacy_very_seriously": {
+	"ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously": {
 		"message": "We take your privacy very seriously. Learn more"
 	},
-	"hub_browser_private_by_design": {
+	"ghostery_browser_hub_onboarding_private_by_design": {
 		"message": "Private by design"
 	},
-	"hub_browser_private_by_design_description": {
+	"ghostery_browser_hub_onboarding_private_by_design_description": {
 		"message": "Privacy is incredibly important to us at Ghostery and we've taken extra care to design our products that limits the amount of personal information collected."
 	},
-	"hub_browser_why_do_you_need_my_email": {
+	"ghostery_browser_hub_onboarding_why_do_you_need_my_email": {
 		"message": "Why do you need my email?"
 	},
-	"hub_browser_why_do_you_need_my_email_description": {
+	"ghostery_browser_hub_onboarding_why_do_you_need_my_email_description": {
 		"message": "We've found email is the simplest way to create and secure a unique account without sharing your information. It helps sync your custom settings across your devices."
 	},
-	"hub_browser_what_do_you_use_my_email_for": {
+	"ghostery_browser_hub_onboarding_what_do_you_use_my_email_for": {
 		"message": "What do you use my email for?"
 	},
-	"hub_browser_what_do_you_use_my_email_for_description": {
+	"ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description": {
 		"message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features."
 	},
-	"hub_browser_how_secure_is_": {
+	"ghostery_browser_hub_onboarding_how_secure_is_": {
 		"message": "How secure is"
 	},
-	"hub_browser_how_secure_is_ghostery_description": {
+	"ghostery_browser_hub_onboarding_how_secure_is_ghostery_description": {
 		"message": "We never share or sell your personal information. Your email address is used for account management, technical support, product-related communications, and some opt-in features."
 	},
-	"hub_browser_can_i_remove_my_account": {
+	"ghostery_browser_hub_onboarding_can_i_remove_my_account": {
 		"message": "Can I remove my account?"
 	},
-	"hub_browser_can_i_remove_my_account_description": {
+	"ghostery_browser_hub_onboarding_can_i_remove_my_account_description": {
 		"message": "We hope you enjoy using Ghostery, but if you do decide to leave we will remove all of your personal information within 90 days from the date of request."
 	},
-	"hub_browser_visit_our_privacy_policy": {
+	"ghostery_browser_hub_onboarding_visit_our_privacy_policy": {
 		"message": "Visit our Privacy Policy for more information"
 	},
-	"hub_browser_create_an_account": {
+	"ghostery_browser_hub_onboarding_create_an_account": {
 		"message": "Create an account."
 	},
-	"hub_browser_you_are_signed_in_as": {
+	"ghostery_browser_hub_onboarding_you_are_signed_in_as": {
 		"message": "You are signed in as"
 	},
+	"ghostery_browser_hub_onboarding_yay_youre_all_set": {
+		"message": "Yay! You're all set."
+	},
+	"ghostery_browser_hub_onboarding_start_browsing_the_web_with": {
+		"message": "Start browsing the web with"
+	},
+	"ghostery_browser_hub_onboarding_lets_search": {
+		"message": "Let's search"
+	},
 	"enable_when_paused": {
 		"message": "To use this function, Resume Ghostery."
 	},

app/hub/Views/BrowserCreateAccountForm/BrowserCreateAccountForm.jsx

@@ -17,7 +17,7 @@ import ClassNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 import { ToggleCheckbox } from '../../../shared-components';
 
-const promoString = `${t('hub_browser_send_me')} Ghostery ${t('hub_browser_updates_and_promotions')}`;
+const promoString = `${t('ghostery_browser_hub_onboarding_send_me')} Ghostery ${t('ghostery_browser_hub_onboarding_updates_and_promotions')}`;
 
 /**
  * A Functional React component for rendering the Browser Create Account View

app/hub/Views/BrowserCreateAccountView/BrowserCreateAccountView.jsx

@@ -25,28 +25,28 @@ const CREATE_ACCOUNT = 'CREATE_ACCOUNT';
 const faqList = [
 	{
 		icon: 'ghosty-shield.svg',
-		label: t('hub_browser_private_by_design'),
-		description: t('hub_browser_private_by_design_description'),
+		label: t('ghostery_browser_hub_onboarding_private_by_design'),
+		description: t('ghostery_browser_hub_onboarding_private_by_design_description'),
 	},
 	{
 		icon: 'ghosty-letter.svg',
-		label: t('hub_browser_why_do_you_need_my_email'),
-		description: t('hub_browser_why_do_you_need_my_email_description'),
+		label: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email'),
+		description: t('ghostery_browser_hub_onboarding_why_do_you_need_my_email_description'),
 	},
 	{
 		icon: 'ghosty-shield-letter.svg',
-		label: t('hub_browser_what_do_you_use_my_email_for'),
-		description: t('hub_browser_what_do_you_use_my_email_for_description'),
+		label: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for'),
+		description: t('ghostery_browser_hub_onboarding_what_do_you_use_my_email_for_description'),
 	},
 	{
 		icon: 'ghosty-lock.svg',
-		label: `${t('hub_browser_how_secure_is_')} Ghostery?`,
-		description: t('hub_browser_how_secure_is_ghostery_description'),
+		label: `${t('ghostery_browser_hub_onboarding_how_secure_is_')} Ghostery?`,
+		description: t('ghostery_browser_hub_onboarding_how_secure_is_ghostery_description'),
 	},
 	{
 		icon: 'ghosty-box.svg',
-		label: t('hub_browser_can_i_remove_my_account'),
-		description: t('hub_browser_can_i_remove_my_account_description'),
+		label: t('ghostery_browser_hub_onboarding_can_i_remove_my_account'),
+		description: t('ghostery_browser_hub_onboarding_can_i_remove_my_account_description'),
 	}
 ];
 
@@ -66,7 +66,7 @@ const renderSkipLink = () => (
 	<div className="row align-center-middle">
 		<div className="columns small-10 medium-5" />
 		<div className="columns small-10 medium-5">
-			<div className="BrowserCreateAccountView__skip">{t('hub_browser_skip')}</div>
+			<div className="BrowserCreateAccountView__skip">{t('ghostery_browser_hub_onboarding_skip')}</div>
 		</div>
 	</div>
 );
@@ -100,7 +100,7 @@ const BrowserCreateAccountView = (props) => {
 
 	return (user ? (
 		<div className="BrowserCreateAccountView__alreadySignedIn">
-			<div className="BrowserCreateAccountView__title">{t('hub_browser_you_are_signed_in_as')}</div>
+			<div className="BrowserCreateAccountView__title">{t('ghostery_browser_hub_onboarding_you_are_signed_in_as')}</div>
 			<div className="BrowserCreateAccountView__email">{email}</div>
 			<div className="BrowserCreateAccountView__ctaButtonContainer">
 				{/* Link to next page */}
@@ -110,18 +110,18 @@ const BrowserCreateAccountView = (props) => {
 	) : (
 		<div className="BrowserCreateAccountView">
 			{view === CREATE_ACCOUNT && (
-				<div className="BrowserCreateAccountView__title">{t('hub_browser_create_a_ghostery_account')}</div>
+				<div className="BrowserCreateAccountView__title">{t('ghostery_browser_hub_onboarding_create_a_ghostery_account')}</div>
 			)}
 			{view === SIGN_IN && (
 				<div className="BrowserCreateAccountView__title">{t('sign_in')}</div>
 			)}
-			<div className="BrowserCreateAccountView__subtitle">{ t('hub_browser_sync_settings') }</div>
+			<div className="BrowserCreateAccountView__subtitle">{ t('ghostery_browser_hub_onboarding_sync_settings') }</div>
 			<div className="row align-center-middle">
 				{view === CREATE_ACCOUNT && (
-					<div className="BrowserCreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(SIGN_IN)}>{t('hub_browser_already_have_account')}</div>
+					<div className="BrowserCreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(SIGN_IN)}>{t('ghostery_browser_hub_onboarding_already_have_account')}</div>
 				)}
 				{view === SIGN_IN && (
-					<div className="BrowserCreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(CREATE_ACCOUNT)}>{t('hub_browser_create_an_account')}</div>
+					<div className="BrowserCreateAccountView__alreadyHaveAccount columns small-12 medium-5" onClick={() => setView(CREATE_ACCOUNT)}>{t('ghostery_browser_hub_onboarding_create_an_account')}</div>
 				)}
 				<div className="BrowserCreateAccountView__alreadyHaveAccount columns small-12 medium-5" />
 			</div>
@@ -130,7 +130,7 @@ const BrowserCreateAccountView = (props) => {
 					<BrowserCreateAccountForm />
 					{renderSkipLink()}
 					<div className="BrowserCreateAccountView__learnMoreContainer" onClick={handleFAQLearnMoreClick}>
-						<div className="BrowserCreateAccountView__learnMore">{t('hub_browser_we_take_your_privacy_very_seriously')}</div>
+						<div className="BrowserCreateAccountView__learnMore">{t('ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously')}</div>
 					</div>
 					<div className={arrowClassNames} onClick={handleFAQLearnMoreClick} />
 					<div ref={faqRef} className="BrowserCreateAccountView__FAQContainer">
@@ -141,7 +141,7 @@ const BrowserCreateAccountView = (props) => {
 					{expanded && (
 						<div className="row">
 							<a className="BrowserCreateAccountView__privacyPolicyLink columns small-12 medium-10 medium-offset-1 large-8 large-offset-3" href={`${globals.GHOSTERY_BASE_URL}/about-ghostery/ghostery-plans-and-products-privacy-policy/`} target="_blank" rel="noreferrer">
-								{t('hub_browser_visit_our_privacy_policy')}
+								{t('ghostery_browser_hub_onboarding_visit_our_privacy_policy')}
 							</a>
 						</div>
 					)}

app/scss/hub.scss

@@ -86,9 +86,11 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
-@import '../hub/Views/BrowserCreateAccountView/BrowserCreateAccountView.scss';
-@import '../hub/Views/BrowserCreateAccountForm/BrowserCreateAccountForm.scss';
-@import '../hub/Views/BrowserLogInForm/BrowserLogInForm.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step0_WelcomeView/WelcomeView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/Step1_CreateAccountView.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountForm/Step1_CreateAccountForm.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step1_LogInForm/Step1_LogInForm.scss';
+@import '../ghostery-browser-hub/Views/OnboardingViews/Step5_SuccessView/SuccessView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';