Merge pull request #379 from freelawproject/feat-adds-banner-to-the-o…

…ptions-page feat(toolbar): Implements logic to display gift badge icon
freelawproject · Jul 12, 2024 · 1cfc4ad · 1cfc4ad
2 parents 1aa237f + c3c0142
commit 1cfc4ad
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 24 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -14,6 +14,7 @@ Features:
 
 Changes:
  - Updates style and replace old logos with new ones([#378](https://github.com/freelawproject/recap-chrome/pull/378))
+ - Adds a badge to the extension icon and a banner in the options menu([#379](https://github.com/freelawproject/recap-chrome/pull/379))
 
 Fixes:
  - None yet

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -162,6 +162,37 @@ footer #version {
   justify-self: center;
 }
 
+#options-body .info-banner {
+  background-color: #D1E2F2;
+  border-color: #B3C9D9;
+  border-radius: 4px;
+  padding: 28px 20px;
+  margin-bottom: 10px;
+}
+
+#options-body #info-banner-message {
+  font-size: 16px;
+  color: #003569;
+}
+
+#options-body .banner-icon-container {
+  padding-top: 12.5px;
+  padding-right: 20px;
+  padding-bottom: 12.5px;
+}
+
+#options-body #banner-icon {
+  width: 30px;
+}
+
+#options-body #dismiss-banner {
+  padding-left: 20px;
+}
+
+#options-body #dismiss-banner button {
+  width: 16px;
+}
+
 /*
    CSS for styling content on PACER pages generated by the content script.
 */

diff --git a/src/background.js b/src/background.js
@@ -206,3 +206,14 @@ chrome.tabs.onUpdated.addListener(async function (tabId, details, tab) {
 chrome.tabs.onActivated.addListener(function(activeInfo){
   getTabById(activeInfo.tabId, updateToolbarButton);
 });
+
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.name === 'popup') {
+    port.onDisconnect.addListener(function () {
+      chrome.storage.local.get('options', function (items) {
+        items.options['dismiss_news_badge'] = true;
+        saveOptionsAndUpdateToolbar(items.options);
+      });
+    });
+  }
+});
diff --git a/src/content.js b/src/content.js
@@ -48,15 +48,17 @@ async function addRecapInformation(msg) {
     }
 
     const options = await getItemsFromStorage('options');
-    if ('dismiss_class_action_info' in options && options['dismiss_class_action_info']) {
+    if (
+      'login_dismiss_new_brand_info' in options &&
+      options['login_dismiss_new_brand_info']
+    ) {
       return;
     }
 
-    const variant = await getItemsFromStorage('variant');
-    const [bannerVariant, linkVariant] = variant.split('-');
-    PACER.addRecapBannerToLoginPage(
-      bannerMessages[bannerVariant], donateLinks[linkVariant]
-    );
+    let bannerMessage =
+      'Get ready for a new chapter! RECAP is getting a ' + 'fresh new look.';
+    let bannerLink = 'https://free.law/2024/07/05/new-branding-rip-flip';
+    PACER.addRecapBannerToLoginPage(bannerMessage, bannerLink);
 
     let dismiss_button = document.getElementById('dismiss_recap_info_banner');
     dismiss_button.addEventListener('click', async () => {
@@ -66,7 +68,7 @@ async function addRecapInformation(msg) {
 
     let learn_more_btn = document.getElementById('learn_more_btn');
     learn_more_btn.addEventListener('click', async () => {
-      await PACER.removeBannerFromLoginPage();
+      await PACER.removeBannerFromLoginPage(event_from_btn = true);
       return true;
     });
 

diff --git a/src/options.html b/src/options.html
@@ -9,26 +9,55 @@
 </head>
 
 <body id="options-body">
-  <div id="container" class="regular-grid">
+  <div id="container" class="grid-with-banner">
     <!-- Main Tab Content + Donation plea -->
     <header>
       <div class="d-flex flex-column">
-        <nav>
-          <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
-            <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
-              href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
-              RECAP Archive
-            </a>
-            <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
-              href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
-              Settings
-            </a>
-            <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
-              href="#nav-donate" aria-controls="nav-donate" aria-selected="false">
-              Donate
+        <div id="header-banner" class="info-banner d-flex flex-column">
+          <div id="message-section" class="d-flex">
+            <div class="flex align-items-center banner-icon-container">
+              <div id="banner-icon">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                  stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
+                </svg>
+              </div>
+            </div>
+            <p id="info-banner-message">
+              <b>Get ready for a new chapter!</b> RECAP is getting a fresh new look.
+            </p>
+            <div id="dismiss-banner" class="d-flex align-items-start justify-content-end">
+              <button type="button" class="close" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+          </div>
+          <div class="input-group-append d-flex justify-content-center">
+            <a class="btn btn-primary" id="learn-more-button" target="_blank" rel="noopener"
+              href="https://free.law/2024/07/05/new-branding-rip-flip">
+              &nbsp;Learn More
             </a>
           </div>
-        </nav>
+        </div>
+        <div>
+          <nav>
+            <div class="nav nav-tabs" id="nav-recap-tab" role="tablist">
+              <a id="nav-recap-tab" class="col-sm text-center nav-item nav-link active" data-toggle="tab" role="tab"
+                href="#nav-recap" aria-controls="nav-recap" aria-selected="true">
+                RECAP Archive
+              </a>
+              <a id="nav-settings-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
+                href="#nav-settings" aria-controls="nav-settings" aria-selected="false">
+                Settings
+              </a>
+              <a id="nav-donate-tab" class="col-sm text-center nav-item nav-link" data-toggle="tab" role="tab"
+                href="#nav-donate" aria-controls="nav-donate" aria-selected="false">
+                Donate
+              </a>
+            </div>
+          </nav>
+        </div>
       </div>
       <!-- Navigation Tabs -->
     </header>

diff --git a/src/options.js b/src/options.js
@@ -20,6 +20,7 @@ async function load_options() {
         inputs[i].value = items.options[inputs[i].id] || '';
       }
     }
+    if ('option_dismiss_new_brand_info' in items.options) removeInfoBanner();
   });
 }
 
@@ -34,6 +35,11 @@ function save_options() {
       }
     }
 
+    let banner = document.getElementById('header-banner');
+    if (!banner) {
+      options['option_dismiss_new_brand_info'] = true;
+    }
+
     chrome.storage.local.set({ options: options }, function () {
       chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         updateToolbarButton(tabs[0]);
@@ -124,4 +130,17 @@ function showHideReceiptsWarning (tabs){
 (function () {
   let ver = document.getElementById('version');
   ver.textContent = `(version ${chrome.runtime.getManifest().version})`;
+
+  let dismiss_button = document.querySelector('#dismiss-banner button');
+  if (dismiss_button) {
+    dismiss_button.addEventListener('click', function (e) {
+      removeInfoBanner();
+      save_options();
+    });
+  }
+
+  // Use the messaging APIs to set up a Port between the popup and background
+  // page. We should get a onDisconnect event in the background page when
+  // the popup goes away.
+  chrome.runtime.connect({ name: 'popup' });
 })();
diff --git a/src/pacer.js b/src/pacer.js
@@ -794,13 +794,17 @@ let PACER = {
     headerContainer.after(banner_div);
   },
 
-  removeBannerFromLoginPage: async () => {
+  removeBannerFromLoginPage: async (event_from_btn = false) => {
     // Updates user preferences and remove the information banner
     let info_banner = document.getElementById('recap_info_banner');
     info_banner.remove();
 
     let options = await getItemsFromStorage('options');
-    options['dismiss_class_action_info'] = true;
+    if (event_from_btn) {
+      options['option_dismiss_new_brand_info'] = true;
+      options['dismiss_news_badge'] = true;
+    }
+    options['login_dismiss_new_brand_info'] = true;
     saveItemToStorage({ options: options });
   },
 

diff --git a/src/toolbar_button.js b/src/toolbar_button.js
@@ -28,6 +28,15 @@ function updateToolbarButton(tab) {
   };
 
   chrome.storage.local.get('options', function(items){
+    if (
+      'dismiss_news_badge' in items['options'] &&
+      items['options']['dismiss_news_badge']
+    ) {
+      chrome.browserAction.setBadgeText({ text: '' });
+    } else {
+      chrome.browserAction.setBadgeText({ text: '🔔' });
+    }
+
     if (tab === null || tab === undefined) {
       // There's code in Firefox that can be called before the defaults are set
       // and before the tab is even established. Catch that, and handle it or