data csp compatible images + class for index + text styles

app/content-scripts/rewards/HotDog.jsx

@@ -21,6 +21,9 @@ class HotDog extends Component {
 			this.iframeEl.classList.add('hot-dog');
 		}
 
+		this.ghostyStar = `url(${chrome.extension.getURL('app/images/rewards/ghosty-star.svg')})`;
+		this.closeIcon = `url(${chrome.extension.getURL('app/images/rewards/light-x.svg')})`;
+
 		this.close = this.close.bind(this);
 		this.navigate = this.navigate.bind(this);
 	}
@@ -42,16 +45,17 @@ class HotDog extends Component {
 	}
 
 	render() {
+		console.log('render props', this.props);
 		return (
 			<div className="ghostery-rewards-component">
 				{ this.state.closed !== true &&
 					<div>
-						<div onClick={this.navigate} className="hot-dog-container">
+						<div onClick={this.navigate} className="hot-dog-container" style={{backgroundImage: this.ghostyStar}} >
 							<div className="ghostery-reward-text">
 								1 {t('rewards_new_text')}!
 							</div>
 						</div>
-						<div className="ghostery-reward-close" onClick={this.close} />
+						<div className="hot-dog-close" onClick={this.close} style={{backgroundImage: this.closeIcon}} />
 					</div>
 				}
 			</div>

app/content-scripts/rewards/OfferCard.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
 import { Link } from 'react-router-dom';
 import msgModule from '../utils/msg';
 import { log } from '../../../src/utils/common';
@@ -22,17 +23,17 @@ class OfferCard extends Component {
 			this.iframeEl.classList.add('offer-card');
 		}
 
+		this.betaLogo = `url(${chrome.extension.getURL('app/images/rewards/ghostery-rewards-beta.png')})`;
+		this.closeIcon = `url(${chrome.extension.getURL('app/images/drawer/x.svg')})`;
+		this.ghostyGrey = `url(${chrome.extension.getURL('app/images/rewards/ghosty-grey.svg')})`;
+		this.kebabIcon = `url(${chrome.extension.getURL('app/images/rewards/settings-kebab.svg')})`;
+
 		this.close = this.close.bind(this);
 		this.copyCode = this.copyCode.bind(this);
 	}
 
 	copyCode() {
-		// copy code to clipboard
-		if (document.getElementById('ghostery-shadow-root')) {
-			document.getElementById('ghostery-shadow-root').shadowRoot.querySelector('.reward-code-input').select();
-		} else {
-			document.getElementById('ghostery-iframe-container').contentWindow.document.querySelector('.reward-code-input').select();
-		}
+		ReactDOM.findDOMNode(this).querySelector('.reward-code-input').select();
 		document.execCommand('copy');
 
 		// 'copied' feedback for user
@@ -65,29 +66,32 @@ class OfferCard extends Component {
 				{ this.state.closed !== true &&
 				<div className="ghostery-reward-card">
 					<div className="reward-card-header">
-						<div className="rewards-logo-beta" />
-						<div className="reward-card-close" onClick={this.close} />
+						<div className="rewards-logo-beta" style={{backgroundImage: this.betaLogo}} />
+						<div className="reward-card-close" onClick={this.close} style={{backgroundImage: this.closeIcon}} />
 					</div>
 					<div className="reward-content">
 						<div className="reward-content-header">
+							<div className="flex-grow" />
 							<div className="reward-company-logo">
 								<img src={this.props.reward.companyLogo} />
 							</div>
-							<div className="reward-settings-kebab" />
+							<div className="reward-settings-kebab" style={{backgroundImage: this.kebabIcon}} />
 						</div>
 						<div className="reward-content-img">
-							<img src={this.imgSrc} />
+							<div className="flex-grow" />
+							<img src={this.props.reward.contentImg} />
+							<div className="flex-grow" />
 						</div>
 						<div className="reward-content-detail">
 							<span className="reward-benefit">
-								{/* { this.state.benefit } */}
+								{ this.props.reward.benefit }
 							</span>
 							<span className="reward-headline">
-								{/* {this.state.headline} */}
+								{this.props.reward.headline}
+							</span>
+							<span className="reward-description">
+								{ this.props.reward.description }
 							</span>
-							<p className="reward-description">
-								{/* { this.state.description } */}
-							</p>
 						</div>
 						<div className="reward-code">
 							<div>
@@ -110,7 +114,7 @@ class OfferCard extends Component {
 							<a>{t('rewards_disable')}</a>
 							<div className="reward-arrow" />
 						</div>
-						<div className="reward-ghosty" />
+						<div className="reward-ghosty" style={{backgroundImage: this.ghostyGrey}} />
 					</div>
 				</div>}
 			</div>

app/content-scripts/rewards/index.jsx

@@ -29,94 +29,129 @@ import ShadowDOM from 'react-shadow';
 const { BROWSER_INFO, onMessage } = globals;
 const viewport = document.getElementById('viewport');
 const channelsSupported = (typeof chrome.runtime.connect === 'function');
-let rewardsContainer = document.createElement('div');
-let rewardsApp = document.createElement('div');
-let rewardsIframe;
-let iframeStyle;
-let port;
-let MainView;
 
-/* TODO massage offerz object into front end and remove mock data */
-const 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.'
-};
+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'
+		};
 
-rewardsApp.id = 'ghostery-rewards-app';
-rewardsApp.className = 'show';
+		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);
 
-document.addEventListener('DOMContentLoaded', (event) => {
-	if (BROWSER_INFO.name === 'chrome') {
+		this.init();
+	}
+
+	init() {
+		document.addEventListener('DOMContentLoaded', (event) => {
+			console.log('DOMContentLoaded');
+			if (BROWSER_INFO.name === 'chrome') {
+				this.renderShadow();
+			} else {
+				// use iframe to encapsulate CSS - fallback for everything else besides chrome
+				this.renderIframe();
+			};
+		});
+	}
+
+	renderShadow() {
 		// use shadowDOM to encapsulate CSS - fully supported in Chrome
-		rewardsContainer.appendChild(rewardsApp);
-		document.body.appendChild(rewardsContainer);
-		MainView = (props) => {
+		this.rewardsContainer.appendChild(this.rewardsApp);
+		document.body.appendChild(this.rewardsContainer);
+		this.mainView = (props) => {
 			return (
 				<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} /> } />
 							<Route path="/hotdog" render={ ()=> <HotDog reward={props.reward} /> } />
-							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} imgBlob={props.imgBlob} /> } />
 						</div>
 					</ShadowDOM>
 				</Router>
 			);
 		}
-		ReactDOM.render(<MainView reward={reward} />, rewardsApp);
-	} else {
-		// use iframe to encapsulate CSS - fallback for everything else besides chrome
-		rewardsIframe = document.createElement('iframe');
-		rewardsIframe.id = 'ghostery-iframe-container';
-		rewardsIframe.classList.add('hot-dog')
-		document.body.appendChild(rewardsIframe);
-		rewardsIframe.onload = () => {
-			iframeStyle = document.createElement('link');
-			iframeStyle.rel = 'stylesheet';
-			iframeStyle.type = 'text/css';
-			iframeStyle.href = chrome.extension.getURL('dist/css/rewards_styles.css');
+		this.renderReact();
+		this.initListener();
+	}
+
+	renderIframe() {
+		this.rewardsIframe = document.createElement('iframe');
+		this.rewardsIframe.id = 'ghostery-iframe-container';
+		this.rewardsIframe.classList.add('hot-dog')
+		document.body.appendChild(this.rewardsIframe);
+		this.rewardsIframe.onload = () => {
+			this.iframeStyle = document.createElement('link');
+			this.iframeStyle.rel = 'stylesheet';
+			this.iframeStyle.type = 'text/css';
+			this.iframeStyle.href = chrome.extension.getURL('dist/css/rewards_styles.css');
 
-			rewardsIframe.contentWindow.document.head.appendChild(iframeStyle);
-			rewardsContainer = rewardsIframe.contentWindow.document.body;
+			this.rewardsIframe.contentWindow.document.head.appendChild(this.iframeStyle);
+			this.rewardsContainer = this.rewardsIframe.contentWindow.document.body;
 
-			rewardsApp.classList.add('iframe-child');
-			rewardsContainer.appendChild(rewardsApp);
-			MainView = (props) => {
+			this.rewardsApp.classList.add('iframe-child');
+			this.rewardsContainer.appendChild(this.rewardsApp);
+			this.mainView = (props) => {
 				return (
 					<Router history={history}>
 						<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} /> } />
+							<Route path="/offercard" render={ ()=> <OfferCard reward={props.reward} imgBlob={props.imgBlob} /> } />
 						</div>
 					</Router>
 				);
 			}
-			ReactDOM.render(<MainView reward={reward} />, rewardsApp);
+			this.renderReact();
+			this.initListener();
+		}
+	}
+
+	initListener() {
+		if (channelsSupported) {
+			this.port = chrome.runtime.connect({ name: 'rewardsPort' });
+			if (this.port) {
+				this.port.onMessage.addListener(this.handleMessages);
+				this.port.postMessage({ name: 'rewardsLoaded' });
+			}
+		} else {
+			onMessage.addListener(this.handleMessages);
 		}
-	};
-});
+	}
 
-function handleMessages(request, sender, response) {
-	console.log(request);
-	/* TODO get new reward from request, and set it as new reward */
-	if (document.readyState === 'complete') {
-		console.log('re render root react');
-		ReactDOM.render(<MainView reward={reward} />, rewardsApp);
+	handleMessages(request, sender, response) {
+		console.log('postMessage request', request);
+		if (request.name === 'showHotDog') {
+			console.log('showHotDog postMessage');
+		}
+		console.log(document.readyState);
+		if (document.readyState === 'complete' || document.readyState === 'interactive') {
+			console.log('re render root react');
+			this.renderReact();
+		}
 	}
-}
 
-if (channelsSupported) {
-	port = chrome.runtime.connect({ name: 'rewardsPort' });
-	if (port) {
-		port.onMessage.addListener(handleMessages);
-		port.postMessage({ name: 'rewardsLoaded' });
+	renderReact() {
+		let MainView = this.mainView;
+		ReactDOM.render(<MainView reward={this.reward} imgBlob={this.imgBlob} />, this.rewardsApp);
 	}
-} else {
-	onMessage.addListener(handleMessages);
+
 }
+
+new RewardsApp();

app/images/rewards/ghosty-grey.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="16px" viewBox="0 0 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 3</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="strong-rewards-notification-Main-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-2775.000000, -3410.000000)">
+        <g id="Group-25" transform="translate(2176.000000, 2563.000000)" fill="#C8C7C2">
+            <path d="M613.575874,860.286737 C612.864956,858.760949 612.742619,857.468198 612.723444,856.960238 L612.723444,852.780808 C612.723444,849.588045 609.936532,847 606.498912,847 C603.060908,847 600.2739,849.588045 600.2739,852.780808 L600.2739,857.020655 C600.247247,857.567046 600.107556,858.820367 599.42425,860.286737 C598.505474,862.257162 599.265672,862.022397 599.946772,861.860224 C600.627681,861.698778 602.148364,861.065985 602.623524,861.845597 C603.0983,862.624754 603.494458,863.30161 604.603067,862.860246 C605.711773,862.419335 606.234199,862.272244 606.39249,862.272244 L606.60773,862.272244 C606.765925,862.272244 607.288543,862.419335 608.397057,862.860246 C609.505763,863.30161 609.901825,862.624754 610.376888,861.845597 C610.85176,861.065985 612.372347,861.698778 613.053448,861.860224 C613.734452,862.022397 614.494362,862.257162 613.575874,860.286737 M604.577564,850.152152 C605.248023,850.152152 605.791637,850.950843 605.791637,851.936328 C605.791637,852.921903 605.248023,853.720776 604.577564,853.720776 C603.907106,853.720776 603.363396,852.921903 603.363396,851.936328 C603.363396,850.950843 603.907106,850.152152 604.577564,850.152152 M606.498912,857.283948 C605.021469,857.283948 603.77777,855.933597 603.402992,854.430975 C604.126757,855.355225 605.244092,855.949042 606.498912,855.949042 C607.75354,855.949042 608.870874,855.355225 609.594735,854.430975 C609.219957,855.933597 607.976067,857.283948 606.498912,857.283948 M608.420355,853.720776 C607.749321,853.720776 607.205994,852.921903 607.205994,851.936328 C607.205994,850.950843 607.749321,850.152152 608.420355,850.152152 C609.091101,850.152152 609.634236,850.950843 609.634236,851.936328 C609.634236,852.921903 609.091101,853.720776 608.420355,853.720776" id="Fill-3"></path>
+        </g>
+    </g>
+</svg>

app/images/rewards/light-x.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="strong-rewards-notification-Main-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-2782.000000, -2929.000000)">
+        <g id="Group-25" transform="translate(2176.000000, 2563.000000)" fill="#9B9B9B">
+            <path d="M612.718565,371 L615.642492,368.075748 C616.11744,367.601125 616.11744,366.831159 615.642492,366.356211 C615.167545,365.881263 614.397578,365.881263 613.924252,366.356211 L611,369.281435 L608.075748,366.356211 C607.601125,365.881263 606.831159,365.881263 606.356211,366.356211 C605.881263,366.831159 605.881263,367.601125 606.356211,368.075748 L609.280138,371 L606.356211,373.924252 C605.881263,374.398875 605.881263,375.168841 606.356211,375.643789 C606.831159,376.118737 607.601125,376.118737 608.074776,375.643789 L611,372.718565 L613.924252,375.642492 C614.398875,376.11744 615.168841,376.11744 615.643789,375.642492 C616.118737,375.167545 616.118737,374.397578 615.643789,373.922955 L612.718565,371 Z" id="Fill-2"></path>
+        </g>
+    </g>
+</svg>

app/images/rewards/settings-kebab.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="4px" height="15px" viewBox="0 0 4 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+    <title>noun_880268</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="strong-rewards-notification-Main-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-2993.000000, -2985.000000)">
+        <g id="Group-25" transform="translate(2176.000000, 2563.000000)" fill="#9B9B9B" fill-rule="nonzero">
+            <g id="noun_880268" transform="translate(817.000000, 422.000000)">
+                <rect id="Rectangle-path" x="0.0857142857" y="0.166666667" width="3.85714286" height="3.75"></rect>
+                <rect id="Rectangle-path" x="0.0857142857" y="5.63888889" width="3.85714286" height="3.75"></rect>
+                <rect id="Rectangle-path" x="0.0857142857" y="11.0833333" width="3.85714286" height="3.75"></rect>
+            </g>
+        </g>
+    </g>
+</svg>