From f03abc989e77c01e9d59c3c695172b46c6de4ca8 Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Mon, 16 Mar 2020 21:44:10 +0000
Subject: [PATCH] Add input to specify custom donation and pop amounts

---
 webclient/src/Paymaster.js | 38 +++++++++++++++++++++++++++++++-------
 webclient/src/light.css    |  5 +++++
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/webclient/src/Paymaster.js b/webclient/src/Paymaster.js
index 48a08ff..7409172 100644
--- a/webclient/src/Paymaster.js
+++ b/webclient/src/Paymaster.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
 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 { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { NotFound } from './Misc.js';
@@ -9,6 +9,8 @@ import { PayPalPayNow, PayPalSubscribe } from './PayPal.js';
 
 export function Paymaster(props) {
 	const { user } = props;
+	const [pop, setPop] = useState('20.00');
+	const [donate, setDonate] = useState('20.00');
 
 	return (
 		<Container>
@@ -36,11 +38,22 @@ export function Paymaster(props) {
 				</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
-						amount={20}
-						name='Protospace Snacks / Pop'
-						custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
+						amount={pop}
+						name='Protospace Donation'
+						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
 					/>
 				</Grid.Column>
 			</Grid>
@@ -130,9 +143,20 @@ export function Paymaster(props) {
 				</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
-						amount={20}
+						amount={donate}
 						name='Protospace Donation'
 						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
 					/>
diff --git a/webclient/src/light.css b/webclient/src/light.css
index 16782ba..ff771ad 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -113,6 +113,11 @@ body {
 	margin-bottom: 4px;
 }
 
+.pay-custom {
+	margin-bottom: 1rem;
+	width: 10rem;
+}
+
 .footer {
 	margin-top: -20rem;