Add printable transaction receipt
This commit is contained in:
parent
570c5f2aeb
commit
1e5250eb70
|
@ -1,7 +1,8 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
|
||||
import ReactToPrint from 'react-to-print';
|
||||
import './light.css';
|
||||
import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
|
||||
import { MembersDropdown } from './Members.js';
|
||||
import { isAdmin, BasicTable, requester } from './utils.js';
|
||||
import { NotFound, PleaseLogin } from './Misc.js';
|
||||
|
@ -308,34 +309,12 @@ export function Transactions(props) {
|
|||
);
|
||||
};
|
||||
|
||||
export function TransactionDetail(props) {
|
||||
const { token, user } = props;
|
||||
const { id } = useParams();
|
||||
const ownTransaction = user.transactions.find(x => x.id == id);
|
||||
const [transaction, setTransaction] = useState(ownTransaction || false);
|
||||
const [error, setError] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
requester('/transactions/'+id+'/', 'GET', token)
|
||||
.then(res => {
|
||||
setTransaction(res);
|
||||
setError(false);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setError(true);
|
||||
});
|
||||
}, [ownTransaction]);
|
||||
class TransactionTable extends React.Component {
|
||||
render() {
|
||||
const transaction = this.props.transaction;
|
||||
const user = this.props.user;
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{!error ?
|
||||
transaction ?
|
||||
<div>
|
||||
<Header size='large'>Transaction Receipt</Header>
|
||||
|
||||
<Grid stackable columns={2}>
|
||||
<Grid.Column>
|
||||
<BasicTable>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
@ -351,7 +330,7 @@ export function TransactionDetail(props) {
|
|||
}
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>ID:</Table.Cell>
|
||||
<Table.Cell>Number:</Table.Cell>
|
||||
<Table.Cell>{transaction.id}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
|
@ -371,7 +350,7 @@ export function TransactionDetail(props) {
|
|||
<Table.Cell>{transaction.account_type}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>Payment Method</Table.Cell>
|
||||
<Table.Cell>Payment Method:</Table.Cell>
|
||||
<Table.Cell>{transaction.payment_method}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
|
@ -397,6 +376,65 @@ export function TransactionDetail(props) {
|
|||
</Table.Row>}
|
||||
</Table.Body>
|
||||
</BasicTable>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TransactionPrint extends React.Component {
|
||||
render() {
|
||||
const transaction = this.props.transaction;
|
||||
const user = this.props.user;
|
||||
|
||||
return (
|
||||
<div style={{padding: '1in'}}>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function TransactionDetail(props) {
|
||||
const { token, user } = props;
|
||||
const { id } = useParams();
|
||||
const ownTransaction = user.transactions.find(x => x.id == id);
|
||||
const [transaction, setTransaction] = useState(ownTransaction || false);
|
||||
const [error, setError] = useState(false);
|
||||
const printRef = useRef();
|
||||
|
||||
useEffect(() => {
|
||||
requester('/transactions/'+id+'/', 'GET', token)
|
||||
.then(res => {
|
||||
setTransaction(res);
|
||||
setError(false);
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
setError(true);
|
||||
});
|
||||
}, [ownTransaction]);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{!error ?
|
||||
transaction ?
|
||||
<div>
|
||||
<Header size='large'>Transaction Receipt</Header>
|
||||
|
||||
<Grid stackable columns={2}>
|
||||
<Grid.Column>
|
||||
<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}
|
||||
/>
|
||||
</Grid.Column>
|
||||
|
||||
<Grid.Column>
|
||||
|
|
Loading…
Reference in New Issue
Block a user