From 405c9f96e183a4228f3a5951a37e67f6926ff490 Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Mon, 28 Dec 2020 22:14:16 +0300 Subject: [PATCH] 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 Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> --- .../components/Donation/DonateSupportText.js | 19 ------ client/src/components/Donation/DonateText.js | 22 ------- client/src/components/Donation/Donation.css | 3 +- .../Donation/DonationTextComponents.js | 64 +++++++++++++++++++ client/src/pages/donate.js | 28 ++++---- .../learn/donate/donate-page-default.js | 61 ++++++++++++++++++ .../learn/donate/donate-page-donor.js | 45 +++++++++++++ 7 files changed, 187 insertions(+), 55 deletions(-) delete mode 100644 client/src/components/Donation/DonateSupportText.js delete mode 100644 client/src/components/Donation/DonateText.js create mode 100644 client/src/components/Donation/DonationTextComponents.js create mode 100644 cypress/integration/learn/donate/donate-page-default.js create mode 100644 cypress/integration/learn/donate/donate-page-donor.js 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' + ); + }); +});