Premium modal logic working. Now for the copy and images.

app/hub/Views/HomeView/HomeViewContainer.jsx

@@ -76,7 +76,7 @@ class HomeViewContainer extends Component {
 				window.open(`https://checkout.${DOMAIN}.com/plus?utm_source=gbe&utm_campaign=intro_hub`, '_blank');
 				break;
 			case 'premium':
-				window.open(`https://reddit.com`, '_blank');
+				window.open('https://reddit.com', '_blank');
 				break;
 			case 'basic':
 			default:
@@ -100,7 +100,7 @@ class HomeViewContainer extends Component {
 	 * @private
 	 * Function to handle clicks on the Midnight download button in the Premium promo modal
 	 */
-	_handleTryMidnightClick = () => { this._handleTryMidnightClick('midnight'); }
+	_handleTryMidnightClick = () => { this._handlePremiumPromoModalClick('midnight'); }
 
 	_render() {
 		const { justInstalled } = this.state;
@@ -127,8 +127,9 @@ class HomeViewContainer extends Component {
 				<PremiumPromoModal
 					show={!premium_promo_modal_shown}
 					location="hub"
-					handleKeepBasicClick: {this._handleKeepBasicClick}
-					handleGetPlusClick: {this._handleGetPlusClick}
+					handleKeepBasicClick={this._handleKeepBasicClick}
+					handleGetPlusClick={this._handleGetPlusClick}
+					handleTryMidnightClick={this._handleTryMidnightClick}
 				/>
 				<HomeView {...childProps} />
 			</div>

app/panel/components/Panel.jsx

@@ -359,6 +359,9 @@ class Panel extends React.Component {
 			isPromoModalHidden,
 		} = this.props;
 
+		console.error(`promoModal: ${promoModal}`);
+		console.error(`isPromoModalHidden: ${isPromoModalHidden}`);
+
 		if (isPromoModalHidden) return null;
 
 		if (promoModal === 'insights') {

app/scss/hub.scss

@@ -76,7 +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/PremiumPromoModal/PremiumPromoModal.scss';
 @import '../shared-components/SteppedNavigation/SteppedNavigation.scss';
 @import '../shared-components/ToastMessage/ToastMessage.scss';
 @import '../shared-components/ToggleCheckbox/ToggleCheckbox.scss';

app/scss/panel.scss

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

app/shared-components/PremiumPromoModal/PremiumPromoModal.jsx

@@ -29,6 +29,7 @@ const PremiumPromoModal = (props) => {
 		handleGetPlusClick,
 		handleKeepBasicClick,
 		handleGoAwayClick,
+		handleXClick,
 	} = props;
 
 	const isInHub = location === 'hub';
@@ -153,6 +154,12 @@ const PremiumPromoModal = (props) => {
 							{t('already_subscribed_sign_in')}
 						</div>
 					)}
+					{isInPanel && (
+						<div onClick={handleXClick} className="requiredToCompileTEST" />
+					)}
+					{isInPanel && (
+						<div onClick={handleGoAwayClick} className="requiredToCompileTEST" />
+					)}
 				</div>
 			</div>
 		</Modal>

manifest.json

@@ -6,6 +6,8 @@
 			"strict_min_version": "52.0"
 		}
 	},
+  	"debug": true,
+  	"log": true,
 	"author": "Ghostery",
 	"name": "__MSG_name__",
 	"short_name": "Ghostery",

src/classes/ConfData.js

@@ -126,6 +126,7 @@ class ConfData {
 			_initProperty('notify_upgrade_updates', true);
 			_initProperty('paid_subscription', false);
 			_initProperty('plus_promo_modal_last_seen', 0);
+			_initProperty('premium_promo_modal_last_seen', 0);
 			_initProperty('rewards_accepted', false);
 			_initProperty('rewards_opted_in', false);
 			_initProperty('settings_last_imported', 0);

src/classes/PromoModals.js

@@ -16,21 +16,19 @@ import globals from './Globals';
 import panelData from './PanelData';
 
 const DAYS_BETWEEN_PROMOS = {
-	plus: globals.DEBUG ? 0.0005 : 30, // 40 seconds on staging
+	premium: globals.DEBUG ? 0.0005 : 30, // 40 seconds on staging
 	insights: globals.DEBUG ? 0.0005 : 30 // 40 seconds on staging
 };
 const WEEKLY_INSIGHTS_TARGET = globals.DEBUG ? 1 : 3;
 const DAILY_INSIGHTS_TARGET = globals.DEBUG ? 7 : 3;
 
 const MSECS_IN_DAY = 86400000; // 1000 msecs-in-sec * 60 secs-in-min * 60 mins-in-hour * 24 hours-in-day
 const PREMIUM = 'premium';
-const PLUS_INITIAL = 'plus_initial';
-const PLUS_UPGRADE = 'plus_upgrade';
 const INSIGHTS = 'insights';
 const PROMO_MODAL_LAST_SEEN = 'promo_modal_last_seen';
 
 /**
- * Static 'namespace' class for handling the business logic for the display of promo modals (Plus, Insights, etc...)
+ * Static 'namespace' class for handling the business logic for the display of promo modals (Premium, Insights, etc...)
  * @memberOf  BackgroundClasses
  */
 class PromoModals {
@@ -41,14 +39,10 @@ class PromoModals {
 	 * @return {string} Type of promo to show
 	 */
 	static whichPromoModalShouldWeDisplay() {
+		// The order is important
+		// Insights takes priority over Premium
 		if (this._isTimeForAPromo(INSIGHTS)) return INSIGHTS;
-
-		if (this._isTimeForAPromo(PLUS)) {
-			if (this._haveSeenInitialPlusPromo()) return PLUS_UPGRADE;
-
-			return PLUS_INITIAL;
-		}
-
+		if (this._isTimeForAPromo(PREMIUM)) return PREMIUM;
 		return null;
 	}
 
@@ -58,11 +52,6 @@ class PromoModals {
 
 	static turnOffPromos() { panelData.set({ notify_promotions: false }); }
 
-	static _haveSeenInitialPlusPromo() {
-		const lastSeenTime = conf[`${PLUS}_${PROMO_MODAL_LAST_SEEN}`];
-		return (lastSeenTime !== 0);
-	}
-
 	/**
 	 * Check Conf values to determine if the enough time has
 	 * passed for `type` modal to be displayed
@@ -72,9 +61,9 @@ class PromoModals {
 	static _isTimeForAPromo(type) {
 		if (conf.notify_promotions === false) { return false; }
 
-		const lastSeenPlusPromo = conf[`${PLUS}_${PROMO_MODAL_LAST_SEEN}`];
+		const lastSeenPremiumPromo = conf[`${PREMIUM}_${PROMO_MODAL_LAST_SEEN}`];
 		const lastSeenInsightsPromo = conf[`${INSIGHTS}_${PROMO_MODAL_LAST_SEEN}`];
-		const lastSeenPromo = lastSeenPlusPromo > lastSeenInsightsPromo ? lastSeenPlusPromo : lastSeenInsightsPromo;
+		const lastSeenPromo = Math.max(lastSeenPremiumPromo, lastSeenInsightsPromo);
 
 		if (type === INSIGHTS && !this._hasEngagedFrequently()) {
 			return false;
@@ -107,14 +96,9 @@ class PromoModals {
 	static _hasEngagedFrequently() {
 		const { engaged_daily_count } = conf.metrics || [];
 
-		let very_engaged_days = 0;
-		engaged_daily_count.forEach((count) => {
-			very_engaged_days = count >= DAILY_INSIGHTS_TARGET ? ++very_engaged_days : very_engaged_days;
-		});
-
-		if (very_engaged_days >= WEEKLY_INSIGHTS_TARGET) return true;
+		const very_engaged_days = engaged_daily_count.reduce((acc, count) => (count >= DAILY_INSIGHTS_TARGET ? acc++ : acc), 0);
 
-		return false;
+		return very_engaged_days >= WEEKLY_INSIGHTS_TARGET;
 	}
 }