fix(ui): update banner text when auth and donor

.eslintrc.js

@@ -8,7 +8,9 @@ module.exports = {
   extends: ['eslint:recommended', 'plugin:cypress/recommended', 'prettier'],
   globals: {
     Atomics: 'readonly',
-    SharedArrayBuffer: 'readonly'
+    SharedArrayBuffer: 'readonly',
+    isDonor: 'writable',
+    isAuthenticated: 'writable'
   },
   parserOptions: {
     ecmaVersion: 2020

cypress/e2e/english/landing/landing.cy.js

@@ -9,7 +9,8 @@ const selectors = {
   authorProfileImage: "[data-test-label='profile-image']",
   avatar: "[data-test-label='avatar']",
   siteNavLogo: "[data-test-label='site-nav-logo']",
-  postPublishedTime: "[data-test-label='post-published-time']"
+  postPublishedTime: "[data-test-label='post-published-time']",
+  banner: "[data-test-label='banner']"
 };
 
 describe('Landing', () => {
@@ -68,6 +69,55 @@ describe('Landing', () => {
       .contains('title', 'Mrugesh Mohapatra');
   });
 
+  it('the default banner text should be default if not authenticated', function () {
+    cy.get(selectors.banner).contains(
+      'Learn to code — free 3,000-hour curriculum'
+    );
+  });
+
+  it('the default banner text should link to the homepage', function () {
+    cy.get(selectors.banner)
+      .should('have.attr', 'href')
+      .should('equal', 'https://www.freecodecamp.org/');
+  });
+
+  it('the authenticated banner text should tell people to donate', function () {
+    cy.setCookie('jwt_access_token', 'dadadsdadsadasd');
+    cy.visit('/');
+    cy.get(selectors.banner).contains(
+      'Support our charity and our mission. Donate to freeCodeCamp.org.'
+    );
+  });
+
+  it('the authenticated banner link should link to the donate page', function () {
+    cy.setCookie('jwt_access_token', 'dadadsdadsadasd');
+    cy.visit('/');
+    cy.get(selectors.banner)
+      .should('have.attr', 'href')
+      .should('equal', 'https://www.freecodecamp.org/donate');
+  });
+
+  it('the donor banner text should thank people', function () {
+    cy.setCookie('jwt_access_token', 'dadadsdadsadasd');
+    cy.setCookie('isDonor', 'true');
+    cy.visit('/');
+    cy.get(selectors.banner).contains(
+      'Thank you for supporting freeCodeCamp through your donations.'
+    );
+  });
+
+  it('the donor banner should link to how to donate', function () {
+    cy.setCookie('jwt_access_token', 'dadadsdadsadasd');
+    cy.setCookie('isDonor', 'true');
+    cy.visit('/');
+    cy.get(selectors.banner)
+      .should('have.attr', 'href')
+      .should(
+        'equal',
+        'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp/'
+      );
+  });
+
   it("posts written by 'freeCodeCamp.org' should not show the `author-list`, which contain's the author's name and profile image", () => {
     cy.get(selectors.postCard)
       .contains('Common Technical Support Questions – freeCodeCamp FAQ')
@@ -81,7 +131,6 @@ describe('Landing', () => {
 
     cy.get(selectors.featureImage).should('have.length', numberOfPosts);
   });
-
   // Note: Remove this testing block once we migrate all posts to Hashnode
   context('Duplicate slugs', () => {
     it('should render the older Ghost-sourced post', () => {

src/_includes/assets/js/banner.js

@@ -26,17 +26,12 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   } %}`;
   const bannerDonorLink = `{% t 'links:banner.authenticated-donor' %}`;
-
   // eslint-disable-next-line no-undef
   if (isAuthenticated) {
-    bannerTextNode.innerHTML = bannerAuthText;
-    bannerAnchor.href = bannerAuthLink;
-    bannerAnchor.setAttribute('text-variation', 'authenticated');
-    // eslint-disable-next-line no-undef
-  } else if (isDonor) {
-    bannerTextNode.innerHTML = bannerDonorText;
-    bannerAnchor.href = bannerDonorLink;
-    bannerAnchor.setAttribute('text-variation', 'donor');
+    bannerTextNode.innerHTML = isDonor ? bannerDonorText : bannerAuthText;
+    bannerAnchor.href = isDonor ? bannerDonorLink : bannerAuthLink;
+    const textVariationType = isDonor ? 'donor' : 'authenticated';
+    bannerAnchor.setAttribute('text-variation', textVariationType);
   } else {
     bannerTextNode.innerHTML = bannerDefaultText;
     bannerAnchor.href = bannerDefaultLink;