Create ghostery-search promo in plan view

_locales/en/messages.json

@@ -1734,6 +1734,21 @@
 	"hub_create_account_toast_error": {
 		"message": "That email address is already in use. Please choose another."
 	},
+	"hub_plan_view_your_privacy_plan": {
+		"message": "Your Privacy Plan"
+	},
+	"hub_plan_view_based_on_your_privacy_preferences": {
+		"message": "Based on your privacy preferences"
+	},
+	"hub_plan_view_ad_free": {
+		"message": "Ad-free with Ghostery Plus subscription"
+	},
+	"hub_plan_view_ad_free_promo": {
+		"message": "40% off for the first 12 months"
+	},
+	"hub_plan_view_ad_free_promo_description": {
+		"message": "Get to what you want faster. A plus subscription gives Ghostery the support we need to provide YOU with an ad-free experience."
+	},
 	"enable_when_paused": {
 		"message": "To use this function, Resume Ghostery."
 	},

app/hub/Views/PlanView/PlanView.jsx

@@ -0,0 +1,53 @@
+/**
+ * Plan View Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2020 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React, { Fragment, useRef, useEffect } from 'react';
+import ClassNames from 'classnames';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import QueryString from 'query-string';
+// import { BASIC, PLUS, PREMIUM } from './UpgradePlanViewConstants';
+import globals from '../../../../src/classes/Globals';
+
+const searchPromo = () => (
+	<div className="PlanView__searchPromoContainer">
+		<div className="PlanView__searchLogo" />
+		<div className="PlanView__adFree">{ t('hub_plan_view_ad_free') }</div>
+		<div className="PlanView__adFreePromo">{ t('hub_plan_view_ad_free_promo') }</div>
+		<div className="PlanView__adFreePromoDescription">{ t('hub_plan_view_ad_free_promo_description') }</div>
+	</div>
+);
+
+const startTrialButton = () => (
+	<div className="PlanView__searchCTAButton">Start Trial</div>
+);
+
+const PlanView = () => {
+	const test = 5;
+	return (
+		<div>
+			<div className="PlanView__yourPrivacyPlan">{ t('hub_plan_view_your_privacy_plan') }</div>
+			<div className="PlanView__subtitle">{ t('hub_plan_view_based_on_your_privacy_preferences') }</div>
+			{searchPromo()}
+			{startTrialButton()}
+		</div>
+	);
+};
+
+// PropTypes ensure we pass required props of the correct type
+PlanView.propTypes = {};
+
+// Default props used on the Home View
+PlanView.defaultProps = {};
+
+export default PlanView;

app/hub/Views/PlanView/PlanView.scss

@@ -0,0 +1,81 @@
+.PlanView__yourPrivacyPlan {
+	margin: auto;
+	font-size: 24px;
+	display: flex;
+	justify-content: center;
+}
+
+.PlanView__subtitle {
+	margin-top: 12px;
+	display: flex;
+	justify-content: center;
+	font-size: 18px;
+}
+.PlanView__searchPromoContainer {
+	width: 354px;
+	height: 381px;
+	margin: 48px auto 0 auto;
+	border-radius: 4px;
+	border: solid 4px #00aef0;
+}
+
+.PlanView__searchLogo {
+	height: 37px;
+	width: 193px;
+	margin: 65px auto 0 auto;
+	background-image: url('/app/images/hub/PlanView/search.svg');
+}
+
+.PlanView__adFree {
+	margin: 16px auto 0 auto;
+	color: #b8860b;
+	font-size: 18px;
+	line-height: 32px;
+	font-weight: 600;
+	width: 220px;
+	text-align: center;
+}
+
+.PlanView__adFreePromo {
+	margin: auto;
+	font-size: 18px;
+	line-height: 32px;
+	text-align: center;
+}
+
+.PlanView__adFreePromoDescription {
+	margin: 16px auto 0 auto;
+	height: 88px;
+	width: 250px;
+	font-size: 16px;
+	line-height: 1.38;
+	text-align: center;
+	color: #4a4a4a;
+}
+
+.PlanView__searchCTAButton {
+	margin: 48px auto 0 auto;
+	height: 44px;
+	width: 162px;
+	padding: 7.7px 14px;
+	line-height: 22px;
+	background: linear-gradient(
+		45deg,
+		#ff7e74 50%,
+		#00aef0
+	);
+	background-size: 200% 100%;
+	background-position: 100% 50%;
+	transition: 0.25s all;
+	border: none;
+	&:hover {
+		background-position: 0% 50%;
+		transition: 0.25s all;
+	}
+	color: #FFF;
+	font-size: 14.1px;
+	font-weight: 700;
+	border-radius: 3.5px;
+	text-align: center;
+	line-height: 2.05;
+}

app/hub/Views/PlanView/index.jsx

@@ -0,0 +1,35 @@
+/**
+ * Point of entry index.js file for PlanView
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2020 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+
+import PlanView from './PlanView';
+
+/**
+ * Map redux store state properties to the component's own properties.
+ * @param  {Object} state    entire Redux store's state
+ * @return {function}        this function returns a plain object, which will be merged into the component's props
+ * @memberof HubContainers
+ */
+const mapStateToProps = state => ({ ...state.upgrade, ...state.account });
+
+/**
+ * Bind the component's action creators using Redux's bindActionCreators.
+ * @param  {function} dispatch redux store method which dispatches actions
+ * @return {function}          to be used as an argument in redux connect call
+ * @memberof SetupContainers
+ */
+const mapDispatchToProps = dispatch => ({});
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(PlanView));

app/hub/index.jsx

@@ -31,6 +31,7 @@ import CreateAccountView from './Views/CreateAccountView';
 import ForgotPasswordView from '../shared-components/ForgotPassword/ForgotPasswordContainer';
 import LogInView from './Views/LogInView';
 import UpgradePlanView from './Views/UpgradePlanView';
+import PlanView from './Views/PlanView';
 
 const store = createStore();
 
@@ -43,7 +44,7 @@ const ah = (QueryString.parse(window.location.search).ah === 'true') || false;
  */
 const Hub = () => (
 	<AppView>
-		<Route exact path="/" component={UpgradePlanView} />
+		<Route exact path="/" component={PlanView} />
 		<Route exact path="/home" component={ah ? UpgradePlanView : HomeView} />
 		<Route path="/setup" component={SetupView} />
 		<Route path="/tutorial" component={TutorialView} />

app/images/hub/PlanView/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="193" height="37"><defs><linearGradient id="a" x1="23.581%" x2="76.503%" y1="8.335%" y2="74.989%"><stop offset="0%" stop-color="#67A73A"/><stop offset="100%" stop-color="#00AEF0"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21.97 13.245v2.228m-10.932-2.228v2.228" stroke="#FFF" stroke-linecap="round" stroke-width="1.261"/><path fill="#000" fill-rule="nonzero" d="M131.596 26.314c2.976 0 4.199-2.057 4.199-4.865 0-5.367-7.035-5.45-7.035-10.177 0-2.058.779-3.587 2.892-3.587s2.892 1.557 2.892 3.615v.5h1.223v-.417c0-2.808-1.195-4.866-4.143-4.866-2.864.028-4.143 1.919-4.143 4.838 0 5.422 7.035 5.506 7.035 10.177 0 2.085-.806 3.587-2.947 3.587s-2.948-1.502-2.948-3.587v-1.084h-1.223v1c0 2.809 1.223 4.866 4.198 4.866zm14.583-.166V24.98h-6.396v-8.12h5.311v-1.167h-5.31V7.852h6.395V6.684h-7.675v19.464h7.675zm3.626 0l.974-4.31h6.061l.973 4.31h1.28l-4.338-19.492h-1.863l-4.254 19.492h1.167zm6.84-5.422h-5.672l2.809-12.596 2.863 12.596zm6.324 5.422v-8.703H165c2.225 0 3.643.722 3.643 3.308v3.059c0 1.057.083 1.752.417 2.336h1.334c-.417-.64-.472-1.53-.472-2.336v-3.03c0-2.114-.807-3.532-2.809-3.977 1.919-.445 2.809-1.752 2.809-4.032v-1.696c0-2.753-1.196-4.393-4.171-4.393h-4.06v19.464h1.28zm2.058-9.871h-2.058V7.852h2.753c2.113 0 2.92 1.25 2.92 3.336v1.835c0 2.614-1.335 3.254-3.615 3.254zm12.163 10.037c2.975 0 4.199-2.113 4.199-4.921v-2.225h-1.224v2.308c0 2.086-.806 3.643-2.947 3.643s-2.947-1.557-2.947-3.643v-10.12c0-2.086.806-3.671 2.947-3.671s2.947 1.585 2.947 3.67v1.696h1.224V11.44c0-2.809-1.224-4.922-4.199-4.922-2.975 0-4.198 2.113-4.198 4.922v9.954c0 2.808 1.223 4.921 4.198 4.921zm8.215-.166V17h6.061v9.148h1.307V6.684h-1.307v9.148h-6.061V6.684h-1.28v19.464h1.28z"/><path d="M42.11 15.294h4.338v6.127c0 3.092-1.578 4.858-4.62 4.858-3.041 0-4.618-1.766-4.618-4.858V11.374c0-3.091 1.577-4.857 4.618-4.857 3.042 0 4.62 1.766 4.62 4.857v1.878h-2.93v-2.07c0-1.38-.618-1.905-1.605-1.905-.986 0-1.605.525-1.605 1.904v10.434c0 1.38.62 1.877 1.605 1.877.987 0 1.606-.497 1.606-1.877v-3.56H42.11v-2.76zm9.55 10.754h-3.098V6.727h3.098v8.28h3.52v-8.28h3.154v19.321H55.18v-8.281h-3.52zm8.675-14.673c0-3.091 1.662-4.858 4.703-4.858 3.043 0 4.704 1.767 4.704 4.858v10.047c0 3.091-1.661 4.858-4.704 4.858-3.041 0-4.703-1.767-4.703-4.858V11.375zm3.098 10.24c0 1.38.62 1.905 1.605 1.905.986 0 1.605-.525 1.605-1.905V11.182c0-1.38-.619-1.905-1.605-1.905-.985 0-1.605.525-1.605 1.905v10.433zM75.914 6.517c3.014 0 4.563 1.767 4.563 4.858v.607h-2.93v-.8c0-1.38-.563-1.905-1.55-1.905-.985 0-1.549.525-1.549 1.905 0 3.974 6.056 4.72 6.056 10.24 0 3.092-1.576 4.857-4.618 4.857-3.041 0-4.62-1.765-4.62-4.857v-1.187h2.93v1.38c0 1.38.62 1.877 1.605 1.877.986 0 1.605-.497 1.605-1.877 0-3.975-6.055-4.72-6.055-10.24 0-3.091 1.549-4.858 4.563-4.858m5.234.21h9.575v2.761h-3.238v16.56h-3.099V9.488h-3.238zm14.238 8.143h4.253v2.76h-4.253v5.658h5.352v2.761H92.29V6.727h8.448v2.761h-5.352zm13.682 11.177c-.168-.496-.282-.8-.282-2.373v-3.036c0-1.794-.619-2.457-2.028-2.457h-1.07v7.867h-3.097V6.727h4.675c3.21 0 4.591 1.462 4.591 4.443v1.518c0 1.987-.648 3.285-2.028 3.92 1.548.634 2.055 2.097 2.055 4.112v2.98c0 .94.029 1.63.338 2.347h-3.154zm-3.38-16.56v5.934h1.212c1.155 0 1.857-.496 1.857-2.042v-1.905c0-1.38-.478-1.986-1.575-1.986h-1.493zm10.908 10.157l-3.914-12.917h3.238l2.367 8.805 2.365-8.805h2.958l-3.915 12.917v6.404h-3.099z" fill="#1D1D1B"/><path d="M31.912 30.715c-1.557-3.527-1.825-6.515-1.867-7.69v-9.661C30.045 5.983 23.944 0 16.418 0 8.89 0 2.789 5.983 2.789 13.364v9.801c-.058 1.263-.364 4.16-1.86 7.55-2.012 4.555-.347 4.013 1.144 3.638 1.49-.373 4.82-1.836 5.86-.034 1.04 1.801 1.907 3.366 4.334 2.346 2.427-1.02 3.571-1.36 3.918-1.36h.47c.347 0 1.491.34 3.918 1.36 2.428 1.02 3.295-.545 4.335-2.346 1.04-1.802 4.369-.34 5.86.034 1.49.375 3.154.917 1.144-3.638" fill="url(#a)"/><path d="M25.077 19.977l-3.237-3.258a6.625 6.625 0 001.265-3.901c0-3.687-3-6.667-6.666-6.667-3.665 0-6.666 3.001-6.666 6.667 0 3.686 3 6.666 6.666 6.666a6.627 6.627 0 003.901-1.265l3.237 3.258c.214.214.493.322.75.322s.557-.108.75-.322a1.035 1.035 0 000-1.5zm-8.66-2.615a4.524 4.524 0 01.001-9.046c2.486 0 4.544 2.015 4.544 4.502a4.547 4.547 0 01-4.544 4.544z" fill="#FFF" fill-rule="nonzero" stroke="#FFF" stroke-width=".5"/></g></svg>

app/scss/hub.scss

@@ -86,6 +86,7 @@ html, body, #root {
 @import '../hub/Views/LogInView/LogInView.scss';
 @import '../hub/Views/CreateAccountView/CreateAccountView.scss';
 @import '../hub/Views/UpgradePlanView/UpgradePlanView.scss';
+@import '../hub/Views/PlanView/PlanView.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';