import React, { useState, useEffect, useRef } from 'react'; import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom'; import moment from 'moment-timezone'; import ReactToPrint from 'react-to-print'; import './light.css'; 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'; export function TransactionEditor(props) { const { token, input, setInput, error, noMemberSearch } = props; const [prevInput, setPrevInput] = useState(input); const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] }); const handleChange = (e) => handleValues(e, e.currentTarget); const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked }); const makeProps = (name) => ({ name: name, onChange: handleChange, value: input[name] || '', error: error[name], }); const accountOptions = [ { key: '0', text: 'Cash', value: 'Cash' }, { key: '1', text: 'Interac e-Transfer', value: 'Interac' }, { key: '2', text: 'Square', value: 'Square Pmt' }, //{ key: '3', text: 'Dream Payments (Debit/Credit)', value: 'Dream Pmt' }, { key: '4', text: 'Cheque', value: 'TD Chequing' }, //{ key: '5', text: 'Member Balance / Protocash', value: 'Member' }, { key: '6', text: 'Membership Adjustment / Clearing', value: 'Clearing' }, { key: '7', text: 'PayPal', value: 'PayPal' }, ]; const sourceOptions = [ { key: '0', text: 'Web (Spaceport)', value: 'Web' }, { 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' }, { key: '5', text: 'PayPal IPN', value: 'PayPal IPN' }, { 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' }, { key: '1', text: 'Course Fee', value: 'OnAcct' }, { key: '2', text: 'Snacks / Pop / Coffee', value: 'Snacks' }, { key: '3', text: 'Donation', value: 'Donation' }, { key: '4', text: 'Consumables (Explain in memo)', value: 'Consumables' }, { key: '5', text: 'Purchase of Locker / Materials / Stock', value: 'Purchases' }, //{ key: '6', text: 'Auction, Garage Sale, Nearly Free Shelf', value: 'Garage Sale' }, { key: '7', text: 'Reimbursement (Enter a negative value)', value: 'Reimburse' }, { key: '8', text: 'Other (Explain in memo)', value: 'Other' }, ]; return (
{!noMemberSearch && } { input?.account_type != prevInput?.account_type && input?.account_type == 'PayPal' && Are you sure?

PayPal transactions should be automatic. Double check there's no duplicate. They may take 24h to appear.

} {/* */}
); }; 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) => { if (loading) return; setLoading(true); setSuccess(false); const data = { ...input, report_type: null, report_memo: '' }; requester('/transactions/'+id+'/', 'PUT', token, data) .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 (
Edit Transaction
{transaction.report_type ? 'Save & Unreport' : 'Save'} {success &&
Success!
}
); }; function ReportTransaction(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 handleValues = (e, v) => setInput({ ...input, [v.name]: v.value }); const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] }); const handleChange = (e) => handleValues(e, e.currentTarget); const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked }); const handleSubmit = (e) => { if (loading) return; setLoading(true); setSuccess(false); requester('/transactions/'+id+'/report/', 'POST', token, input) .then(res => { setLoading(false); setSuccess(true); setError(false); if (refreshUser) { refreshUser(); } }) .catch(err => { setLoading(false); console.log(err); setError(err.data); }); }; const makeProps = (name) => ({ name: name, onChange: handleChange, value: input[name] || '', error: error[name], }); return (
Report Transaction

If this transaction was made in error or there is anything incorrect about it, please report it using this form.

A staff member will review the report as soon as possible.

Follow up with directors@protospace.ca.

Submit Report {success &&
Success!
}
); }; export function TransactionList(props) { const { transactions, noMember, noCategory } = props; return ( Date {!noMember && Member} Amount Account {!noCategory && Category} Memo {transactions.length ? transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x => {moment(x.date).format('ll')} {!noMember && {x.member_id ? {x.member_name} : x.member_name } } ${x.amount} {x.account_type} {!noCategory && {x.category}} {x.memo || x.report_memo} ) : None }
); }; export function Transactions(props) { const { user } = props; return (
Your Transactions
); }; class TransactionTable extends React.Component { render() { const transaction = this.props.transaction; const user = this.props.user; return ( Member: {isAdmin(user) && transaction.member_id ? {transaction.member_name} : {transaction.member_name} } Number: {transaction.id} Date: {transaction.date} Amount: ${transaction.amount} Category: {transaction.category} Account: {transaction.account_type} {/* Payment Method: {transaction.payment_method} */} Info Source: {transaction.info_source} Reference: {transaction.reference_number} Memo: {transaction.memo} Recorder: {transaction.recorder || 'System'} {!!transaction.report_type && Report Type: {transaction.report_type} } {!!transaction.report_memo && Report Memo: {transaction.report_memo} } ); } } class TransactionPrint extends React.Component { render() { const transaction = this.props.transaction; const user = this.props.user; return (
Protospace Transaction Receipt

Calgary Protospace Ltd.

Bay 108, 1530 - 27th Ave NE
Calgary, AB T2E 7S6
protospace.ca

Thank you!

); } } 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 ( {!error ? transaction ?
Transaction Receipt
} content={() => printRef.current} />
{isAdmin(user) ? : }
:

Loading...

: }
); };