Add Protocoin to Paymaster

webclient/src/Paymaster.js

@@ -9,6 +9,7 @@ export function Paymaster(props) {
 	const [pop, setPop] = useState('20.00');
 	const [locker, setLocker] = useState('5.00');
 	const [consumables, setConsumables] = useState('20.00');
+	const [buyProtocoin, setBuyProtocoin] = useState('10.00');
 	const [consumablesMemo, setConsumablesMemo] = useState('');
 	const [donate, setDonate] = useState('20.00');
 	const [memo, setMemo] = useState('');
@@ -20,6 +21,31 @@ export function Paymaster(props) {
 			<Header size='large'>Paymaster</Header>
 			<p>Use these buttons to send money to Protospace.</p>
 
+			<Header size='medium'>Protocoin</Header>
+			<p>Protocoin is used to buy things at Protospace's vending machines. Current balance: ₱&thinsp;{user.member.protocoin}</p>
+
+			<Grid stackable padded columns={3}>
+				<Grid.Column>
+					Buy {buyProtocoin} Protocoin:
+
+					<div className='pay-custom'>
+						<Input
+							fluid
+							label={{ basic: true, content: '$' }}
+							labelPosition='left'
+							value={buyProtocoin}
+							onChange={(e, v) => setBuyProtocoin(v.value)}
+						/>
+					</div>
+
+					<PayPalPayNow
+						amount={buyProtocoin}
+						name='Protospace Protocoin'
+						custom={JSON.stringify({ category: 'Exchange', member: user.member.id })}
+					/>
+				</Grid.Column>
+			</Grid>
+
 			<Header size='medium'>Snacks, Pop, Coffee</Header>
 			<Grid stackable padded columns={3}>
 				<Grid.Column>

webclient/src/Transactions.js

@@ -281,7 +281,7 @@ export function TransactionList(props) {
 					<Table.HeaderCell>Date</Table.HeaderCell>
 					{!noMember && <Table.HeaderCell>Member</Table.HeaderCell>}
 					<Table.HeaderCell>Amount</Table.HeaderCell>
-					<Table.HeaderCell>Account</Table.HeaderCell>
+					<Table.HeaderCell>Method</Table.HeaderCell>
 					{!noCategory && <Table.HeaderCell>Category</Table.HeaderCell>}
 					<Table.HeaderCell>Memo</Table.HeaderCell>
 				</Table.Row>
@@ -371,7 +371,7 @@ class TransactionTable extends React.Component {
 						<Table.Cell>{transaction.category}</Table.Cell>
 					</Table.Row>
 					<Table.Row>
-						<Table.Cell>Account:</Table.Cell>
+						<Table.Cell>Method:</Table.Cell>
 						<Table.Cell>{transaction.account_type}</Table.Cell>
 					</Table.Row>
 					{/* <Table.Row>