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>pull/40578/head
Ahmad Abdolsaheb
GitHub
parent
09232a38fa
commit
405c9f96e1
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
@ -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 {
|
|||
<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>
|
||||
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>
|
||||
<DonationOptionsAlertText />
|
||||
</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' />
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
|
|
@ -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'
|
||||
);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue