only request payment for ads that are rendered in the browser

chrome/browser/resources/millix/millix_bar.html

@@ -217,7 +217,7 @@
       </div>
       <div id="ads_holder h-50 pt-7" class="col-8 m-0 ads-slider">
           <span><a id="advertisement_headline"></a></span>
-          <span><a id="advertisement_target_phrase"></a></span>
+          <span><a id="advertisement_deck"></a></span>
       </div>
     </div>
   </div>

chrome/browser/resources/millix/millix_bar.js

@@ -63,7 +63,7 @@ cr.define('millix_bar', function () {
 
     function showNewAdvertisement(advertisement) {
         const $headline = $('#advertisement_headline');
-        const $targetPhrase = $('#advertisement_target_phrase');
+        const $targetPhrase = $('#advertisement_deck');
         if (!advertisement) {
             $headline.text('');
             $targetPhrase.text('');
@@ -77,20 +77,40 @@ cr.define('millix_bar', function () {
             $headline.off('click');
             $targetPhrase.off('click');
         } else {
+            
+            if($(".arrow-icon").hasClass('open')) { //ads container not visible
+                return;
+            }
 
-            let domain = new URL(advertisement.advertisement_url).host;
-            if(domain.startsWith("www.")) {
+            let domain;
+            try {
+                domain = new URL(advertisement.advertisement_url).host;
+            } catch (e) {
+                console.error("invalid advertisement url", e);
+                return;
+            }
+
+            if (domain.startsWith("www.")) {
                 domain = domain.substring(4);
             }
 
+            let hasHeadline = false;
+            let hasDeck = false;
+
             advertisement.attributes.forEach(attribute => {
-                if (attribute.attribute_type === "advertisement_headline") {
+                if (attribute.attribute_type === "advertisement_headline" && attribute.value != undefined) {
+                    hasHeadline = true;
                     $headline.text(attribute.value);
-                } else if (attribute.attribute_type === "target_phrase") {
+                } else if (attribute.attribute_type === "advertisement_deck" && attribute.value != undefined) {
+                    hasDeck = true;
                     $targetPhrase.text(`${attribute.value} - ${domain}`);
                 }
             });
-            
+
+            if(!hasHeadline || !hasDeck) {
+                return showNewAdvertisement(null); //hide advertisement
+            }
+
             $headline.prop("href", advertisement.advertisement_url);
             $targetPhrase.prop("href", advertisement.advertisement_url);
 
@@ -101,6 +121,10 @@ cr.define('millix_bar', function () {
             $targetPhrase.off('click');
             $headline.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
             $targetPhrase.on('click', () => chrome.send('showMillixWallet', ['new_tab', advertisement.advertisement_url]));
+            millixAPIFrame.contentWindow.postMessage({
+                type: 'request_advertisement_payment',
+                advertisement_guid: advertisement.advertisement_guid
+            }, 'chrome-untrusted://millix-ws/');
         }
     }
 

chrome/browser/resources/millix/millix_ws.js

@@ -165,10 +165,20 @@ class _API {
         try {
             return fetch(this.getTangledURL() + '/LMCqwVXTLS7VRWPT')
                 .then(response => response.json());
-        }catch(e) {
+        } catch (e) {
             return Promise.reject(e)
         }
     }
+
+    requestAdvertisementPayment(advertisementGUID) {
+        try {
+            return fetch(this.getTangledURL() + `/QYEgbWuFZs5s7Kud?p0=${advertisementGUID}`)
+                .then(response => response.ok ? response.json() : Promise.reject());
+        }
+        catch (e) {
+            return Promise.reject(e);
+        }
+    }
 }
 
 const API = new _API();
@@ -253,10 +263,14 @@ window.addEventListener('message', ({ data }) => {
                 readStatHandlerID = null;
             }
             break;
-            case 'get_next_tangled_advertisement':
-                API.getNextAdvertisementToRender()
+        case 'get_next_tangled_advertisement':
+            API.getNextAdvertisementToRender()
                 .then(data => window.parent.postMessage({ type: 'next_tangled_advertisement', data }, 'tangled://millix-bar'));
-                break;
+            break;
+        case 'request_advertisement_payment':
+            API.requestAdvertisementPayment(data.advertisement_guid)
+                .then(_=>_);
+            break;
         case 'api_check':
             if (!apiCheckHandlerID) {
                 apiCheck();

chrome/browser/resources/settings/people_page/sync_page.html

@@ -210,11 +210,6 @@
     <settings-personalization-options class="list-frame" prefs="{{prefs}}"
         page-visibility="[[pageVisibility]]" sync-status="[[syncStatus]]">
     </settings-personalization-options>
-    <div class="cr-row">
-      <h2 class="cr-text">
-        Load millix wallet here... (TODO)
-      </h2>
-    </div>
 
 <if expr="not chromeos">
     <template is="dom-if" if="[[showSetupCancelDialog_]]" restamp>