forked from freeCodeCamp/freeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(donate):add donation modal and certification message (freeCodeCa…
…mp#37822) Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
- Loading branch information
Showing
17 changed files
with
503 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React, { Fragment } from 'react'; | ||
|
|
||
| const propTypes = {}; | ||
|
|
||
| function Heart(props) { | ||
| return ( | ||
| <Fragment> | ||
| <span className='sr-only'>Heart</span> | ||
| <svg | ||
| height={184} | ||
| version='1.1' | ||
| viewBox='0 0 200 184' | ||
| width={200} | ||
| xmlns='http://www.w3.org/2000/svg' | ||
| {...props} | ||
| > | ||
| <g fill='none' fillRule='evenodd'> | ||
| <g fill='var(--love-color)'> | ||
| <ellipse cx='140.5' cy={59} id='a' rx='59.5' ry={59} /> | ||
| <circle cx={59} cy={59} r={59} /> | ||
| <rect | ||
| height={118} | ||
| transform='translate(100 100) rotate(-45) translate(-100 -100)' | ||
| width={118} | ||
| x={41} | ||
| y={41} | ||
| /> | ||
| </g> | ||
| </g> | ||
| </svg> | ||
| </Fragment> | ||
| ); | ||
| } | ||
|
|
||
| Heart.displayName = 'Heart'; | ||
| Heart.propTypes = propTypes; | ||
|
|
||
| export default Heart; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
client/src/components/Donation/components/DonationModal.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { bindActionCreators } from 'redux'; | ||
| import { connect } from 'react-redux'; | ||
| import { createSelector } from 'reselect'; | ||
| import { Modal, Button } from '@freecodecamp/react-bootstrap'; | ||
| import { Link } from '../../../components/helpers'; | ||
| import { blockNameify } from '../../../../utils/blockNameify'; | ||
| import Heart from '../../../assets/icons/Heart'; | ||
|
|
||
| import ga from '../../../analytics'; | ||
| import { | ||
| closeDonationModal, | ||
| isDonationModalOpenSelector | ||
| } from '../../../redux'; | ||
|
|
||
| import { challengeMetaSelector } from '../../../templates/Challenges/redux'; | ||
|
|
||
| import '../Donation.css'; | ||
|
|
||
| const mapStateToProps = createSelector( | ||
| isDonationModalOpenSelector, | ||
| challengeMetaSelector, | ||
| (show, { block }) => ({ | ||
| show, | ||
| block | ||
| }) | ||
| ); | ||
|
|
||
| const mapDispatchToProps = dispatch => | ||
| bindActionCreators( | ||
| { | ||
| closeDonationModal | ||
| }, | ||
| dispatch | ||
| ); | ||
|
|
||
| const propTypes = { | ||
| block: PropTypes.string, | ||
| closeDonationModal: PropTypes.func.isRequired, | ||
| show: PropTypes.bool | ||
| }; | ||
|
|
||
| class DonateModal extends Component { | ||
| render() { | ||
| const { show, block } = this.props; | ||
| if (show) { | ||
| ga.modalview('/donation-modal'); | ||
| } | ||
|
|
||
| return ( | ||
| <Modal bsSize='lg' className='donation-modal' show={show}> | ||
| <Modal.Header className='fcc-modal'> | ||
| <Modal.Title className='modal-title text-center'> | ||
| <strong>Support freeCodeCamp.org</strong> | ||
| </Modal.Title> | ||
| </Modal.Header> | ||
| <Modal.Body> | ||
| <p className='text-center'> | ||
| Nicely done. You just completed {blockNameify(block)}. | ||
| </p> | ||
| <div className='heart-icon-container'> | ||
| <Heart className='heart-icon' /> | ||
| </div> | ||
| <p className='text-center'> | ||
| Help us create even more learning resources like this. | ||
| </p> | ||
| </Modal.Body> | ||
| <Modal.Footer> | ||
| <Link | ||
| className='btn-invert btn btn-lg btn-primary btn-block btn-cta' | ||
| onClick={this.props.closeDonationModal} | ||
| to={`/donate`} | ||
| > | ||
| Support our nonprofit | ||
| </Link> | ||
| <Button | ||
| block={true} | ||
| bsSize='lg' | ||
| bsStyle='primary' | ||
| className='btn-invert' | ||
| onClick={this.props.closeDonationModal} | ||
| > | ||
| Ask me later | ||
| </Button> | ||
| </Modal.Footer> | ||
| </Modal> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| DonateModal.displayName = 'DonateModal'; | ||
| DonateModal.propTypes = propTypes; | ||
|
|
||
| export default connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps | ||
| )(DonateModal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,42 @@ | ||
| import React, { Fragment } from 'react'; | ||
| import React, { Fragment, Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| function CertificationLayout({ children }) { | ||
| return <Fragment>{children}</Fragment>; | ||
| import ga from '../../analytics'; | ||
| import { fetchUser, isSignedInSelector } from '../../redux'; | ||
| import { createSelector } from 'reselect'; | ||
|
|
||
| const mapStateToProps = createSelector( | ||
| isSignedInSelector, | ||
| isSignedIn => ({ | ||
| isSignedIn | ||
| }) | ||
| ); | ||
|
|
||
| const mapDispatchToProps = { fetchUser }; | ||
|
|
||
| class CertificationLayout extends Component { | ||
| componentDidMount() { | ||
| const { isSignedIn, fetchUser, pathname } = this.props; | ||
| if (!isSignedIn) { | ||
| fetchUser(); | ||
| } | ||
| ga.pageview(pathname); | ||
| } | ||
| render() { | ||
| return <Fragment>{this.props.children}</Fragment>; | ||
| } | ||
| } | ||
|
|
||
| CertificationLayout.displayName = 'CertificationLayout'; | ||
| CertificationLayout.propTypes = { children: PropTypes.any }; | ||
| CertificationLayout.propTypes = { | ||
| children: PropTypes.any, | ||
| fetchUser: PropTypes.func.isRequired, | ||
| isSignedIn: PropTypes.bool, | ||
| pathname: PropTypes.string.isRequired | ||
| }; | ||
|
|
||
| export default CertificationLayout; | ||
| export default connect( | ||
| mapStateToProps, | ||
| mapDispatchToProps | ||
| )(CertificationLayout); |
Oops, something went wrong.