Merge pull request #365 from freelawproject/367-feat-display-variants…

…-of-the-info-banner feat(popup): Adds logic to display variants of the banner
freelawproject · Apr 4, 2024 · c14abab · c14abab
2 parents fb77b32 + 95b1ad8
commit c14abab
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -9,6 +9,7 @@ Features:
 
 Changes:
  - Adds a badge to the extension icon and a banner in the popup to link users to a donate page with information about the pacer class action([#367](https://github.com/freelawproject/recap/issues/367), [#364](https://github.com/freelawproject/recap-chrome/pull/364)).
+ - Adds logic to display variants of the new banner component([#365](https://github.com/freelawproject/recap-chrome/pull/365))
  - Fix setBadgeText type error([#366](https://github.com/freelawproject/recap-chrome/pull/366)).
 
 Fixes:

diff --git a/src/options.html b/src/options.html
@@ -35,18 +35,15 @@
                 </svg>
               </div>
             </div>
-            <p id="info-banner-message">
-              <b>We helped win the PACER class action lawsuit</b> and we’re just getting started.
-            </p>
+            <p id="info-banner-message"></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://donate.free.law/forms/support-free-pacer">
+            <a class="btn btn-primary" id="learn-more-button" target="_blank" rel="noopener">
               &nbsp;Learn More
             </a>
           </div>

diff --git a/src/options.js b/src/options.js
@@ -1,5 +1,15 @@
 // JavaScript for the options page/popup.
 
+const bannerMessages = {
+  A: 'The PACER fees class action was settled for $125 million. Free Law Project will continue the fight.',
+  B: 'News! The PACER fees class action was settled. Learn more and help us make PACER free forever.',
+};
+const donateLinks = {
+  A: 'https://donate.free.law/forms/pacer-a1',
+  B: 'https://donate.free.law/forms/pacer-a2',
+  C: 'https://donate.free.law/forms/pacer-b1',
+  D: 'https://donate.free.law/forms/pacer-b2',
+};
 
 let inputs = document.getElementsByTagName('input');
 
@@ -12,8 +22,8 @@ function removeInfoBanner() {
   container.classList.remove('grid-with-banner');
 }
 
-function load_options() {
-  chrome.storage.local.get('options', function (items) {
+async function load_options() {
+  await chrome.storage.local.get('options', function (items) {
     for (let i = 0; i < inputs.length; i++) {
       if (inputs[i].type === 'checkbox' || inputs[i].type === 'radio') {
         inputs[i].checked = items.options[inputs[i].id];
@@ -23,6 +33,20 @@ function load_options() {
     }
     if ('dismiss_class_action_info' in items.options) removeInfoBanner();
   });
+
+  await chrome.storage.local.get('variant', function (items) {
+    let banner = document.getElementById('header-banner');
+    if (!banner) return;
+
+    let bannerVariant, linkVariant;
+    [bannerVariant, linkVariant] = items.variant.split('-');
+
+    let bannerInfo = document.getElementById('info-banner-message');
+    bannerInfo.innerHTML = bannerMessages[bannerVariant];
+
+    let learnMoreButton = document.getElementById('learn-more-button');
+    learnMoreButton.href = donateLinks[linkVariant];
+  });
 }
 
 function save_options() {