2022-07-13 06:37:12 +00:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { Link } from 'react-router-dom';
|
2020-02-21 07:46:13 +00:00
|
|
|
import './light.css';
|
2022-07-13 06:37:12 +00:00
|
|
|
import { Container, Grid, Header, Input } from 'semantic-ui-react';
|
2020-02-21 07:46:13 +00:00
|
|
|
import { PayPalPayNow, PayPalSubscribe } from './PayPal.js';
|
|
|
|
|
|
|
|
export function Paymaster(props) {
|
|
|
|
const { user } = props;
|
2020-03-16 21:44:10 +00:00
|
|
|
const [pop, setPop] = useState('20.00');
|
2020-06-19 04:55:48 +00:00
|
|
|
const [locker, setLocker] = useState('5.00');
|
2022-01-25 04:12:22 +00:00
|
|
|
const [consumables, setConsumables] = useState('20.00');
|
|
|
|
const [consumablesMemo, setConsumablesMemo] = useState('');
|
2020-03-16 21:44:10 +00:00
|
|
|
const [donate, setDonate] = useState('20.00');
|
2021-06-24 23:18:19 +00:00
|
|
|
const [memo, setMemo] = useState('');
|
2020-02-21 07:46:13 +00:00
|
|
|
|
2020-08-27 03:19:26 +00:00
|
|
|
const monthly_fees = user.member.monthly_fees || 55;
|
|
|
|
|
2020-02-21 07:46:13 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
<Header size='large'>Paymaster</Header>
|
|
|
|
<p>Use these buttons to send money to Protospace.</p>
|
|
|
|
|
|
|
|
<Header size='medium'>Snacks, Pop, Coffee</Header>
|
|
|
|
<Grid stackable padded columns={3}>
|
|
|
|
<Grid.Column>
|
|
|
|
<p>Pay $5.00:</p>
|
|
|
|
<PayPalPayNow
|
|
|
|
amount={5}
|
|
|
|
name='Protospace Snacks / Pop'
|
|
|
|
custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
|
|
|
|
<Grid.Column>
|
|
|
|
<p>Pay $10.00:</p>
|
|
|
|
<PayPalPayNow
|
|
|
|
amount={10}
|
|
|
|
name='Protospace Snacks / Pop'
|
|
|
|
custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
|
|
|
|
<Grid.Column>
|
2020-03-16 21:44:10 +00:00
|
|
|
Custom amount:
|
|
|
|
|
|
|
|
<div className='pay-custom'>
|
|
|
|
<Input
|
|
|
|
fluid
|
|
|
|
label={{ basic: true, content: '$' }}
|
|
|
|
labelPosition='left'
|
|
|
|
value={pop}
|
|
|
|
onChange={(e, v) => setPop(v.value)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalPayNow
|
2020-03-16 21:44:10 +00:00
|
|
|
amount={pop}
|
2022-04-04 01:06:53 +00:00
|
|
|
name='Protospace Snacks / Pop'
|
|
|
|
custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
|
2020-02-21 07:46:13 +00:00
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
|
|
|
|
|
|
|
<Header size='medium'>Member Dues</Header>
|
|
|
|
<Grid stackable padded columns={3}>
|
|
|
|
<Grid.Column>
|
2020-08-27 03:19:26 +00:00
|
|
|
<p>Pay ${monthly_fees}.00 once:</p>
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalPayNow
|
2020-08-27 03:19:26 +00:00
|
|
|
amount={monthly_fees}
|
2020-02-21 07:46:13 +00:00
|
|
|
name='Protospace Membership'
|
|
|
|
custom={JSON.stringify({ member: user.member.id })}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
|
|
|
|
<Grid.Column>
|
2020-08-27 03:19:26 +00:00
|
|
|
<p>Subscribe ${monthly_fees}.00 / month:</p>
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalSubscribe
|
2020-08-27 03:19:26 +00:00
|
|
|
amount={monthly_fees}
|
2020-02-21 07:46:13 +00:00
|
|
|
name='Protospace Membership'
|
|
|
|
custom={JSON.stringify({ member: user.member.id })}
|
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
|
|
|
|
<Grid.Column>
|
2020-08-27 03:19:26 +00:00
|
|
|
<p>Pay ${monthly_fees * 11}.00 for a year:</p>
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalPayNow
|
2020-08-27 03:19:26 +00:00
|
|
|
amount={monthly_fees * 11}
|
2020-02-21 07:46:13 +00:00
|
|
|
name='Protospace Membership'
|
|
|
|
custom={JSON.stringify({ deal: 12, member: user.member.id })}
|
|
|
|
/>
|
|
|
|
<p>...get one month for free!</p>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
|
|
|
|
2022-01-25 04:12:22 +00:00
|
|
|
<Header size='medium'>Consumables</Header>
|
2020-02-21 07:46:13 +00:00
|
|
|
|
2022-01-25 04:12:22 +00:00
|
|
|
<p>Pay for materials you use (ie. welding gas, 3D printing, blades, etc).</p>
|
|
|
|
|
|
|
|
<Grid stackable padded columns={1}>
|
2020-02-21 07:46:13 +00:00
|
|
|
<Grid.Column>
|
2022-01-25 04:12:22 +00:00
|
|
|
Custom amount:
|
|
|
|
|
|
|
|
<div className='pay-custom'>
|
|
|
|
<Input
|
|
|
|
fluid
|
|
|
|
label={{ basic: true, content: '$' }}
|
|
|
|
labelPosition='left'
|
|
|
|
value={consumables}
|
|
|
|
onChange={(e, v) => setConsumables(v.value)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p>
|
|
|
|
Please explain what you bought:<br/>
|
|
|
|
<Input
|
|
|
|
value={consumablesMemo}
|
|
|
|
maxLength={50}
|
|
|
|
onChange={(e, v) => setConsumablesMemo(v.value)}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalPayNow
|
2022-01-25 04:12:22 +00:00
|
|
|
amount={consumables}
|
|
|
|
name='Protospace Consumables'
|
|
|
|
custom={JSON.stringify({ category: 'Consumables', member: user.member.id, memo: consumablesMemo })}
|
2020-02-21 07:46:13 +00:00
|
|
|
/>
|
|
|
|
</Grid.Column>
|
2022-01-25 04:12:22 +00:00
|
|
|
</Grid>
|
|
|
|
|
|
|
|
<Header size='medium'>Donate</Header>
|
2020-02-21 07:46:13 +00:00
|
|
|
|
2022-01-25 04:12:22 +00:00
|
|
|
<Grid stackable padded columns={1}>
|
2020-02-21 07:46:13 +00:00
|
|
|
<Grid.Column>
|
2020-03-16 21:44:10 +00:00
|
|
|
Custom amount:
|
|
|
|
|
|
|
|
<div className='pay-custom'>
|
|
|
|
<Input
|
|
|
|
fluid
|
|
|
|
label={{ basic: true, content: '$' }}
|
|
|
|
labelPosition='left'
|
|
|
|
value={donate}
|
|
|
|
onChange={(e, v) => setDonate(v.value)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
2022-01-25 04:12:22 +00:00
|
|
|
<p>
|
|
|
|
Optional memo:<br/>
|
|
|
|
<Input
|
|
|
|
value={memo}
|
|
|
|
maxLength={50}
|
|
|
|
onChange={(e, v) => setMemo(v.value)}
|
|
|
|
/>
|
|
|
|
</p>
|
|
|
|
|
2020-02-21 07:46:13 +00:00
|
|
|
<PayPalPayNow
|
2020-03-16 21:44:10 +00:00
|
|
|
amount={donate}
|
2020-02-21 07:46:13 +00:00
|
|
|
name='Protospace Donation'
|
2021-06-24 23:18:19 +00:00
|
|
|
custom={JSON.stringify({ category: 'Donation', member: user.member.id, memo: memo })}
|
2020-02-21 07:46:13 +00:00
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
2020-06-19 04:55:48 +00:00
|
|
|
|
|
|
|
<Header size='medium'>Locker Storage</Header>
|
|
|
|
|
|
|
|
<p>Confirm location and availability with <Link to='/members/392'>Scott Young</Link> before subscribing.</p>
|
|
|
|
|
|
|
|
<Grid stackable padded columns={1}>
|
|
|
|
<Grid.Column>
|
|
|
|
Custom amount:
|
|
|
|
|
|
|
|
<div className='pay-custom'>
|
|
|
|
<Input
|
|
|
|
fluid
|
|
|
|
label={{ basic: true, content: '$' }}
|
|
|
|
labelPosition='left'
|
|
|
|
value={locker}
|
|
|
|
onChange={(e, v) => setLocker(v.value)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<PayPalSubscribe
|
|
|
|
amount={locker}
|
|
|
|
name='Protospace Locker'
|
2022-03-29 22:04:04 +00:00
|
|
|
custom={JSON.stringify({ memo: 'Locker Rental', category: 'Purchases', member: user.member.id })}
|
2020-06-19 04:55:48 +00:00
|
|
|
/>
|
|
|
|
</Grid.Column>
|
|
|
|
</Grid>
|
2020-02-21 07:46:13 +00:00
|
|
|
</Container>
|
|
|
|
);
|
|
|
|
};
|