From 959d667aeb75bc41b5308d5a857688dca773b5f7 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Tue, 3 Jan 2023 12:40:47 +0300
Subject: [PATCH] fix(client): expose donate button on navigation bar (#48820)

* feat: expose donate nav button

* feat: add the ignores

* fix: adjust tests

* feat: adjust nav button styles
---
 .eslintignore                                 |  1 +
 .gitignore                                    |  1 +
 .prettierignore                               |  1 +
 client/i18n/locales/english/translations.json |  1 -
 .../Header/components/menu-button.tsx         |  2 +-
 .../Header/components/nav-links.tsx           | 18 ++++++---------
 .../Header/components/universal-nav.css       | 21 +++++++++--------
 .../Header/components/universal-nav.tsx       | 21 +++++++++++++----
 config/misc.js                                |  2 --
 config/misc.ts                                |  4 ++++
 .../default/learn/common-components/navbar.js |  2 +-
 .../learn/header/universal-navigation.js      | 23 +++++++++++++++----
 12 files changed, 63 insertions(+), 34 deletions(-)
 delete mode 100644 config/misc.js
 create mode 100644 config/misc.ts

diff --git a/.eslintignore b/.eslintignore
index f73fb4cf88b..5ff80c09075 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,6 +4,7 @@ client/public/**
 api-server/src/public/**
 api-server/lib/**
 config/i18n.js
+config/misc.js
 config/certification-settings.js
 config/donation-settings.js
 config/superblock-order.js
diff --git a/.gitignore b/.gitignore
index d6cd819d4d8..3123f69922b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -163,6 +163,7 @@ config/client/frame-runner.json
 config/client/test-evaluator.json
 config/curriculum.json
 config/i18n.js
+config/misc.js
 config/certification-settings.js
 config/donation-settings.js
 config/superblock-order.js
diff --git a/.prettierignore b/.prettierignore
index 5270c577f42..4e526e8d9ae 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,6 +7,7 @@ curriculum/challenges/_meta/*/*
 curriculum/challenges/**/*
 config/**/*.json
 config/i18n.js
+config/misc.js
 config/certification-settings.js
 config/donation-settings.js
 config/superblock-order.js
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index afee76b2d58..44a9c6d192a 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -339,7 +339,6 @@
     "title": "Support our charity",
     "processing": "We are processing your donation.",
     "redirecting": "Redirecting...",
-    "thanks": "Thanks for donating",
     "thank-you": "Thank you for being a supporter.",
     "additional": "You can make an additional one-time donation of any amount using this link: <0>{{url}}</0>",
     "help-more": "Help us do more",
diff --git a/client/src/components/Header/components/menu-button.tsx b/client/src/components/Header/components/menu-button.tsx
index 5828ef09905..0b3371046a2 100644
--- a/client/src/components/Header/components/menu-button.tsx
+++ b/client/src/components/Header/components/menu-button.tsx
@@ -43,7 +43,7 @@ const MenuButton = ({
   return (
     <button
       aria-expanded={displayMenu}
-      className={`toggle-button-nav${
+      className={`exposed-button-nav${
         displayMenu ? ' reverse-toggle-color' : ''
       }`}
       id='toggle-button-nav'
diff --git a/client/src/components/Header/components/nav-links.tsx b/client/src/components/Header/components/nav-links.tsx
index dc9bd246338..d3ca6dbaadd 100644
--- a/client/src/components/Header/components/nav-links.tsx
+++ b/client/src/components/Header/components/nav-links.tsx
@@ -3,15 +3,16 @@
 // @ts-nocheck
 import {
   faCheckSquare,
-  faHeart,
   faSquare,
   faExternalLinkAlt
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Media from 'react-responsive';
 import React, { Component, Fragment, createRef } from 'react';
 import { TFunction, withTranslation } from 'react-i18next';
 import { connect } from 'react-redux';
 import envData from '../../../../../config/env.json';
+import { DONATE_NAV_EXPOSED_WIDTH } from '../../../../../config/misc';
 import {
   availableLangs,
   LangNames,
@@ -296,7 +297,7 @@ export class NavLinks extends Component<NavLinksProps, NavlinkStates> {
       fetchState,
       t,
       toggleNightMode,
-      user: { isDonating = false, username, theme }
+      user: { username, theme }
     }: NavLinksProps = this.props;
 
     const { pending } = fetchState;
@@ -310,25 +311,20 @@ export class NavLinks extends Component<NavLinksProps, NavlinkStates> {
           isLanguageMenuDisplayed ? ' display-lang-menu' : ''
         }`}
       >
-        {isDonating ? (
-          <li key='donate'>
-            <div className='nav-link nav-link-flex nav-link-header'>
-              <span>{t('donate.thanks')}</span>
-              <FontAwesomeIcon icon={faHeart} />
-            </div>
-          </li>
-        ) : (
+        <Media maxWidth={DONATE_NAV_EXPOSED_WIDTH}>
           <li key='donate'>
             <Link
               className='nav-link'
               onKeyDown={this.handleMenuKeyDown}
               sameTab={false}
               to='/donate'
+              data-test-label='dropdown-donate-button'
+              nav-donate-button
             >
               {t('buttons.donate')}
             </Link>
           </li>
-        )}
+        </Media>
         <li key='learn'>
           <Link
             className='nav-link'
diff --git a/client/src/components/Header/components/universal-nav.css b/client/src/components/Header/components/universal-nav.css
index 709432a5eca..89e422e14ce 100644
--- a/client/src/components/Header/components/universal-nav.css
+++ b/client/src/components/Header/components/universal-nav.css
@@ -323,7 +323,7 @@ button.nav-link[aria-disabled='true'] {
   margin-inline-end: 25px;
 }
 
-.toggle-button-nav {
+.exposed-button-nav {
   padding: 2px 14px;
   border: 1px solid var(--gray-00);
   font-family: 'lato', sans-serif;
@@ -336,18 +336,21 @@ button.nav-link[aria-disabled='true'] {
   align-items: center;
 }
 
-.toggle-button-nav:hover {
-  background-color: var(--theme-color);
-  color: var(--gray-00);
+.exposed-button-nav:hover,
+.exposed-button-nav:hover:focus {
+  background-color: var(--gray-00);
+  color: var(--gray-90);
   border: 1px solid var(--gray-00);
 }
 
-.toggle-button-nav:focus {
+.exposed-button-nav:focus {
   outline: 3px solid var(--blue-mid);
   outline-offset: 0;
+  background-color: var(--gray-90);
+  color: var(--gray-00);
 }
 
-.toggle-button-nav:focus:not(:focus-visible) {
+.exposed-button-nav:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -411,12 +414,12 @@ button.nav-link[aria-disabled='true'] {
   display: none;
 }
 
-.reverse-toggle-color {
+.exposed-button-nav.reverse-toggle-color {
   background-color: var(--gray-00);
   color: var(--theme-color);
 }
 
-.reverse-toggle-color:hover {
+.exposed-button-nav.reverse-toggle-color:hover {
   background-color: var(--gray-00);
   color: var(--theme-color);
 }
@@ -583,7 +586,7 @@ button.nav-link[aria-disabled='true'] {
   #universal-nav .login-btn-icon {
     display: inline-block;
   }
-  .toggle-button-nav {
+  .exposed-button-nav {
     padding: 2px 8px;
   }
   #universal-nav-logo svg {
diff --git a/client/src/components/Header/components/universal-nav.tsx b/client/src/components/Header/components/universal-nav.tsx
index ea1ce8aec2d..4bb09abfa3b 100644
--- a/client/src/components/Header/components/universal-nav.tsx
+++ b/client/src/components/Header/components/universal-nav.tsx
@@ -4,6 +4,10 @@ import { useTranslation } from 'react-i18next';
 import Media from 'react-responsive';
 import { isLanding } from '../../../utils/path-parsers';
 import { Link, SkeletonSprite } from '../../helpers';
+import {
+  SEARCH_EXPOSED_WIDTH,
+  DONATE_NAV_EXPOSED_WIDTH
+} from '../../../../../config/misc';
 import { User } from '../../../redux/prop-types';
 import MenuButton from './menu-button';
 import NavLinks from './nav-links';
@@ -16,8 +20,6 @@ const SearchBarOptimized = Loadable(
   () => import('../../search/searchBar/search-bar-optimized')
 );
 
-const MAX_MOBILE_WIDTH = 980;
-
 interface UniversalNavProps {
   displayMenu: boolean;
   isLanguageMenuDisplayed: boolean;
@@ -61,7 +63,7 @@ export const UniversalNav = ({
       <div
         className={`universal-nav-left${displayMenu ? ' display-search' : ''}`}
       >
-        <Media minWidth={MAX_MOBILE_WIDTH + 1}>{search}</Media>
+        <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media>
       </div>
       <div className='universal-nav-middle'>
         <Link id='universal-nav-logo' to='/learn'>
@@ -75,6 +77,17 @@ export const UniversalNav = ({
           </div>
         ) : (
           <>
+            <Media minWidth={DONATE_NAV_EXPOSED_WIDTH + 1}>
+              {' '}
+              <Link
+                sameTab={false}
+                to='/donate'
+                data-test-label='nav-donate-button'
+                className='exposed-button-nav'
+              >
+                {t('buttons.donate')}
+              </Link>
+            </Media>
             <MenuButton
               displayMenu={displayMenu}
               hideMenu={hideMenu}
@@ -82,7 +95,7 @@ export const UniversalNav = ({
               showMenu={showMenu}
               user={user}
             />
-            <Media maxWidth={MAX_MOBILE_WIDTH}>{search}</Media>
+            <Media maxWidth={SEARCH_EXPOSED_WIDTH}>{search}</Media>
             <NavLinks
               displayMenu={displayMenu}
               fetchState={fetchState}
diff --git a/config/misc.js b/config/misc.js
deleted file mode 100644
index c852bf41cda..00000000000
--- a/config/misc.js
+++ /dev/null
@@ -1,2 +0,0 @@
-exports.defaultUserImage = 'https://freecodecamp.com/sample-image.png';
-exports.MAX_MOBILE_WIDTH = 767;
diff --git a/config/misc.ts b/config/misc.ts
new file mode 100644
index 00000000000..a6fb0f2136f
--- /dev/null
+++ b/config/misc.ts
@@ -0,0 +1,4 @@
+export const defaultUserImage = 'https://freecodecamp.com/sample-image.png';
+export const MAX_MOBILE_WIDTH = 767;
+export const SEARCH_EXPOSED_WIDTH = 980;
+export const DONATE_NAV_EXPOSED_WIDTH = 600;
diff --git a/cypress/e2e/default/learn/common-components/navbar.js b/cypress/e2e/default/learn/common-components/navbar.js
index 928cc7ee714..9f45dc9da64 100644
--- a/cypress/e2e/default/learn/common-components/navbar.js
+++ b/cypress/e2e/default/learn/common-components/navbar.js
@@ -4,7 +4,7 @@ const selectors = {
   navigationLinks: '.nav-list',
   avatarContainer: '.avatar-container',
   defaultAvatar: '.avatar-container',
-  menuButton: '.toggle-button-nav',
+  menuButton: '#toggle-button-nav',
   avatarImage: '.avatar-container .avatar'
 };
 
diff --git a/cypress/e2e/default/learn/header/universal-navigation.js b/cypress/e2e/default/learn/header/universal-navigation.js
index 23301aafae9..c7fb6f9454c 100644
--- a/cypress/e2e/default/learn/header/universal-navigation.js
+++ b/cypress/e2e/default/learn/header/universal-navigation.js
@@ -9,7 +9,7 @@ const { clientLocale } = envData;
 
 const selectors = {
   'navigation-list': '.nav-list',
-  'toggle-button': '.toggle-button-nav',
+  'toggle-button': '#toggle-button-nav',
   'language-menu': '.nav-lang-menu',
   'exit-lang-menu': "[data-value='exit-lang-menu']",
   'lang-menu-option': 'button.nav-lang-menu-option',
@@ -18,7 +18,9 @@ const selectors = {
   'avatar-container': '.avatar-container',
   'sign-out-button': "[data-value='sign-out-button']",
   signout: "[data-test-label='signout']",
-  'cancel-signout': "[data-test-label='cancel-signout']"
+  'cancel-signout': "[data-test-label='cancel-signout']",
+  'navigation-donate-button': "[data-test-label='nav-donate-button']",
+  'dropwodn-donate-button': "[data-test-label='dropdown-donate-button']"
 };
 
 const links = {
@@ -39,7 +41,6 @@ describe('Default Navigation Menu', () => {
     cy.get(selectors['language-menu']).should('not.be.visible');
     cy.get(selectors['toggle-button']).should('be.visible').click();
     cy.get(selectors['navigation-list']).contains('Sign in to change theme.');
-    testLink('Donate');
     testLink('Curriculum');
     testLink('Forum');
     testLink('News');
@@ -214,8 +215,20 @@ describe('Donor Navigation Menu', () => {
   it('should show donor avatar border.', () => {
     cy.get(selectors['avatar-container']).should('have.class', 'gold-border');
   });
-  it('should show thank you message.', () => {
-    cy.get(selectors['navigation-list']).contains('Thanks for donating');
+});
+
+describe('Donate button', () => {
+  it('should render in the toggle menu in small screens', () => {
+    cy.viewport(550, 750);
+    cy.visit('/learn');
+    testLink('Donate');
+    cy.get(selectors['navigation-donate-button']).should('not.exist');
+  });
+  it('should render in the universal nav in large screens', () => {
+    cy.viewport(1550, 750);
+    cy.visit('/learn');
+    cy.get(selectors['dropdown-donate-button']).should('not.exist');
+    cy.get(selectors['navigation-donate-button']).should('be.visible');
   });
 });