gnunet-svn
[Top][All Lists]
Advanced

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[libeufin] branch master updated: Add functionality to initiate payment


From: gnunet
Subject: [libeufin] branch master updated: Add functionality to initiate payment
Date: Fri, 10 Jul 2020 06:23:15 +0200

This is an automated email from the git hooks/post-receive script.

heng-yeow pushed a commit to branch master
in repository libeufin.

The following commit(s) were added to refs/heads/master by this push:
     new ef5d48f  Add functionality to initiate payment
ef5d48f is described below

commit ef5d48ffdacb9145aca9521bda46956a09624769
Author: tanhengyeow <E0032242@u.nus.edu>
AuthorDate: Fri Jul 10 12:23:05 2020 +0800

    Add functionality to initiate payment
---
 frontend/src/components/activity/Activity.less     |  12 ++
 .../activity/AddPaymentInitiationDrawer.tsx        | 207 +++++++++++++++++++++
 frontend/src/components/activity/Index.tsx         |  42 ++++-
 3 files changed, 254 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/activity/Activity.less 
b/frontend/src/components/activity/Activity.less
new file mode 100644
index 0000000..5f617ab
--- /dev/null
+++ b/frontend/src/components/activity/Activity.less
@@ -0,0 +1,12 @@
+.activity {
+  margin-top: 50px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  margin-bottom: 40px;
+}
diff --git a/frontend/src/components/activity/AddPaymentInitiationDrawer.tsx 
b/frontend/src/components/activity/AddPaymentInitiationDrawer.tsx
new file mode 100644
index 0000000..712fb00
--- /dev/null
+++ b/frontend/src/components/activity/AddPaymentInitiationDrawer.tsx
@@ -0,0 +1,207 @@
+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 } = props;
+
+  const [accountsList, setAccountsList] = useState([]);
+
+  const [account, setAccount] = useState('');
+  const [name, setName] = useState('');
+  const [IBAN, setIBAN] = useState('');
+  const [BIC, setBIC] = 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: 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) {
+      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="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/Index.tsx 
b/frontend/src/components/activity/Index.tsx
index d732604..97fe87c 100644
--- a/frontend/src/components/activity/Index.tsx
+++ b/frontend/src/components/activity/Index.tsx
@@ -1,10 +1,38 @@
-import * as React from 'react';
+import React, { useState } from 'react';
+import { Button, Tabs } from 'antd';
+import './Activity.less';
+import AddPaymentInitiationDrawer from './AddPaymentInitiationDrawer';
+const { TabPane } = Tabs;
 
-const Activity = () => (
-  <>
-    <h1>Activity</h1>
-    <p style={{ height: '100vh' }}>text</p>
-  </>
-);
+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">
+          <div className="buttons-row">
+            <Button type="primary" size="middle" onClick={showDrawer}>
+              Add payment initiation
+            </Button>
+            <AddPaymentInitiationDrawer visible={visible} onClose={onClose} />
+          </div>
+        </TabPane>
+        <TabPane tab="Transaction History" key="2">
+          Transaction History
+        </TabPane>
+        <TabPane tab="Taler View" key="3">
+          Taler View
+        </TabPane>
+      </Tabs>
+    </div>
+  );
+};
 
 export default Activity;

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.



reply via email to

[Prev in Thread] Current Thread [Next in Thread]