GH-1177

app/content-scripts/rewards/HotDog.jsx

@@ -45,44 +45,21 @@ 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.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,17 +123,17 @@ 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
 		});
 	}
 
 	disableRewards() {
-		this.sendSignal('rewards_off', null, false);
+		this.props.actions.sendSignal('rewards_off', false);
 		sendMessage('ping', 'rewards_off');
-		this.messageBackground('rewardsDisabled');
+		this.props.actions.messageBackground('rewardsDisabled');
 	}
 
 	disableRewardsNotification() {
@@ -177,24 +153,24 @@ 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() {
@@ -207,7 +183,7 @@ class OfferCard extends Component {
 	}
 
 	redeem() {
-		this.sendSignal('offer_ca_action');
+		this.props.actions.sendSignal('offer_ca_action');
 	}
 
 	handleImageLoaded(e) {
@@ -239,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>
@@ -258,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

@@ -49,11 +49,19 @@ class RewardsApp {
 		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.actions = {
+			sendSignal: this.sendSignal,
+			messageBackground: this.messageBackground
+		};
 
 		this.init();
 	}
 
 	init() {
+		this.addRewardSeenListener();
 		if (document.readyState === 'complete'
 		|| document.readyState === 'loaded'
 		|| document.readyState === 'interactive'
@@ -77,7 +85,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 +96,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 +141,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 +192,35 @@ class RewardsApp {
 			this.renderReact();
 		}
 	}
+
+	addRewardSeenListener() {
+		window.addEventListener('focus', () => {
+			this.sendSignal('offer_shown');
+		});
+	}
+
+	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/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({