Update logic for publishers

Auditors: @mrose17, @bsclifton

Fix #7089
Fix #7429

app/renderer/components/publisherToggle.js

@@ -3,14 +3,15 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const tldjs = require('tldjs')
 const ImmutableComponent = require('../../../js/components/immutableComponent')
 const appActions = require('../../../js/actions/appActions')
 const settings = require('../../../js/constants/settings')
 const getSetting = require('../../../js/settings').getSetting
 const {StyleSheet, css} = require('aphrodite')
 const globalStyles = require('./styles/global')
 const commonStyles = require('./styles/commonStyles')
+const {getHostPattern, isHttpOrHttps} = require('../../../js/lib/urlutil')
+const {getBaseUrl} = require('../../../js/lib/appUrlUtil')
 
 const noFundVerifiedPublisherImage = require('../../extensions/brave/img/urlbar/browser_URL_fund_no_verified.svg')
 const fundVerifiedPublisherImage = require('../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg')
@@ -23,97 +24,89 @@ class PublisherToggle extends ImmutableComponent {
     this.onAuthorizePublisher = this.onAuthorizePublisher.bind(this)
   }
 
-  get publisherId () {
-// @cezaraugusto: publisherIds aren't limited to a domain name
-// when this runs, do you think that app/extensions/brave/content/scripts/pageInformation.js has already run?
-
-    return tldjs.getDomain(this.props.url)
+  get locationId () {
+    return getBaseUrl(this.props.location)
   }
 
-  get hostPattern () {
-    return `https?://${this.publisherId}`
+  get publisherId () {
+    return this.props.locationInfo.getIn([this.locationId, 'publisher'])
   }
 
   get hostSettings () {
-    // hostPattern defines it's own identifier for authorized publishers
-    // sites that do not match criteria would populate siteSettings
-    // with their default protocol, not hostPattern
-    return this.props.hostSettings.get(this.hostPattern)
+    const hostPattern = getHostPattern(this.publisherId)
+    return this.props.siteSettings.get(hostPattern)
   }
 
   get validPublisherSynopsis () {
-    // If session is clear then siteSettings is undefined and icon will never be shown,
-    // but synopsis may not be empty. In such cases let's check if synopsis matches current publisherId
-    return this.props.synopsis.map(entry => entry.get('site')).includes(this.publisherId)
+    // If session is clear then siteSettings is undefined and icon
+    // will never be shown, but synopsis may not be empty.
+    // In such cases let's check if synopsis matches current publisherId
+    return !!this.props.synopsis.map(entry => entry.get('site')).includes(this.publisherId)
   }
 
-  get authorizedPublisher () {
-    // If we can't get ledgerPayments, then it's likely that we are
-    // on a clean session. Let's then check for publisher's synopsis
+  get enabledForPaymentsPublisher () {
+    // All publishers will be enabled by default if AUTO_SUGGEST is ON,
+    // excluding publishers defined on ledger's exclusion list
+    const excluded = this.props.locationInfo.getIn([this.locationId, 'exclude'])
+    const autoSuggestSites = getSetting(settings.AUTO_SUGGEST_SITES)
+
+      // hostSettings is undefined until user hit addFunds button.
+      // For such cases check autoSuggestSites for eligibility.
     return this.hostSettings
       ? this.hostSettings.get('ledgerPayments') !== false
-      : this.validPublisherSynopsis
+      : this.validPublisherSynopsis || (autoSuggestSites && !excluded)
   }
 
   get verifiedPublisher () {
-// @cezaraugusto: should call `verifiedP` in ledger.js and return the 2nd parameter of the callback
-
-    let verifiedPublisher
-    this.props.synopsis.map(publisher => {
-      if (publisher.get('site') === this.publisherId && publisher.get('verified') === true) {
-        verifiedPublisher = !!publisher
-        return false
-      }
-      return true
-    })
-    return verifiedPublisher
+    return this.props.locationInfo.getIn([this.locationId, 'verified'])
   }
 
   get visiblePublisher () {
-    // ledgerPaymentsShown is undefined by default until user decide to permanently hide the publisher
+    // ledgerPaymentsShown is undefined by default until
+    // user decide to permanently hide the publisher,
     // so for icon to be shown it can be everything but false
     const ledgerPaymentsShown = this.hostSettings && this.hostSettings.get('ledgerPaymentsShown')
-    return ledgerPaymentsShown !== false
+    return typeof ledgerPaymentsShown === 'boolean'
+      ? ledgerPaymentsShown
+      : true
   }
 
   get shouldShowAddPublisherButton () {
-    if ((!!this.hostSettings || !!this.validPublisherSynopsis) && this.visiblePublisher) {
-      // Only show publisher icon if ledger is enabled
-      return getSetting(settings.PAYMENTS_ENABLED)
-    }
-    return false
+    return getSetting(settings.PAYMENTS_ENABLED) &&
+      isHttpOrHttps(this.props.location) &&
+      this.visiblePublisher
   }
 
   get l10nString () {
-    if (this.verifiedPublisher && !this.authorizedPublisher) {
-      return 'verifiedPublisher'
-    } else if (this.authorizedPublisher) {
-      return 'enabledPublisher'
+    let l10nData = 'disabledPublisher'
+    if (this.verifiedPublisher && !this.enabledForPaymentsPublisher) {
+      l10nData = 'verifiedPublisher'
+    } else if (this.enabledForPaymentsPublisher) {
+      l10nData = 'enabledPublisher'
     }
-    return 'disabledPublisher'
+    return l10nData
   }
 
   onAuthorizePublisher () {
-    this.authorizedPublisher
-      ? appActions.changeSiteSetting(this.hostPattern, 'ledgerPayments', false)
-      : appActions.changeSiteSetting(this.hostPattern, 'ledgerPayments', true)
+    const hostPattern = getHostPattern(this.publisherId)
+    appActions.changeSiteSetting(hostPattern, 'ledgerPayments', !this.enabledForPaymentsPublisher)
   }
 
   render () {
     return this.shouldShowAddPublisherButton
       ? <span
         data-test-id='publisherButton'
-        data-test-authorized={this.authorizedPublisher}
+        data-test-authorized={this.enabledForPaymentsPublisher}
         data-test-verified={this.verifiedPublisher}
         className={css(styles.addPublisherButtonContainer)}>
         <button
           className={
           css(
             commonStyles.browserButton,
-            !this.authorizedPublisher && this.verifiedPublisher && styles.noFundVerified,
-            this.authorizedPublisher && this.verifiedPublisher && styles.fundVerified,
-            !this.authorizedPublisher && !this.verifiedPublisher && styles.noFundUnverified,
-            this.authorizedPublisher && !this.verifiedPublisher && styles.fundUnverified
+            !this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.noFundVerified,
+            this.enabledForPaymentsPublisher && this.verifiedPublisher && styles.fundVerified,
+            !this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.noFundUnverified,
+            this.enabledForPaymentsPublisher && !this.verifiedPublisher && styles.fundUnverified
             )
           }
           data-l10n-id={this.l10nString}

js/components/main.js

@@ -1014,6 +1014,7 @@ class Main extends ImmutableComponent {
                 siteSettings={this.props.appState.get('siteSettings')}
                 synopsis={this.props.appState.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()}
                 activeTabShowingMessageBox={activeTabShowingMessageBox}
+                locationInfo={this.props.appState.get('locationInfo')}
               />
               <div className='topLevelEndButtons'>
                 <div className={cx({

js/components/navigationBar.js

@@ -5,7 +5,6 @@
 const React = require('react')
 const Immutable = require('immutable')
 const ImmutableComponent = require('./immutableComponent')
-const tldjs = require('tldjs')
 
 const cx = require('../lib/classSet')
 const Button = require('./button')
@@ -16,7 +15,7 @@ const siteTags = require('../constants/siteTags')
 const messages = require('../constants/messages')
 const settings = require('../constants/settings')
 const ipc = require('electron').ipcRenderer
-const {isSourceAboutUrl} = require('../lib/appUrlUtil')
+const {isSourceAboutUrl, getBaseUrl} = require('../lib/appUrlUtil')
 const AddEditBookmarkHanger = require('../../app/renderer/components/addEditBookmarkHanger')
 const siteUtil = require('../state/siteUtil')
 const eventUtil = require('../lib/eventUtil')
@@ -115,16 +114,27 @@ class NavigationBar extends ImmutableComponent {
       )
   }
 
-  get isPublisherButtonEnabled () {
-    const domain = tldjs.getDomain(this.props.location)
-    const hostSettings = this.props.siteSettings.get(`https?://${domain}`)
-    const visiblePublisher = hostSettings && hostSettings.get('ledgerPaymentsShown')
-    const validPublisherSynopsis = this.props.synopsis.map(entry => entry.get('site')).includes(domain)
+  get locationId () {
+    return getBaseUrl(this.props.location)
+  }
+
+  get publisherId () {
+    return this.props.locationInfo.getIn([this.locationId, 'publisher']) || ''
+  }
 
-    if ((hostSettings || validPublisherSynopsis) && visiblePublisher !== false) {
-      return getSetting(settings.PAYMENTS_ENABLED) && !isSourceAboutUrl(this.props.location)
+  get visiblePublisher () {
+    // No publisher is visible if ledger is disabled
+    if (!getSetting(settings.PAYMENTS_ENABLED)) {
+      return false
     }
-    return false
+    const hostPattern = UrlUtil.getHostPattern(this.publisherId)
+    const hostSettings = this.props.siteSettings.get(hostPattern)
+    const ledgerPaymentsShown = hostSettings && hostSettings.get('ledgerPaymentsShown')
+    return ledgerPaymentsShown !== false
+  }
+
+  get isPublisherButtonEnabled () {
+    getSetting(settings.PAYMENTS_ENABLED) && this.visiblePublisher
   }
 
   componentDidMount () {
@@ -239,8 +249,9 @@ class NavigationBar extends ImmutableComponent {
         : <div className='endButtons'>
           {
             <PublisherToggle
-              url={this.props.location}
-              hostSettings={this.props.siteSettings}
+              location={this.props.location}
+              locationInfo={this.props.locationInfo}
+              siteSettings={this.props.siteSettings}
               synopsis={this.props.synopsis}
             />
           }

js/lib/urlutil.js

@@ -344,6 +344,24 @@ const UrlUtil = {
     } catch (e) {
       return url
     }
+  },
+
+  /**
+   * Gets the hostPattern from an URL.
+   * @param {string} url The URL to get the hostPattern from
+   * @return {string} url The URL formmatted as an hostPattern
+   */
+  getHostPattern: function (url) {
+    return `https?://${url}`
+  },
+
+  /**
+   * Checks if URL is based on http protocol.
+   * @param {string} url The URL to get the hostPattern from
+   * @return {string} url The URL formmatted as an hostPattern
+   */
+  isHttpOrHttps: function (url) {
+    return url.startsWith('https://') || url.startsWith('http://')
   }
 }