From 9697e953f56dc37208c2852d686d1854256f71ef Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Fri, 17 Feb 2023 16:23:37 -0300
Subject: cashout for business accounts

---
 .../demobank-ui/src/components/Cashouts/index.ts   |  6 ++++--
 .../demobank-ui/src/components/Cashouts/state.ts   |  8 ++++----
 .../demobank-ui/src/components/Cashouts/test.ts    |  4 +++-
 .../demobank-ui/src/components/Cashouts/views.tsx  | 23 ++++++++++++++++++++--
 4 files changed, 32 insertions(+), 9 deletions(-)

(limited to 'packages/demobank-ui/src/components/Cashouts')

diff --git a/packages/demobank-ui/src/components/Cashouts/index.ts b/packages/demobank-ui/src/components/Cashouts/index.ts
index 1410267be..3ca7d9026 100644
--- a/packages/demobank-ui/src/components/Cashouts/index.ts
+++ b/packages/demobank-ui/src/components/Cashouts/index.ts
@@ -23,7 +23,8 @@ import { useComponentState } from "./state.js";
 import { LoadingUriView, ReadyView } from "./views.js";
 
 export interface Props {
-  empty?: boolean;
+  account: string;
+  onSelected: (id: string) => void;
 }
 
 export type State = State.Loading | State.LoadingUriError | State.Ready;
@@ -45,7 +46,8 @@ export namespace State {
   export interface Ready extends BaseInfo {
     status: "ready";
     error: undefined;
-    cashouts: SandboxBackend.Circuit.CashoutStatusResponse[];
+    cashouts: SandboxBackend.Circuit.CashoutStatusResponseWithId[];
+    onSelected: (id: string) => void;
   }
 }
 
diff --git a/packages/demobank-ui/src/components/Cashouts/state.ts b/packages/demobank-ui/src/components/Cashouts/state.ts
index 178a1e815..124f9bf9c 100644
--- a/packages/demobank-ui/src/components/Cashouts/state.ts
+++ b/packages/demobank-ui/src/components/Cashouts/state.ts
@@ -14,12 +14,11 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime, Amounts } from "@gnu-taler/taler-util";
 import { useCashouts } from "../../hooks/circuit.js";
-import { Props, State, Transaction } from "./index.js";
+import { Props, State } from "./index.js";
 
-export function useComponentState({ empty }: Props): State {
-  const result = useCashouts();
+export function useComponentState({ account, onSelected }: Props): State {
+  const result = useCashouts(account);
   if (result.loading) {
     return {
       status: "loading",
@@ -37,5 +36,6 @@ export function useComponentState({ empty }: Props): State {
     status: "ready",
     error: undefined,
     cashouts: result.data,
+    onSelected,
   };
 }
diff --git a/packages/demobank-ui/src/components/Cashouts/test.ts b/packages/demobank-ui/src/components/Cashouts/test.ts
index 78450ed2d..e91116378 100644
--- a/packages/demobank-ui/src/components/Cashouts/test.ts
+++ b/packages/demobank-ui/src/components/Cashouts/test.ts
@@ -31,7 +31,7 @@ describe("Transaction states", () => {
     const env = new SwrMockEnvironment();
 
     const props: Props = {
-
+      account: "123",
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, {
@@ -115,6 +115,7 @@ describe("Transaction states", () => {
     const env = new SwrMockEnvironment();
 
     const props: Props = {
+      account: "123",
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_NOT_FOUND, {});
@@ -147,6 +148,7 @@ describe("Transaction states", () => {
     const env = new SwrMockEnvironment(false);
 
     const props: Props = {
+      account: "123",
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {});
diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx
index 16ae8a58f..af1d9ed2c 100644
--- a/packages/demobank-ui/src/components/Cashouts/views.tsx
+++ b/packages/demobank-ui/src/components/Cashouts/views.tsx
@@ -30,8 +30,15 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ReadyView({ cashouts }: State.Ready): VNode {
+export function ReadyView({ cashouts, onSelected }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
+  if (!cashouts.length) {
+    return (
+      <div>
+        <i18n.Translate>No cashout at the moment</i18n.Translate>
+      </div>
+    );
+  }
   return (
     <div class="results">
       <table class="pure-table pure-table-striped">
@@ -39,6 +46,8 @@ export function ReadyView({ cashouts }: State.Ready): VNode {
           <tr>
             <th>{i18n.str`Created`}</th>
             <th>{i18n.str`Confirmed`}</th>
+            <th>{i18n.str`Total debit`}</th>
+            <th>{i18n.str`Total credit`}</th>
             <th>{i18n.str`Status`}</th>
             <th>{i18n.str`Subject`}</th>
           </tr>
@@ -56,7 +65,17 @@ export function ReadyView({ cashouts }: State.Ready): VNode {
                 <td>{Amounts.stringifyValue(item.amount_debit)}</td>
                 <td>{Amounts.stringifyValue(item.amount_credit)}</td>
                 <td>{item.status}</td>
-                <td>{item.subject}</td>
+                <td>
+                  <a
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      onSelected(item.id);
+                    }}
+                  >
+                    {item.subject}
+                  </a>
+                </td>
               </tr>
             );
           })}
-- 
cgit v1.2.3