From d08a87bcd6fb56315d1703aa5f22aabcdafb247e Mon Sep 17 00:00:00 2001 From: Ahmad Abdolsaheb Date: Mon, 23 Dec 2019 15:31:10 +0300 Subject: [PATCH] feat: add payment option image to donation forms (#37938) --- client/src/assets/icons/Payapl.js | 50 +++++++++ .../client-only-routes/ShowCertification.js | 33 +++--- .../components/Donation/DonateCompletion.js | 6 +- client/src/components/Donation/Donation.css | 100 ++++++++++++------ .../src/components/Donation/DonationModal.js | 36 ++++--- .../src/components/Donation/StripeCardForm.js | 34 ++++-- .../YearEndGift/YearEndDonationForm.js | 2 - client/src/pages/certification.css | 4 +- client/src/pages/donate.js | 2 +- 9 files changed, 191 insertions(+), 76 deletions(-) create mode 100644 client/src/assets/icons/Payapl.js diff --git a/client/src/assets/icons/Payapl.js b/client/src/assets/icons/Payapl.js new file mode 100644 index 00000000000..be51879a70e --- /dev/null +++ b/client/src/assets/icons/Payapl.js @@ -0,0 +1,50 @@ +/* eslint-disable max-len */ +import React, { Fragment } from 'react'; + +const propTypes = {}; + +function Paypal(props) { + return ( + + Paypal + + + + + + + + + + ); +} + +Paypal.displayName = 'Paypal'; +Paypal.propTypes = propTypes; + +export default Paypal; diff --git a/client/src/client-only-routes/ShowCertification.js b/client/src/client-only-routes/ShowCertification.js index 04b35718bb5..3981692f6d1 100644 --- a/client/src/client-only-routes/ShowCertification.js +++ b/client/src/client-only-routes/ShowCertification.js @@ -23,7 +23,7 @@ import standardErrorMessage from '../utils/standardErrorMessage'; import reallyWeirdErrorMessage from '../utils/reallyWeirdErrorMessage'; import RedirectHome from '../components/RedirectHome'; -import { Loader, Spacer } from '../components/helpers'; +import { Loader } from '../components/helpers'; const propTypes = { cert: PropTypes.shape({ @@ -153,14 +153,13 @@ class ShowCertification extends Component { const donationCloseBtn = (
-
); @@ -173,23 +172,25 @@ class ShowCertification extends Component { ) { conditionalDonationSection = ( - - -

- Only you can see this message. Congratulations on earning this - certification. It’s no easy task. Running freeCodeCamp isn’t - easy either. Nor is it cheap. Help us help you and many other - people around the world. Make a tax-deductible supporting - donation to our nonprofit today. -

- - + {!closeBtn && ( + + +

+ Only you can see this message. Congratulations on earning this + certification. It’s no easy task. Running freeCodeCamp isn’t + easy either. Nor is it cheap. Help us help you and many other + people around the world. Make a tax-deductible supporting + donation to our nonprofit today. +

+ + + )} - - + + {closeBtn ? donationCloseBtn : ''} diff --git a/client/src/components/Donation/DonateCompletion.js b/client/src/components/Donation/DonateCompletion.js index 28d6367a0ba..745fad87b81 100644 --- a/client/src/components/Donation/DonateCompletion.js +++ b/client/src/components/Donation/DonateCompletion.js @@ -46,9 +46,13 @@ function DonateCompletion({ {success && !yearEndGift && (

- Your donation will support free technology education for people + Your donations will support free technology education for people all over the world.

+

+ You can update your supporter status at any time from your + settings page. +

)} {success && yearEndGift && ( diff --git a/client/src/components/Donation/Donation.css b/client/src/components/Donation/Donation.css index ce4321568ec..584a11b82d3 100644 --- a/client/src/components/Donation/Donation.css +++ b/client/src/components/Donation/Donation.css @@ -176,14 +176,6 @@ li.disabled > a { } } -.donation-icon-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 40px; -} - .donation-icon { width: 150px; height: auto; @@ -205,33 +197,79 @@ li.disabled > a { } } -.donation-modal p { - text-align: center; - font-weight: 700; - font-size: 1.1rem; -} - -.donation-modal .modal-title { - text-align: center; - font-weight: 700; - font-size: 1.5rem; -} - .donation-modal .btn-link:focus { outline-width: 1px; outline-style: solid; } -@media screen and (max-width: 991px) { - .donation-icon-container { - margin: 30px; - } - .donation-modal p { - font-weight: 400; - font-size: 1rem; - } - .donation-modal .modal-title { - font-weight: 600; - font-size: 1.2rem; +.donation-modal .modal-title { + text-align: center; + font-weight: 600; + font-size: 1.2rem; +} + +.donation-modal p, +.donation-modal b { + text-align: center; + font-size: 1rem; +} + +.donation-icon-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 30px; +} + +.form-payments-wrapper { + height: auto; + display: flex; + align-items: center; + justify-content: flex-start; + margin-top: 15px; + height: auto; +} + +.form-payment-methods { + height: 20px; + width: 200px; +} + +@media screen and (min-width: 355px) { + .form-payment-methods { + height: 30px; + width: 300px; + } +} + +@media screen and (min-width: 991px) { + .form-payments-wrapper { + justify-content: flex-end; + margin-top: 0; + height: 39px; + } + .donate-page-wrapper .form-payment-methods { + height: 22px; + width: 220px; + } + .donation-icon-container { + margin: 40px; + } + + .donation-modal p { + font-size: 1.1rem; + } + + .donation-modal .modal-title { + font-weight: 700; + font-size: 1.5rem; + } +} + +@media screen and (min-width: 1200px) { + .donate-page-wrapper .form-payment-methods { + height: 25px; + width: 250px; } } diff --git a/client/src/components/Donation/DonationModal.js b/client/src/components/Donation/DonationModal.js index ae12ac79811..39590baffc8 100644 --- a/client/src/components/Donation/DonationModal.js +++ b/client/src/components/Donation/DonationModal.js @@ -58,16 +58,25 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) { if (show) { ga.modalview('/donation-modal'); } + + const donationText = ( + + Become a supporter and help us create even more learning resources for + you. + + ); const blockDonationText = (
- -

Nicely done. You just completed {blockNameify(block)}.

-

Help us create even more learning resources like this.

- + {!closeLabel && ( + + Nicely done. You just completed {blockNameify(block)}. + {donationText} + + )}
); @@ -78,29 +87,24 @@ function DonateModal({ show, block, isBlockDonation, closeDonationModal }) { - -

- Help us create even more learning resources for you and your family. -

- + {!closeLabel && ( + + {donationText} + + )} ); return ( - - - Become a Supporter - - {isBlockDonation ? blockDonationText : progressDonationText} - + diff --git a/client/src/components/Donation/StripeCardForm.js b/client/src/components/Donation/StripeCardForm.js index 48eda6d9ec5..fb6e9fa5563 100644 --- a/client/src/components/Donation/StripeCardForm.js +++ b/client/src/components/Donation/StripeCardForm.js @@ -1,7 +1,13 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { CardNumberElement, CardExpiryElement } from 'react-stripe-elements'; -import { ControlLabel, FormGroup } from '@freecodecamp/react-bootstrap'; +import { + Row, + Col, + ControlLabel, + FormGroup, + Image +} from '@freecodecamp/react-bootstrap'; const propTypes = { getValidationState: PropTypes.func.isRequired, @@ -77,12 +83,26 @@ class StripeCardForm extends Component { /> - Your Card Expiration Month: - + Expiration Date: + + + + + + payment options + + ); diff --git a/client/src/components/YearEndGift/YearEndDonationForm.js b/client/src/components/YearEndGift/YearEndDonationForm.js index 0bbafc32fd2..d60f5ebf748 100644 --- a/client/src/components/YearEndGift/YearEndDonationForm.js +++ b/client/src/components/YearEndGift/YearEndDonationForm.js @@ -255,7 +255,6 @@ class YearEndDonationForm extends Component { ? this.renderCustomAmountInput() : this.renderOtherPaymentButton()} - {this.renderDonationOptions()} @@ -267,7 +266,6 @@ class YearEndDonationForm extends Component { {this.renderPayPalDonations()} - If you need a receipt from your taxes, reply to Quincy's email he diff --git a/client/src/pages/certification.css b/client/src/pages/certification.css index 4a405fce55e..01f62379c68 100644 --- a/client/src/pages/certification.css +++ b/client/src/pages/certification.css @@ -42,13 +42,13 @@ padding: 20px 0px; } -.certificate-outer-wrapper .certification-donation .btn { +.certificate-outer-wrapper .btn { background-color: var(--gray-15); border-color: var(--gray-85); color: var(--gray-85); } -.certificate-outer-wrapper .certification-donation .btn:hover { +.certificate-outer-wrapper .btn:hover { border-color: var(--gray-85); background-color: var(--gray-85); color: var(--gray-05); diff --git a/client/src/pages/donate.js b/client/src/pages/donate.js index ce1467069a7..f2464d302bf 100644 --- a/client/src/pages/donate.js +++ b/client/src/pages/donate.js @@ -76,7 +76,7 @@ export class DonatePage extends Component { return ( - +