From f4e33e1ee68130669d6425dd9896b42565836789 Mon Sep 17 00:00:00 2001 From: Stuart Taylor Date: Thu, 7 Jun 2018 23:13:33 +0100 Subject: [PATCH] Feat: Donation integration (#151) * Clean up MapModal removal * Add DonationModal and logic * Remove unused challenge files * Add email field to donation * Fix up UI and ajustv copy --- packages/learn/gatsby-node.js | 3 +- packages/learn/package.json | 4 +- .../apis-and-microservices-projects.json | 174 ---------- ...nce-and-information-security-projects.json | 298 ------------------ .../learn/src/components/Donation/Donation.js | 131 ++++++++ .../Donation/components/CardForm.js | 58 ++++ .../Donation/components/DonateCompletion.js | 55 ++++ .../Donation/components/DonateForm.js | 207 ++++++++++++ .../Donation/components/StripeCardForm.js | 96 ++++++ .../src/components/Donation/donation.css | 106 +++++++ .../learn/src/components/Donation/index.js | 1 + .../src/components/Map/components/Block.js | 8 +- .../learn/src/components/MapModal/index.js | 63 ---- .../src/components/MapModal/map-modal.css | 3 - packages/learn/src/html.js | 1 + packages/learn/src/layouts/index.js | 2 + packages/learn/src/pages/index.js | 10 +- packages/learn/src/redux/app/index.js | 42 ++- .../Challenges/project/Tool-Panel.js | 8 +- .../Challenges/redux/completion-epic.js | 14 +- .../learn/static/img/powered_by_stripe.svg | 11 + packages/learn/yarn.lock | 16 +- 22 files changed, 741 insertions(+), 570 deletions(-) delete mode 100644 packages/learn/seed/challenges/05-apis-and-microservices/apis-and-microservices-projects.json delete mode 100644 packages/learn/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json create mode 100644 packages/learn/src/components/Donation/Donation.js create mode 100644 packages/learn/src/components/Donation/components/CardForm.js create mode 100644 packages/learn/src/components/Donation/components/DonateCompletion.js create mode 100644 packages/learn/src/components/Donation/components/DonateForm.js create mode 100644 packages/learn/src/components/Donation/components/StripeCardForm.js create mode 100644 packages/learn/src/components/Donation/donation.css create mode 100644 packages/learn/src/components/Donation/index.js delete mode 100644 packages/learn/src/components/MapModal/index.js delete mode 100644 packages/learn/src/components/MapModal/map-modal.css create mode 100644 packages/learn/static/img/powered_by_stripe.svg diff --git a/packages/learn/gatsby-node.js b/packages/learn/gatsby-node.js index 89a3d55702..112f8b070a 100644 --- a/packages/learn/gatsby-node.js +++ b/packages/learn/gatsby-node.js @@ -141,7 +141,8 @@ exports.modifyWebpackConfig = ({ config, stage }) => { { HOME_PATH: JSON.stringify( process.env.HOME_PATH || 'http://localhost:3000' - ) + ), + STRIPE_PUBLIC_KEY: JSON.stringify(process.env.STRIPE_PULIC_KEY || '') } ]); config.plugin('RemoveServiceWorkerPlugin', RmServiceWorkerPlugin, [ diff --git a/packages/learn/package.json b/packages/learn/package.json index 0d105d51e1..2ef42e6699 100644 --- a/packages/learn/package.json +++ b/packages/learn/package.json @@ -15,6 +15,7 @@ "browser-cookies": "^1.2.0", "chai": "^4.1.2", "copy-webpack-plugin": "^4.5.1", + "date-fns": "^1.29.0", "debug": "^3.1.0", "dotenv": "^5.0.1", "enzyme": "^3.3.0", @@ -48,6 +49,7 @@ "react-reflex": "^2.2.1", "react-router-redux": "^5.0.0-alpha.9", "react-spinkit": "^3.0.0", + "react-stripe-elements": "^2.0.0", "react-test-renderer": "^16.3.1", "redux": "^3.7.2", "redux-actions": "^2.3.0", @@ -57,7 +59,7 @@ "rxjs": "^5.5.7", "store": "^2.0.12", "uglifyjs-webpack-plugin": "^1.2.4", - "validator": "^9.4.1", + "validator": "^10.3.0", "webpack-remove-serviceworker-plugin": "^1.0.0" }, "keywords": [ diff --git a/packages/learn/seed/challenges/05-apis-and-microservices/apis-and-microservices-projects.json b/packages/learn/seed/challenges/05-apis-and-microservices/apis-and-microservices-projects.json deleted file mode 100644 index 844835bd7c..0000000000 --- a/packages/learn/seed/challenges/05-apis-and-microservices/apis-and-microservices-projects.json +++ /dev/null @@ -1,174 +0,0 @@ -{ - "name": "APIs and Microservices Projects", - "order": 4, - "time": "150 hours", - "helpRoom": "HelpBackend", - "challenges": [ - { - "id": "bd7158d8c443edefaeb5bdef", - "title": "Timestamp Microservice", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://curse-arrow.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I can pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016).", - "testString": "" - }, - { - "text": "If it does, it returns both the Unix timestamp and the natural language form of that date.", - "testString": "" - }, - { - "text": "If it does not contain a date or Unix timestamp, it returns null for those properties.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 1, 2016", - "translations": { - "es": { - "title": "Microservicio de Marca Temporal" - } - } - }, - { - "id": "bd7158d8c443edefaeb5bdff", - "title": "Request Header Parser Microservice", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://dandelion-roar.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I can get the IP address, language and operating system for my browser.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 1, 2016", - "translations": { - "es": { - "title": "Microservicio para analizar el encabezado de una petición" - } - } - }, - { - "id": "bd7158d8c443edefaeb5bd0e", - "title": "URL Shortener Microservice", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://thread-paper.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.", - "testString": "" - }, - { - "text": "If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead.", - "testString": "" - }, - { - "text": "When I visit that shortened URL, it will redirect me to my original link.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 1, 2016", - "translations": { - "es": { - "title": "Microservicio para acortar URLs" - } - } - }, - { - "id": "5a8b073d06fa14fcfde687aa", - "title": "Exercise Tracker", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://fuschia-custard.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I can create a user by posting form data username to /api/exercise/new-user and returned will be an object with username and _id.", - "testString": "" - }, - { - "text": "I can get an array of all users by getting api/exercise/users with the same info as when creating a user.", - "testString": "" - }, - { - "text": "I can add an exercise to any user by posting form data userId(_id), description, duration, and optionally date to /api/exercise/add. If no date supplied it will use current date. App will return the user object with the exercise fields added.", - "testString": "" - }, - { - "text": "I can retrieve a full exercise log of any user by getting /api/exercise/log with a parameter of userId(_id). App will return the user object with added array log and count (total exercise count).", - "testString": "" - }, - { - "text": "I can retrieve part of the log of any user by also passing along optional parameters of from & to or limit. (Date format yyyy-mm-dd, limit = int)", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "February 17, 2017", - "translations": { - "es": { - "title": "Capa de abstracción para buscar imágenes" - } - } - }, - { - "id": "bd7158d8c443edefaeb5bd0f", - "title": "File Metadata Microservice", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://purple-paladin.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I can submit a FormData object that includes a file upload.", - "testString": "" - }, - { - "text": "When I submit something, I will receive the file size in bytes within the JSON response.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 1, 2016", - "translations": { - "es": { - "title": "Microservicio de metadatos de archivos" - } - } - } - ] -} \ No newline at end of file diff --git a/packages/learn/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json b/packages/learn/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json deleted file mode 100644 index 4a7ec04650..0000000000 --- a/packages/learn/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json +++ /dev/null @@ -1,298 +0,0 @@ -{ - "name": "Information Security and Quality Assurance Projects", - "order": 4, - "time": "150 hours", - "helpRoom": "HelpBackend", - "challenges": [ - { - "id": "587d8249367417b2b2512c41", - "title": "Metric-Imperial Converter", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://hard-twilight.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "I will prevent the client from trying to guess(sniff) the MIME type.", - "testString": "" - }, - { - "text": "I will prevent cross-site scripting (XSS) attacks.", - "testString": "" - }, - { - "text": "I can GET /api/convert with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)", - "testString": "" - }, - { - "text": "I can convert 'gal' to 'L' and vice versa. (1 gal to 3.78541 L)", - "testString": "" - }, - { - "text": "I can convert 'lbs' to 'kg' and vice versa. (1 lbs to 0.453592 kg)", - "testString": "" - }, - { - "text": "I can convert 'mi' to 'km' and vice versa. (1 mi to 1.60934 km)", - "testString": "" - }, - { - "text": "If my unit of measurement is invalid, returned will be 'invalid unit'.", - "testString": "" - }, - { - "text": "If my number is invalid, returned with will 'invalid number'.", - "testString": "" - }, - { - "text": "If both are invalid, return will be 'invalid number and unit'.", - "testString": "" - }, - { - "text": "I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.", - "testString": "" - }, - { - "text": "My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format '{initNum} {initial_Units} converts to {returnNum} {return_Units}' with the result rounded to 5 decimals in the string.", - "testString": "" - }, - { - "text": "All 16 unit tests are complete and passing.", - "testString": "" - }, - { - "text": "All 5 functional tests are complete and passing.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 15, 2017", - "translations": {} - }, - { - "id": "587d8249367417b2b2512c42", - "title": "Issue Tracker", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://protective-garage.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "Prevent cross site scripting (XSS) attacks.", - "testString": "" - }, - { - "text": "I can POST /api/issues/{projectname} with form data containing required issue_title, issue_text, created_by, and optional assigned_to and status_text.", - "testString": "" - }, - { - "text": "The object saved (and returned) will include all of those fields (blank for optional no input) and also include created_on(date/time), updated_on(date/time), open(boolean, true for open, false for closed), and _id.", - "testString": "" - }, - { - "text": "I can PUT /api/issues/{projectname} with a id and any fields in the object with a value to object said object. Returned will be 'successfully updated' or 'could not update '+id. This should always update updated_on. If no fields are sent return 'no updated field sent'.", - "testString": "" - }, - { - "text": "I can DELETE /api/issues/{projectname} with a id to completely delete an issue. If no _id is sent return 'id error', success: 'deleted '+id, failed: 'could not delete '+id.", - "testString": "" - }, - { - "text": "I can GET /api/issues/{projectname} for an array of all issues on that specific project with all the information for each issue as was returned when posted.", - "testString": "" - }, - { - "text": "I can filter my get request by also passing along any field and value in the query(ie. /api/issues/{project}?open=false). I can pass along as many fields/values as I want.", - "testString": "" - }, - { - "text": "All 11 functional tests are complete and passing.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 15, 2017", - "translations": {} - }, - { - "id": "587d824a367417b2b2512c43", - "title": "Personal Library", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://spark-cathedral.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "Nothing from my website will be cached in my client.", - "testString": "" - }, - { - "text": "The headers will say that the site is powered by 'PHP 4.2.0' even though it isn't (as a security measure).", - "testString": "" - }, - { - "text": "I can post a title to /api/books to add a book and returned will be the object with the title and a unique _id.", - "testString": "" - }, - { - "text": "I can get /api/books to retrieve an array of all books containing title, _id, and commentcount.", - "testString": "" - }, - { - "text": "I can get /api/books/{id} to retrieve a single object of a book containing _title, _id, & an array of comments (empty array if no comments present).", - "testString": "" - }, - { - "text": "I can post a comment to /api/books/{id} to add a comment to a book and returned will be the books object similar to get /api/books/{id} including the new comment.", - "testString": "" - }, - { - "text": "I can delete /api/books/{_id} to delete a book from the collection. Returned will be 'delete successful' if successful.", - "testString": "" - }, - { - "text": "If I try to request a book that doesn't exist I will be returned 'no book exists'.", - "testString": "" - }, - { - "text": "I can send a delete request to /api/books to delete all books in the database. Returned will be 'complete delete successful' if successful.", - "testString": "" - }, - { - "text": "All 6 functional tests required are complete and passing.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 15, 2017", - "translations": {} - }, - { - "id": "587d824a367417b2b2512c44", - "title": "Stock Price Checker", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://giant-chronometer.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "Set the content security policies to only allow loading of scripts and css from your server.", - "testString": "" - }, - { - "text": "I can GET /api/stock-prices with form data containing a Nasdaq stock ticker and receive back an object stockData.", - "testString": "" - }, - { - "text": "In stockData, I can see the stock(string, the ticker), price(decimal in string format), and likes(int).", - "testString": "" - }, - { - "text": "I can also pass along field like as true(boolean) to have my like added to the stock(s). Only 1 like per ip should be accepted.", - "testString": "" - }, - { - "text": "If I pass along 2 stocks, the return object will be an array with both stock's info. Instead of likes, it will display rel_likes(the difference between the likes on both stocks) on both.", - "testString": "" - }, - { - "text": "A good way to receive current price is the following external API(replacing 'GOOG' with your stock): https://finance.google.com/finance/info?q=NASDAQ%3aGOOG", - "testString": "" - }, - { - "text": "All 5 functional tests are complete and passing.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 15, 2017", - "translations": {} - }, - { - "id": "587d824a367417b2b2512c45", - "title": "Anonymous Message Board", - "description": [ - "Build a full stack JavaScript app that is functionally similar to this: https://horn-celery.glitch.me/.", - "Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.", - "Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!" - ], - "challengeSeed": [], - "tests": [ - { - "text": "Only allow your site to be loading in an iFrame on your own pages.", - "testString": "" - }, - { - "text": "Do not allow DNS prefetching.", - "testString": "" - }, - { - "text": "Only allow your site to send the referrer for your own pages.", - "testString": "" - }, - { - "text": "I can POST a thread to a specific message board by passing form data text and deletepassword_ to /api/threads/{board}.(Recommend res.redirect to board page /b/{board}) Saved will be at least _id, text, createdon_(date&time), bumpedon_(date&time, starts same as created_on), reported(boolean), deletepassword_, & replies(array).", - "testString": "" - }, - { - "text": "I can POST a reply to a thread on a specific board by passing form data text, deletepassword_, & threadid_ to /api/replies/{board} and it will also update the bumped_on date to the comments date.(Recommend res.redirect to thread page /b/{board}/{thread_id}) In the thread's replies array will be saved _id, text, createdon_, deletepassword_, & reported.", - "testString": "" - }, - { - "text": "I can GET an array of the most recent 10 bumped threads on the board with only the most recent 3 replies each from /api/threads/{board}. The reported and deletepasswords_ fields will not be sent to the client.", - "testString": "" - }, - { - "text": "I can GET an entire thread with all its replies from /api/replies/{board}?thread_id={thread_id}. Also hiding the same fields the client should be see.", - "testString": "" - }, - { - "text": "I can delete a thread completely if I send a DELETE request to /api/threads/{board} and pass along the threadid_ & deletepassword_. (Text response will be 'incorrect password' or 'success')", - "testString": "" - }, - { - "text": "I can delete a post(just changing the text to '[deleted]' instead of removing completely like a thread) if I send a DELETE request to /api/replies/{board} and pass along the threadid_, replyid_, & deletepassword_. (Text response will be 'incorrect password' or 'success')", - "testString": "" - }, - { - "text": "I can report a thread and change its reported value to true by sending a PUT request to /api/threads/{board} and pass along the threadid_. (Text response will be 'success')", - "testString": "" - }, - { - "text": "I can report a reply and change its reported value to true by sending a PUT request to /api/replies/{board} and pass along the threadid_ & replyid_. (Text response will be 'success')", - "testString": "" - }, - { - "text": "Complete functional tests that wholly test routes and pass.", - "testString": "" - } - ], - "solutions": [], - "hints": [], - "challengeType": 4, - "isRequired": true, - "releasedOn": "January 15, 2017", - "translations": {} - } - ] -} \ No newline at end of file diff --git a/packages/learn/src/components/Donation/Donation.js b/packages/learn/src/components/Donation/Donation.js new file mode 100644 index 0000000000..34ef0f982d --- /dev/null +++ b/packages/learn/src/components/Donation/Donation.js @@ -0,0 +1,131 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { createSelector } from 'reselect'; +import { Modal } from 'react-bootstrap'; +import { StripeProvider, Elements } from 'react-stripe-elements'; + +import ga from '../../analytics'; +import DonateForm from './components/DonateForm'; +import DonateCompletion from './components/DonateCompletion'; +import { + userSelector, + closeDonationModal, + isDonationModalOpenSelector +} from '../../redux/app'; + +import './donation.css'; +import poweredByStripe from '../../../static/img/powered_by_stripe.svg'; + +const mapStateToProps = createSelector( + userSelector, + isDonationModalOpenSelector, + ({ email }, show) => ({ email, show }) +); + +const mapDispatchToProps = dispatch => + bindActionCreators( + { + closeDonationModal + }, + dispatch + ); + +const propTypes = { + closeDonationModal: PropTypes.func.isRequired, + email: PropTypes.string, + show: PropTypes.bool +}; + +const stripeKey = 'pk_test_R38mgr7bpfGqZy5vyMAJieka'; + +class DonationModal extends PureComponent { + constructor(...props) { + super(...props); + this.state = { + stripe: null + }; + this.renderCompletion = this.renderCompletion.bind(this); + this.renderMaybe = this.renderMaybe.bind(this); + } + componentDidMount() { + if (window.Stripe) { + /* eslint-disable react/no-did-mount-set-state */ + this.setState(state => ({ + ...state, + stripe: window.Stripe(stripeKey) + })); + } else { + document.querySelector('#stripe-js').addEventListener('load', () => { + // Create Stripe instance once Stripe.js loads + console.info('stripe has loaded'); + this.setState(state => ({ + ...state, + stripe: window.Stripe(stripeKey) + })); + }); + } + } + + renderCompletion(props) { + return ( + + ); + } + + renderMaybe() { + const { closeDonationModal } = this.props; + const handleClick = e => { + e.preventDefault(); + return closeDonationModal(); + }; + return ( +
+ Maybe later +
+ ); + } + + render() { + const { email, show } = this.props; + if (show) { + ga.modalview('/donation-modal'); + } + return ( + + + + + + Support Our NonProfit + + + + + + + + + + + + ); + } +} + +DonationModal.displayName = 'DonationModal'; +DonationModal.propTypes = propTypes; + +export default connect( + mapStateToProps, + mapDispatchToProps, + (state, dispatch, own) => ({ ...state, ...dispatch, ...own }), + { + pure: false + } +)(DonationModal); diff --git a/packages/learn/src/components/Donation/components/CardForm.js b/packages/learn/src/components/Donation/components/CardForm.js new file mode 100644 index 0000000000..bdadb7e9c6 --- /dev/null +++ b/packages/learn/src/components/Donation/components/CardForm.js @@ -0,0 +1,58 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { Button } from 'react-bootstrap'; + +import StripCardForm from './StripeCardForm'; + +const propTypes = { + amount: PropTypes.number.isRequired, + handleSubmit: PropTypes.func.isRequired +}; + +class CardForm extends PureComponent { + constructor(...props) { + super(...props); + + this.state = { + isFormValid: false + }; + + this.getValidationState = this.getValidationState.bind(this); + this.submit = this.submit.bind(this); + } + + submit(e) { + e.preventDefault(); + this.props.handleSubmit(); + } + + getValidationState(isFormValid) { + this.setState(state => ({ + ...state, + isFormValid + })); + } + + render() { + const { amount } = this.props; + const { isFormValid } = this.state; + return ( +
+ + + + ); + } +} +CardForm.displayName = 'CardForm'; +CardForm.propTypes = propTypes; + +export default CardForm; diff --git a/packages/learn/src/components/Donation/components/DonateCompletion.js b/packages/learn/src/components/Donation/components/DonateCompletion.js new file mode 100644 index 0000000000..e95aa56b39 --- /dev/null +++ b/packages/learn/src/components/Donation/components/DonateCompletion.js @@ -0,0 +1,55 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { Alert, Button } from 'react-bootstrap'; +import Spinner from 'react-spinkit'; + +const propTypes = { + close: PropTypes.func.isRequired, + error: PropTypes.string, + processing: PropTypes.bool, + reset: PropTypes.func.isRequired, + success: PropTypes.bool +}; + +function DonateCompletion({ close, processing, reset, success, error = null }) { + /* eslint-disable no-nested-ternary */ + const style = processing ? 'info' : success ? 'success' : 'danger'; + const heading = processing + ? 'We are processing your donation' + : success + ? 'Donation successful. Thank you for supporting the freeCodeCamp ' + + 'community!' + : 'Something went wrong with your donation'; + return ( + +

{heading}

+
+ {processing && ( + + )} + {error && error} +
+

+ {error && ( + + + + + )} + {!processing && } +

+ + ); +} + +DonateCompletion.displayName = 'DonateCompletion'; +DonateCompletion.propTypes = propTypes; + +export default DonateCompletion; diff --git a/packages/learn/src/components/Donation/components/DonateForm.js b/packages/learn/src/components/Donation/components/DonateForm.js new file mode 100644 index 0000000000..b78553fd98 --- /dev/null +++ b/packages/learn/src/components/Donation/components/DonateForm.js @@ -0,0 +1,207 @@ +import React, { PureComponent, Fragment } from 'react'; +import PropTypes from 'prop-types'; +import isEmail from 'validator/lib/isEmail'; + +import CardForm from './CardForm'; +import { injectStripe } from 'react-stripe-elements'; +import { postJSON$ } from '../../../templates/Challenges/utils/ajax-stream'; + +const propTypes = { + email: PropTypes.string, + maybeButton: PropTypes.func.isRequired, + renderCompletion: PropTypes.func.isRequired, + stripe: PropTypes.shape({ + createToken: PropTypes.func.isRequired + }) +}; +const initialSate = { + donationAmount: 500, + donationState: { + processing: false, + success: false, + error: '' + } +}; + +class DonateForm extends PureComponent { + constructor(...args) { + super(...args); + const [props] = args; + + this.state = { + ...initialSate, + email: props.email + }; + + this.buttonAmounts = [500, 1000, 3500, 5000, 25000]; + + this.handleAmountClick = this.handleAmountClick.bind(this); + this.handleEmailChange = this.handleEmailChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + this.isActive = this.isActive.bind(this); + this.renderAmountButtons = this.renderAmountButtons.bind(this); + this.postDonation = this.postDonation.bind(this); + this.resetDonation = this.resetDonation.bind(this); + } + + handleAmountClick(e) { + e.preventDefault(); + const donationAmount = parseInt(e.target.id, 10); + return this.setState(state => ({ + ...state, + donationAmount + })); + } + + handleEmailChange(e) { + const newValue = e.target.value; + return this.setState(state => ({ + ...state, + email: newValue + })); + } + + handleSubmit() { + const { email } = this.state; + if (!email || !isEmail(email)) { + return this.setState(state => ({ + ...state, + donationState: { + ...state.donationState, + error: + 'We need a valid email address to send your donation tax reciept to' + } + })); + } + return this.props.stripe.createToken({ email }).then(({ error, token }) => { + if (error) { + return this.setState(state => ({ + ...state, + donationState: { + ...state.donationState, + error: + 'Something went wrong processing your donation. Your card' + + ' has not been charged.' + } + })); + } + return this.postDonation(token); + }); + } + + isActive(amount) { + return this.state.donationAmount === amount; + } + + postDonation(token) { + const { donationAmount: amount } = this.state; + this.setState(state => ({ + ...state, + donationState: { + ...state.donationState, + processing: true + } + })); + return postJSON$('/external/donate/charge-stripe', { + token, + amount + }).subscribe( + res => + this.setState(state => ({ + ...state, + donationState: { + ...state.donationState, + processing: false, + success: true, + error: res.error + } + })), + err => + this.setState(state => ({ + ...state, + donationState: { + ...state.donationState, + processing: false, + success: false, + error: err.error + } + })) + ); + } + + renderAmountButtons() { + return this.buttonAmounts.map(amount => ( +
  • + {`$${amount / 100}`} +
    • + )); + } + + renderDonateForm() { + return ( + +

    + freeCodeCamp is completely free. But it costs our nonprofit a lot of + money to run it. Help us pay for servers. Set up a tax-deductible + monthly donation you can afford. +

    + + {this.renderEmailInput()} + + {this.props.maybeButton()} +     + ); + } + + renderEmailInput() { + const { email } = this.state; + return ( +
    + +
    + ); + } + + resetDonation() { + return this.setState(() => initialSate); + } + + render() { + const { donationState: { processing, success, error } } = this.state; + const { renderCompletion } = this.props; + if (processing || success || error) { + return renderCompletion({ + processing, + success, + error, + reset: this.resetDonation + }); + } + return this.renderDonateForm(); + } +} + +DonateForm.displayName = 'DonateForm'; +DonateForm.propTypes = propTypes; + +export default injectStripe(DonateForm); diff --git a/packages/learn/src/components/Donation/components/StripeCardForm.js b/packages/learn/src/components/Donation/components/StripeCardForm.js new file mode 100644 index 0000000000..ade77c3d09 --- /dev/null +++ b/packages/learn/src/components/Donation/components/StripeCardForm.js @@ -0,0 +1,96 @@ +import React, { PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { + CardNumberElement, + CardExpiryElement, + CardCVCElement +} from 'react-stripe-elements'; +import { ControlLabel, FormGroup } from 'react-bootstrap'; + +const propTypes = { + getValidationState: PropTypes.func.isRequired +}; + +const style = { + base: { + color: '#006400' + } +}; + +class StripCardForm extends PureComponent { + constructor(...props) { + super(...props); + + this.state = { + validation: { + cardNumber: { + complete: false, + error: null + }, + cardExpiry: { + complete: false, + error: null + }, + cardCvc: { + complete: false, + error: null + } + } + }; + + this.handleInputChange = this.handleInputChange.bind(this); + this.isValidInput = this.isValidInput.bind(this); + } + + componentDidMount() { + this.props.getValidationState(this.isValidInput()); + } + + handleInputChange(event) { + const { elementType, error, complete } = event; + return this.setState( + state => ({ + ...state, + validation: { + ...state.validation, + [elementType]: { + error, + complete + } + } + }), + () => this.props.getValidationState(this.isValidInput()) + ); + } + + isValidInput() { + const { validation } = this.state; + return Object.keys(validation) + .map(key => validation[key]) + .every(({ complete, error }) => complete && !error); + } + + render() { + return ( +
    + + Card Number: + + + + Card Expiry: + + + + Card CVC (3-digit security number): + + +
    + ); + } +} + +StripCardForm.displayName = 'StripCardForm'; +StripCardForm.propTypes = propTypes; + +export default StripCardForm; diff --git a/packages/learn/src/components/Donation/donation.css b/packages/learn/src/components/Donation/donation.css new file mode 100644 index 0000000000..8d1b4229b8 --- /dev/null +++ b/packages/learn/src/components/Donation/donation.css @@ -0,0 +1,106 @@ +.donation-modal { + font-size: 1.2rem; +} + +.donation-modal p { + width: 90%; + margin-left: auto; + margin-right: auto; +} + +.donation-modal .modal-title { + font-size: 1.2rem; +} + +.donation-form { + display: flex; + flex-direction: column; + width:80%; + justify-content: center; + margin: 0 auto; + height: 300px; +} + +#donate-amount-panel ul { + list-style: none; + display: flex; + margin-left: 0px; +} + +#donate-amount-panel li { + flex: 0.20; + display: flex; + justify-content: center; + align-items: center; +} + +#donate-amount-panel a { + width: calc(100% - 20px); + height: 75px; + display: flex; + justify-content: center; + align-items: center; + border: 2px solid #006400; +} + +#donate-amount-panel a:hover, #donate-amount-panel a:focus, #donate-amount-panel a.active { + text-decoration: none; + color: white; + background-color: #006400; + font-weight: bold; +} + +.donation-elements { + display: flex; + height: 100%; + flex-direction: column; + justify-content: space-evenly; +} + +#donation-completion-body { + display: flex; + justify-content: center; + align-items: center; +} + +.donation-completion-buttons { + display: flex; + justify-content: flex-end; +} + +.donation-completion-buttons button { + margin: 0 10px; +} + +.donation-email-container { + width: 80%; + margin: 0 auto; +} + +.donation-email-container label { + display: flex; + flex-direction: column; +} + +.donation-email-container input { + color: #006400; + font-weight: normal; + border: none; +} + +.maybe-later-container { + width: 80%; + margin: 50px auto 0; + display: flex; + justify-content: center; +} + +.maybe-later-container a { + font-size: 18px; +} + +.maybe-later-container a:hover { + text-decoration: none; + font-size: 18px; + cursor: pointer; +} diff --git a/packages/learn/src/components/Donation/index.js b/packages/learn/src/components/Donation/index.js new file mode 100644 index 0000000000..ed478f8eb8 --- /dev/null +++ b/packages/learn/src/components/Donation/index.js @@ -0,0 +1 @@ +export { default } from './Donation'; diff --git a/packages/learn/src/components/Map/components/Block.js b/packages/learn/src/components/Map/components/Block.js index 1882987065..68cb969c01 100644 --- a/packages/learn/src/components/Map/components/Block.js +++ b/packages/learn/src/components/Map/components/Block.js @@ -7,7 +7,7 @@ import Link from 'gatsby-link'; import ga from '../../../analytics'; import { makeExpandedBlockSelector, toggleBlock } from '../redux'; -import { toggleMapModal, userSelector } from '../../../redux/app'; +import { userSelector } from '../../../redux/app'; import Caret from '../../icons/Caret'; /* eslint-disable max-len */ import GreenPass from '../../../templates/Challenges/components/icons/GreenPass'; @@ -27,7 +27,7 @@ const mapStateToProps = (state, ownProps) => { }; const mapDispatchToProps = dispatch => - bindActionCreators({ toggleBlock, toggleMapModal }, dispatch); + bindActionCreators({ toggleBlock }, dispatch); const propTypes = { blockDashedName: PropTypes.string, @@ -41,8 +41,7 @@ const propTypes = { }) }), isExpanded: PropTypes.bool, - toggleBlock: PropTypes.func.isRequired, - toggleMapModal: PropTypes.func.isRequired + toggleBlock: PropTypes.func.isRequired }; const mapIconStyle = { height: '15px', marginRight: '10px', width: '15px' }; @@ -67,7 +66,6 @@ export class Block extends PureComponent { handleChallengeClick(slug) { return () => { - this.props.toggleMapModal(); return ga.event({ category: 'Map Challenge Click', action: slug diff --git a/packages/learn/src/components/MapModal/index.js b/packages/learn/src/components/MapModal/index.js deleted file mode 100644 index 6bac732685..0000000000 --- a/packages/learn/src/components/MapModal/index.js +++ /dev/null @@ -1,63 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import { Modal } from 'react-bootstrap'; - -import { ChallengeNode } from '../../redux/propTypes'; -import Map from '../Map'; -import { toggleMapModal, isMapModalOpenSelector } from '../../redux/app'; - -import Spacer from '../util/Spacer'; - -import './map-modal.css'; - -const mapStateToProps = createSelector(isMapModalOpenSelector, show => ({ - show -})); - -const mapDispatchToProps = dispatch => - bindActionCreators({ toggleMapModal }, dispatch); - -const propTypes = { - introNodes: PropTypes.arrayOf( - PropTypes.shape({ - fields: PropTypes.shape({ slug: PropTypes.string.isRequired }), - frontmatter: PropTypes.shape({ - title: PropTypes.string.isRequired, - block: PropTypes.string.isRequired - }) - }) - ), - nodes: PropTypes.arrayOf(ChallengeNode), - show: PropTypes.bool, - toggleMapModal: PropTypes.func.isRequired -}; - -function MapModal({ introNodes, nodes, show, toggleMapModal }) { - return ( - - - - A Curriculum to Learn to Code - - - - - - - - - ); -} - -MapModal.displayName = 'MapModal'; -MapModal.propTypes = propTypes; - -export default connect(mapStateToProps, mapDispatchToProps)(MapModal); diff --git a/packages/learn/src/components/MapModal/map-modal.css b/packages/learn/src/components/MapModal/map-modal.css deleted file mode 100644 index 677b0dea0e..0000000000 --- a/packages/learn/src/components/MapModal/map-modal.css +++ /dev/null @@ -1,3 +0,0 @@ -.map-modal .map-ui { - overflow-y: scroll; -} \ No newline at end of file diff --git a/packages/learn/src/html.js b/packages/learn/src/html.js index ab7688a8c8..efdc49ff40 100644 --- a/packages/learn/src/html.js +++ b/packages/learn/src/html.js @@ -55,6 +55,7 @@ function HTML(props) { key={'body'} /> {postBodyComponents} +