Display extra details of transaction in a tree

3 files changed, 126 insertions, 62 deletions

diff --git a/frontend/package.json b/frontend/package.json
index a968bb26..09e26b17 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -24,6 +24,7 @@
     "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-json-tree": "^0.11.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
diff --git a/frontend/src/components/activity/transaction-history/TransactionsList.tsx b/frontend/src/components/activity/transaction-history/TransactionsList.tsx
index 186b4234..ae49067a 100644
--- a/frontend/src/components/activity/transaction-history/TransactionsList.tsx
+++ b/frontend/src/components/activity/transaction-history/TransactionsList.tsx
@@ -1,7 +1,29 @@
 import React from 'react';
 import { DatePicker, Table } from 'antd';
+import JSONTree from 'react-json-tree';
+
 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',
@@ -32,6 +54,7 @@ const mainColumns = [
 const TransactionsList = () => {
   const tempTransactions = [
     {
+      key: 'acctsvcrref-001',
       amount: 'EUR:100.00',
       creditDebitIndicator: 'CRDT',
       status: 'BOOK',
@@ -60,65 +83,66 @@ const TransactionsList = () => {
         unstructuredRemittanceInformation: 'unstructured info one',
       },
     },
-    // {
-    //   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',
-    //   },
-    // },
-    // {
-    //   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',
-    //     },
-    //   },
-    // },
+    {
+      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',
+        },
+      },
+    },
     // {
     //   amount: 'EUR:1000', // in currency of the account
     //   creditDebitIndicator: 'CRDT',
@@ -228,7 +252,7 @@ const TransactionsList = () => {
         dataSource={tempTransactions}
         expandable={{
           expandedRowRender: (record) => (
-            <div>{JSON.stringify(record.details)}</div>
+            <JSONTree data={record.details} theme={theme} />
           ),
         }}
       />
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index cd4a70cd..ab420add 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2852,7 +2852,7 @@ babel-preset-react-app@^9.1.2:
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
-babel-runtime@6.x, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -2870,6 +2870,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -7246,6 +7251,16 @@ lodash._reinterpolate@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
+
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -9208,7 +9223,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-prop-types@^15.5.10, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.5.9, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9287,6 +9302,11 @@ punycode@^2.1.0, punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
+pure-color@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -9704,6 +9724,16 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-base16-styling@^0.5.1:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.5.3.tgz#3858f24e9c4dd8cbd3f702f3f74d581ca2917269"
+  integrity sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-dev-utils@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
@@ -9754,6 +9784,15 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-json-tree@^0.11.2:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.11.2.tgz#af70199fcbc265699ade2aec492465c51608f95e"
+  integrity sha512-aYhUPj1y5jR3ZQ+G3N7aL8FbTyO03iLwnVvvEikLcNFqNTyabdljo9xDftZndUBFyyyL0aK3qGO9+8EilILHUw==
+  dependencies:
+    babel-runtime "^6.6.1"
+    prop-types "^15.5.8"
+    react-base16-styling "^0.5.1"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"