diff options
Diffstat (limited to 'frontend/src/components/activity')
5 files changed, 0 insertions, 853 deletions
diff --git a/frontend/src/components/activity/Activity.less b/frontend/src/components/activity/Activity.less deleted file mode 100644 index 086ff54f..00000000 --- a/frontend/src/components/activity/Activity.less +++ /dev/null @@ -1,47 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -.activity { - margin-top: 50px; -} - -.actions { - display: flex; - justify-content: flex-end; - position: absolute; - right: 0; - bottom: 0; - margin-bottom: 40px; -} - -.activity-buttons-row { - margin: 50px 0px 50px 0px; - display: flex; - justify-content: space-between; -} - -.account-id { - display: flex; - align-items: center; -} - -.account-id div { - margin-right: 10px; -} - -.payment-options button { - margin-left: 30px; -} diff --git a/frontend/src/components/activity/Index.tsx b/frontend/src/components/activity/Index.tsx deleted file mode 100644 index e66070d7..00000000 --- a/frontend/src/components/activity/Index.tsx +++ /dev/null @@ -1,56 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -import React, { useState } from 'react'; -import { Tabs } from 'antd'; -import PaymentInitiationList from './payments/PaymentInitiationList'; -import TransactionsList from './transaction-history/TransactionsList'; - -import './Activity.less'; -const { TabPane } = Tabs; - -const Activity = () => { - const [visible, setVisible] = useState(false); - - const showDrawer = () => { - setVisible(true); - }; - const onClose = () => { - setVisible(false); - }; - - return ( - <div className="activity"> - <Tabs defaultActiveKey="1" type="card" size="large"> - <TabPane tab="Payments" key="1"> - <PaymentInitiationList - visible={visible} - onClose={onClose} - showDrawer={showDrawer} - /> - </TabPane> - <TabPane tab="Transaction History" key="2"> - <TransactionsList /> - </TabPane> - <TabPane tab="Taler View" key="3"> - Taler View - </TabPane> - </Tabs> - </div> - ); -}; - -export default Activity; diff --git a/frontend/src/components/activity/payments/AddPaymentInitiationDrawer.tsx b/frontend/src/components/activity/payments/AddPaymentInitiationDrawer.tsx deleted file mode 100644 index 366c095a..00000000 --- a/frontend/src/components/activity/payments/AddPaymentInitiationDrawer.tsx +++ /dev/null @@ -1,237 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -import React, { useState } from 'react'; -import { message, Button, Drawer, Input, Form, Select } from 'antd'; - -const { Option } = Select; - -const layout = { - labelCol: { span: 4 }, -}; - -const AddPaymentInitiationDrawer = (props) => { - const { visible, onClose, updatePaymentInitiations } = props; - - const [accountsList, setAccountsList] = useState([]); - - const [account, setAccount] = useState(''); - const [name, setName] = useState(''); - const [IBAN, setIBAN] = useState(''); - const [BIC, setBIC] = useState(''); - const [currency, setCurrency] = useState(''); - const [amount, setAmount] = useState(''); - const [subject, setSubject] = useState(''); - - const fetchBankAccounts = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-accounts`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw 'Cannot retrieve bank accounts'; - }) - .then((response) => { - setAccountsList(response.accounts); - }) - .catch((err) => { - showError(err); - }); - }; - - const createPaymentInitation = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-accounts/${account}/payment-initiations`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - 'Content-Type': 'application/json', - }), - method: 'POST', - body: JSON.stringify({ - name: name, - iban: IBAN, - bic: BIC, - amount: `${currency}:${amount}`, - subject: subject, - }), - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot create payment initiation'; - } - }) - .catch((err) => { - throw new Error(err); - }); - }; - - React.useEffect(() => { - fetchBankAccounts(); - }, []); - - const showError = (err) => { - message.error(String(err)); - }; - - const closeDrawer = () => { - onClose(); - }; - - const submitPaymentInitation = async () => { - let isError = true; - await createPaymentInitation() - .then(() => (isError = false)) - .catch((err) => showError(err)); - if (!isError) { - await updatePaymentInitiations(); - onClose(); - } - }; - - return ( - <Drawer - title="Add payment initiation" - placement="right" - closable={false} - onClose={onClose} - visible={visible} - width={850} - > - <div> - <Form {...layout} name="basic"> - <Form.Item - label="Account ID" - name="Account ID" - rules={[ - { required: true, message: 'Please select your account ID!' }, - ]} - > - <Select - placeholder="Please select your account ID" - onChange={(e) => setAccount(String(e))} - > - {accountsList.map((account) => ( - <Option - key={account['nexusBankAccountId']} - value={account['nexusBankAccountId']} - > - {account['nexusBankAccountId']} - </Option> - ))} - </Select> - </Form.Item> - <Form.Item - label="Name" - name="Name" - rules={[ - { - required: true, - message: - 'Please input the name of the legal subject that will receive the payment!', - }, - ]} - > - <Input onChange={(e) => setName(e.target.value)} /> - </Form.Item> - <Form.Item - label="IBAN" - name="IBAN" - rules={[ - { - required: true, - message: 'Please input the IBAN that will receive the payment!', - }, - ]} - > - <Input onChange={(e) => setIBAN(e.target.value)} /> - </Form.Item> - <Form.Item - label="BIC" - name="BIC" - rules={[ - { - required: true, - message: 'Please input the BIC that will receive the payment!', - }, - ]} - > - <Input onChange={(e) => setBIC(e.target.value)} /> - </Form.Item> - <Form.Item - label="Currency" - name="Currency" - rules={[ - { - required: true, - message: 'Please input the currency to send!', - }, - ]} - > - <Input onChange={(e) => setCurrency(e.target.value)} /> - </Form.Item> - <Form.Item - label="Amount" - name="Amount" - rules={[ - { - required: true, - message: 'Please input the amount to send!', - }, - ]} - > - <Input onChange={(e) => setAmount(e.target.value)} /> - </Form.Item> - <Form.Item - label="Subject" - name="Subject" - rules={[ - { - required: true, - message: 'Please input the payment subject!', - }, - ]} - > - <Input onChange={(e) => setSubject(e.target.value)} /> - </Form.Item> - </Form> - </div> - <div className="actions"> - <Button - style={{ marginRight: '20px' }} - size="large" - onClick={() => closeDrawer()} - > - Cancel - </Button> - <Button - style={{ marginRight: '40px' }} - type="primary" - size="large" - onClick={() => submitPaymentInitation()} - > - Submit - </Button> - </div> - </Drawer> - ); -}; - -export default AddPaymentInitiationDrawer; diff --git a/frontend/src/components/activity/payments/PaymentInitiationList.tsx b/frontend/src/components/activity/payments/PaymentInitiationList.tsx deleted file mode 100644 index 7c543058..00000000 --- a/frontend/src/components/activity/payments/PaymentInitiationList.tsx +++ /dev/null @@ -1,222 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -import React, { useState } from 'react'; -import { message, Button, Select, Table } from 'antd'; -import AddPaymentInitiationDrawer from './AddPaymentInitiationDrawer'; -import '../Activity.less'; - -const { Option } = Select; - -const columns = [ - { - title: 'ID', - dataIndex: 'paymentInitiationId', - }, - { - title: 'Creditor BIC', - dataIndex: 'creditorBic', - }, - { - title: 'Creditor IBAN', - dataIndex: 'creditorIban', - }, - { - title: 'Creditor Name', - dataIndex: 'creditorName', - }, - { - title: 'Subject', - dataIndex: 'subject', - }, - { - title: 'Preparation Date', - dataIndex: 'preparationDate', - }, - { - title: 'Submission Date', - dataIndex: 'submissionDate', - }, - { - title: 'Submitted', - dataIndex: 'submitted', - }, -]; - -const PaymentInitiationList = (props) => { - const { showDrawer, visible, onClose } = props; - const [account, setAccount] = useState(''); - const [accountsList, setAccountsList] = useState([]); - const [paymentInitiationList, setPaymentInitiationList] = useState([]); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - - const showError = (err) => { - message.error(String(err)); - }; - - const onSelectChange = (selectedRowKeys) => { - setSelectedRowKeys(selectedRowKeys); - }; - - const fetchBankAccounts = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-accounts`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw 'Cannot retrieve bank accounts'; - }) - .then((response) => { - setAccountsList(response.accounts); - if (response.accounts.length > 0) { - setAccount(response.accounts[0]['nexusBankAccountId']); - } - }) - .catch((err) => { - showError(err); - }); - }; - - const fetchPaymentInitiations = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-accounts/${account}/payment-initiations`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw `Cannot retrieve payment initiations for ${account}`; - }) - .then((response) => { - setPaymentInitiationList( - response.initiatedPayments.map((initiatedPayment, index) => ({ - ...initiatedPayment, - key: index, - submitted: initiatedPayment.submitted ? 'Yes' : 'No', - submissionDate: initiatedPayment.submissionDate - ? initiatedPayment.submissionDate - : '-', - })) - ); - }) - .catch((err) => { - showError(err); - }); - }; - - const submitPaymentInitiations = async () => { - for (let selectedRow of selectedRowKeys) { - const { paymentInitiationId } = paymentInitiationList[selectedRow]; - await submitPaymentInitiation(Number(paymentInitiationId)); - } - await fetchPaymentInitiations(); // refresh table - onClose(); - }; - - const submitPaymentInitiation = async (paymentInitiationId) => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch( - `/bank-accounts/${account}/payment-initiations/${paymentInitiationId}/submit`, - { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - 'Content-Type': 'application/json', - }), - method: 'POST', - } - ) - .then((response) => { - if (!response.ok) { - throw `Cannot submit payment initiation of ID ${paymentInitiationId}`; - } - }) - .catch((err) => { - showError(err); - }); - }; - - React.useEffect(() => { - fetchBankAccounts(); - }, []); - - React.useEffect(() => { - if (account !== '') { - fetchPaymentInitiations(); - } - }, [account]); - - return ( - <> - <div className="activity-buttons-row"> - <div className="account-id"> - <div>Account ID: </div> - <Select - placeholder={ - accountsList.length > 0 - ? account - : 'Please select your account ID' - } - onChange={(e) => setAccount(String(e))} - > - {accountsList.map((account) => ( - <Option - key={account['nexusBankAccountId']} - value={account['nexusBankAccountId']} - > - {account['nexusBankAccountId']} - </Option> - ))} - </Select> - </div> - <div className="payment-options"> - <Button type="primary" size="middle" onClick={showDrawer}> - Add payment initiation - </Button> - <Button - type="primary" - size="middle" - onClick={() => submitPaymentInitiations()} - > - Submit selected payment initiation(s) - </Button> - </div> - </div> - <AddPaymentInitiationDrawer - visible={visible} - onClose={onClose} - updatePaymentInitiations={() => fetchPaymentInitiations()} - /> - <Table - rowSelection={{ - selectedRowKeys, - onChange: onSelectChange, - }} - columns={columns} - dataSource={paymentInitiationList} - /> - </> - ); -}; - -export default PaymentInitiationList; diff --git a/frontend/src/components/activity/transaction-history/TransactionsList.tsx b/frontend/src/components/activity/transaction-history/TransactionsList.tsx deleted file mode 100644 index 6c64682f..00000000 --- a/frontend/src/components/activity/transaction-history/TransactionsList.tsx +++ /dev/null @@ -1,291 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2020 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ - -import React from 'react'; -import { DatePicker, Table } from 'antd'; -import JSONTree from 'react-json-tree'; -import _ from 'lodash'; -import mapKeysDeep from 'map-keys-deep-lodash'; - -const { RangePicker } = DatePicker; - -const theme = { - scheme: 'monokai', - base00: '#272822', - base01: '#383830', - base02: '#49483e', - base03: '#75715e', - base04: '#a59f85', - base05: '#f8f8f2', - base06: '#f5f4f1', - base07: '#f9f8f5', - base08: '#f92672', - base09: '#fd971f', - base0A: '#f4bf75', - base0B: '#a6e22e', - base0C: '#a1efe4', - base0D: '#66d9ef', - base0E: '#ae81ff', - base0F: '#cc6633', -}; - -const mainColumns = [ - { - title: 'Reference ID', - dataIndex: 'Account Servicer Ref', - }, - { - title: 'Status', - dataIndex: 'Status', - }, - { - title: 'Creditor Debit Indicator', - dataIndex: 'Credit Debit Indicator', - }, - { - title: 'Bank Transaction Code', - dataIndex: 'Bank Transaction Code', - }, - { - title: 'Value Date', - dataIndex: 'Value Date', - }, - { - title: 'Booking Date', - dataIndex: 'Booking Date', - }, -]; - -const TransactionsList = () => { - let tempTransactions = [ - { - key: 'acctsvcrref-001', - amount: 'EUR:100.00', - creditDebitIndicator: 'CRDT', - status: 'BOOK', - bankTransactionCode: 'PMNT-RCDT-ESCT', // look at first component (e.g payment/trade) - valueDate: '2020-07-04', // when money moves - bookingDate: '2020-07-02', // value on account - accountServicerRef: 'acctsvcrref-001', // assigned by bank where you held acc - details: { - debtor: { - name: 'Debtor One', - }, - debtorAccount: { - iban: 'DE52123456789473323175', - }, - creditor: { - name: 'Creditor One', - }, - ultimateCreditor: { - name: 'Ultimate Creditor One', - }, - ultimateDebtor: { - name: 'Ultimate Debtor One', - }, - endToEndId: 'e2e-001', // assigned by person that starts payment - purpose: 'GDDS', // trans related to purchase (set by payment initiator) - unstructuredRemittanceInformation: 'unstructured info one', - }, - }, - { - key: 'acctsvcrref-002', - amount: 'EUR:50.00', - creditDebitIndicator: 'CRDT', - status: 'BOOK', - bankTransactionCode: 'PMNT-RCDT-ESCT', - valueDate: '2020-07-04', - bookingDate: '2020-07-02', - accountServicerRef: 'acctsvcrref-002', - details: { - debtor: { - name: 'Debtor One', - }, - debtorAccount: { - iban: 'DE52123456789473323175', - }, - creditor: { - name: 'Creditor One', - }, - endToEndId: 'e2e-002', - unstructuredRemittanceInformation: 'unstructured info across lines', - }, - }, - { - key: '2020063011423362000', - amount: 'EUR:1.12', - creditDebitIndicator: 'CRDT', - status: 'BOOK', - isRTransaction: true, - bankTransactionCode: 'PMNT-ICDT-RRTN', // return transaction (e.g IBAN doesn't exist) - valueDate: '2020-06-30', - bookingDate: '2020-06-30', - accountServicerRef: '2020063011423362000', - details: { - debtor: { - name: 'Account Owner', - }, - debtorAccount: { - iban: 'DE54123456784713474163', - }, - creditor: { - name: 'Nonexistent Creditor', - }, - creditorAccount: { - iban: 'DE24500105177398216438', - }, - endToEndId: 'NOTPROVIDED', - unstructuredRemittanceInformation: - 'Retoure SEPA Ueberweisung vom 29.06.2020, Rueckgabegrund: AC01 IBAN fehlerhaft und ungültig SVWZ: RETURN, Sammelposten Nummer Zwei IBAN: DE24500105177398216438 BIC: INGDDEFFXXX', // truncate at some point in table column, show all in details section - returnInfo: { - originalBankTransactionCode: 'PMNT-ICDT-ESCT', - originator: { - organizationId: { - bic: 'GENODEM1GLS', - }, - }, - reason: 'AC01', - additionalInfo: 'IBAN fehlerhaft und ungültig', - }, - }, - }, - { - key: 'acctsvcrref-002-1', - amount: 'EUR:1000', // in currency of the account - creditDebitIndicator: 'CRDT', - status: 'BOOK', - bankTransactionCode: 'PMNT-RCDT-XBCT', // cross currency bank xfer - valueDate: '2020-07-04', - bookingDate: '2020-07-03', - accountServicerRef: 'acctsvcrref-002', - details: { - debtor: { - name: 'Mr USA', - postalAddress: { - country: 'US', - addressLines: ['42 Some Street', '4242 Somewhere'], - }, - }, - debtorAccount: { - otherId: { - id: '9876543', - }, - }, - debtorAgent: { - bic: 'BANKUSNY', // show in details section - }, - currencyExchange: { - sourceCurrency: 'USD', - targetCurrency: 'EUR', - exchangeRate: '1.20', // depends on when currency switches over - }, - instructedAmount: 'USD:1500', // party that initiated payment - interBankSettlementAmount: 'EUR:1250.0', // used for cross currency xfer (amount that bank exchanges betweeen each other) - counterValueAmount: 'EUR:1250.0', // amount before/after currency conversion before fees were applied - unstructuredRemittanceInformation: 'Invoice No. 4242', - }, - }, - // { - // // ACH transaction (executes at the end of the day)/Most transactions are sent in real time now - // // Banks have inner transactions has a list inside the details view - // key: 'acctsvcrref-005', - // amount: 'EUR:48.42', - // creditDebitIndicator: 'DBIT', - // status: 'BOOK', - // bankTransactionCode: 'PMNT-ICDT-ESCT', - // valueDate: '2020-07-07', - // bookingDate: '2020-07-07', - // accountServicerRef: 'acctsvcrref-005', - // batches: [ - // // one entry can have batches of transactions (collection) - // { - // batchTransactions: [ - // // batch transaction should show as one entry and then clicking on the details section show all transactions inside it - // { - // amount: 'EUR:46.3', - // creditDebitIndicator: 'DBIT', - // details: { - // creditor: { - // name: 'Zahlungsempfaenger 23, ZA 5, DE', - // postalAddress: { - // country: 'DE', - // addressLines: ['DE Adresszeile 1', 'DE Adresszeile 2'], - // }, - // }, - // creditorAccount: { - // iban: 'DE32733516350012345678', - // }, - // creditorAgent: { - // bic: 'BYLADEM1ALR', - // }, - // unstructuredRemittanceInformation: '', - // }, - // }, - // { - // amount: 'EUR:46.3', - // creditDebitIndicator: 'DBIT', - // details: { - // creditor: { - // name: 'Zahlungsempfaenger 23, ZA 5, AT', - // postalAddress: { - // country: 'AT', - // addressLines: ['AT Adresszeile 1', 'AT Adresszeile 2'], - // }, - // }, - // creditorAccount: { - // iban: 'AT071100000012345678', - // }, - // creditorAgent: { - // bic: 'BKAUATWW', - // }, - // endToEndId: 'jh45k34h5l', - // paymentInformationId: '6j564l56', - // messageId: 'asdfasdf', - // unstructuredRemittanceInformation: '', - // }, - // }, - // ], - // }, - // ], - // }, - ]; - - let transactions = mapKeysDeep(tempTransactions, (value, key) => { - if (key === 'key') { - return key; - } - return _.startCase(key); - }); - - return ( - <> - <div className="activity-buttons-row"> - <RangePicker /> - </div> - <Table - columns={mainColumns} - dataSource={transactions} - expandable={{ - expandedRowRender: (record) => ( - <JSONTree data={record['Details']} theme={theme} /> - ), - }} - /> - </> - ); -}; - -export default TransactionsList; |