diff --git a/client/src/components/Donation/DonateSupportText.js b/client/src/components/Donation/DonateSupportText.js
deleted file mode 100644
index a7f098f4175..00000000000
--- a/client/src/components/Donation/DonateSupportText.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-
-const DonateSupportText = () => (
-
-
-
-
- Need help with your current or past donations?
-
-
- Forward a copy of your donation receipt to donors@freecodecamp.org and
- tell us how we can help.
-
-
-
-);
-DonateSupportText.displayName = 'DonateText';
-export default DonateSupportText;
diff --git a/client/src/components/Donation/DonateText.js b/client/src/components/Donation/DonateText.js
deleted file mode 100644
index 628ba2c7c5d..00000000000
--- a/client/src/components/Donation/DonateText.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Row, Col } from '@freecodecamp/react-bootstrap';
-
-const DonateText = () => {
- return (
-
-
- freeCodeCamp is a highly efficient education nonprofit.
-
- When you donate to freeCodeCamp, you help people learn new skills and
- provide for their families.
-
-
- You also help us create new resources for you to use to expand your
- own technology skills.
-
-
-
- );
-};
-DonateText.displayName = 'DonateText';
-export default DonateText;
diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css
index f354fd047fc..2ef90e9529c 100644
--- a/client/src/components/Donation/Donation.css
+++ b/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,
-.donation-description,
+.donate-page-wrapper p,
[name='payment-method'] {
font-family: 'Lato', sans-serif;
}
diff --git a/client/src/components/Donation/DonationTextComponents.js b/client/src/components/Donation/DonationTextComponents.js
new file mode 100644
index 00000000000..8fa4015fc2e
--- /dev/null
+++ b/client/src/components/Donation/DonationTextComponents.js
@@ -0,0 +1,64 @@
+import React from 'react';
+
+export const DonationSupportText = () => (
+ <>
+
+ Need help with your current or past donations?
+
+
+ Forward a copy of your donation receipt to donors@freecodecamp.org and
+ tell us how we can help.
+
+ >
+);
+
+export const DonationText = () => {
+ return (
+ <>
+ freeCodeCamp is a highly efficient education nonprofit.
+
+ When you donate to freeCodeCamp, you help people learn new skills and
+ provide for their families.
+
+
+ You also help us create new resources for you to use to expand your own
+ technology skills.
+
+ >
+ );
+};
+
+export const DonationOptionsText = () => (
+ <>
+
+
+ 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
+
+ .
+
+ >
+);
+
+export const DonationOptionsAlertText = () => (
+
+ 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
+
+ .
+
+);
diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js
index f4dcb5798ba..f97adfaca26 100644
--- a/client/src/pages/donate.js
+++ b/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 DonateSupportText from '../components/Donation/DonateSupportText';
+import {
+ 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 {
-
+
{isDonating ? (
Thank you for your support
@@ -100,21 +104,21 @@ export class DonatePage extends Component {
currently have a recurring donation.
-
- You can make an additional one-time donation of any amount
- using this link:{' '}
-
- https://www.paypal.me/freecodecamp
-
-
+
) : null}
-
+
-
+
+
+
+
+
+
+
diff --git a/cypress/integration/learn/donate/donate-page-default.js b/cypress/integration/learn/donate/donate-page-default.js
new file mode 100644
index 00000000000..328b942a4f7
--- /dev/null
+++ b/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');
+ });
+});
diff --git a/cypress/integration/learn/donate/donate-page-donor.js b/cypress/integration/learn/donate/donate-page-donor.js
new file mode 100644
index 00000000000..bbccb0eeea3
--- /dev/null
+++ b/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'
+ );
+ });
+});