feat: add donation options to donors alert and donation page footer (#40498)

* feat: add donation options to donors alert and donation page footer

* Update client/src/components/Donation/DonationOptionsText.js

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* Update client/src/components/Donation/DonationOptionsText.js

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: clean up

* fix: remove comments

* feat: make the component declerative

* feat: move donation text components to one component

* feat: add cypress tests for donate page

* Update cypress/integration/learn/donate/donate-page-default.js

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Kris Koishigawa <scissorsneedfoodtoo@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

client/src/components/Donation/DonateSupportText.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-
-const DonateSupportText = () => (
-  <Row className='donate-text'>
-    <Col xs={12}>
-      <hr />
-      <h4>
-        <b>Need help with your current or past donations?</b>
-      </h4>
-      <p>
-        Forward a copy of your donation receipt to donors@freecodecamp.org and
-        tell us how we can help.
-      </p>
-    </Col>
-  </Row>
-);
-DonateSupportText.displayName = 'DonateText';
-export default DonateSupportText;

client/src/components/Donation/DonateText.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-
-const DonateText = () => {
-  return (
-    <Row className='donate-text'>
-      <Col xs={12}>
-        <p>freeCodeCamp is a highly efficient education nonprofit.</p>
-        <p>
-          When you donate to freeCodeCamp, you help people learn new skills and
-          provide for their families.
-        </p>
-        <p>
-          You also help us create new resources for you to use to expand your
-          own technology skills.
-        </p>
-      </Col>
-    </Row>
-  );
-};
-DonateText.displayName = 'DonateText';
-export default DonateText;

client/src/components/Donation/Donation.css

@@ -195,8 +195,7 @@ li.disabled > a {
 .donate-page-wrapper,
 .donate-page-wrapper b,
 .donate-page-wrapper h3,
-.donate-text p,
+.donate-page-wrapper p,
-.donation-description,
 [name='payment-method'] {
   font-family: 'Lato', sans-serif;
 }

client/src/components/Donation/DonationTextComponents.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export const DonationSupportText = () => (
+  <>
+    <h4>
+      <b>Need help with your current or past donations?</b>
+    </h4>
+    <p>
+      Forward a copy of your donation receipt to donors@freecodecamp.org and
+      tell us how we can help.
+    </p>
+  </>
+);
+
+export const DonationText = () => {
+  return (
+    <>
+      <p>freeCodeCamp is a highly efficient education nonprofit.</p>
+      <p>
+        When you donate to freeCodeCamp, you help people learn new skills and
+        provide for their families.
+      </p>
+      <p>
+        You also help us create new resources for you to use to expand your own
+        technology skills.
+      </p>
+    </>
+  );
+};
+
+export const DonationOptionsText = () => (
+  <>
+    <h4>
+      <b>
+        Want to make a bigger one-time donation, mail us a check, or give in
+        other ways?
+      </b>
+    </h4>
+    <p>
+      Here are many{' '}
+      <a
+        href={
+          'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp'
+        }
+      >
+        other ways we could support our non-profit's mission
+      </a>
+      .
+    </p>
+  </>
+);
+
+export const DonationOptionsAlertText = () => (
+  <p>
+    Want to make a bigger one-time donation, mail us a check, or give in other
+    ways? Here are many{' '}
+    <a
+      href={'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp'}
+    >
+      other ways we could support our non-profit's mission
+    </a>
+    .
+  </p>
+);

client/src/pages/donate.js

@@ -8,8 +8,12 @@ import { Grid, Row, Col, Alert } from '@freecodecamp/react-bootstrap';
 
 import { Spacer, Loader } from '../components/helpers';
 import DonateForm from '../components/Donation/DonateForm';
-import DonateText from '../components/Donation/DonateText';
+import {
-import DonateSupportText from '../components/Donation/DonateSupportText';
+  DonationText,
+  DonationSupportText,
+  DonationOptionsText,
+  DonationOptionsAlertText
+} from '../components/Donation/DonationTextComponents';
 import { signInLoadingSelector, userSelector, executeGA } from '../redux';
 import CampersImage from '../components/landing/components/CampersImage';
 
@@ -83,7 +87,7 @@ export class DonatePage extends Component {
           <Row>
             <Fragment>
               <Col lg={6} lgOffset={0} md={8} mdOffset={2} sm={10} smOffset={1}>
-                <Row className='donate-text'>
+                <Row>
                   <Col className={'text-center'} xs={12}>
                     {isDonating ? (
                       <h2>Thank you for your support</h2>
@@ -100,21 +104,21 @@ export class DonatePage extends Component {
                       currently have a recurring donation.
                     </p>
                     <br />
-                    <p>
+                    <DonationOptionsAlertText />
-                      You can make an additional one-time donation of any amount
-                      using this link:{' '}
-                      <a href='https://www.paypal.me/freecodecamp'>
-                        https://www.paypal.me/freecodecamp
-                      </a>
-                    </p>
                   </Alert>
                 ) : null}
-                <DonateText isDonating={isDonating} />
+                <DonationText />
                 <DonateForm
                   enableDonationSettingsPage={this.enableDonationSettingsPage}
                   handleProcessing={this.handleProcessing}
                 />
-                <DonateSupportText />
+                <Row className='donate-support'>
+                  <Col xs={12}>
+                    <hr />
+                    <DonationOptionsText />
+                    <DonationSupportText />
+                  </Col>
+                </Row>
               </Col>
               <Col lg={6}>
                 <CampersImage page='donate' />

cypress/integration/learn/donate/donate-page-default.js

@@ -0,0 +1,61 @@
+/* global cy */
+
+const selectors = {
+  donateSupport: {
+    firstTitle: '.donate-support h4:first-of-type b',
+    secondTitle: '.donate-support h4:last-of-type b',
+    firstText: '.donate-support p:first-of-type',
+    secondText: '.donate-support p:last-of-type',
+    link: '.donate-support a'
+  }
+};
+
+describe('Donate page', () => {
+  before(() => {
+    cy.clearCookies();
+    cy.exec('npm run seed');
+    cy.login();
+    cy.visit('/donate');
+  });
+
+  it('Should render', () => {
+    cy.title().should('eq', 'Support our nonprofit | freeCodeCamp.org');
+  });
+
+  it('Should have support section', () => {
+    cy.contains(
+      'Want to make a bigger one-time donation, mail us a check, or give in other ways?'
+    ).should('be.visible');
+  });
+
+  it('Support section should have support text', () => {
+    cy.contains(
+      selectors.donateSupport.firstTitle,
+      'Want to make a bigger one-time donation, mail us a check, or give in other ways?'
+    );
+    cy.contains(
+      selectors.donateSupport.secondTitle,
+      'Need help with your current or past donations?'
+    );
+    cy.contains(
+      selectors.donateSupport.firstText,
+      "Here are many other ways we could support our non-profit's mission."
+    );
+    cy.contains(
+      selectors.donateSupport.secondText,
+      'Forward a copy of your donation receipt to donors@freecodecamp.org and tell us how we can help.'
+    );
+  });
+
+  it('Support section should have donation link', () => {
+    cy.get(selectors.donateSupport.link).should(
+      'have.attr',
+      'href',
+      'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp'
+    );
+  });
+
+  it('Donor alert should not be visible for non-donor', () => {
+    cy.get('.alert-info').should('not.exist');
+  });
+});

cypress/integration/learn/donate/donate-page-donor.js

@@ -0,0 +1,45 @@
+/* global cy */
+
+const selectors = {
+  donateAlert: {
+    firstText: '.alert-info p:first-child',
+    secondText: '.alert-info p:last-child',
+    link: '.alert-info a'
+  }
+};
+
+describe('Donate page', () => {
+  before(() => {
+    cy.clearCookies();
+    cy.exec('npm run seed -- --donor');
+    cy.login();
+    cy.visit('/donate');
+  });
+
+  after(() => {
+    cy.exec('npm run seed');
+  });
+
+  it('Donor alert should be visible for donor', () => {
+    cy.get('.alert-info').should('be.visible');
+  });
+
+  it('Donor should see alert message', () => {
+    cy.contains(
+      selectors.donateAlert.firstText,
+      'Thank you for being a supporter of freeCodeCamp. You currently have a recurring donation.'
+    );
+    cy.contains(
+      selectors.donateAlert.lastText,
+      "Want to make a bigger one-time donation, mail us a check, or give in other ways? Here are many other ways we could support our non-profit's mission."
+    );
+  });
+
+  it('Donor alert section should have donation link', () => {
+    cy.get(selectors.donateAlert.link).should(
+      'have.attr',
+      'href',
+      'https://www.freecodecamp.org/news/how-to-donate-to-free-code-camp'
+    );
+  });
+});