diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 3207182c0..65b1786c2 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -2006,9 +2006,21 @@ "rewards_delete": { "message": "Delete this reward" }, + "rewards_exclusive": { + "message": "exclusive" + }, + "rewards_best_offer": { + "message": "best offer" + }, "rewards_first_prompt": { "message": "Would you like to continue to your Ghostery Reward?" }, + "rewards_first_prompt_extended": { + "message": "Would you like to receive offers and discounts from trusted Ghostery partners?" + }, + "rewards_first_prompt_headline": { + "message": "New Reward discovered!" + }, "rewards_second_prompt": { "message": "Would you like to opt out of future Ghostery Rewards?" }, diff --git a/app/content-scripts/rewards/Notification.jsx b/app/content-scripts/rewards/Notification.jsx index f75aa52df..9c98a3352 100644 --- a/app/content-scripts/rewards/Notification.jsx +++ b/app/content-scripts/rewards/Notification.jsx @@ -37,6 +37,58 @@ class Notification extends Component { } } + renderOptoutImage() { + return ( +
+ +
+ ); + } + + renderOptoutLink() { + return ( + this.props.data.textLink.callback()} + > + {this.props.data.textLink.text} + + ); + } + + renderHeadline() { + return ( +
+ {t('rewards_first_prompt_headline')} +
+ ); + } + + renderLabels() { + return ( +
+ + {t('rewards_exclusive')} + + {t('rewards_best_offer')} +
+ ); + } + + renderClose() { + return ( +
{ this.closeNotification(); }} + style={{ backgroundImage: this.closeIcon }} + /> + ); + } + render() { return (
@@ -45,12 +97,17 @@ class Notification extends Component {
-
{ this.closeNotification(); }} style={{ backgroundImage: this.closeIcon }} /> -
+ {this.props.data.type === 'first-prompt' && this.renderOptoutImage()} + {this.props.data.type !== 'first-prompt' && this.renderClose()} +
+ {this.props.data.type === 'first-prompt' && this.renderLabels()} + {this.props.data.type === 'first-prompt' && this.renderHeadline()} {this.props.data.message} + {' '} + {this.props.data.type === 'first-prompt' && this.renderOptoutLink()}
{this.props.data.buttons && ( -
+
@@ -59,21 +116,23 @@ class Notification extends Component {
)} - {this.props.data.textLink && ( - { - if (this.props.data.textLink.callback) { - this.props.data.textLink.callback(); - } - }} - > - {this.props.data.textLink.text} - - )} + {this.props.data.textLink && this.props.data.type !== 'first-prompt' + && ( + { + if (this.props.data.textLink.callback) { + this.props.data.textLink.callback(); + } + }} + > + {this.props.data.textLink.text} + + ) + }
diff --git a/app/content-scripts/rewards/OfferCard.jsx b/app/content-scripts/rewards/OfferCard.jsx index 6bdae3f6c..f6f45792f 100644 --- a/app/content-scripts/rewards/OfferCard.jsx +++ b/app/content-scripts/rewards/OfferCard.jsx @@ -41,6 +41,7 @@ class OfferCard extends Component { showPrompt: this.props.conf.rewardsPromptAccepted ? false : 1, showSettings: false, rewardUI: templateData, + shouldShowCross: this.props.conf.rewardsPromptAccepted, }; this.iframeEl = window.parent.document.getElementById('ghostery-iframe-container'); @@ -55,6 +56,7 @@ class OfferCard extends Component { 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.poweredByMyoffrz = `url(${chrome.extension.getURL('app/images/rewards/powered-by-myoffrz.svg')})`; this.closeOfferCard = this.closeOfferCard.bind(this); this.copyCode = this.copyCode.bind(this); @@ -69,7 +71,7 @@ class OfferCard extends Component { { type: 'first-prompt', buttons: true, - message: t('rewards_first_prompt'), + message: t('rewards_first_prompt_extended'), textLink: { href: 'https://www.ghostery.com/faqs/what-is-ghostery-rewards/', text: t('rewards_learn_more'), @@ -167,12 +169,15 @@ 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 - }); + reject(); return; } this.props.actions.messageBackground('rewardsPromptOptedIn'); @@ -180,10 +185,7 @@ class OfferCard extends Component { 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'); @@ -191,7 +193,8 @@ class OfferCard extends Component { this.closeOfferCard(); } this.setState({ - showPrompt: false + showPrompt: false, + shouldShowCross: true, }); this.props.actions.messageBackground('rewardsPromptAccepted'); } @@ -233,20 +236,26 @@ class OfferCard extends Component { return t(`rewards_expires_in_${type}`, [count]); } + renderCross() { + return ( +
{ this.props.actions.sendSignal('offer_closed_card'); this.closeOfferCard(); }} + style={{ backgroundImage: this.closeIcon }} + /> + ); + } + render() { return ( // @TODO condition for hide class -
{ this.offerCardRef = ref; }} className="ghostery-rewards-component"> +
{ this.offerCardRef = ref; }} className="ghostery-rewards-component"> { this.state.closed !== true && (
-
{ this.props.actions.sendSignal('offer_closed_card'); this.closeOfferCard(); }} - style={{ backgroundImage: this.closeIcon }} - /> + {this.state.shouldShowCross && this.renderCross()}
@@ -315,10 +324,22 @@ class OfferCard extends Component {
+ {this.props.conf.rewardsPromptAccepted && {t('rewards_disable')} + }
- { this.state.showPrompt === 1 && diff --git a/app/content-scripts/rewards/index.jsx b/app/content-scripts/rewards/index.jsx index 0d90e2377..59cc90db1 100644 --- a/app/content-scripts/rewards/index.jsx +++ b/app/content-scripts/rewards/index.jsx @@ -130,7 +130,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'; @@ -149,7 +148,7 @@ class RewardsApp { exact path="/" render={ - () => + () => } /> + + + best-offer-icon13x12 + Created with Sketch. + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/rewards/exclusive.svg b/app/images/rewards/exclusive.svg new file mode 100644 index 000000000..61bb751d5 --- /dev/null +++ b/app/images/rewards/exclusive.svg @@ -0,0 +1,31 @@ + + + + exclusive-icon13x12 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/images/rewards/ghostery_O.png b/app/images/rewards/ghostery_O.png new file mode 100644 index 000000000..40bb85692 Binary files /dev/null and b/app/images/rewards/ghostery_O.png differ diff --git a/app/images/rewards/powered-by-myoffrz.svg b/app/images/rewards/powered-by-myoffrz.svg new file mode 100644 index 000000000..26f202dd8 --- /dev/null +++ b/app/images/rewards/powered-by-myoffrz.svg @@ -0,0 +1,21 @@ + + + + powered_by + Created with Sketch. + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/app/scss/rewards.scss b/app/scss/rewards.scss index 49fcfd34a..3980001b5 100644 --- a/app/scss/rewards.scss +++ b/app/scss/rewards.scss @@ -37,9 +37,10 @@ } .ghostery-rewards-component { + opacity: 1 !important; * { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } .hide { @@ -344,6 +345,11 @@ } } + .reward-powered-by-myoffrz { + width: 98px; + cursor: pointer; + } + .reward-ghosty { flex: 1; background-repeat: no-repeat; @@ -410,8 +416,30 @@ .rewards-notification-container { position: absolute; top: 0; + right: 0; width: 100%; height: 100%; + max-height: 600px; + max-width: 300px; + animation: fadein 0.5s; + -webkit-animation: fadein 0.5s; + + @keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } + } + @-webkit-keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } + } + + + .rewards-notification-optout-image-wrapper { + height: 80%; + img { + width: 100%; + } + } .rewards-notification { margin-top: 17px; @@ -428,6 +456,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 +468,41 @@ margin: 0px 22px 0px 22px; } + .notification-text.first-prompt { + margin: unset; + padding-left: 16px; + text-align: left; + line-height: 20px; + height: 100%; + overflow: hidden; + + .first-prompt-labels { + font-size: 9px; + img { + margin-bottom: -2px; + } + } + + .first-prompt-label { + text-transform: uppercase; + color: silver; + padding-left: 3px; + padding-right: 6px; + } + + .first-prompt-headline { + color: $dark-purple; + font-size: 14px; + font-weight: 700; + padding-top: 11px; + padding-bottom: 5px; + } + + a { + color: black; + } + } + a { text-decoration: underline; cursor: pointer; @@ -461,6 +527,31 @@ border-radius: 3px; text-transform: uppercase; } + &.first-prompt { + .btn { + width: 104px; + } + button { + &:nth-child(1) { + background-color: $dark-purple; + color: $white; + &:hover { + background-color: $dark-purple; + color: $white; + } + } + &:nth-child(2) { + border: 1px solid $dark-purple; + background-color: transparent; + color: $dark-purple; + &:hover { + border: 1px solid $dark-purple; + background-color: transparent; + color: $dark-purple; + } + } + } + } button { cursor: pointer; font-weight: bold;