Refactor X button out to PromoModal.jsx. Move Insights and Plus Promo…

…ModalContent out to shared-components

app/panel/components/Panel.jsx

@@ -309,6 +309,10 @@ class Panel extends React.Component {
 			return this._renderPlusPromoModal();
 		}
 
+		if (promoModal === 'premium') {
+			return this._renderPremiumPromoModal();
+		}
+
 		return null;
 	}
 

app/panel/containers/PlusPromoModalContainer.js

@@ -13,7 +13,7 @@
 
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
-import PlusPromoModal from '../components/PlusPromoModalContent';
+import PlusPromoModal from '../../shared-components/ModalContent/PlusPromoModalContent/PlusPromoModalContent';
 /**
  * Map redux store state properties to Panel view component own properties.
  * @memberOf PanelContainers

app/scss/panel.scss

@@ -75,9 +75,9 @@ html body {
 @import './partials/_stats';
 @import './partials/_stats_graph';
 @import './partials/_modal_exit_button';
-@import './partials/insights_promo_modal.scss';
-@import './partials/plus_promo_modal.scss';
 
 // Imports from ../shared-components directory
 @import '../shared-components/Modal/Modal.scss';
 @import '../shared-components/PremiumPromoModalContent/PremiumPromoModalContent.scss';
+@import '../shared-components/PlusPromoModalContent/PlusPromoModalContent.scss';
+@import '../shared-components/InsightsPromoModalContent/InsightsPromoModalContent.scss';

app/panel/components/InsightsPromoModalContent.jsx → app/shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.jsx

@@ -18,11 +18,9 @@ const InsightsPromoModalContent = (props) => {
 		handleGoAwayClick,
 		handleSignInClick,
 		handleTryInsightsClick,
-		XButton,
 	} = props;
 	return (
-		<div className="InsightsModal__content flex-container flex-dir-column align-middle">
-			{XButton}
+		<div className="InsightsModal__container flex-container flex-dir-column align-middle">
 			<div className="InsightsModal__image" />
 			<div className="InsightsModal__header">
 				{t('panel_insights_promotion_header')}

app/scss/partials/_insights_promo_modal.scss → app/shared-components/ModalContent/InsightsPromoModalContent/InsightsPromoModalContent.scss

@@ -26,6 +26,11 @@ $condensed-font-family: Roboto Condensed, "Open Sans", "Helvetica Neue", Helveti
 	z-index: 10;
 }
 
+.InsightsModal__container {
+	min-height: 450px;
+	justify-content: space-between;
+}
+
 .InsightsModal__image {
 	height: 94px;
 	width: 177px;

app/shared-components/ModalContent/InsightsPromoModalContent/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for InsightsPromoModalContent Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 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 InsightsPromoModalContent from './InsightsPromoModalContent';
+
+export default InsightsPromoModalContent;

app/panel/components/PlusPromoModalContent.jsx → app/shared-components/ModalContent/PlusPromoModalContent/PlusPromoModalContent.jsx

@@ -13,7 +13,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ClassNames from 'classnames';
 
 /**
  * A functional React component for a PlusPromo Modal that may be displayed in the Hub and/or Panel
@@ -26,19 +25,10 @@ const PlusPromoModalContent = (props) => {
 		handleTryPlusClick,
 		handleSignInClick,
 		loggedIn,
-		XButton
 	} = props;
 
-	const contentClassNames = ClassNames(
-		'PlusPromoModal__content',
-		'flex-container',
-		'flex-dir-column',
-		'align-middle',
-	);
-
 	return (
-		<div className={contentClassNames}>
-			{XButton}
+		<div className="flex-container flex-dir-column align-middle">
 			<div className="PlusPromoModal__plus-logo" />
 			<div className="PlusPromoModal__main-content-container">
 				<div className="PlusPromoModal__header">
@@ -74,7 +64,6 @@ PlusPromoModalContent.propTypes = {
 	handleSignInClick: PropTypes.func.isRequired,
 	handleGoAwayClick: PropTypes.func.isRequired,
 	loggedIn: PropTypes.bool.isRequired,
-	XButton: PropTypes.element.isRequired,
 };
 
 export default PlusPromoModalContent;

app/shared-components/ModalContent/PlusPromoModalContent/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for PlusPromoModalContent Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 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 PlusPromoModalContent from './PlusPromoModalContent';
+
+export default PlusPromoModalContent;

app/shared-components/PremiumPromoModalContent/PremiumPromoModalContent.jsx → app/shared-components/ModalContent/PremiumPromoModalContent/PremiumPromoModalContent.jsx

@@ -13,7 +13,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import ClassNames from 'classnames';
 
 /**
  * A functional React component for a Premium Promo Modal that may be displayed in the Hub and/or Panel
@@ -28,22 +27,13 @@ const PremiumPromoModalContent = (props) => {
 		handleKeepBasicClick,
 		handleGoAwayClick,
 		location,
-		XButton
 	} = props;
 
-	const contentClassNames = ClassNames(
-		'PremiumPromoModal__content',
-		'flex-container',
-		'flex-dir-column',
-		'align-middle',
-	);
-
 	const isInHub = location === 'hub';
 	const isInPanel = location === 'panel';
 
 	return (
-		<div className={contentClassNames}>
-			{XButton}
+		<div className="flex-container flex-dir-column align-middle">
 			<div className="PremiumPromoModal__midnight-logo" />
 			<div className="PremiumPromoModal__main-content-container">
 				<div className="PremiumPromoModal__header">
@@ -117,7 +107,6 @@ PremiumPromoModalContent.propTypes = {
 	handleGetPlusClick: PropTypes.func.isRequired,
 	handleKeepBasicClick: PropTypes.func,
 	handleGoAwayClick: PropTypes.func,
-	XButton: PropTypes.element.isRequired
 };
 
 const noop = () => { };

app/shared-components/PromoModal/PromoModal.jsx

@@ -13,10 +13,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import ClassNames from 'classnames';
 import Modal from '../Modal';
-import InsightsPromoModalContent from '../../panel/components/InsightsPromoModalContent';
-import PlusPromoModalContent from '../../panel/components/PlusPromoModalContent';
-import PremiumPromoModalContent from '../PremiumPromoModalContent';
+import InsightsPromoModalContent from '../ModalContent/InsightsPromoModalContent';
+import PlusPromoModalContent from '../ModalContent/PlusPromoModalContent';
+import PremiumPromoModalContent from '../ModalContent/PremiumPromoModalContent';
 import history from '../../panel/utils/history';
 import { sendMessage } from '../../panel/utils/msg';
 import globals from '../../../src/classes/Globals';
@@ -111,13 +112,24 @@ class PromoModal extends React.Component {
 
 		if (type === INSIGHTS) {
 			sendMessage('ping', 'promo_modals_decline_insights_upgrade');
-		}
-
-		if (type === PLUS) {
+		} else if (type === PLUS) {
 			sendMessage('ping', 'promo_modals_decline_plus_upgrade');
 		}
 	}
 
+	_renderXButton = (type) => {
+		const XButtonClass = type === PLUS
+			? 'PlusPromoModal__exitButton'
+			: 'InsightsModal__exitButton';
+
+		return (
+			<ModalExitButton
+				className={XButtonClass}
+				toggleModal={() => this._handlePromoXClick(type)}
+			/>
+		);
+	};
+
 	renderModalContent() {
 		const { type, loggedIn } = this.props;
 		switch (type) {
@@ -127,12 +139,6 @@ class PromoModal extends React.Component {
 						handleGoAwayClick={() => this._handlePromoGoAwayClick(INSIGHTS)}
 						handleTryInsightsClick={() => this._handlePromoTryProductClick(INSIGHTS, 'in_app_upgrade')}
 						handleSignInClick={this._handlePromoSignInClick}
-						XButton={(
-							<ModalExitButton
-								className="InsightsModal__exitButton"
-								toggleModal={() => this._handlePromoXClick(INSIGHTS)}
-							/>
-						)}
 						{...this.props}
 					/>
 				);
@@ -142,12 +148,6 @@ class PromoModal extends React.Component {
 						handleGoAwayClick={() => this._handlePromoGoAwayClick(PLUS)}
 						handleTryPlusClick={() => this._handlePromoTryProductClick(PLUS, 'in_app_spring2020')}
 						handleSignInClick={this._handlePromoSignInClick}
-						XButton={(
-							<ModalExitButton
-								className="PlusPromoModal__exitButton"
-								toggleModal={() => this._handlePromoXClick(PLUS)}
-							/>
-						)}
 						loggedIn={loggedIn}
 					/>
 				);
@@ -157,12 +157,6 @@ class PromoModal extends React.Component {
 						handleGoAwayClick={() => this._handlePromoGoAwayClick(PREMIUM)}
 						handleTryMidnightClick={() => this._handlePromoTryProductClick(PREMIUM, 'in_app')}
 						handleGetPlusClick={() => this._handlePromoTryProductClick(PLUS, 'in_app')}
-						XButton={(
-							<ModalExitButton
-								className="InsightsModal__exitButton"
-								toggleModal={() => this._handlePromoXClick(PREMIUM)}
-							/>
-						)}
 						{...this.props}
 					/>
 				);
@@ -172,9 +166,18 @@ class PromoModal extends React.Component {
 	}
 
 	render() {
+		const { type } = this.props;
+		const modalContentClassNames = ClassNames('', {
+			InsightsModal__content: type === INSIGHTS,
+			PlusPromoModal__content: type === PLUS,
+			PremiumPromoModal__content: type === PREMIUM,
+		});
 		return (
 			<Modal show>
-				{this.renderModalContent()}
+				<div className={modalContentClassNames}>
+					{this._renderXButton(type)}
+					{this.renderModalContent()}
+				</div>
 			</Modal>
 		);
 	}

manifest.json

@@ -105,5 +105,4 @@
 		"cliqz/offers-reminder/index.html",
 		"cliqz/popup-notification/images/*"
 	],
-	"debug": true
 }