fix event listener reward reference

app/content-scripts/rewards/OfferCard.jsx

@@ -14,14 +14,28 @@ const { onMessage } = chrome.runtime;
 class OfferCard extends Component {
 	constructor(props) {
 		super(props);
+
 		console.log('constructor props:', props);
 		this.state = {
 			closed: false,
 			copyText: t('rewards_copy_code'),
 			showNotification: false,
-			showSettings: false
+			showSettings: false,
+			rewardUI: props.reward && props.reward.offer_data && props.reward.offer_data.ui_info.template_data || {},
+			// rewardUI: mockData,
+			imageLoads: {
+				logo: false,
+				content: false,
+			}
 		};
 
+		// @TODO sendMessage to add "seen" flag to reward object
+		if (this.props.port) {
+			this.props.port.postMessage({ name: 'rewardSeen', message: {data: 'test'} });
+		} else {
+			sendMessage('rewardSeen', {data: 'test'});
+		}
+
 		this.iframeEl = parent.document.getElementById('ghostery-iframe-container');
 		if (this.iframeEl) {
 			this.iframeEl.classList = '';
@@ -37,6 +51,25 @@ class OfferCard extends Component {
 		this.copyCode = this.copyCode.bind(this);
 		this.disableRewards = this.disableRewards.bind(this);
 		this.toggleSettings = this.toggleSettings.bind(this);
+		this.handleImageLoaded = this.handleImageLoaded.bind(this);
+
+		// Cliqz metrics
+		this.sendSignal('offer_shown');
+	}
+
+	sendSignal(type) {
+		// @param type = ['offer_shown', 'offer_ca_action', 'offer_closed']
+		if (this.props.port) {
+			this.props.port.postMessage({ name: 'rewardsSignal', message: {
+				id: this.props.reward.offer_id,
+				type
+			}});
+		} else {
+			sendMessage('rewardsSignal', {
+				id: this.props.reward.offer_id,
+				type
+			});
+		}
 	}
 
 	copyCode() {
@@ -79,9 +112,15 @@ class OfferCard extends Component {
 		});
 	}
 
+	handleImageLoaded(e) {
+		e.target.classList.remove('hide');
+	}
+
 	render() {
 		console.log('render props:', this.props);
+		console.log('render title:', this.state);
 		return (
+			// @TODO condition for hide class
 			<div className="ghostery-rewards-component">
 				{ this.state.closed !== true &&
 				<div className="ghostery-reward-card">
@@ -96,7 +135,7 @@ class OfferCard extends Component {
 						<div className="reward-content-header">
 							<div className="flex-grow" />
 							<div className="reward-company-logo">
-								<img src={this.props.reward.companyLogo} />
+								<img src={this.state.rewardUI.logo_url} className="hide" onLoad={this.handleImageLoaded} />
 							</div>
 								<div
 									onClick={this.toggleSettings}
@@ -114,33 +153,33 @@ class OfferCard extends Component {
 						</div>
 						<div className="reward-content-img">
 							<div className="flex-grow" />
-							<img src={this.props.reward.contentImg} />
+							<img src={this.state.rewardUI.picture_url} className="hide" onLoad={this.handleImageLoaded} />
 							<div className="flex-grow" />
 						</div>
 						<div className="reward-content-detail">
 							<span className="reward-benefit">
-								{ this.props.reward.benefit }
+								{ this.state.rewardUI.benefit }
 							</span>
 							<span className="reward-headline">
-								{this.props.reward.headline}
+								{ this.state.rewardUI.headline }
 							</span>
 							<span className="reward-description">
-								{ this.props.reward.description }
+								{ this.state.rewardUI.desc }
 							</span>
 						</div>
 						<div className="reward-code">
 							<div>
-								{this.props.reward.rewardCode}
-								<input readOnly className="reward-code-input" value={this.props.reward.rewardCode} type="text" />
+								{this.state.rewardUI.code}
+								<input readOnly className="reward-code-input" value={this.state.rewardUI.code} type="text" />
 							</div>
 							<a onClick={this.copyCode}>{this.state.copyText}</a>
 						</div>
 						<div className="reward-content-footer">
-							<span> {t('rewards_expire')} { this.props.reward.expireTime } </span>
-							<a target="_blank" href={this.props.reward.termsLink}> { t('rewards_terms_conditions') } </a>
+							{/* <span> {t('rewards_expire')} { this.props.reward.expireTime } </span> */}
+							{/* <a target="_blank" href={this.props.reward.termsLink}> { t('rewards_terms_conditions') } </a> */}
 						</div>
-						<a target="_blank" href={this.props.reward.redeemLink} className="reward-redeem">
-							{t('rewards_redeem_now')}
+						<a target="_blank" href={this.state.rewardUI.call_to_action && this.state.rewardUI.call_to_action.url} className="reward-redeem">
+							{this.state.rewardUI.call_to_action.text}
 						</a>
 					</div>
 					<div className="reward-footer">

app/content-scripts/rewards/index.jsx

@@ -32,25 +32,12 @@ const channelsSupported = (typeof chrome.runtime.connect === 'function');
 
 class RewardsApp {
 	constructor() {
-		this.reward = {
-			rewardCode: 'SDF75DSUI90',
-			expireTime: '14 days',
-			termsLink: 'https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/',
-			redeemLink: 'https://www.ghostery.com/',
-			benefit: '2 Free',
-			headline: 'Audio Books',
-			description: 'Description of the offer. There is a lot of exciting stuff going on.',
-			companyLogo: 'https://cdn.cliqz.com/extension/offers/test/resources/flaconi20-week/flaconi20-week-logo-long-1523970905.png',
-			contentImg: 'https://cdn.cliqz.com/extension/offers/test/resources/flaconi20-week/flaconi20-week-logo-long-1523970905.png'
-		};
-
 		this.rewardsContainer = document.createElement('div');
 		this.rewardsApp = document.createElement('div');
 		this.rewardsIframe = null;;
 		this.iframeStyle = null;;
 		this.port = null;
 		this.mainView = null;
-		this.imgBlob = null;
 		this.rewardsApp.id = 'ghostery-rewards-app';
 		this.rewardsApp.className = 'show';
 		this.handleMessages = this.handleMessages.bind(this);
@@ -82,7 +69,7 @@ class RewardsApp {
 
 	renderReact() {
 		let MainView = this.mainView;
-		ReactDOM.render(<MainView reward={this.reward} imgBlob={this.imgBlob} />, this.rewardsApp);
+		ReactDOM.render(<MainView reward={this.reward} />, this.rewardsApp);
 	}
 
 	renderShadow() {
@@ -96,7 +83,7 @@ class RewardsApp {
 						<div id="ghostery-shadow-root">
 							<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
 							<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
-							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} imgBlob={props.imgBlob} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} port={this.port} /> } />
 						</div>
 					</ShadowDOM>
 				</Router>
@@ -128,7 +115,7 @@ class RewardsApp {
 						<div>
 							<Route exact path="/" render={ ()=> <HotDog reward={props.reward} /> } />
 							<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
-							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} imgBlob={props.imgBlob} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} port={this.port} /> } />
 						</div>
 					</Router>
 				);
@@ -146,15 +133,17 @@ class RewardsApp {
 				this.port.postMessage({ name: 'rewardsLoaded' });
 			}
 		} else {
+			// TODO listen for this in background.js
+			sendMesage('rewardsLoaded');
 			onMessage.addListener(this.handleMessages);
 		}
 	}
 
 	handleMessages(request, sender, response) {
 		console.log('postMessage request', request);
 		if (request.name === 'showHotDog') {
-			console.log('showHotDog postMessage');
-			this.reward = request;
+			console.log('showHotDog event reward id ', request.reward.offer_id);
+			this.reward = request.reward;
 		}
 		console.log(document.readyState);
 		if (document.readyState === 'complete' || document.readyState === 'interactive') {

app/panel/components/Panel.jsx

@@ -36,6 +36,7 @@ class Panel extends React.Component {
 		// try to get tabId from query string if available (FF for Android only)
 		const tabId = new URLSearchParams(window.location.search).get('tabId');
 		this.props.actions.getPanelData(tabId).then((data) => {
+			console.log('panelData', data)
 			if (data.is_expert) {
 				// load Detail component
 				this.props.history.push('/detail');

app/scss/rewards.scss

@@ -143,8 +143,9 @@
 			align-items: center;
 
 			img {
-				width: auto;
-				height: auto;
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
 			}
 		}
 
@@ -177,7 +178,8 @@
 
 					img {
 						width: 100%;
-						height: auto;
+						height: 100%;
+						object-fit: contain;
 					}
 				}
 

src/background.js

@@ -413,6 +413,14 @@ function handleBlockedRedirect(name, message, tab_id, callback) {
 	return false;
 }
 
+function handleRewards(name, message, tab_id, callback) {
+	if (name === 'rewardsSignal') {
+		// @TODO send signal
+		// {"origin":"offers-cc","type":"action-signal","data":{"action_id":"hub_open"}}
+		// cliqz.modules['offers-v2'].background.actions.processRealEstateMessage(message);
+	}
+}
+
 /**
  * Handle messages sent from dist/settings_redirect.js script.
  * of the settings_redirect.html local page. Used on @EDGE and Chrome.
@@ -507,6 +515,7 @@ function onMessageHandler(request, sender, callback) {
 	const {
 		name, message, messageId, origin
 	} = request;
+	console.log('REQUESTORIGIN', origin);
 	const { tab } = sender;
 	const tab_id = tab && tab.id;
 	// Edge does not have url on tab object, as of Build 14342_rc1
@@ -549,6 +558,8 @@ function onMessageHandler(request, sender, callback) {
 		return handleClick2Play(name, message, tab_id, callback);
 	} else if (origin === 'blocked_redirect') {
 		return handleBlockedRedirect(name, message, tab_id, callback);
+	} else if (origin === 'rewards') {
+		return handleRewards(name, message, tab_id, callback);
 	}
 
 	// HANDLE UNIVERSAL EVENTS HERE (NO ORIGIN LISTED ABOVE)
@@ -1087,14 +1098,13 @@ messageCenter.on('enabled', () => {
 				msg.data.offer_data) {
 					if (!rewards.storedOffers.hasOwnProperty(msg.data.offer_id)) {
 						rewards.storedOffers[msg.data.offer_id] = msg.data;
-						rewards.currentOffer = msg.data;
 					}
 
 					log('RECEIVED OFFER', msg);
 					utils.getActiveTab((tab) => {
 						let tabId = 0;
 						if (tab) tabId = tab.id;
-						rewards.showHotDog(tabId);
+						rewards.showHotDog(tabId, msg.data);
 					});
 
 					// const { data } = msg;

src/classes/PanelData.js

@@ -184,7 +184,7 @@ class PanelData {
 				needsReload: this._trackerData.get('needsReload'),
 				smartBlock: this._trackerData.get('smartBlock'),
 				tab_id: this._trackerData.get('tab_id'),
-				rewards: rewards.offers
+				rewards: rewards.storedOffers
 			},
 			summary: this.summaryView,
 			blocking: this._confData.get('is_expert') ? this.blockingView : false,

src/classes/Rewards.js

@@ -35,7 +35,13 @@ class Rewards {
 		this.channelsSupported = (typeof chrome.runtime.onConnect === 'object');
 	}
 
-	showHotDog(tab_id) {
+	handleSignal(rewardId) {
+
+	}
+
+	showHotDog(tab_id, offer) {
+		console.log('CHECK NEW OFFER ID', offer.offer_id)
+		this.currentOffer = offer;
 		const tab = tabInfo.getTabInfo(tab_id);
 
 		// If the tab is prefetched, we can't add purplebox to it.
@@ -46,7 +52,7 @@ class Rewards {
 
 		// Inject script cannot handle errors properly, but we call createBox after verifying that the tab is OK
 		// So update hotdog status for this tab
-		tabInfo.setTabInfo(tab_id, 'rewards', true);
+		// tabInfo.setTabInfo(tab_id, 'rewards', true);
 		if (this.channelsSupported) {
 			if (this.ports.has(tab_id)) {
 				this.ports.get(tab_id).disconnect();
@@ -60,10 +66,10 @@ class Rewards {
 						if (!this.ports.has(tabId)) {
 							this.ports.set(tabId, port);
 							this.ports.get(tabId).onMessage.addListener((message) => {
-								// const reward =
 								if (message.name === 'rewardsLoaded') {
 									this.ports.get(tabId).postMessage({ name: 'showHotDog', reward: this.currentOffer });
-									this.currentOffer = null;
+								} else if (message.name === 'rewardSignal') {
+									this.handleSignal(message.rewardId);
 								}
 							});
 						}