M20-51: first proto; not ready for prod

app/content-scripts/rewards/Notification.jsx

@@ -37,6 +37,30 @@ class Notification extends Component {
 		}
 	}
 
+  renderOptoutImage() {
+    return (
+      <div>
+        <img
+          className="rewards-notification-optout-image"
+          src={chrome.extension.getURL('app/images/rewards/ghostery_O.png')}
+        />
+      </div>
+    );
+  }
+
+  renderOptoutLink() {
+    return (
+      <a
+        href={this.props.data.textLink.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={() => this.props.data.textLink.callback()}
+      >
+        {this.props.data.textLink.text}
+      </a>
+    );
+  }
+
 	render() {
 		return (
 			<div>
@@ -45,12 +69,23 @@ class Notification extends Component {
 						<div className="rewards-notification-overlay" />
 						<div className="rewards-popup-container">
 							<div className={`rewards-notification ${this.props.data.type}`}>
-								<div className="close" onClick={() => { this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} />
-								<div className="notification-text">
+                {this.props.data.type === 'first-prompt' && this.renderOptoutImage()}
+								{this.props.data.type !== 'first-prompt'
+                  && (
+                    <div
+                      className="close"
+                      onClick={() => { this.closeNotification(); }}
+                      style={{ backgroundImage: this.closeIcon }}
+                    />
+                  )
+                }
+								<div className={`notification-text ${this.props.data.type}`}>
 									{this.props.data.message}
+                  {' '}
+                  {this.props.data.type === 'first-prompt' && this.renderOptoutLink()}
 								</div>
 								{this.props.data.buttons && (
-									<div className="notification-buttons">
+									<div className={`notification-buttons ${this.props.data.type}`}>
 										<button type="button" className="btn" onClick={() => { this.closeNotification(true); }}>
 											{t('rewards_yes')}
 										</button>
@@ -59,21 +94,24 @@ class Notification extends Component {
 										</button>
 									</div>
 								)}
-								{this.props.data.textLink && (
-									<a
-										className="notification-text"
-										href={this.props.data.textLink.href}
-										target="_blank"
-										rel="noopener noreferrer"
-										onClick={() => {
-											if (this.props.data.textLink.callback) {
-												this.props.data.textLink.callback();
-											}
-										}}
-									>
-										{this.props.data.textLink.text}
-									</a>
-								)}
+								{this.props.data.textLink
+                  && this.props.data.type !== 'first-prompt'
+									&& (
+										<a
+											className="notification-text"
+											href={this.props.data.textLink.href}
+											target="_blank"
+											rel="noopener noreferrer"
+											onClick={() => {
+												if (this.props.data.textLink.callback) {
+													this.props.data.textLink.callback();
+												}
+											}}
+										>
+											{this.props.data.textLink.text}
+										</a>
+									)
+								}
 							</div>
 						</div>
 					</div>

app/content-scripts/rewards/OfferCard.jsx

@@ -167,23 +167,23 @@ class OfferCard extends Component {
 	}
 
 	handlePrompt(promptNumber, option) {
+    const reject = () => {
+				this.props.actions.sendSignal('offer_first_optout');
+				sendMessage('ping', 'rewards_first_reject_optout');
+				this.disableRewards();
+				this.closeOfferCard();
+    };
 		if (promptNumber === 1) {
 			if (!option) {
-				sendMessage('ping', 'rewards_first_reject');
-				this.setState({
-					showPrompt: 2
-				});
-				return;
+        reject();
+        return;
 			}
 			this.props.actions.messageBackground('rewardsPromptOptedIn');
 			this.props.actions.sendSignal('offer_first_optin');
 			sendMessage('ping', 'rewards_first_accept');
 		} else if (promptNumber === 2) {
 			if (option) {
-				this.props.actions.sendSignal('offer_first_optout');
-				sendMessage('ping', 'rewards_first_reject_optout');
-				this.disableRewards();
-				this.closeOfferCard();
+        reject();
 				return;
 			}
 			this.props.actions.sendSignal('offer_first_optlater');

app/content-scripts/rewards/index.jsx

@@ -105,7 +105,7 @@ class RewardsApp {
 						exact
 						path="/"
 						render={
-							() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+							() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
 						}
 					/>
 					<Route
@@ -129,7 +129,6 @@ class RewardsApp {
 	renderIframe() {
 		this.rewardsIframe = document.createElement('iframe');
 		this.rewardsIframe.id = 'ghostery-iframe-container';
-		this.rewardsIframe.classList.add('hot-dog');
 		this.rewardsIframe.onload = () => {
 			this.iframeStyle = document.createElement('link');
 			this.iframeStyle.rel = 'stylesheet';
@@ -148,7 +147,7 @@ class RewardsApp {
 							exact
 							path="/"
 							render={
-								() => <HotDog reward={props.reward} port={this.port} actions={props.actions} />
+								() => <OfferCard reward={props.reward} conf={props.conf} port={this.port} actions={props.actions} />
 							}
 						/>
 						<Route

app/scss/rewards.scss

@@ -413,6 +413,10 @@
 		width: 100%;
 		height: 100%;
 
+    .rewards-notification-optout-image {
+      width: 100%;
+    }
+
 		.rewards-notification {
 			margin-top: 17px;
 			margin-left: auto;
@@ -428,6 +432,9 @@
 			line-height: 2;
 
 			&.first-prompt {
+        margin-top: 37px;
+        height: calc(100% - 74px);
+        width: 244px;
 				background-color: $white;
 				border: 2px solid $dark-purple;
 				color: black;
@@ -437,6 +444,19 @@
 				margin: 0px 22px 0px 22px;
 			}
 
+			.notification-text.first-prompt {
+        margin: unset;
+        padding-left: 16px;
+        text-align: left;
+        line-height: 20px;
+        height: 100%;
+        overflow: hidden;
+
+				a {
+          color: black;
+        }
+			}
+
 			a {
 				text-decoration: underline;
 				cursor: pointer;
@@ -461,6 +481,31 @@
 					border-radius: 3px;
 					text-transform: uppercase;
 				}
+        &.first-prompt {
+          .btn {
+            width: 104px;
+          }
+          button {
+					  &:nth-child(1) {
+              background-color: #5B005C;
+              color: #FFFFFF;
+              &:hover {
+                background-color: #5B005C;
+                color: #FFFFFF;
+              }
+            }
+					  &:nth-child(2) {
+						  border: 2px solid $dark-purple;
+              background-color: transparent;
+              color: $dark-purple;
+              &:hover {
+                border: 2px solid $dark-purple;
+                background-color: transparent;
+                color: $dark-purple;
+              }
+            }
+          }
+        }
 				button {
 					cursor: pointer;
 					font-weight: bold;