in-house ad refactoring

apps/block_scout_web/assets/js/lib/ad.js

@@ -1,4 +1,5 @@
 import $ from 'jquery'
+import customAds from './custom_ad'
 
 function countImpressions (impressionUrl) {
   if (impressionUrl) {
@@ -8,57 +9,73 @@ function countImpressions (impressionUrl) {
 
 function showAd () {
   const domainName = window.location.hostname
-  if (domainName === 'blockscout.com') {
+  if (domainName === 'test.blockscout.com') {
     $('.js-ad-dependant-mb-2').addClass('mb-2')
     $('.js-ad-dependant-mb-3').addClass('mb-3')
-    $('.js-ad-dependant-pt').addClass('pt-4')
-    $('.js-ad-dependant-pt').removeClass('pt-5')
     return true
   } else {
     $('.js-ad-dependant-mb-2').removeClass('mb-2')
     $('.js-ad-dependant-mb-3').removeClass('mb-3')
+    return false
+  }
+}
+
+function adjustPaddingForTextAd (showAd, data) {
+  if (showAd && data) {
+    $('.js-ad-dependant-pt').addClass('pt-4')
+    $('.js-ad-dependant-pt').removeClass('pt-5')
+  } else {
     $('.js-ad-dependant-pt').addClass('pt-5')
     $('.js-ad-dependant-pt').removeClass('pt-4')
-    return false
   }
 }
 
-function getTextAdData (customAds) {
+function getTextAdData () {
   return new Promise((resolve) => {
-    if (showAd()) {
+    const displayAd = showAd()
+    if (displayAd) {
       $.get('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', function (data) {
         if (!data) {
-          if (customAds) {
+          if (customAds && customAds.length > 0) {
             try {
-              data = JSON.parse(customAds)
-              const ind = getRandomInt(0, data.length)
-              resolve(data[ind])
+              const ind = getRandomInt(0, customAds.length)
+              const inHouse = true
+              adjustPaddingForTextAd(displayAd, true)
+              resolve({ data: customAds[ind], inHouse: inHouse })
             } catch (_e) {
-              resolve(null)
+              adjustPaddingForTextAd(displayAd, false)
+              resolve({ data: null, inHouse: null })
             }
           } else {
-            resolve(null)
+            adjustPaddingForTextAd(displayAd, false)
+            resolve({ data: null, inHouse: null })
           }
         } else {
-          resolve(data)
+          const inHouse = false
+          adjustPaddingForTextAd(displayAd, true)
+          resolve({ data: data, inHouse: inHouse })
         }
       })
     } else {
-      resolve(null)
+      adjustPaddingForTextAd(displayAd, false)
+      resolve({ data: null, inHouse: null })
     }
   })
 }
 
-function fetchTextAdData (customAds) {
+function fetchTextAdData () {
   if (showAd()) {
-    getTextAdData(customAds)
-      .then(data => {
+    getTextAdData()
+      .then(({ data, inHouse }) => {
         if (data) {
+          const prefix = inHouse ? 'Featured' : 'Sponsored'
           const { ad: { name, description_short: descriptionShort, thumbnail, url, cta_button: ctaButton, impressionUrl } } = data
           $('.ad-name').text(name)
           $('.ad-short-description').text(descriptionShort)
           $('.ad-cta-button').text(ctaButton)
           $('.ad-url').attr('href', url)
+          $('.ad-prefix').text(prefix)
+          $('.ad').show()
           const urlObject = new URL(url)
           if (urlObject.hostname === 'nifty.ink') {
             $('.ad-img-url').replaceWith('🎨')

apps/block_scout_web/assets/js/lib/autocomplete.js

@@ -2,8 +2,6 @@ import AutoComplete from '@tarekraafat/autocomplete.js/dist/autoComplete.js'
 import { getTextAdData, fetchTextAdData } from './ad.js'
 import { DateTime } from 'luxon'
 
-const customAds = process.env.CUSTOM_ADS
-
 const placeHolder = 'Search by address, token symbol, name, transaction hash, or block number'
 const dataSrc = async (query, id) => {
   try {
@@ -30,8 +28,8 @@ const dataSrc = async (query, id) => {
 const resultsListElement = (list, data) => {
   const info = document.createElement('p')
   const adv = `
-  <div class="ad mb-3">
-    Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
+  <div class="ad mb-3" style="display: none;">
+  <span class='ad-prefix'></span>: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
   </div>`
   info.innerHTML = adv
   if (data.results.length > 0) {
@@ -42,7 +40,7 @@ const resultsListElement = (list, data) => {
 
   list.prepend(info)
 
-  fetchTextAdData(customAds)
+  fetchTextAdData()
 }
 const searchEngine = (query, record) => {
   if (record.name.toLowerCase().includes(query.toLowerCase()) ||
@@ -139,8 +137,8 @@ const openOnFocus = (event, type) => {
       autoCompleteJSMobile.start(query)
     }
   } else {
-    getTextAdData(customAds)
-      .then(adData => {
+    getTextAdData()
+      .then(({ data: adData, inHouse: _inHouse }) => {
         if (adData) {
           if (type === 'desktop') {
             autoCompleteJS.start('###')

apps/block_scout_web/assets/js/lib/custom_ad.json

@@ -0,0 +1 @@
+[]

apps/block_scout_web/assets/js/lib/text_ad.js

@@ -1,10 +1,8 @@
 import $ from 'jquery'
 import { showAd, fetchTextAdData } from './ad.js'
 
-const customAds = process.env.CUSTOM_ADS
-
 $(function () {
   if (showAd()) {
-    fetchTextAdData(customAds)
+    fetchTextAdData()
   }
 })

apps/block_scout_web/assets/js/pages/layout.js

@@ -22,7 +22,6 @@ $(document).on('keyup', function (event) {
 
 $('.main-search-autocomplete').on('keyup', function (event) {
   if (event.key === 'Enter') {
-    console.log($('li[id^="autoComplete_result_"]'))
     var selected = false
     $('li[id^="autoComplete_result_"]').each(function () {
       if ($(this).attr('aria-selected')) {

apps/block_scout_web/assets/webpack.config.js

@@ -171,8 +171,7 @@ const appJs =
       ),
       new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
       new webpack.DefinePlugin({
-        'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT),
-        'process.env.CUSTOM_ADS': JSON.stringify(process.env.CUSTOM_ADS)
+        'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT)
       }),
       new webpack.ProvidePlugin({
         process: 'process/browser',

apps/block_scout_web/lib/block_scout_web/templates/advertisement/text_ad/index.html.eex

@@ -1,4 +1,4 @@
 <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/text_ad.js") %>"></script>
-<div class="ad mb-3">
-Sponsored: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
+<div class="ad mb-3" style="display: none;">
+<span class='ad-prefix'></span>: <img class="ad-img-url" width=20 height=20 /> <b><span class="ad-name"></span></b> - <span class="ad-short-description"></span> <a class="ad-url"><b><span class="ad-cta-button"></span></a></b>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -188,7 +188,7 @@
       <% end %>
       <%= render BlockScoutWeb.LayoutView, "_topnav.html", assigns %>
 
-      <main class="js-ad-dependant-pt pt-4">
+      <main class="js-ad-dependant-pt pt-5">
         <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
         <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
         <%= @inner_content %>