From a73996c1740699263af620a3e33e2deb4f4311fa Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Tue, 3 Jan 2023 15:56:15 +0300
Subject: [PATCH] Revert "fix(client): expose donate button on navigation bar"
 (#48902)

Revert "fix(client): expose donate button on navigation bar (#48820)"

This reverts commit 959d667aeb75bc41b5308d5a857688dca773b5f7.
---
 .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, 34 insertions(+), 63 deletions(-)
 create mode 100644 config/misc.js
 delete mode 100644 config/misc.ts

diff --git a/.eslintignore b/.eslintignore
index 5ff80c09075..f73fb4cf88b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,7 +4,6 @@ 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 3123f69922b..d6cd819d4d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -163,7 +163,6 @@ 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 4e526e8d9ae..5270c577f42 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,7 +7,6 @@ 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 44a9c6d192a..afee76b2d58 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -339,6 +339,7 @@
     "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 0b3371046a2..5828ef09905 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={`exposed-button-nav${
+      className={`toggle-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 d3ca6dbaadd..dc9bd246338 100644
--- a/client/src/components/Header/components/nav-links.tsx
+++ b/client/src/components/Header/components/nav-links.tsx
@@ -3,16 +3,15 @@
 // @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,
@@ -297,7 +296,7 @@ export class NavLinks extends Component<NavLinksProps, NavlinkStates> {
       fetchState,
       t,
       toggleNightMode,
-      user: { username, theme }
+      user: { isDonating = false, username, theme }
     }: NavLinksProps = this.props;
 
     const { pending } = fetchState;
@@ -311,20 +310,25 @@ export class NavLinks extends Component<NavLinksProps, NavlinkStates> {
           isLanguageMenuDisplayed ? ' display-lang-menu' : ''
         }`}
       >
-        <Media maxWidth={DONATE_NAV_EXPOSED_WIDTH}>
+        {isDonating ? (
+          <li key='donate'>
+            <div className='nav-link nav-link-flex nav-link-header'>
+              <span>{t('donate.thanks')}</span>
+              <FontAwesomeIcon icon={faHeart} />
+            </div>
+          </li>
+        ) : (
           <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 89e422e14ce..709432a5eca 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;
 }
 
-.exposed-button-nav {
+.toggle-button-nav {
   padding: 2px 14px;
   border: 1px solid var(--gray-00);
   font-family: 'lato', sans-serif;
@@ -336,21 +336,18 @@ button.nav-link[aria-disabled='true'] {
   align-items: center;
 }
 
-.exposed-button-nav:hover,
-.exposed-button-nav:hover:focus {
-  background-color: var(--gray-00);
-  color: var(--gray-90);
+.toggle-button-nav:hover {
+  background-color: var(--theme-color);
+  color: var(--gray-00);
   border: 1px solid var(--gray-00);
 }
 
-.exposed-button-nav:focus {
+.toggle-button-nav:focus {
   outline: 3px solid var(--blue-mid);
   outline-offset: 0;
-  background-color: var(--gray-90);
-  color: var(--gray-00);
 }
 
-.exposed-button-nav:focus:not(:focus-visible) {
+.toggle-button-nav:focus:not(:focus-visible) {
   outline: none;
 }
 
@@ -414,12 +411,12 @@ button.nav-link[aria-disabled='true'] {
   display: none;
 }
 
-.exposed-button-nav.reverse-toggle-color {
+.reverse-toggle-color {
   background-color: var(--gray-00);
   color: var(--theme-color);
 }
 
-.exposed-button-nav.reverse-toggle-color:hover {
+.reverse-toggle-color:hover {
   background-color: var(--gray-00);
   color: var(--theme-color);
 }
@@ -586,7 +583,7 @@ button.nav-link[aria-disabled='true'] {
   #universal-nav .login-btn-icon {
     display: inline-block;
   }
-  .exposed-button-nav {
+  .toggle-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 4bb09abfa3b..ea1ce8aec2d 100644
--- a/client/src/components/Header/components/universal-nav.tsx
+++ b/client/src/components/Header/components/universal-nav.tsx
@@ -4,10 +4,6 @@ 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';
@@ -20,6 +16,8 @@ const SearchBarOptimized = Loadable(
   () => import('../../search/searchBar/search-bar-optimized')
 );
 
+const MAX_MOBILE_WIDTH = 980;
+
 interface UniversalNavProps {
   displayMenu: boolean;
   isLanguageMenuDisplayed: boolean;
@@ -63,7 +61,7 @@ export const UniversalNav = ({
       <div
         className={`universal-nav-left${displayMenu ? ' display-search' : ''}`}
       >
-        <Media minWidth={SEARCH_EXPOSED_WIDTH + 1}>{search}</Media>
+        <Media minWidth={MAX_MOBILE_WIDTH + 1}>{search}</Media>
       </div>
       <div className='universal-nav-middle'>
         <Link id='universal-nav-logo' to='/learn'>
@@ -77,17 +75,6 @@ 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}
@@ -95,7 +82,7 @@ export const UniversalNav = ({
               showMenu={showMenu}
               user={user}
             />
-            <Media maxWidth={SEARCH_EXPOSED_WIDTH}>{search}</Media>
+            <Media maxWidth={MAX_MOBILE_WIDTH}>{search}</Media>
             <NavLinks
               displayMenu={displayMenu}
               fetchState={fetchState}
diff --git a/config/misc.js b/config/misc.js
new file mode 100644
index 00000000000..c852bf41cda
--- /dev/null
+++ b/config/misc.js
@@ -0,0 +1,2 @@
+exports.defaultUserImage = 'https://freecodecamp.com/sample-image.png';
+exports.MAX_MOBILE_WIDTH = 767;
diff --git a/config/misc.ts b/config/misc.ts
deleted file mode 100644
index a6fb0f2136f..00000000000
--- a/config/misc.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-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 9f45dc9da64..928cc7ee714 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 c7fb6f9454c..23301aafae9 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,9 +18,7 @@ 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']",
-  'navigation-donate-button': "[data-test-label='nav-donate-button']",
-  'dropwodn-donate-button': "[data-test-label='dropdown-donate-button']"
+  'cancel-signout': "[data-test-label='cancel-signout']"
 };
 
 const links = {
@@ -41,6 +39,7 @@ 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');
@@ -215,20 +214,8 @@ describe('Donor Navigation Menu', () => {
   it('should show donor avatar border.', () => {
     cy.get(selectors['avatar-container']).should('have.class', 'gold-border');
   });
-});
-
-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');
+  it('should show thank you message.', () => {
+    cy.get(selectors['navigation-list']).contains('Thanks for donating');
   });
 });