Move Plus Promo modal rendering to a PlusPromoModal shared component.…

… Begin to implement conditional panel display logic

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -15,7 +15,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import QueryString from 'query-string';
 import HomeView from './HomeView';
-import { Modal } from '../../../shared-components';
+import { PlusPromoModal } from '../../../shared-components';
+import { sendMessage } from '../../utils';
 
 /**
  * @class Implement the Home View for the Ghostery Hub
@@ -30,7 +31,6 @@ class HomeViewContainer extends Component {
 		this.state = {
 			getUserResolved: false,
 			justInstalled: justInstalled === 'true',
-			plusPromoModalShown: props.home.plus_promo_modal_shown,
 		};
 
 		const title = t('hub_home_page_title');
@@ -62,17 +62,16 @@ class HomeViewContainer extends Component {
 	 * Dismisses the Plus promo modal when user clicks either the Select Plus or Select Basic button
 	 */
 	_dismissModal = () => {
-		this.setState({
-			plusPromoModalShown: true,
-		});
 		this.props.actions.markPlusPromoModalShown();
+		sendMessage('SET_PLUS_PROMO_MODAL_SEEN', {});
 	}
 
 	_render() {
-		const { justInstalled, plusPromoModalShown } = this.state;
+		const { justInstalled } = this.state;
 		const { home, user } = this.props;
 		const isPlus = user && user.subscriptionsPlus || false;
 		const {
+			plus_promo_modal_shown,
 			setup_complete,
 			tutorial_complete,
 			enable_metrics,
@@ -89,9 +88,11 @@ class HomeViewContainer extends Component {
 
 		return (
 			<div className="full-height">
-				<Modal show={!isPlus && !plusPromoModalShown}>
-					{Modal.renderPlusPromo('inHub', this._dismissModal)}
-				</Modal>
+				<PlusPromoModal
+					show={!isPlus && !plus_promo_modal_shown}
+					location="hub"
+					clickHandler={this._dismissModal}
+				/>
 				<HomeView {...childProps} />
 			</div>
 		);

app/hub/utils/index.js

@@ -14,10 +14,14 @@
 
 // Imports utilities from elsewhere in the codebase to reduce duplicate code
 import { log } from '../../../src/utils/common';
-import { sendMessageInPromise as importedSMIP } from '../../panel/utils/msg';
+import { sendMessage as importedSM, sendMessageInPromise as importedSMIP } from '../../panel/utils/msg';
 
 const sendMessageInPromise = function(name, message) {
 	return importedSMIP(name, message, 'ghostery-hub');
 };
 
-export { log, sendMessageInPromise };
+const sendMessage = function(name, message) {
+	return importedSM(name, message, 'ghostery-hub');
+};
+
+export { log, sendMessage, sendMessageInPromise };

app/panel/components/Panel.jsx

@@ -13,7 +13,7 @@
 
 import React from 'react';
 import Header from '../containers/HeaderContainer';
-import Modal from '../../shared-components/Modal';
+import { PlusPromoModal } from '../../shared-components';
 import { DynamicUIPortContext } from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';
 import { setTheme } from '../utils/utils';
@@ -195,7 +195,7 @@ class Panel extends React.Component {
 	}
 
 	_plusPromoClickHandlerPlaceholder = () => {
-		console.error('IVZ Panfel#_plusPromoClickHandlerPlaceholder');
+		console.error('IVZ Panel#_plusPromoClickHandlerPlaceholder');
 	}
 
 	/**
@@ -210,11 +210,15 @@ class Panel extends React.Component {
 
 		const notificationText = this.props.notificationShown && this.renderNotification();
 
+		const { plusPromoModalSeen } = this.props;
+
 		return (
 			<div id="panel">
-				<Modal show>
-					{Modal.renderPlusPromo('inPanel', this._plusPromoClickHandlerPlaceholder)}
-				</Modal>
+				<PlusPromoModal
+					show={!plusPromoModalSeen}
+					location="panel"
+					clickHandler={this._plusPromoClickHandlerPlaceholder}
+				/>
 				<div className="callout-container">
 					<div className={`${(!notificationText ? 'hide ' : '') + this.props.notificationClasses} callout`}>
 						<svg onClick={this.closeNotification} width="15px" height="15px" viewBox="0 0 15 15" className="close-button">

app/scss/hub.scss

@@ -76,6 +76,7 @@ html, body, #root {
 // Imports from ../shared-components directory
 @import '../shared-components/ExitButton/ExitButton.scss';
 @import '../shared-components/Modal/Modal.scss';
+@import '../shared-components/PlusPromoModal/PlusPromoModal.scss';
 @import '../shared-components/SteppedNavigation/SteppedNavigation.scss';
 @import '../shared-components/ToastMessage/ToastMessage.scss';
 @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss';

app/scss/panel.scss

@@ -76,3 +76,4 @@ html body {
 
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';
+@import '../shared-components/PlusPromoModal/PlusPromoModal.scss';

app/shared-components/Modal/Modal.jsx

@@ -13,7 +13,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ClassNames from 'classnames';
 
 /**
  * A Functional React component for a Modal
@@ -33,104 +32,6 @@ const Modal = props => (
 	</div>
 );
 
-Modal.renderPlusPromo = (location, clickHandler) => {
-	const isInHub = location === 'inHub';
-	const isInPanel = location === 'inPanel';
-
-	const locationClassName = {
-		'in-hub': isInHub,
-		'in-panel': isInPanel
-	};
-	const contentClassNames = ClassNames(
-		'PlusPromoModal__content',
-		'flex-container',
-		'flex-dir-column',
-		'align-middle',
-		locationClassName
-	);
-	const chooseYourPlanClassNames = ClassNames(
-		'PlusPromoModal__choose-your-plan',
-		locationClassName
-	);
-	const recommendedBannerClassNames = ClassNames(
-		'PlusPromoModal__recommended-banner',
-		locationClassName
-	);
-	const optionDescriptionBoxClassNames = ClassNames(
-		'PlusPromoModal__option-description-box',
-		locationClassName
-	);
-
-	return (
-		<div className={contentClassNames}>
-			<div className="PlusPromoModal__buttons-background" />
-			{isInHub && (
-				<div className="PlusPromoModal__thanks-for-download">
-					{t('thanks_for_downloading_ghostery')}
-				</div>
-			)}
-			<div className={chooseYourPlanClassNames}>
-				{isInHub ? t('choose_your_privacy_plan') : t('choose_your_ghostery_privacy_plan')}
-			</div>
-			<div className="PlusPromoModal__options-container full-width">
-				<div className="PlusPromoModal__option-container">
-					<div className={`${optionDescriptionBoxClassNames} 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">
-							<div className="PlusPromoModal__option-description-item no-capitalize">{t('protection_for_this_browser')}</div>
-							<div className="PlusPromoModal__option-description-item">{t('blocks_ads')}</div>
-							<div className="PlusPromoModal__option-description-item">{t('blocks_trackers')}</div>
-							<div className="PlusPromoModal__option-description-item">{t('fast_browsing')}</div>
-						</div>
-					</div>
-					<div className="PlusPromoModal__button basic button" onClick={clickHandler}>
-						<span>{t('select_basic')}</span>
-					</div>
-				</div>
-				<div className="PlusPromoModal__option-container">
-					<div className={`${optionDescriptionBoxClassNames} plus`}>
-						<div className={recommendedBannerClassNames}>
-							<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">
-							<div className="PlusPromoModal__option-description-item italic">All basic features, plus:</div>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<div className="PlusPromoModal__option-description-item">Historical Tracker Stats</div>
-							</div>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<div className="PlusPromoModal__option-description-item">Priority Support</div>
-							</div>
-							<div className="PlusPromoModal__plus-option-description-item-container">
-								<img className="PlusPromoModal__check-icon" src="/app/images/hub/home/check-icon.svg" />
-								<div className="PlusPromoModal__option-description-item">New Color Themes</div>
-							</div>
-						</div>
-					</div>
-					<a href="http://signon.ghostery.com/en/subscribe/" target="_blank" rel="noopener noreferrer" className="PlusPromoModal__button plus button" onClick={clickHandler}>
-						<span>Select Plus</span>
-					</a>
-				</div>
-			</div>
-		</div>
-	);
-};
-
 // PropTypes ensure we pass required props of the correct type
 Modal.propTypes = {
 	show: PropTypes.bool.isRequired,