feature/reward signal hotfix

app/content-scripts/rewards/HotDog.jsx

@@ -45,44 +45,22 @@ class HotDog extends Component {
 
 	componentWillReceiveProps(nextProps) {
 		if (nextProps.reward && nextProps.reward !== null && !this.shownSignal) {
-			this.sendSignal('offer_notification_hotdog', nextProps);
+			this.props.actions.sendSignal('offer_notification_hotdog');
 			this.shownSignal = true;
 		}
 	}
 
-	messageBackground(name, message) {
-		if (this.props.port) {
-			this.props.port.postMessage({
-				name,
-				message
-			});
-		} else {
-			sendMessage(name, message);
-		}
-	}
-
-	sendSignal(actionId, props = this.props) {
-		// Cliqz metrics
-		const offerId = props.reward.offer_id;
-		const message = {
-			offerId,
-			actionId,
-			origin: 'rewards-hotdog-card',
-			type: 'offer-action-signal'
-		};
-		this.messageBackground('rewardSignal', message);
-	}
-
 	navigate() {
-		this.sendSignal('offer_click_hotdog');
+		this.props.actions.sendSignal('offer_click_hotdog');
 		if (this.iframeEl) {
 			this.iframeEl.classList.add('offer-card');
 		}
 		this.props.history.push('/offercard');
 	}
 
 	close() {
-		this.sendSignal('offer_closed_hotdog');
+		this.props.actions.removeFocusListener();
+		this.props.actions.sendSignal('offer_closed_hotdog');
 		if (this.iframeEl) {
 			this.iframeEl.classList = '';
 		}

app/content-scripts/rewards/OfferCard.jsx

@@ -69,7 +69,7 @@ class OfferCard extends Component {
 					href: 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/',
 					text: t('rewards_learn_more'),
 					callback: () => {
-						this.sendSignal('offer_first_learn');
+						this.props.actions.sendSignal('offer_first_learn');
 						sendMessage('ping', 'rewards_first_learn_more');
 					},
 				},
@@ -95,39 +95,15 @@ class OfferCard extends Component {
 		];
 
 		const { reward } = props;
-		this.messageBackground('rewardSeen', {
+		this.props.actions.messageBackground('rewardSeen', {
 			offerId: reward.offer_id
 		});
-		this.sendSignal('offer_shown', { reward });
-		this.sendSignal('offer_dsp_session', { reward });
-		this.sendSignal('offer_shown_card', { reward });
-	}
-
-	messageBackground(name, message) {
-		if (this.props.port) {
-			this.props.port.postMessage({
-				name,
-				message
-			});
-		} else {
-			sendMessage(name, message);
-		}
-	}
-
-	sendSignal(actionId, props = this.props, offerSignal = true) {
-		// Cliqz metrics
-		const offerId = offerSignal ? props.reward.offer_id : null;
-		const message = {
-			offerId,
-			actionId,
-			origin: 'rewards-hotdog-card',
-			type: !offerSignal ? 'action-signal' : 'offer-action-signal',
-		};
-		this.messageBackground('rewardSignal', message);
+		this.props.actions.sendSignal('offer_shown');
+		this.props.actions.sendSignal('offer_dsp_session');
 	}
 
 	copyCode() {
-		this.sendSignal('code_copied');
+		this.props.actions.sendSignal('code_copied');
 		this.offerCardRef.querySelector('.reward-code-input').select();
 		document.execCommand('copy');
 
@@ -147,7 +123,7 @@ class OfferCard extends Component {
 
 	toggleSettings(e) {
 		if (!this.state.showSettings) {
-			this.sendSignal('offer_settings');
+			this.props.actions.sendSignal('offer_settings');
 		}
 		this.setState({
 			showSettings: !this.state.showSettings
@@ -156,7 +132,7 @@ class OfferCard extends Component {
 
 	disableRewards() {
 		sendMessage('ping', 'rewards_off');
-		this.sendSignal('rewards_off', null, false);
+		this.props.actions.sendSignal('rewards_off', null, false);
 	}
 
 	disableRewardsNotification() {
@@ -176,27 +152,28 @@ class OfferCard extends Component {
 				});
 				return;
 			}
-			this.sendSignal('offer_first_optin');
+			this.props.actions.sendSignal('offer_first_optin');
 			sendMessage('ping', 'rewards_first_accept');
 		} else if (promptNumber === 2) {
 			if (option) {
-				this.sendSignal('offer_first_optout');
+				this.props.actions.sendSignal('offer_first_optout');
 				sendMessage('ping', 'rewards_first_reject_optout');
 				this.disableRewards();
 				this.closeOfferCard();
 				return;
 			}
-			this.sendSignal('offer_first_optlater');
+			this.props.actions.sendSignal('offer_first_optlater');
 			sendMessage('ping', 'rewards_first_reject_optin');
 			this.closeOfferCard();
 		}
 		this.setState({
 			showPrompt: false
 		});
-		this.messageBackground('rewardsPromptAccepted');
+		this.props.actions.messageBackground('rewardsPromptAccepted');
 	}
 
 	closeOfferCard() {
+		this.props.actions.removeFocusListener();
 		if (this.iframeEl) {
 			this.iframeEl.classList = '';
 		}
@@ -206,7 +183,7 @@ class OfferCard extends Component {
 	}
 
 	redeem() {
-		this.sendSignal('offer_ca_action');
+		this.props.actions.sendSignal('offer_ca_action');
 	}
 
 	handleImageLoaded(e) {
@@ -238,7 +215,7 @@ class OfferCard extends Component {
 								<div className="rewards-logo-beta" style={{ backgroundImage: this.betaLogo }} />
 								<div
 									className="reward-card-close"
-									onClick={(e) => { this.sendSignal('offer_closed_card'); this.closeOfferCard(); }}
+									onClick={(e) => { this.props.actions.sendSignal('offer_closed_card'); this.closeOfferCard(); }}
 									style={{ backgroundImage: this.closeIcon }}
 								/>
 							</div>
@@ -257,7 +234,7 @@ class OfferCard extends Component {
 									{ this.state.showSettings &&
 										<div className="rewards-settings-container">
 											<ClickOutside excludeEl={this.kebabRef} onClickOutside={this.toggleSettings}>
-												<Settings signal={() => { this.sendSignal('about_ghostery_rewards', null, false); }} disable={this.disableRewardsNotification} />
+												<Settings signal={() => { this.props.actions.sendSignal('about_ghostery_rewards', false); }} disable={this.disableRewardsNotification} />
 											</ClickOutside>
 										</div>
 									}

app/content-scripts/rewards/index.jsx

@@ -48,12 +48,24 @@ class RewardsApp {
 		this.mainView = null;
 		this.rewardsApp.id = 'ghostery-rewards-app';
 		this.rewardsApp.className = 'show';
+
 		this.handleMessages = this.handleMessages.bind(this);
+		this.sendSignal = this.sendSignal.bind(this);
+		this.messageBackground = this.messageBackground.bind(this);
+		this.removeFocusListener = this.removeFocusListener.bind(this);
+		this.focusListener = this.focusListener.bind(this);
+
+		this.actions = {
+			sendSignal: this.sendSignal,
+			messageBackground: this.messageBackground,
+			removeFocusListener: this.removeFocusListener
+		};
 
 		this.init();
 	}
 
 	init() {
+		this.addRewardSeenListener();
 		if (document.readyState === 'complete'
 		|| document.readyState === 'loaded'
 		|| document.readyState === 'interactive'
@@ -77,7 +89,7 @@ class RewardsApp {
 
 	renderReact() {
 		const MainView = this.mainView;
-		ReactDOM.render(<MainView reward={this.reward} conf={this.conf} />, this.rewardsApp);
+		ReactDOM.render(<MainView reward={this.reward} conf={this.conf} actions={this.actions} />, this.rewardsApp);
 	}
 
 	renderShadow() {
@@ -88,9 +100,25 @@ class RewardsApp {
 			<Router history={history}>
 				<ShadowDOM include={[chrome.extension.getURL('dist/css/rewards_styles.css')]}>
 					<div id="ghostery-shadow-root">
-						<Route exact path="/" render={() => <HotDog reward={props.reward} port={this.port} />} />
-						<Route path="/hotdog" render={() => <HotDog reward={props.reward} port={this.port} />} />
-						<Route path="/offercard" render={() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} />} />
+						<Route
+							exact
+							path="/"
+							render={
+								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							}
+						/>
+						<Route
+							path="/hotdog"
+							render={
+								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							}
+						/>
+						<Route
+							path="/offercard"
+							render={
+								() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
+							}
+						/>
 					</div>
 				</ShadowDOM>
 			</Router>
@@ -117,9 +145,25 @@ class RewardsApp {
 			this.mainView = props => (
 				<Router history={history}>
 					<div>
-						<Route exact path="/" render={() => <HotDog reward={props.reward} port={this.port} />} />
-						<Route path="/hotdog" render={() => <HotDog reward={props.reward} port={this.port} />} />
-						<Route path="/offercard" render={() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} />} />
+						<Route
+							exact
+							path="/"
+							render={
+								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							}
+						/>
+						<Route
+							path="/hotdog"
+							render={
+								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							}
+						/>
+						<Route
+							path="/offercard"
+							render={
+								() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
+							}
+						/>
 					</div>
 				</Router>
 			);
@@ -152,6 +196,41 @@ class RewardsApp {
 			this.renderReact();
 		}
 	}
+
+	focusListener() {
+		this.sendSignal('offer_shown');
+	}
+
+	addRewardSeenListener() {
+		window.addEventListener('focus', this.focusListener);
+	}
+
+	removeFocusListener() {
+		window.removeEventListener('focus', this.focusListener);
+	}
+
+	messageBackground(name, message) {
+		if (this.port) {
+			this.port.postMessage({
+				name,
+				message
+			});
+		} else {
+			sendMessage(name, message);
+		}
+	}
+
+	sendSignal(actionId, offerSignal = true) {
+		// Cliqz metrics
+		const offerId = offerSignal ? this.reward.offer_id : null;
+		const message = {
+			offerId,
+			actionId,
+			origin: 'rewards-hotdog-card',
+			type: !offerSignal ? 'action-signal' : 'offer-action-signal',
+		};
+		this.messageBackground('rewardSignal', message);
+	}
 }
 
 const rewardsApp = new RewardsApp();

app/panel/components/Rewards.jsx

@@ -15,7 +15,7 @@ import React, { Component } from 'react';
 import ClassNames from 'classnames';
 import { Link, Route } from 'react-router-dom';
 import { ToggleSlider, RewardListItem, RewardDetail } from './BuildingBlocks';
-import { sendMessage } from '../utils/msg';
+import { sendMessage, sendRewardMessage } from '../utils/msg';
 import globals from '../../../src/classes/Globals';
 
 const IS_EDGE = (globals.BROWSER_INFO.name === 'edge');
@@ -50,6 +50,7 @@ class Rewards extends React.Component {
 	componentDidMount() {
 		this.props.actions.getRewardsData();
 		this.props.actions.sendSignal('hub_open');
+		chrome.runtime.connect({ name: 'rewardsPanelPort' });
 	}
 
 	/**
@@ -83,7 +84,9 @@ class Rewards extends React.Component {
 	 * Lifecycle event
 	 */
 	componentWillUnmount() {
+		/* @TODO send message to background to remove port onDisconnect event */
 		this.props.actions.sendSignal('hub_closed');
+		sendRewardMessage('removeDisconnectListener');
 	}
 
 	/**

app/panel/components/Settings.jsx

@@ -67,7 +67,7 @@ class Settings extends React.Component {
 	 */
 	toggleCheckbox(event) {
 		if (event.currentTarget.name === 'enable_offers') {
-			this.props.actions.sendSignal(event.currentTarget.checked ? 'rewards_off' : 'rewards_on');
+			this.props.actions.sendSignal(!event.currentTarget.checked ? 'rewards_off' : 'rewards_on');
 			sendMessage('ping', !event.currentTarget.checked ? 'rewards_off' : 'rewards_on');
 		}
 		this.props.actions.toggleCheckbox({

manifest.json

@@ -12,6 +12,8 @@
 	"version_name": "8.2.0",
 	"default_locale": "en",
 	"description": "__MSG_short_description__",
+	"debug": true,
+	"log": true,
 	"icons": {
 		"16": "app/images/icon16.png",
 		"48": "app/images/icon48.png",
@@ -99,4 +101,4 @@
 			"browser_action_next_to_addressbar": true
 		}
 	}
-}
+}

src/background.js

@@ -450,6 +450,9 @@ function handleRewards(name, message, tab_id, callback) {
 		case 'ping':
 			metrics.ping(message);
 			break;
+		case 'removeDisconnectListener':
+			rewards.panelPort.onDisconnect.removeListener(rewards.panelHubClosedListener);
+			break;
 		default:
 			break;
 	}
@@ -1274,6 +1277,14 @@ function initializeEventListeners() {
 
 	// Fired when a message is sent from either an extension process (by runtime.sendMessage) or a content script (by tabs.sendMessage).
 	onMessage.addListener(onMessageHandler);
+
+	// Fired when panel is disconnected
+	chrome.runtime.onConnect.addListener((port) => {
+		if (port && port.name === 'rewardsPanelPort') {
+			rewards.panelPort = port;
+			rewards.panelPort.onDisconnect.addListener(rewards.panelHubClosedListener);
+		}
+	});
 }
 
 /**