From 58647780d83f9248370c20123cab50adee253daf Mon Sep 17 00:00:00 2001 From: Aleksandr Panin Date: Fri, 11 Oct 2019 11:59:56 +0200 Subject: [PATCH 01/40] M20-52: first proto for myoffrz rewards --- _locales/en/messages.json | 22 +++++++ app/panel/components/Detail.jsx | 6 +- app/panel/components/Rewards.jsx | 103 ++++++++++++++++++++++++++++--- app/scss/partials/_detail.scss | 4 ++ app/scss/partials/_rewards.scss | 2 +- manifest.json | 3 +- 6 files changed, 130 insertions(+), 10 deletions(-) diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 44bf41409..24a00cc61 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1993,9 +1993,31 @@ "ghostery_rewards": { "message": "ghostery rewards" }, + + "OFFERS_BEGIN": { + "message": "" + }, + "affiliate_link": { + "message": "affiliate link" + }, + "why_offers_text": { + "message": "No personal data leaves your device. Your browser automatically identifies what you might be interested in based on your previous use. " + }, + "offers_hub_welcome_text": { + "message": "As you browse the Internet, we are searching for attractive offers based on your interests." + }, + "offers_hub_welcome_title": { + "message": "Hello!" + }, + "OFFERS_ENDS": { + "message": "" + }, + "enhanced_anti_tracking": { "message": "Enhanced Anti-Tracking" }, + + "unknown": { "message": "Unknown" }, diff --git a/app/panel/components/Detail.jsx b/app/panel/components/Detail.jsx index 662cead77..8f0246322 100644 --- a/app/panel/components/Detail.jsx +++ b/app/panel/components/Detail.jsx @@ -66,10 +66,14 @@ class Detail extends React.Component { const { enable_offers, unread_offer_ids } = this.props; const activeTab = this.props.history.location.pathname.includes('rewards') ? 'rewards' : 'blocking'; + const contentDetailsClassNames = ClassNames({ + expanded: this.props.is_expanded, + rewardsView: activeTab === 'rewards', + }); return (
-
+
diff --git a/app/panel/components/Rewards.jsx b/app/panel/components/Rewards.jsx index 8ba483f27..6d43162b2 100644 --- a/app/panel/components/Rewards.jsx +++ b/app/panel/components/Rewards.jsx @@ -34,6 +34,10 @@ class Rewards extends React.Component { super(props); this.state = { rewardsArray: null, + iframeWidth: 0, + iframeHeight: 0, + rewardsBoxIsEmpty: false, + rewardsCount: 0, }; // event bindings @@ -45,6 +49,10 @@ class Rewards extends React.Component { this.handleBackClick = this.handleBackClick.bind(this); this.handleFaqClick = this.handleFaqClick.bind(this); this.handlePortMessage = this.handlePortMessage.bind(this); + + // myoffrz + this.iframe = React.createRef(); + this.handleMyoffrzMessage = this.handleMyoffrzMessage.bind(this); } /** @@ -56,6 +64,7 @@ class Rewards extends React.Component { this._dynamicUIPort.postMessage({ name: 'RewardsComponentDidMount' }); this.props.actions.sendSignal('hub_open'); + window.addEventListener('message', this.handleMyoffrzMessage); } /** @@ -97,6 +106,7 @@ class Rewards extends React.Component { this._dynamicUIPort.postMessage({ name: 'RewardsComponentWillUnmount' }); this._dynamicUIPort.onMessage.removeListener(this.handlePortMessage); + window.removeEventListener('message', this.handleMyoffrzMessage); } /** @@ -108,6 +118,41 @@ class Rewards extends React.Component { this.props.actions.updateRewardsData(msg.body); } + iframeResize(data = {}) { + const { width = 0, height = 0 } = data; + this.setState({ iframeWidth: width, iframeHeight: height }); + } + + sendToIframe(message) { + this.iframe.current.contentWindow.postMessage(JSON.stringify({ + target: 'cliqz-offers-cc', + origin: 'window', + message, + }), '*'); + } + + myoffrzSendRuntimeMessage({ message, target }) { + chrome.runtime.sendMessage({ message, target }, (result = {}) => { + console.log('XXXXX result', result, this.iframe); + if (result.action !== 'pushData' || !this.iframe.current) { return; } + const { data: { vouchers = [] } = {} } = result; + const rewardsCount = vouchers.length; + this.setState({ rewardsBoxIsEmpty: rewardsCount === 0, rewardsCount }); + this.iframe.current.frameBorder = 0; + this.sendToIframe(result); + }); + } + + handleMyoffrzMessage(msg = {}) { + const { target, message = {} } = JSON.parse(msg.data || '{}'); + if (target !== 'cliqz-offers-cc') { return; } + if (message.action === 'resize') { + this.iframeResize(message.data); + } else { + this.myoffrzSendRuntimeMessage({ message, target }); + } + } + /** * Handles clicking the back button */ @@ -214,9 +259,6 @@ class Rewards extends React.Component { * @return {JSX} JSX for the Rewards Items List */ renderRewardListComponent() { - const { actions, enable_offers, is_expanded } = this.props; - const { rewardsArray } = this.state; - if (IS_CLIQZ) { return (
@@ -229,22 +271,67 @@ class Rewards extends React.Component {
); } - if (enable_offers && !rewardsArray) { + + if (this.props.enable_offers && this.state.rewardsBoxIsEmpty) { return (
{ this.renderRewardSvg() } -
{ t('panel_detail_rewards_loading') }
+
{ t('panel_detail_rewards_none_found') }
); } - if (enable_offers && rewardsArray.length === 0) { + + if (true) { + const { iframeWidth, iframeHeight } = this.state; + const src = chrome.runtime.getURL('cliqz/offers-cc/index.html?cross-origin'); + return ( + <> + {this.props.is_expanded && ( +
+
+ {this.state.rewardsCount} +
+
+ {this.state.rewardsCount === 1 ? 'Reward' : 'Rewards'} +
+
+ )} +