M20-51: new optin for ghostery rewards

app/content-scripts/rewards/OfferCard.jsx

@@ -38,7 +38,8 @@ class OfferCard extends Component {
 			code: isCodeHidden ? '*****' : templateData.code,
 			closed: false,
 			copyText: t('rewards_copy_code'),
-			showPrompt: this.props.conf.rewardsPromptAccepted ? false : 1,
+			showPrompt: false,
+			showOptoutOptions: !this.props.conf.rewardsPromptAccepted,
 			showSettings: false,
 			rewardUI: templateData,
 		};
@@ -48,6 +49,9 @@ class OfferCard extends Component {
 			this.iframeContentDocument = this.iframeEl.contentDocument;
 			this.iframeEl.classList = '';
 			this.iframeEl.classList.add('offer-card');
+			if (this.state.showOptoutOptions) {
+        this.iframeEl.classList.add('offer-card-optout-options');
+      }
 		}
 		this.rewardPictureEl = null;
 
@@ -118,7 +122,8 @@ class OfferCard extends Component {
 		}
 	}
 
-	copyCode() {
+
+	copyCode() { // eslint-disable-line react/sort-comp
 		this.props.actions.sendSignal('code_copied');
 
 		// 'copied' feedback for user
@@ -211,6 +216,21 @@ class OfferCard extends Component {
 		this.props.actions.sendSignal('offer_ca_action');
 	}
 
+  handleAcceptRewards = () => {
+    this.setState({ showOptoutOptions: false });
+		this.props.actions.messageBackground('rewardsPromptAccepted');
+    this.props.actions.messageBackground('rewardsPromptOptedIn');
+    this.props.actions.sendSignal('offer_first_optin');
+    sendMessage('ping', 'rewards_first_accept');
+  }
+
+  handleDeclineRewards = () => {
+    this.props.actions.sendSignal('offer_first_optout');
+    sendMessage('ping', 'rewards_first_reject_optout');
+    this.disableRewards();
+    this.closeOfferCard();
+  }
+
 	handleImageLoaded(e) {
 		e.target.classList.remove('hide');
 	}
@@ -233,6 +253,59 @@ class OfferCard extends Component {
 		return t(`rewards_expires_in_${type}`, [count]);
 	}
 
+  renderRewardsOptoutOptions() {
+    if (!this.state.showOptoutOptions) { return null; }
+    const href = 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/';
+    return (
+      <React.Fragment>
+        <div className="rewards-footer-optout-text">
+          {t('rewards_first_prompt')}
+          <a
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={() => {
+              this.props.actions.sendSignal('offer_first_learn');
+              sendMessage('ping', 'rewards_first_learn_more');
+            }}
+            href={href}
+          >
+            {t('rewards_learn_more')}
+          </a>
+        </div>
+        <div className="rewards-footer-optout-actions">
+          <span
+            className="rewards-footer-optout-actions-btn rewards-footer-optout-actions-yes"
+            onClick={this.handleAcceptRewards}
+          >
+            {t('rewards_yes')}
+          </span>
+          <span
+            className="rewards-footer-optout-actions-btn rewards-footer-optout-actions-no"
+            onClick={this.handleDeclineRewards}
+          >
+            {t('rewards_no')}
+          </span>
+        </div>
+      </React.Fragment>
+    );
+  }
+
+  renderFooter() {
+    return (
+      <div className="reward-footer">
+        <div className="reward-footer-top">
+          <div className="reward-feedback">
+            <div className="reward-smile" />
+            <a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
+            <div className="reward-arrow" />
+          </div>
+          <div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
+        </div>
+        {this.renderRewardsOptoutOptions()}
+      </div>
+    );
+  }
+
 	render() {
 		return (
 			// @TODO condition for hide class
@@ -312,14 +385,7 @@ class OfferCard extends Component {
 									{this.state.rewardUI.call_to_action.text}
 								</a>
 							</div>
-							<div className="reward-footer">
-								<div className="reward-feedback">
-									<div className="reward-smile" />
-									<a onClick={this.disableRewardsNotification}>{t('rewards_disable')}</a>
-									<div className="reward-arrow" />
-								</div>
-								<div className="reward-ghosty" style={{ backgroundImage: this.ghostyGrey }} />
-							</div>
+              {this.renderFooter()}
 						</div>
 						{ this.state.showPrompt === 1 &&
 							this.renderNotification(0)

app/content-scripts/rewards/index.jsx

@@ -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

@@ -34,6 +34,9 @@
 		width: 268px;
 		height: 531px;
 	}
+	&.offer-card.offer-card-optout-options {
+		height: 585px;
+	}
 }
 
 .ghostery-rewards-component {
@@ -321,37 +324,63 @@
 		}
 
 		.reward-footer {
-			display: flex;
-			height: 32px;
-
-			.reward-feedback {
-				flex: 2;
-				align-self: center;
-				margin-left: 8px;
-
-				.rewards-smiley {
-
-				}
-
-				.rewards-dd-arrow {
-
-				}
 
-				a {
-					cursor: pointer;
-					font-size: 12px;
-					color: #6A7E90;
-				}
-			}
-
-			.reward-ghosty {
-				flex: 1;
-				background-repeat: no-repeat;
-				background-position: center right;
-				height: 100%;
-				align-self: flex-end;
-				margin-right: 8px;
-			}
+      .reward-footer-top {
+        display: flex;
+			  height: 32px;
+
+        .reward-feedback {
+          flex: 2;
+          align-self: center;
+          margin-left: 8px;
+
+          a {
+            cursor: pointer;
+            font-size: 12px;
+            color: #6A7E90;
+          }
+        }
+
+        .reward-ghosty {
+          flex: 1;
+          background-repeat: no-repeat;
+          background-position: center right;
+          height: 100%;
+          align-self: flex-end;
+          margin-right: 8px;
+        }
+      }
+
+      .rewards-footer-optout-text {
+        font-size: 12px;
+        margin: 0 9px;
+        color: #6A7E90;
+        line-height: 18px;
+        a {
+          margin-left: 5px;
+        }
+      }
+
+      .rewards-footer-optout-actions {
+        font-size: 12px;
+        text-transform: uppercase;
+        text-align: right;
+        padding: 5px 9px;
+
+        .rewards-footer-optout-actions-btn {
+          color: #6A7E90;
+          margin-top: -8px;
+          padding: 5px 8px 5px 14px;
+          display: inline-block;
+          cursor: pointer;
+        }
+        .rewards-footer-optout-actions-btn.rewards-footer-optout-actions-yes {
+          font-weight: 700;
+        }
+        .rewards-footer-optout-actions-yes:hover {
+          color: #5B005C;
+        }
+      }
 		}
 	}