Factor plus promo modal rendering out to shared component. Implement …

…rendering in panel. Implement display context CSS adjustments.

_locales/en/messages.json

@@ -385,6 +385,15 @@
 	"password_field_label_required": {
 		"message": "Password required."
 	},
+	"name": {
+		"description": "The title of this extension (Ghostery).",
+		"message": "$EXTENSION_NAME$ – Privacy Ad Blocker",
+		"placeholders": {
+			"extension_name": {
+				"content": "Ghostery"
+			}
+		}
+	},
 	"none": {
 		"description": "Used to say that this item does not belong to any of the groups, as in \"Groups: None\" (as opposed to \"Groups: Group A, Group B, Group C\").",
 		"message": "None"
@@ -1960,6 +1969,9 @@
 	"choose_your_privacy_plan": {
 		"message": "Choose your privacy plan"
 	},
+	"choose_your_ghostery_privacy_plan": {
+		"message": "Choose your Ghostery privacy plan"
+	},
 	"ghostery_basic": {
 		"message": "Ghostery Basic"
 	},

app/hub/Views/CreateAccountView/__tests__/__snapshots__/CreateAccountView.test.jsx.snap

@@ -40,7 +40,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-email"
         >
-          hub_create_account_label_email
+          email_colon
         </label>
         <input
           autoComplete="off"
@@ -60,7 +60,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-confirmEmail"
         >
-          hub_create_account_label_email_confirm
+          confirm_email_colon
         </label>
         <input
           autoComplete="off"
@@ -128,7 +128,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-password"
         >
-          hub_create_account_label_password
+          password_colon
         </label>
         <input
           autoComplete="off"
@@ -240,7 +240,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__button button success"
           type="submit"
         >
-          hub_create_account_button_submit
+          create_account
         </button>
       </div>
     </div>
@@ -288,7 +288,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-email"
         >
-          hub_create_account_label_email
+          email_colon
         </label>
         <input
           autoComplete="off"
@@ -303,7 +303,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
         <div
           className="CreateAccountView__inputError"
         >
-          hub_create_account_label_email_invalid
+          please_enter_a_valid_email
         </div>
       </div>
       <div
@@ -313,7 +313,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-confirmEmail"
         >
-          hub_create_account_label_email_confirm
+          confirm_email_colon
         </label>
         <input
           autoComplete="off"
@@ -328,7 +328,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
         <div
           className="CreateAccountView__inputError"
         >
-          hub_create_account_label_email_confirm_invalid
+          your_emails_do_not_match
         </div>
       </div>
     </div>
@@ -386,7 +386,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__inputLabel"
           htmlFor="create-account-password"
         >
-          hub_create_account_label_password
+          password_colon
         </label>
         <input
           autoComplete="off"
@@ -508,7 +508,7 @@ exports[`app/hub/Views/CreateAccount component Snapshot tests with react-test-re
           className="CreateAccountView__button button success"
           type="submit"
         >
-          hub_create_account_button_submit
+          create_account
         </button>
       </div>
     </div>

app/hub/Views/HomeView/HomeView.scss

@@ -152,176 +152,6 @@
 	}
 }
 
-.PlusPromoModal__content {
-	position: relative;
-	width: 646px;
-	height: 553px;
-	background-color: #f7f7f7;
-	border: 1.9px solid #930194;
-	z-index: 10;
-}
-
-.PlusPromoModal__buttons-background {
-	background-color: #e7ecee;
-	position: absolute;
-	bottom: 3px;
-	width: 99%;
-	height: 72px;
-	z-index: -1;
-}
-
-.PlusPromoModal__thanks-for-download {
-	padding-top: 30px;
-	font-size: 26px;
-	font-weight: bold;
-}
-
-.PlusPromoModal__choose-your-plan {
-	padding-top: 10px;
-	font-size: 18px;
-	font-weight: bold;
-}
-
-.PlusPromoModal__options-container {
-	height: 100%;
-	margin-top: 44px;
-	display: flex;
-	justify-content: space-evenly;
-}
-
-.PlusPromoModal__option-container {
-	display: flex;
-	align-items: center;
-	flex-direction: column;
-}
-
-.PlusPromoModal__option-description-box {
-	width: 240px;
-	height: 298px;
-	margin-bottom: 45px;
-	border-style: solid;
-	border-width: 3px;
-	background-color: #FFFFFF;
-
-	&.basic {
-		border-color: #1dafed;
-	}
-
-	&.plus {
-		position: relative; // so that the recommended banner is positioned relative to this element
-		border-image-source: linear-gradient(39deg, #f2daa2, #eab968);
-		border-image-slice: 1;
-	}
-}
-
-.PlusPromoModal__recommended-banner {
-	position: absolute;
-	left: -30px;
-	top: -30px;
-}
-
-.PlusPromoModal__recommended-banner-text {
-	position: relative;
-	left: 18px;
-	top: -47px;
-	transform: rotate(-15deg);
-	color: white;
-	font-size: 16px;
-	font-weight: bold;
-}
-
-.PlusPromoModal__option-header {
-	margin-top: 20px;
-	font-size: 19px;
-	font-weight: bold;
-	letter-spacing: -0.5px;
-	text-align: center;
-
-	&.basic { color: #1dafed; }
-	&.plus { color: #ebbf73; }
-}
-
-.PlusPromoModal__price-text {
-	line-height: 1.3;
-	text-align: center;
-
-	&.basic { color: #1dafed; }
-	&.plus { color: #ebbf73; }
-}
-
-.PlusPromoModal__currency-sign {
-	font-size: 30px;
-	font-weight: bold;
-}
-
-.PlusPromoModal__amount {
-	vertical-align: middle;
-	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-	font-size: 58px;
-}
-
-.PlusPromoModal__per-month {
-	vertical-align: sub;
-	font-size: 18px;
-	font-weight: bold;
-}
-
-.PlusPromoModal__option-description-item {
-	font-size: 16px;
-	text-align: center;
-	color: #333333;
-
-	&.italic {
-		font-style: italic;
-	}
-}
-
-.PlusPromoModal__check-icon {
-	padding-right: 5px;
-	margin-top: -18px;
-}
-
-.PlusPromoModal__plus-option-description-item-container {
-	display: flex;
-	justify-content: center;
-}
-
-.PlusPromoModal__button {
-	margin: 0;
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.5px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	box-shadow: none;
-
-	&.basic {
-		width: 135px;
-		height: 40px;
-		border: solid 2px #15b4f2;
-		background-color: white;
-		color: #2cbcf4;
-	}
-	&.basic:hover {
-		background-color: #2cbcf4;
-		color: white;
-	}
-
-	&.plus {
-		width: 163px;
-		height: 38px;
-		border: none;
-		background-image: linear-gradient(to bottom, #2fdbfa, #15b4f2);
-		color: white;
-		font-weight: 600;
-		letter-spacing: 0.5px;
-	}
-	&.plus:hover {
-		background-image: linear-gradient(to bottom, #1fcbea, #05a4e2);
-	}
-}
-
 // Firefox Font Size Override and Image Size Override
 @-moz-document url-prefix() {
 .HomeView--firefoxFontSize {

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -59,7 +59,7 @@ class HomeViewContainer extends Component {
 
 	/**
 	 * @private
-	 * Dismisses the  Plus promo modal if user opts to stick with the basic plan
+	 * Dismisses the Plus promo modal when user clicks either the Select Plus or Select Basic button
 	 */
 	_dismissModal = () => {
 		this.setState({
@@ -68,73 +68,6 @@ class HomeViewContainer extends Component {
 		this.props.actions.markPlusPromoModalShown();
 	}
 
-	_renderPlusPromoModal = () => (
-		<div className="PlusPromoModal__content flex-container flex-dir-column align-middle">
-			<div className="PlusPromoModal__buttons-background" />
-			<div className="PlusPromoModal__thanks-for-download">
-				{t('thanks_for_downloading_ghostery')}
-			</div>
-			<div className="PlusPromoModal__choose-your-plan">
-				{t('choose_your_privacy_plan')}
-			</div>
-			<div className="PlusPromoModal__options-container full-width">
-				<div className="PlusPromoModal__option-container">
-					<div className="PlusPromoModal__option-description-box basic">
-						<div className="PlusPromoModal__option-header basic">{t('ghostery_basic')}</div>
-						<div className="PlusPromoModal__price-text basic">
-							<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
-							<span className="PlusPromoModal__amount">0</span>
-							<span> </span>
-							<span className="PlusPromoModal__per-month">{t('per_month')}</span>
-						</div>
-						<div className="PlusPromoModal__option-description">
-							<p className="PlusPromoModal__option-description-item no-capitalize">{t('protection_for_this_browser')}</p>
-							<p className="PlusPromoModal__option-description-item">{t('blocks_ads')}</p>
-							<p className="PlusPromoModal__option-description-item">{t('blocks_trackers')}</p>
-							<p className="PlusPromoModal__option-description-item">{t('fast_browsing')}</p>
-						</div>
-					</div>
-					<div className="PlusPromoModal__button basic button" onClick={this._dismissModal}>
-						<span>{t('select_basic')}</span>
-					</div>
-				</div>
-				<div className="PlusPromoModal__option-container">
-					<div className="PlusPromoModal__option-description-box plus">
-						<div className="PlusPromoModal__recommended-banner">
-							<img src="/app/images/hub/home/recommended-banner.svg" />
-							<div className="PlusPromoModal__recommended-banner-text">{t('recommended')}</div>
-						</div>
-						<div className="PlusPromoModal__option-header plus">Ghostery Plus</div>
-						<div className="PlusPromoModal__price-text plus">
-							<span className="PlusPromoModal__currency-sign">{t('locale_appropriate_currency_icon')}</span>
-							<span className="PlusPromoModal__amount">{t('plus_monthly_subscription_price_number')}</span>
-							<span> </span>
-							<span className="PlusPromoModal__per-month">per month</span>
-						</div>
-						<div className="PlusPromoModal__option-description">
-							<p className="PlusPromoModal__option-description-item italic">All basic features, plus:</p>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<p className="PlusPromoModal__option-description-item">Historical Tracker Stats</p>
-							</div>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<p className="PlusPromoModal__option-description-item">Priority Support</p>
-							</div>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<p className="PlusPromoModal__option-description-item">New Color Themes</p>
-							</div>
-						</div>
-					</div>
-					<a href="http://signon.ghostery.com/en/subscribe/" target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus button" onClick={this._dismissModal}>
-						<span>Select Plus</span>
-					</a>
-				</div>
-			</div>
-		</div>
-	);
-
 	_render() {
 		const { justInstalled, plusPromoModalShown } = this.state;
 		const { home, user } = this.props;
@@ -157,7 +90,7 @@ class HomeViewContainer extends Component {
 		return (
 			<div className="full-height">
 				<Modal show={!isPlus && !plusPromoModalShown}>
-					{this._renderPlusPromoModal()}
+					{Modal.renderPlusPromo('inHub', this._dismissModal)}
 				</Modal>
 				<HomeView {...childProps} />
 			</div>