tanner/spaceport
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add input to specify custom donation and pop amounts

Browse Source
This commit is contained in:
Tanner Collin 2020-03-16 21:44:10 +00:00
parent a3db260e08
commit f03abc989e
2 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
webclient/src/Paymaster.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
import './light.css'; import './light.css';
import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react'; import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Menu, Message, Segment, Table } from 'semantic-ui-react';
import moment from 'moment'; import moment from 'moment';
import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js'; import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
import { NotFound } from './Misc.js'; import { NotFound } from './Misc.js';
@ -9,6 +9,8 @@ import { PayPalPayNow, PayPalSubscribe } from './PayPal.js';
export function Paymaster(props) { export function Paymaster(props) {
const { user } = props; const { user } = props;
const [pop, setPop] = useState('20.00');
const [donate, setDonate] = useState('20.00');
return ( return (
<Container> <Container>
@ -36,11 +38,22 @@ export function Paymaster(props) {
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
<p>Pay $20.00:</p> Custom amount:
<div className='pay-custom'>
<Input
fluid
label={{ basic: true, content: '$' }}
labelPosition='left'
value={pop}
onChange={(e, v) => setPop(v.value)}
/>
</div>
<PayPalPayNow <PayPalPayNow
amount={20} amount={pop}
name='Protospace Snacks / Pop' name='Protospace Donation'
custom={JSON.stringify({ category: 'Snacks', member: user.member.id })} custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
/> />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
@ -130,9 +143,20 @@ export function Paymaster(props) {
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
<p>Donate $20.00:</p> Custom amount:
<div className='pay-custom'>
<Input
fluid
label={{ basic: true, content: '$' }}
labelPosition='left'
value={donate}
onChange={(e, v) => setDonate(v.value)}
/>
</div>
<PayPalPayNow <PayPalPayNow
amount={20} amount={donate}
name='Protospace Donation' name='Protospace Donation'
custom={JSON.stringify({ category: 'Donation', member: user.member.id })} custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
/> />

5
webclient/src/light.css
View File

@ -113,6 +113,11 @@ body {
margin-bottom: 4px; margin-bottom: 4px;
} }
.pay-custom {
margin-bottom: 1rem;
width: 10rem;
}
.footer { .footer {
margin-top: -20rem; margin-top: -20rem;