feat: add one-time links to PayPal.me

pull/38548/head
Mrugesh Mohapatra 2020-04-14 03:16:04 +05:30 committed by Ahmad Abdolsaheb
parent 6157362f61
commit 946cd0665a
3 changed files with 70 additions and 39 deletions

View File

@ -1,4 +1,4 @@
import React, { Component, Fragment } from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
@ -8,9 +8,10 @@ import {
Row,
Col,
ToggleButtonGroup,
ToggleButton
ToggleButton,
Button
} from '@freecodecamp/react-bootstrap';
import { StripeProvider, Elements } from 'react-stripe-elements';
// import { StripeProvider, Elements } from 'react-stripe-elements';
import {
amountsConfig,
@ -19,7 +20,7 @@ import {
defaultStateConfig
} from '../../../../config/donation-settings';
import Spacer from '../helpers/Spacer';
import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
// import DonateFormChildViewForHOC from './DonateFormChildViewForHOC';
import PaypalButton from './PaypalButton';
import DonateCompletion from './DonateCompletion';
import {
@ -201,23 +202,47 @@ class DonateForm extends Component {
this.setState({ processing: hide });
}
renderPayPalMeLink(donationAmount) {
const payPalMeLinkURL =
'https://paypal.me/freecodecamp/' + donationAmount / 100 + 'USD';
return (
<Button
block={true}
className='paypal-button-onetime'
href={payPalMeLinkURL}
></Button>
);
}
renderDonationOptions() {
const { stripe, handleProcessing } = this.props;
// const { stripe, handleProcessing, isSignedIn } = this.props;
const { handleProcessing, isSignedIn } = this.props;
const { donationAmount, donationDuration } = this.state;
const isOneTime = donationDuration === 'onetime';
return (
<div>
<StripeProvider stripe={stripe}>
<Elements>
<DonateFormChildViewForHOC
defaultTheme='default'
donationAmount={donationAmount}
donationDuration={donationDuration}
getDonationButtonLabel={this.getDonationButtonLabel}
handleProcessing={handleProcessing}
hideAmountOptionsCB={this.hideAmountOptionsCB}
/>
</Elements>
</StripeProvider>
{isOneTime ? (
<b>Confirm your one-time donation of ${donationAmount / 100} :</b>
) : (
<b>
Confirm your donation of ${donationAmount / 100} /{' '}
{donationDuration} :
</b>
)}
<Spacer />
{isOneTime ? (
this.renderPayPalMeLink(donationAmount)
) : (
<PaypalButton
donationAmount={donationAmount}
donationDuration={donationDuration}
handleProcessing={handleProcessing}
onDonationStateChange={this.onDonationStateChange}
skipAddDonation={!isSignedIn}
/>
)}
<Spacer />
<Spacer size={2} />
</div>
);
@ -232,12 +257,9 @@ class DonateForm extends Component {
}
render() {
const { donationAmount, donationDuration } = this.state;
const { handleProcessing, isSignedIn } = this.props;
const {
donationState: { processing, success, error }
} = this.state;
const subscriptionPayment = donationDuration !== 'onetime';
if (processing || success || error) {
return this.renderCompletion({
processing,
@ -252,24 +274,7 @@ class DonateForm extends Component {
{this.renderDurationAmountOptions()}
</Col>
<Col sm={10} smOffset={1} xs={12}>
{subscriptionPayment ? (
<Fragment>
<b>
Confirm your donation of ${donationAmount / 100} /{' '}
{donationDuration} with PayPal:
</b>
<Spacer />
</Fragment>
) : (
''
)}
<PaypalButton
donationAmount={donationAmount}
donationDuration={donationDuration}
handleProcessing={handleProcessing}
onDonationStateChange={this.onDonationStateChange}
skipAddDonation={!isSignedIn}
/>
{this.renderDonationOptions()}
</Col>
</Row>
);

View File

@ -306,3 +306,28 @@ li.disabled > a {
width: 250px;
}
}
.paypal-button-onetime {
border: 1px solid #ffc439;
padding: 2px;
border-radius: 5px;
content: ' ';
background-position: center center;
background-repeat: no-repeat;
background-color: #ffc439;
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2Ni45MyAxMzcuMzUiPgogIDxkZWZzPgogICAgPHN0eWxlPi5jbHMtMXtmaWxsOiMwMDllZTM7fS5jbHMtMSwuY2xzLTIsLmNscy0ze2ZpbGwtcnVsZTpldmVub2RkO30uY2xzLTJ7ZmlsbDojMTEzOTg0O30uY2xzLTN7ZmlsbDojMTcyYzcwO308L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xOTIuOTUsMzg2Ljg3aDM4Ljc0YzIwLjgsMCwyOC42MywxMC41MywyNy40MiwyNi0yLDI1LjU0LTE3LjQ0LDM5LjY3LTM3LjkyLDM5LjY3SDIxMC44NWMtMi44MSwwLTQuNywxLjg2LTUuNDYsNi45TDIwMSw0ODguNzRjLTAuMjksMS45LTEuMjksMy0yLjc5LDMuMTVIMTczLjg3Yy0yLjI5LDAtMy4xLTEuNzUtMi41LTUuNTRsMTQuODQtOTMuOTNDMTg2Ljc5LDM4OC42NiwxODguODUsMzg2Ljg3LDE5Mi45NSwzODYuODdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzLjQ4IC0zNTQuNTQpIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzYxLjE0LDM4NS4xM2MxMy4wNywwLDI1LjEzLDcuMDksMjMuNDgsMjQuNzYtMiwyMS0xMy4yNSwzMi42Mi0zMSwzMi42N0gzMzguMTFjLTIuMjMsMC0zLjMxLDEuODItMy44OSw1LjU1bC0zLDE5LjA3Yy0wLjQ1LDIuODgtMS45Myw0LjMtNC4xMSw0LjNIMzEyLjY4Yy0yLjMsMC0zLjEtMS40Ny0yLjU5LTQuNzZMMzIyLDM5MC4yOWMwLjU5LTMuNzYsMi01LjE2LDQuNTctNS4xNmgzNC41NFptLTIzLjUsNDAuOTJoMTEuNzVjNy4zNS0uMjgsMTIuMjMtNS4zNywxMi43Mi0xNC41NSwwLjMtNS42Ny0zLjUzLTkuNzMtOS42Mi05LjdsLTExLjA2LjA1LTMuNzksMjQuMmgwWm04Ni4yMSwzOS41OGMxLjMyLTEuMiwyLjY2LTEuODIsMi40Ny0uMzRsLTAuNDcsMy41NGMtMC4yNCwxLjg1LjQ5LDIuODMsMi4yMSwyLjgzaDEyLjgyYzIuMTYsMCwzLjIxLS44NywzLjc0LTQuMjFsNy45LTQ5LjU4YzAuNC0yLjQ5LS4yMS0zLjcxLTIuMS0zLjcxSDQzNi4zMmMtMS4yNywwLTEuODkuNzEtMi4yMiwyLjY1bC0wLjUyLDMuMDVjLTAuMjcsMS41OS0xLDEuODctMS42OC4yNy0yLjM5LTUuNjYtOC40OS04LjItMTctOC0xOS43Ny40MS0zMy4xLDE1LjQyLTM0LjUzLDM0LjY2LTEuMSwxNC44OCw5LjU2LDI2LjU3LDIzLjYyLDI2LjU3LDEwLjIsMCwxNC43Ni0zLDE5LjktNy43aDBaTTQxMy4xMSw0NThjLTguNTEsMC0xNC40NC02Ljc5LTEzLjIxLTE1LjExczkuMTktMTUuMTEsMTcuNy0xNS4xMSwxNC40NCw2Ljc5LDEzLjIxLDE1LjExUzQyMS42Myw0NTgsNDEzLjExLDQ1OGgwWm02NC41LTQ0aC0xM2MtMi42OCwwLTMuNzcsMi0yLjkyLDQuNDZsMTYuMTQsNDcuMjZMNDYyLDQ4OC4yMWMtMS4zMywxLjg4LS4zLDMuNTksMS41NywzLjU5aDE0LjYxYTQuNDcsNC40NywwLDAsMCw0LjM0LTIuMTNsNDkuNjQtNzEuMmMxLjUzLTIuMTkuODEtNC40OS0xLjctNC40OUg1MTYuNjNjLTIuMzcsMC0zLjMyLjk0LTQuNjgsMi45MWwtMjAuNywzMEw0ODIsNDE2LjgyQzQ4MS40Niw0MTUsNDgwLjExLDQxNCw0NzcuNjIsNDE0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0My40OCAtMzU0LjU0KSIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU4My44LDM4NS4xM2MxMy4wNywwLDI1LjEzLDcuMDksMjMuNDgsMjQuNzYtMiwyMS0xMy4yNSwzMi42Mi0zMSwzMi42N0g1NjAuNzhjLTIuMjMsMC0zLjMxLDEuODItMy44OSw1LjU1bC0zLDE5LjA3Yy0wLjQ1LDIuODgtMS45Myw0LjMtNC4xMSw0LjNINTM1LjM1Yy0yLjMsMC0zLjEtMS40Ny0yLjU5LTQuNzZsMTEuOTMtNzYuNDVjMC41OS0zLjc2LDItNS4xNiw0LjU3LTUuMTZINTgzLjhabS0yMy41LDQwLjkyaDExLjc1YzcuMzUtLjI4LDEyLjIzLTUuMzcsMTIuNzItMTQuNTUsMC4zLTUuNjctMy41My05LjczLTkuNjItOS43bC0xMS4wNi4wNS0zLjc5LDI0LjJoMFptODYuMjEsMzkuNThjMS4zMi0xLjIsMi42Ni0xLjgyLDIuNDctLjM0bC0wLjQ3LDMuNTRjLTAuMjQsMS44NS40OSwyLjgzLDIuMjEsMi44M2gxMi44MmMyLjE2LDAsMy4yMS0uODcsMy43NC00LjIxbDcuOS00OS41OGMwLjQtMi40OS0uMjEtMy43MS0yLjEtMy43MUg2NTljLTEuMjcsMC0xLjg5LjcxLTIuMjIsMi42NWwtMC41MiwzLjA1Yy0wLjI3LDEuNTktMSwxLjg3LTEuNjguMjctMi4zOS01LjY2LTguNDktOC4yLTE3LTgtMTkuNzcuNDEtMzMuMSwxNS40Mi0zNC41MywzNC42Ni0xLjEsMTQuODgsOS41NiwyNi41NywyMy42MiwyNi41NywxMC4yLDAsMTQuNzYtMywxOS45LTcuN2gwWk02MzUuNzgsNDU4Yy04LjUxLDAtMTQuNDQtNi43OS0xMy4yMS0xNS4xMXM5LjE5LTE1LjExLDE3LjctMTUuMTEsMTQuNDQsNi43OSwxMy4yMSwxNS4xMVM2NDQuMjksNDU4LDYzNS43OCw0NThoMFptNTkuMTMsMTMuNzRoLTE0LjhhMS43NSwxLjc1LDAsMCwxLTEuODEtMmwxMy04Mi4zNmEyLjU1LDIuNTUsMCwwLDEsMi40Ni0yaDE0LjhhMS43NSwxLjc1LDAsMCwxLDEuODEsMmwtMTMsODIuMzZBMi41NSwyLjU1LDAsMCwxLDY5NC45MSw0NzEuNzZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzLjQ4IC0zNTQuNTQpIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTY4LjcyLDM1NC41NGgzOC43OGMxMC45MiwwLDIzLjg4LjM1LDMyLjU0LDgsNS43OSw1LjExLDguODMsMTMuMjQsOC4xMywyMi0yLjM4LDI5LjYxLTIwLjA5LDQ2LjItNDMuODUsNDYuMkgxODUuMmMtMy4yNiwwLTUuNDEsMi4xNi02LjMzLDhsLTUuMzQsMzRjLTAuMzUsMi4yLTEuMywzLjUtMywzLjY2SDE0Ni42Yy0yLjY1LDAtMy41OS0yLTIuOS02LjQyTDE2MC45LDM2MUMxNjEuNTksMzU2LjYyLDE2NCwzNTQuNTQsMTY4LjcyLDM1NC41NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDMuNDggLTM1NC41NCkiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xNzkuNDMsNDM1LjI5bDYuNzctNDIuODdjMC41OS0zLjc2LDIuNjUtNS41Niw2Ljc1LTUuNTZoMzguNzRjNi40MSwwLDExLjYsMSwxNS42NiwyLjg1LTMuODksMjYuMzYtMjAuOTQsNDEtNDMuMjYsNDFIMTg1QzE4Mi40NCw0MzAuNzIsMTgwLjU2LDQzMiwxNzkuNDMsNDM1LjI5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0My40OCAtMzU0LjU0KSIvPgo8L3N2Zz4=');
background-size: 84px;
height: 42px;
}
.paypal-button-onetime:hover,
.paypal-button-onetime:active,
.paypal-button-onetime:active:hover {
border: 1px solid #ffc439;
background-position: center center;
background-repeat: no-repeat;
background-color: #ffc439;
background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDU2Ni45MyAxMzcuMzUiPgogIDxkZWZzPgogICAgPHN0eWxlPi5jbHMtMXtmaWxsOiMwMDllZTM7fS5jbHMtMSwuY2xzLTIsLmNscy0ze2ZpbGwtcnVsZTpldmVub2RkO30uY2xzLTJ7ZmlsbDojMTEzOTg0O30uY2xzLTN7ZmlsbDojMTcyYzcwO308L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xOTIuOTUsMzg2Ljg3aDM4Ljc0YzIwLjgsMCwyOC42MywxMC41MywyNy40MiwyNi0yLDI1LjU0LTE3LjQ0LDM5LjY3LTM3LjkyLDM5LjY3SDIxMC44NWMtMi44MSwwLTQuNywxLjg2LTUuNDYsNi45TDIwMSw0ODguNzRjLTAuMjksMS45LTEuMjksMy0yLjc5LDMuMTVIMTczLjg3Yy0yLjI5LDAtMy4xLTEuNzUtMi41LTUuNTRsMTQuODQtOTMuOTNDMTg2Ljc5LDM4OC42NiwxODguODUsMzg2Ljg3LDE5Mi45NSwzODYuODdaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzLjQ4IC0zNTQuNTQpIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMzYxLjE0LDM4NS4xM2MxMy4wNywwLDI1LjEzLDcuMDksMjMuNDgsMjQuNzYtMiwyMS0xMy4yNSwzMi42Mi0zMSwzMi42N0gzMzguMTFjLTIuMjMsMC0zLjMxLDEuODItMy44OSw1LjU1bC0zLDE5LjA3Yy0wLjQ1LDIuODgtMS45Myw0LjMtNC4xMSw0LjNIMzEyLjY4Yy0yLjMsMC0zLjEtMS40Ny0yLjU5LTQuNzZMMzIyLDM5MC4yOWMwLjU5LTMuNzYsMi01LjE2LDQuNTctNS4xNmgzNC41NFptLTIzLjUsNDAuOTJoMTEuNzVjNy4zNS0uMjgsMTIuMjMtNS4zNywxMi43Mi0xNC41NSwwLjMtNS42Ny0zLjUzLTkuNzMtOS42Mi05LjdsLTExLjA2LjA1LTMuNzksMjQuMmgwWm04Ni4yMSwzOS41OGMxLjMyLTEuMiwyLjY2LTEuODIsMi40Ny0uMzRsLTAuNDcsMy41NGMtMC4yNCwxLjg1LjQ5LDIuODMsMi4yMSwyLjgzaDEyLjgyYzIuMTYsMCwzLjIxLS44NywzLjc0LTQuMjFsNy45LTQ5LjU4YzAuNC0yLjQ5LS4yMS0zLjcxLTIuMS0zLjcxSDQzNi4zMmMtMS4yNywwLTEuODkuNzEtMi4yMiwyLjY1bC0wLjUyLDMuMDVjLTAuMjcsMS41OS0xLDEuODctMS42OC4yNy0yLjM5LTUuNjYtOC40OS04LjItMTctOC0xOS43Ny40MS0zMy4xLDE1LjQyLTM0LjUzLDM0LjY2LTEuMSwxNC44OCw5LjU2LDI2LjU3LDIzLjYyLDI2LjU3LDEwLjIsMCwxNC43Ni0zLDE5LjktNy43aDBaTTQxMy4xMSw0NThjLTguNTEsMC0xNC40NC02Ljc5LTEzLjIxLTE1LjExczkuMTktMTUuMTEsMTcuNy0xNS4xMSwxNC40NCw2Ljc5LDEzLjIxLDE1LjExUzQyMS42Myw0NTgsNDEzLjExLDQ1OGgwWm02NC41LTQ0aC0xM2MtMi42OCwwLTMuNzcsMi0yLjkyLDQuNDZsMTYuMTQsNDcuMjZMNDYyLDQ4OC4yMWMtMS4zMywxLjg4LS4zLDMuNTksMS41NywzLjU5aDE0LjYxYTQuNDcsNC40NywwLDAsMCw0LjM0LTIuMTNsNDkuNjQtNzEuMmMxLjUzLTIuMTkuODEtNC40OS0xLjctNC40OUg1MTYuNjNjLTIuMzcsMC0zLjMyLjk0LTQuNjgsMi45MWwtMjAuNywzMEw0ODIsNDE2LjgyQzQ4MS40Niw0MTUsNDgwLjExLDQxNCw0NzcuNjIsNDE0WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0My40OCAtMzU0LjU0KSIvPgogIDxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU4My44LDM4NS4xM2MxMy4wNywwLDI1LjEzLDcuMDksMjMuNDgsMjQuNzYtMiwyMS0xMy4yNSwzMi42Mi0zMSwzMi42N0g1NjAuNzhjLTIuMjMsMC0zLjMxLDEuODItMy44OSw1LjU1bC0zLDE5LjA3Yy0wLjQ1LDIuODgtMS45Myw0LjMtNC4xMSw0LjNINTM1LjM1Yy0yLjMsMC0zLjEtMS40Ny0yLjU5LTQuNzZsMTEuOTMtNzYuNDVjMC41OS0zLjc2LDItNS4xNiw0LjU3LTUuMTZINTgzLjhabS0yMy41LDQwLjkyaDExLjc1YzcuMzUtLjI4LDEyLjIzLTUuMzcsMTIuNzItMTQuNTUsMC4zLTUuNjctMy41My05LjczLTkuNjItOS43bC0xMS4wNi4wNS0zLjc5LDI0LjJoMFptODYuMjEsMzkuNThjMS4zMi0xLjIsMi42Ni0xLjgyLDIuNDctLjM0bC0wLjQ3LDMuNTRjLTAuMjQsMS44NS40OSwyLjgzLDIuMjEsMi44M2gxMi44MmMyLjE2LDAsMy4yMS0uODcsMy43NC00LjIxbDcuOS00OS41OGMwLjQtMi40OS0uMjEtMy43MS0yLjEtMy43MUg2NTljLTEuMjcsMC0xLjg5LjcxLTIuMjIsMi42NWwtMC41MiwzLjA1Yy0wLjI3LDEuNTktMSwxLjg3LTEuNjguMjctMi4zOS01LjY2LTguNDktOC4yLTE3LTgtMTkuNzcuNDEtMzMuMSwxNS40Mi0zNC41MywzNC42Ni0xLjEsMTQuODgsOS41NiwyNi41NywyMy42MiwyNi41NywxMC4yLDAsMTQuNzYtMywxOS45LTcuN2gwWk02MzUuNzgsNDU4Yy04LjUxLDAtMTQuNDQtNi43OS0xMy4yMS0xNS4xMXM5LjE5LTE1LjExLDE3LjctMTUuMTEsMTQuNDQsNi43OSwxMy4yMSwxNS4xMVM2NDQuMjksNDU4LDYzNS43OCw0NThoMFptNTkuMTMsMTMuNzRoLTE0LjhhMS43NSwxLjc1LDAsMCwxLTEuODEtMmwxMy04Mi4zNmEyLjU1LDIuNTUsMCwwLDEsMi40Ni0yaDE0LjhhMS43NSwxLjc1LDAsMCwxLDEuODEsMmwtMTMsODIuMzZBMi41NSwyLjU1LDAsMCwxLDY5NC45MSw0NzEuNzZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTQzLjQ4IC0zNTQuNTQpIi8+CiAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTY4LjcyLDM1NC41NGgzOC43OGMxMC45MiwwLDIzLjg4LjM1LDMyLjU0LDgsNS43OSw1LjExLDguODMsMTMuMjQsOC4xMywyMi0yLjM4LDI5LjYxLTIwLjA5LDQ2LjItNDMuODUsNDYuMkgxODUuMmMtMy4yNiwwLTUuNDEsMi4xNi02LjMzLDhsLTUuMzQsMzRjLTAuMzUsMi4yLTEuMywzLjUtMywzLjY2SDE0Ni42Yy0yLjY1LDAtMy41OS0yLTIuOS02LjQyTDE2MC45LDM2MUMxNjEuNTksMzU2LjYyLDE2NCwzNTQuNTQsMTY4LjcyLDM1NC41NFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNDMuNDggLTM1NC41NCkiLz4KICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik0xNzkuNDMsNDM1LjI5bDYuNzctNDIuODdjMC41OS0zLjc2LDIuNjUtNS41Niw2Ljc1LTUuNTZoMzguNzRjNi40MSwwLDExLjYsMSwxNS42NiwyLjg1LTMuODksMjYuMzYtMjAuOTQsNDEtNDMuMjYsNDFIMTg1QzE4Mi40NCw0MzAuNzIsMTgwLjU2LDQzMiwxNzkuNDMsNDM1LjI5WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE0My40OCAtMzU0LjU0KSIvPgo8L3N2Zz4=');
background-size: 84px;
filter: brightness(0.95);
}

View File

@ -1,7 +1,8 @@
// Configuration for client side
const durationsConfig = {
year: 'yearly',
month: 'monthly'
month: 'monthly',
onetime: 'one-time'
};
const amountsConfig = {
year: [100000, 25000, 6000],