diff options
Diffstat (limited to 'frontend/src/components/bank-accounts')
5 files changed, 0 insertions, 718 deletions
diff --git a/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx b/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx deleted file mode 100644 index ac0a839c..00000000 --- a/frontend/src/components/bank-accounts/AddBankConnectionDrawer.tsx +++ /dev/null @@ -1,283 +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, Steps } from 'antd'; -const { Step } = Steps; - -const layout = { - labelCol: { span: 4 }, -}; - -const AddBankConnectionDrawer = (props) => { - const { visible, onClose } = props; - const [currentStep, setCurrentStep] = useState(0); - const [printLink, setPrintLink] = useState(''); - - const [name, setName] = useState(''); - const [serverURL, setServerURL] = useState(''); - const [hostID, setHostID] = useState(''); - const [partnerID, setPartnerID] = useState(''); - const [userID, setUserID] = useState(''); - const [systemID, setSystemID] = useState(''); - - const steps = [{ title: 'Fill up details' }, { title: 'Print document' }]; - - const showError = (err) => { - message.error(String(err)); - }; - - const createBankConnection = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - 'Content-Type': 'application/json', - }), - method: 'POST', - body: JSON.stringify({ - name: name, - source: 'new', - type: 'ebics', - data: { - ebicsURL: serverURL, - hostID: hostID, - partnerID: partnerID, - userID: userID, - }, - }), - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot create bank connection'; - } - }) - .catch((err) => { - throw new Error(err); - }); - }; - - const connectBankConnection = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections/${name}/connect`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - method: 'POST', - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot connect bank connection'; - } - }) - .catch((err) => { - throw new Error(err); - }); - }; - - const fetchKeyLetter = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections/${name}/keyletter`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.blob(); - } - throw 'Cannot retrieve keyletter'; - }) - .then(async (blob) => { - const pdfLink = URL.createObjectURL(blob); - setPrintLink(pdfLink); - }) - .catch((err) => { - throw new Error(err); - }); - }; - - const updateBankAccounts = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections/${name}/fetch-accounts`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - method: 'POST', - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot update bank accounts'; - } - }) - .catch((err) => { - throw new Error(err); - }); - }; - - const next = async () => { - let isError = true; - await createBankConnection() - .then(async () => { - await connectBankConnection() - .then(async () => { - await fetchKeyLetter() - .then(async () => { - await updateBankAccounts() - .then(() => { - isError = false; - }) - .catch((err) => showError(err)); - }) - .catch((err) => showError(err)); - }) - .catch((err) => showError(err)); - }) - .catch((err) => showError(err)); - - if (!isError) { - setServerURL(''); - setHostID(''); - setPartnerID(''); - setUserID(''); - setSystemID(''); - setCurrentStep(currentStep + 1); - } - }; - - const closeDrawer = () => { - setCurrentStep(0); - onClose(); - }; - - return ( - <Drawer - title="Add bank connection" - placement="right" - closable={false} - onClose={onClose} - visible={visible} - width={850} - > - <div className="steps-row"> - <Steps current={currentStep}> - {steps.map((item) => ( - <Step key={item.title} title={item.title} /> - ))} - </Steps> - </div> - <div> - {currentStep < steps.length - 1 ? ( - <Form {...layout} name="basic"> - <Form.Item - label="Server URL" - name="Server URL" - rules={[ - { required: true, message: 'Please input the Server URL!' }, - ]} - > - <Input onChange={(e) => setServerURL(e.target.value)} /> - </Form.Item> - <Form.Item - label="Name" - name="Name" - rules={[ - { - required: true, - message: 'Please input the name of the bank connection!', - }, - ]} - > - <Input onChange={(e) => setName(e.target.value)} /> - </Form.Item> - <Form.Item - label="Host ID" - name="Host ID" - rules={[{ required: true, message: 'Please input the Host ID!' }]} - > - <Input onChange={(e) => setHostID(e.target.value)} /> - </Form.Item> - <Form.Item - label="Partner ID" - name="Partner ID" - rules={[ - { required: true, message: 'Please input the Partner ID!' }, - ]} - > - <Input onChange={(e) => setPartnerID(e.target.value)} /> - </Form.Item> - <Form.Item - label="User ID" - name="User ID" - rules={[{ required: true, message: 'Please input the User ID!' }]} - > - <Input onChange={(e) => setUserID(e.target.value)} /> - </Form.Item> - <Form.Item label="System ID" name="System ID"> - <Input onChange={(e) => setSystemID(e.target.value)} /> - </Form.Item> - </Form> - ) : ( - <div - style={{ - fontSize: 24, - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - }} - > - <div>Please print out this document and send it to the bank.</div> - <div> - <a href={printLink} target="_blank"> - Link to document - </a>{' '} - </div> - </div> - )} - </div> - <div className="steps-action"> - <Button - style={{ marginRight: '20px' }} - size="large" - onClick={() => closeDrawer()} - > - Cancel - </Button> - {currentStep < steps.length - 1 ? ( - <Button - style={{ marginRight: '40px' }} - type="primary" - size="large" - onClick={() => next()} - > - Next - </Button> - ) : ( - <Button - style={{ marginRight: '40px' }} - type="primary" - size="large" - onClick={() => closeDrawer()} - > - Done - </Button> - )} - </div> - </Drawer> - ); -}; - -export default AddBankConnectionDrawer; diff --git a/frontend/src/components/bank-accounts/BankAccounts.less b/frontend/src/components/bank-accounts/BankAccounts.less deleted file mode 100644 index d628d0ca..00000000 --- a/frontend/src/components/bank-accounts/BankAccounts.less +++ /dev/null @@ -1,49 +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/> - */ - -.bank-accounts { - margin-top: 50px; -} - -.buttons-row { - display: flex; - justify-content: flex-end; - width: 100%; -} - -.buttons-row button { - margin-left: 40px; - margin-bottom: 50px; -} - -.steps-row { - display: flex; - justify-content: center; - margin-bottom: 50px; -} - -.steps-row .ant-steps { - width: 50%; -} - -.steps-action { - display: flex; - justify-content: flex-end; - position: absolute; - right: 0; - bottom: 0; - margin-bottom: 40px; -} diff --git a/frontend/src/components/bank-accounts/BankConnectionCard.tsx b/frontend/src/components/bank-accounts/BankConnectionCard.tsx deleted file mode 100644 index 0d8a8edc..00000000 --- a/frontend/src/components/bank-accounts/BankConnectionCard.tsx +++ /dev/null @@ -1,45 +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 { Card } from 'antd'; -import BankConnectionDrawer from './BankConnectionDrawer'; - -const BankConnectionCard = (props) => { - const { type, name, updateBankAccountsTab } = props; - const [visible, setVisible] = useState(false); - const showDrawer = () => { - setVisible(true); - }; - const onClose = () => { - setVisible(false); - }; - return ( - <> - <Card title={type} bordered={false} onClick={() => showDrawer()}> - <p>Name: {name}</p> - </Card> - <BankConnectionDrawer - updateBankAccountsTab={updateBankAccountsTab} - name={name} - visible={visible} - onClose={onClose} - /> - </> - ); -}; - -export default BankConnectionCard; diff --git a/frontend/src/components/bank-accounts/BankConnectionDrawer.tsx b/frontend/src/components/bank-accounts/BankConnectionDrawer.tsx deleted file mode 100644 index 92736efc..00000000 --- a/frontend/src/components/bank-accounts/BankConnectionDrawer.tsx +++ /dev/null @@ -1,189 +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, Table } from 'antd'; - -const columns = [ - { - title: 'Account ID', - dataIndex: 'offeredAccountId', - }, - { - title: 'Owner name', - dataIndex: 'ownerName', - }, - { - title: 'IBAN', - dataIndex: 'iban', - }, - { - title: 'BIC', - dataIndex: 'bic', - }, -]; - -const BankConnectionDrawer = (props) => { - const { visible, onClose, name, updateBankAccountsTab } = props; - const [printLink, setPrintLink] = useState(''); - const [accountsList, setAccountsList] = useState([]); - const [selectedRowKeys, setSelectedRowKeys] = useState([]); - - const showError = (err) => { - message.error(String(err)); - }; - - const onSelectChange = (selectedRowKeys) => { - setSelectedRowKeys(selectedRowKeys); - }; - - const fetchKeyLetter = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections/${name}/keyletter`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.blob(); - } - throw 'Cannot retrieve keyletter'; - }) - .then(async (blob) => { - const pdfLink = URL.createObjectURL(blob); - setPrintLink(pdfLink); - }) - .catch((err) => { - showError(err); - }); - }; - - const fetchBankAccounts = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - - await fetch(`/bank-connections/${name}/accounts`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot retrieve bank accounts'; - } - return response.json(); - }) - .then((response) => { - setAccountsList( - response.accounts.map((account, index) => ({ - ...account, - key: index, - })) - ); - }) - .catch((err) => { - showError(err); - }); - }; - - const importBankAccounts = async () => { - for (let i = 0; i < selectedRowKeys.length; i++) { - const { offeredAccountId } = accountsList[i]; - await importBankAccount(offeredAccountId); - } - await updateBankAccountsTab(); // refresh bank accounts tab - onClose(); - }; - - const importBankAccount = async (offeredAccountId) => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections/${name}/import-account`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - 'Content-Type': 'application/json', - }), - method: 'POST', - body: JSON.stringify({ - offeredAccountId: offeredAccountId ? offeredAccountId : '', - nexusBankAccountId: offeredAccountId, - }), - }) - .then((response) => { - if (!response.ok) { - throw 'Cannot import bank account'; - } - }) - .catch((err) => { - showError(err); - }); - }; - - React.useEffect(() => { - fetchKeyLetter(); - fetchBankAccounts(); - }, []); - - return ( - <Drawer - title={name} - placement="right" - closable={false} - onClose={onClose} - visible={visible} - width={850} - > - <div - style={{ - display: 'flex', - justifyContent: 'flex-end', - marginBottom: 20, - fontSize: 18, - }} - > - <a href={printLink} target="_blank"> - Print document link - </a>{' '} - </div> - <h2>Import Bank Accounts</h2> - <Table - rowSelection={{ - selectedRowKeys, - onChange: onSelectChange, - }} - columns={columns} - dataSource={accountsList} - /> - <div className="steps-action"> - <Button - style={{ marginRight: '20px' }} - size="large" - onClick={() => onClose()} - > - Cancel - </Button> - <Button - style={{ marginRight: '20px' }} - size="large" - onClick={() => importBankAccounts()} - > - Import selected - </Button> - </div> - </Drawer> - ); -}; - -export default BankConnectionDrawer; diff --git a/frontend/src/components/bank-accounts/Index.tsx b/frontend/src/components/bank-accounts/Index.tsx deleted file mode 100644 index 26e50051..00000000 --- a/frontend/src/components/bank-accounts/Index.tsx +++ /dev/null @@ -1,152 +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, Card, Col, Collapse, Row, Tabs } from 'antd'; -import './BankAccounts.less'; -import AddBankConnectionDrawer from './AddBankConnectionDrawer'; -import BankConnectionCard from './BankConnectionCard'; - -const { TabPane } = Tabs; -const { Panel } = Collapse; - -const BankAccounts = () => { - const [connectionsList, setConnectionsList] = useState([]); - const [accountsList, setAccountsList] = useState([]); - - const showError = (err) => { - message.error(String(err)); - }; - - const fetchBankConnections = async () => { - const authHeader = await window.localStorage.getItem('authHeader'); - await fetch(`/bank-connections`, { - headers: new Headers({ - Authorization: `Basic ${authHeader}`, - }), - }) - .then((response) => { - if (response.ok) { - return response.json(); - } - throw 'Cannot retrieve bank connections'; - }) - .then((response) => { - setConnectionsList(response.bankConnections); - }) - .catch((err) => { - showError(err); - }); - }; - - 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); - }); - }; - - React.useEffect(() => { - fetchBankConnections(); - fetchBankAccounts(); - }, []); - - const [visible, setVisible] = useState(false); - const showDrawer = () => { - setVisible(true); - }; - const onClose = () => { - setVisible(false); - fetchBankConnections(); - fetchBankAccounts(); - }; - - const bankAccountsContent = - accountsList.length > 0 ? ( - <Row gutter={[40, 40]}> - {accountsList.map((bankAccount) => ( - <Col key={bankAccount['nexusBankAccountId']} span={8}> - <Card title={bankAccount['nexusBankAccountId']} bordered={false}> - <p>Holder: {bankAccount['ownerName']}</p> - <p>IBAN: {bankAccount['iban']}</p> - <p>BIC: {bankAccount['bic']}</p> - </Card> - </Col> - ))} - </Row> - ) : ( - <div style={{ display: 'flex', justifyContent: 'center' }}> - <b> - No bank accounts found. Import your bank accounts from a bank - connection. - </b> - </div> - ); - - return ( - <div className="bank-accounts"> - <Tabs defaultActiveKey="1" type="card" size="large"> - <TabPane tab="Your accounts" key="1"> - <Collapse defaultActiveKey="2"> - <Panel header="Bank connections" key="1"> - <div className="buttons-row"> - <Button type="primary" size="middle" onClick={showDrawer}> - Add bank connection - </Button> - <AddBankConnectionDrawer visible={visible} onClose={onClose} /> - </div> - <Row gutter={[40, 40]}> - {connectionsList - ? connectionsList.map((bankConnection) => ( - <Col key={bankConnection['name']} span={8}> - <BankConnectionCard - type={String(bankConnection['type']).toUpperCase()} - name={bankConnection['name']} - updateBankAccountsTab={() => fetchBankAccounts()} - /> - </Col> - )) - : null} - </Row> - </Panel> - <Panel header="Bank accounts" key="2"> - {bankAccountsContent} - </Panel> - </Collapse> - </TabPane> - <TabPane tab="Recipient accounts" key="2"> - Placeholder - </TabPane> - </Tabs> - </div> - ); -}; - -export default BankAccounts; |