2020-07-23 00:09:44 +00:00
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
2022-07-13 04:12:50 +00:00
|
|
|
|
import { Link, useParams } from 'react-router-dom';
|
2022-01-14 00:32:21 +00:00
|
|
|
|
import moment from 'moment-timezone';
|
2020-07-23 00:09:44 +00:00
|
|
|
|
import ReactToPrint from 'react-to-print';
|
2020-01-09 22:11:56 +00:00
|
|
|
|
import './light.css';
|
2022-07-13 04:12:50 +00:00
|
|
|
|
import { Button, Container, Form, Grid, Header, Message, Segment, Table } from 'semantic-ui-react';
|
2020-01-31 23:47:52 +00:00
|
|
|
|
import { MembersDropdown } from './Members.js';
|
2020-01-18 03:34:55 +00:00
|
|
|
|
import { isAdmin, BasicTable, requester } from './utils.js';
|
2022-07-13 04:12:50 +00:00
|
|
|
|
import { NotFound } from './Misc.js';
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
2020-01-18 04:47:54 +00:00
|
|
|
|
export function TransactionEditor(props) {
|
2022-08-22 20:17:43 +00:00
|
|
|
|
const { token, input, setInput, error } = props;
|
2020-01-18 03:34:55 +00:00
|
|
|
|
|
2022-07-14 21:58:50 +00:00
|
|
|
|
const [prevInput] = useState(input);
|
2021-04-24 21:51:06 +00:00
|
|
|
|
|
2020-01-18 03:34:55 +00:00
|
|
|
|
const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
|
|
|
|
|
const handleChange = (e) => handleValues(e, e.currentTarget);
|
|
|
|
|
|
|
|
|
|
const makeProps = (name) => ({
|
|
|
|
|
name: name,
|
|
|
|
|
onChange: handleChange,
|
|
|
|
|
value: input[name] || '',
|
|
|
|
|
error: error[name],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const accountOptions = [
|
2022-01-16 01:15:50 +00:00
|
|
|
|
{ key: '0', text: 'Cash', value: 'Cash' },
|
|
|
|
|
{ key: '1', text: 'Interac e-Transfer', value: 'Interac' },
|
|
|
|
|
{ key: '2', text: 'Square', value: 'Square Pmt' },
|
2020-10-01 22:14:16 +00:00
|
|
|
|
//{ key: '3', text: 'Dream Payments (Debit/Credit)', value: 'Dream Pmt' },
|
2022-01-16 01:15:50 +00:00
|
|
|
|
{ key: '4', text: 'Cheque', value: 'TD Chequing' },
|
2020-10-01 22:14:16 +00:00
|
|
|
|
//{ key: '5', text: 'Member Balance / Protocash', value: 'Member' },
|
|
|
|
|
{ key: '6', text: 'Membership Adjustment / Clearing', value: 'Clearing' },
|
|
|
|
|
{ key: '7', text: 'PayPal', value: 'PayPal' },
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{ key: '8', text: 'Protocoin', value: 'Protocoin' },
|
2020-01-18 03:34:55 +00:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const sourceOptions = [
|
2020-01-19 03:00:05 +00:00
|
|
|
|
{ key: '0', text: 'Web (Spaceport)', value: 'Web' },
|
2020-01-18 03:34:55 +00:00
|
|
|
|
{ key: '1', text: 'Database Edit', value: 'DB Edit' },
|
|
|
|
|
{ key: '2', text: 'System', value: 'System' },
|
|
|
|
|
{ key: '3', text: 'Receipt or Statement', value: 'Receipt or Stmt' },
|
|
|
|
|
{ key: '4', text: 'Quicken Import', value: 'Quicken Import' },
|
2020-01-31 23:47:52 +00:00
|
|
|
|
{ key: '5', text: 'PayPal IPN', value: 'PayPal IPN' },
|
2020-01-18 03:34:55 +00:00
|
|
|
|
{ key: '6', text: 'Auto', value: 'Auto' },
|
|
|
|
|
{ key: '7', text: 'Nexus Database Bulk', value: 'Nexus DB Bulk' },
|
|
|
|
|
{ key: '8', text: 'IPN Trigger', value: 'IPN Trigger' },
|
|
|
|
|
{ key: '9', text: 'Intranet Receipt', value: 'Intranet Receipt' },
|
|
|
|
|
{ key: '10', text: 'Automatic', value: 'Automatic' },
|
|
|
|
|
{ key: '11', text: 'Manual', value: 'Manual' },
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const categoryOptions = [
|
|
|
|
|
{ key: '0', text: 'Membership Dues', value: 'Membership' },
|
2022-03-29 22:04:04 +00:00
|
|
|
|
{ key: '1', text: 'Course Fee', value: 'OnAcct' },
|
|
|
|
|
{ key: '2', text: 'Snacks / Pop / Coffee', value: 'Snacks' },
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{ key: '3', text: 'Donation (Explain in Memo)', value: 'Donation' },
|
|
|
|
|
{ key: '4', text: 'Consumables (Explain in Memo)', value: 'Consumables' },
|
2022-03-29 22:04:04 +00:00
|
|
|
|
{ key: '5', text: 'Purchase of Locker / Materials / Stock', value: 'Purchases' },
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{ key: '6', text: 'Purchase of Protocoin', value: 'Exchange' },
|
|
|
|
|
{ key: '7', text: 'Reimbursement (Not for Refunds)', value: 'Reimburse' },
|
|
|
|
|
{ key: '8', text: 'Other (Explain in Memo)', value: 'Other' },
|
2020-01-18 03:34:55 +00:00
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='transaction-editor'>
|
|
|
|
|
<Form.Group widths='equal'>
|
2022-08-22 20:17:43 +00:00
|
|
|
|
<Form.Field error={error.member_id}>
|
|
|
|
|
<label>Member (search)</label>
|
|
|
|
|
<MembersDropdown
|
|
|
|
|
token={token}
|
|
|
|
|
{...makeProps('member_id')}
|
|
|
|
|
onChange={handleValues}
|
|
|
|
|
initial={input.member_name}
|
|
|
|
|
/>
|
|
|
|
|
</Form.Field>
|
|
|
|
|
|
2020-01-18 03:34:55 +00:00
|
|
|
|
<Form.Input
|
|
|
|
|
label='Date'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('date')}
|
|
|
|
|
/>
|
2022-08-22 20:17:43 +00:00
|
|
|
|
</Form.Group>
|
|
|
|
|
|
|
|
|
|
<Form.Group widths='equal'>
|
|
|
|
|
<Form.Select
|
|
|
|
|
label='Payment Method'
|
2020-01-18 03:34:55 +00:00
|
|
|
|
fluid
|
2022-08-22 20:17:43 +00:00
|
|
|
|
options={accountOptions}
|
|
|
|
|
{...makeProps('account_type')}
|
|
|
|
|
onChange={handleValues}
|
2020-01-18 03:34:55 +00:00
|
|
|
|
/>
|
|
|
|
|
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{input.account_type && (input.account_type === 'Protocoin' ?
|
|
|
|
|
<Form.Input
|
|
|
|
|
label='Protocoin Delta (+/-)'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('protocoin')}
|
|
|
|
|
/>
|
|
|
|
|
:
|
|
|
|
|
<Form.Input
|
|
|
|
|
label='Amount ($)'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('amount')}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</Form.Group>
|
2020-01-18 03:34:55 +00:00
|
|
|
|
|
2022-07-14 21:58:50 +00:00
|
|
|
|
{input?.account_type !== prevInput?.account_type && input?.account_type === 'PayPal' &&
|
2021-04-24 21:51:06 +00:00
|
|
|
|
<Message visible warning>
|
2022-01-16 01:15:50 +00:00
|
|
|
|
<Message.Header>Are you sure?</Message.Header>
|
2022-08-22 20:17:43 +00:00
|
|
|
|
<p>PayPal transactions are automatic. Double check there's no duplicate. They may take 24h to appear.</p>
|
2021-04-24 21:51:06 +00:00
|
|
|
|
</Message>
|
|
|
|
|
}
|
|
|
|
|
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{input?.account_type !== prevInput?.account_type && input?.account_type === 'Protocoin' &&
|
|
|
|
|
<Message visible warning>
|
|
|
|
|
<Message.Header>Are you sure?</Message.Header>
|
2022-08-22 22:37:49 +00:00
|
|
|
|
<p>Protocoin spending transactions are automatic. Do you want the "Purchase of Protocoin" category below?</p>
|
|
|
|
|
{input.protocoin > 0 && <p>Also, the value should be a <b>negative</b> number if they are spending Protocoin.</p>}
|
2022-08-22 20:17:43 +00:00
|
|
|
|
</Message>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<Form.Group widths='equal'>
|
2020-01-18 03:34:55 +00:00
|
|
|
|
<Form.Select
|
2022-08-22 20:17:43 +00:00
|
|
|
|
label='Category'
|
2020-01-18 03:34:55 +00:00
|
|
|
|
fluid
|
2022-08-22 20:17:43 +00:00
|
|
|
|
options={categoryOptions}
|
|
|
|
|
{...makeProps('category')}
|
2020-01-18 03:34:55 +00:00
|
|
|
|
onChange={handleValues}
|
|
|
|
|
/>
|
2022-08-22 20:17:43 +00:00
|
|
|
|
|
|
|
|
|
{input.category === 'Membership' &&
|
|
|
|
|
<Form.Input
|
|
|
|
|
label='Membership Months (+/-)'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('number_of_membership_months')}
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
{input.category === 'Exchange' &&
|
|
|
|
|
<Form.Input
|
|
|
|
|
label='Protocoin Purchased'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('amount')} // trick the user
|
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
</Form.Group>
|
2020-01-18 03:34:55 +00:00
|
|
|
|
|
|
|
|
|
<Form.Group widths='equal'>
|
|
|
|
|
<Form.Input
|
|
|
|
|
label='Reference Number'
|
|
|
|
|
fluid
|
|
|
|
|
{...makeProps('reference_number')}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<Form.Input
|
2022-08-22 20:17:43 +00:00
|
|
|
|
label='Memo / Notes'
|
2020-01-18 03:34:55 +00:00
|
|
|
|
fluid
|
2022-08-22 20:17:43 +00:00
|
|
|
|
{...makeProps('memo')}
|
2020-01-18 03:34:55 +00:00
|
|
|
|
/>
|
|
|
|
|
</Form.Group>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function EditTransaction(props) {
|
|
|
|
|
const { transaction, setTransaction, token, refreshUser } = props;
|
|
|
|
|
const [input, setInput] = useState(transaction);
|
|
|
|
|
const [error, setError] = useState(false);
|
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
|
const [success, setSuccess] = useState(false);
|
|
|
|
|
const { id } = useParams();
|
|
|
|
|
|
|
|
|
|
const handleSubmit = (e) => {
|
2020-02-04 07:18:29 +00:00
|
|
|
|
if (loading) return;
|
2020-01-18 03:34:55 +00:00
|
|
|
|
setLoading(true);
|
|
|
|
|
setSuccess(false);
|
2020-01-31 23:47:52 +00:00
|
|
|
|
const data = { ...input, report_type: null, report_memo: '' };
|
|
|
|
|
requester('/transactions/'+id+'/', 'PUT', token, data)
|
2020-01-18 03:34:55 +00:00
|
|
|
|
.then(res => {
|
|
|
|
|
setLoading(false);
|
|
|
|
|
setSuccess(true);
|
|
|
|
|
setError(false);
|
|
|
|
|
setInput(res);
|
|
|
|
|
setTransaction(res);
|
|
|
|
|
if (refreshUser) {
|
|
|
|
|
refreshUser();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
setLoading(false);
|
|
|
|
|
console.log(err);
|
|
|
|
|
setError(err.data);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
<Header size='medium'>Edit Transaction</Header>
|
|
|
|
|
|
|
|
|
|
<Form onSubmit={handleSubmit}>
|
2020-01-31 23:47:52 +00:00
|
|
|
|
<TransactionEditor token={token} input={input} setInput={setInput} error={error} />
|
2020-01-18 03:34:55 +00:00
|
|
|
|
|
|
|
|
|
<Form.Button loading={loading} error={error.non_field_errors}>
|
2020-02-01 08:56:22 +00:00
|
|
|
|
{transaction.report_type ? 'Save & Unreport' : 'Save'}
|
|
|
|
|
</Form.Button>
|
|
|
|
|
{success && <div>Success!</div>}
|
|
|
|
|
</Form>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2020-01-18 03:34:55 +00:00
|
|
|
|
|
2020-01-18 04:47:54 +00:00
|
|
|
|
export function TransactionList(props) {
|
2020-02-22 05:22:39 +00:00
|
|
|
|
const { transactions, noMember, noCategory } = props;
|
2020-01-18 04:47:54 +00:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Table basic='very'>
|
|
|
|
|
<Table.Header>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.HeaderCell>Date</Table.HeaderCell>
|
2020-02-22 05:22:39 +00:00
|
|
|
|
{!noMember && <Table.HeaderCell>Member</Table.HeaderCell>}
|
2020-01-18 04:47:54 +00:00
|
|
|
|
<Table.HeaderCell>Amount</Table.HeaderCell>
|
2022-08-22 22:15:03 +00:00
|
|
|
|
<Table.HeaderCell>Method</Table.HeaderCell>
|
2020-02-22 05:22:39 +00:00
|
|
|
|
{!noCategory && <Table.HeaderCell>Category</Table.HeaderCell>}
|
2020-01-18 04:47:54 +00:00
|
|
|
|
<Table.HeaderCell>Memo</Table.HeaderCell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
</Table.Header>
|
|
|
|
|
|
|
|
|
|
<Table.Body>
|
|
|
|
|
{transactions.length ?
|
2022-08-24 21:27:24 +00:00
|
|
|
|
transactions.map(x =>
|
2020-01-18 04:47:54 +00:00
|
|
|
|
<Table.Row key={x.id}>
|
2022-01-14 00:32:21 +00:00
|
|
|
|
<Table.Cell style={{ minWidth: '8rem' }}>
|
|
|
|
|
<Link to={'/transactions/'+x.id}>{moment(x.date).format('ll')}</Link>
|
2020-01-18 04:47:54 +00:00
|
|
|
|
</Table.Cell>
|
2020-02-22 05:22:39 +00:00
|
|
|
|
{!noMember && <Table.Cell>
|
|
|
|
|
{x.member_id ?
|
|
|
|
|
<Link to={'/members/'+x.member_id}>
|
|
|
|
|
{x.member_name}
|
|
|
|
|
</Link>
|
|
|
|
|
:
|
|
|
|
|
x.member_name
|
|
|
|
|
}
|
|
|
|
|
</Table.Cell>}
|
2022-08-22 21:33:38 +00:00
|
|
|
|
<Table.Cell style={{ minWidth: '8rem' }}>{x.protocoin !== '0.00' ? '₱ ' + x.protocoin : '$ ' + x.amount}</Table.Cell>
|
2020-01-18 04:47:54 +00:00
|
|
|
|
<Table.Cell>{x.account_type}</Table.Cell>
|
2020-02-22 05:22:39 +00:00
|
|
|
|
{!noCategory && <Table.Cell>{x.category}</Table.Cell>}
|
2020-01-31 23:47:52 +00:00
|
|
|
|
<Table.Cell>{x.memo || x.report_memo}</Table.Cell>
|
2020-01-18 04:47:54 +00:00
|
|
|
|
</Table.Row>
|
|
|
|
|
)
|
|
|
|
|
:
|
|
|
|
|
<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
|
|
|
|
|
}
|
|
|
|
|
</Table.Body>
|
|
|
|
|
</Table>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
2020-01-09 22:11:56 +00:00
|
|
|
|
export function Transactions(props) {
|
|
|
|
|
const { user } = props;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Container>
|
2021-12-22 05:59:34 +00:00
|
|
|
|
<Header size='large'>Your Transactions</Header>
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
2020-02-22 05:22:39 +00:00
|
|
|
|
<TransactionList noMember noCategory transactions={user.transactions} />
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
|
|
|
|
</Container>
|
|
|
|
|
);
|
2020-01-10 06:24:37 +00:00
|
|
|
|
};
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
2020-07-23 00:09:44 +00:00
|
|
|
|
class TransactionTable extends React.Component {
|
|
|
|
|
render() {
|
|
|
|
|
const transaction = this.props.transaction;
|
|
|
|
|
const user = this.props.user;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<BasicTable>
|
|
|
|
|
<Table.Body>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Member:</Table.Cell>
|
|
|
|
|
{isAdmin(user) && transaction.member_id ?
|
|
|
|
|
<Table.Cell>
|
|
|
|
|
<Link to={'/members/'+transaction.member_id}>
|
|
|
|
|
{transaction.member_name}
|
|
|
|
|
</Link>
|
|
|
|
|
</Table.Cell>
|
|
|
|
|
:
|
|
|
|
|
<Table.Cell>{transaction.member_name}</Table.Cell>
|
|
|
|
|
}
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Number:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.id}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Date:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.date}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Amount:</Table.Cell>
|
2022-08-22 21:33:38 +00:00
|
|
|
|
<Table.Cell>$ {transaction.amount}</Table.Cell>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
</Table.Row>
|
2022-08-22 21:33:38 +00:00
|
|
|
|
{transaction.protocoin !== '0.00' && <Table.Row>
|
|
|
|
|
<Table.Cell>Protocoin:</Table.Cell>
|
|
|
|
|
<Table.Cell>₱ {transaction.protocoin}</Table.Cell>
|
|
|
|
|
</Table.Row>}
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Category:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.category}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
2022-08-22 22:15:03 +00:00
|
|
|
|
<Table.Cell>Method:</Table.Cell>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<Table.Cell>{transaction.account_type}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
2020-10-01 22:14:16 +00:00
|
|
|
|
{/* <Table.Row>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<Table.Cell>Payment Method:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.payment_method}</Table.Cell>
|
2020-10-01 22:14:16 +00:00
|
|
|
|
</Table.Row> */}
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Info Source:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.info_source}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Reference:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.reference_number}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Memo:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.memo}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
2021-09-23 21:04:18 +00:00
|
|
|
|
<Table.Row>
|
|
|
|
|
<Table.Cell>Recorder:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.recorder || 'System'}</Table.Cell>
|
|
|
|
|
</Table.Row>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
|
|
|
|
|
{!!transaction.report_type && <Table.Row>
|
|
|
|
|
<Table.Cell>Report Type:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.report_type}</Table.Cell>
|
|
|
|
|
</Table.Row>}
|
|
|
|
|
{!!transaction.report_memo && <Table.Row>
|
|
|
|
|
<Table.Cell>Report Memo:</Table.Cell>
|
|
|
|
|
<Table.Cell>{transaction.report_memo}</Table.Cell>
|
|
|
|
|
</Table.Row>}
|
|
|
|
|
</Table.Body>
|
|
|
|
|
</BasicTable>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
class TransactionPrint extends React.Component {
|
|
|
|
|
render() {
|
|
|
|
|
const transaction = this.props.transaction;
|
|
|
|
|
const user = this.props.user;
|
|
|
|
|
|
|
|
|
|
return (
|
2022-02-03 06:31:58 +00:00
|
|
|
|
<div style={{padding: '1in', background: 'white', width: '100%', height: '100%'}}>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<Header size='large'>Protospace Transaction Receipt</Header>
|
|
|
|
|
<p>Calgary Protospace Ltd.</p>
|
|
|
|
|
<p>Bay 108, 1530 - 27th Ave NE<br />Calgary, AB T2E 7S6<br />protospace.ca</p>
|
|
|
|
|
<TransactionTable user={user} transaction={transaction} />
|
|
|
|
|
<p>Thank you!</p>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-09 22:11:56 +00:00
|
|
|
|
export function TransactionDetail(props) {
|
2020-01-18 03:34:55 +00:00
|
|
|
|
const { token, user } = props;
|
2020-01-09 22:11:56 +00:00
|
|
|
|
const { id } = useParams();
|
2022-07-13 04:12:50 +00:00
|
|
|
|
const ownTransaction = user.transactions.find(x => x.id === id);
|
2020-01-18 03:34:55 +00:00
|
|
|
|
const [transaction, setTransaction] = useState(ownTransaction || false);
|
|
|
|
|
const [error, setError] = useState(false);
|
2020-07-23 00:09:44 +00:00
|
|
|
|
const printRef = useRef();
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
2020-01-18 03:34:55 +00:00
|
|
|
|
useEffect(() => {
|
|
|
|
|
requester('/transactions/'+id+'/', 'GET', token)
|
|
|
|
|
.then(res => {
|
|
|
|
|
setTransaction(res);
|
|
|
|
|
setError(false);
|
|
|
|
|
})
|
|
|
|
|
.catch(err => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
setError(true);
|
|
|
|
|
});
|
2020-02-01 08:56:22 +00:00
|
|
|
|
}, [ownTransaction]);
|
2020-01-09 22:11:56 +00:00
|
|
|
|
|
|
|
|
|
return (
|
2020-01-18 03:34:55 +00:00
|
|
|
|
<Container>
|
|
|
|
|
{!error ?
|
|
|
|
|
transaction ?
|
|
|
|
|
<div>
|
|
|
|
|
<Header size='large'>Transaction Receipt</Header>
|
|
|
|
|
|
|
|
|
|
<Grid stackable columns={2}>
|
2022-08-22 20:17:43 +00:00
|
|
|
|
<Grid.Column width={6}>
|
2020-07-23 00:09:44 +00:00
|
|
|
|
<TransactionTable user={user} transaction={transaction} />
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'none' }}>
|
|
|
|
|
<TransactionPrint ref={printRef} user={user} transaction={transaction} />
|
|
|
|
|
</div>
|
|
|
|
|
<ReactToPrint
|
|
|
|
|
trigger={() => <Button>Print Receipt</Button>}
|
|
|
|
|
content={() => printRef.current}
|
|
|
|
|
/>
|
2020-01-18 03:34:55 +00:00
|
|
|
|
</Grid.Column>
|
|
|
|
|
|
2022-08-22 20:17:43 +00:00
|
|
|
|
<Grid.Column width={10}>
|
2020-02-01 08:56:22 +00:00
|
|
|
|
{isAdmin(user) ?
|
|
|
|
|
<Segment padded>
|
|
|
|
|
<EditTransaction transaction={transaction} setTransaction={setTransaction} {...props} />
|
|
|
|
|
</Segment>
|
|
|
|
|
:
|
|
|
|
|
<Segment padded>
|
2023-05-02 18:09:16 +00:00
|
|
|
|
<Header size='medium'>Report Transaction</Header>
|
|
|
|
|
|
|
|
|
|
<p>If there's anything wrong with this transaction or it was made in error please email the Protospace Directors:</p>
|
|
|
|
|
<p><a href='mailto:directors@protospace.ca' target='_blank' rel='noopener noreferrer'>directors@protospace.ca</a></p>
|
|
|
|
|
<p>Please include a link to this transaction and any relevant details.</p>
|
2020-02-01 08:56:22 +00:00
|
|
|
|
</Segment>
|
|
|
|
|
}
|
2020-01-18 03:34:55 +00:00
|
|
|
|
</Grid.Column>
|
|
|
|
|
</Grid>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
:
|
|
|
|
|
<p>Loading...</p>
|
|
|
|
|
:
|
|
|
|
|
<NotFound />
|
|
|
|
|
}
|
|
|
|
|
</Container>
|
2020-01-09 22:11:56 +00:00
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|