fix missing props

3 files changed, 41 insertions, 11 deletions

diff --git a/packages/demobank-ui/src/components/Cashouts/test.ts b/packages/demobank-ui/src/components/Cashouts/test.ts
index e91116378..014819f44 100644
--- a/packages/demobank-ui/src/components/Cashouts/test.ts
+++ b/packages/demobank-ui/src/components/Cashouts/test.ts
@@ -32,6 +32,7 @@ describe("Transaction states", () => {
 
     const props: Props = {
       account: "123",
+      onSelected: () => { null },
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_FIRST_PAGE, {
@@ -116,6 +117,7 @@ describe("Transaction states", () => {
 
     const props: Props = {
       account: "123",
+      onSelected: () => { null },
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_NOT_FOUND, {});
@@ -149,6 +151,7 @@ describe("Transaction states", () => {
 
     const props: Props = {
       account: "123",
+      onSelected: () => { null },
     };
 
     env.addRequestExpectation(TRANSACTION_API_EXAMPLE.LIST_ERROR, {});
diff --git a/packages/demobank-ui/src/pages/AdminPage.tsx b/packages/demobank-ui/src/pages/AdminPage.tsx
index d15ac02c4..b4ce58588 100644
--- a/packages/demobank-ui/src/pages/AdminPage.tsx
+++ b/packages/demobank-ui/src/pages/AdminPage.tsx
@@ -40,6 +40,7 @@ import {
   WithIntermediate,
 } from "../utils.js";
 import { ErrorBanner } from "./BankFrame.js";
+import { ShowCashoutDetails } from "./BusinessAccount.js";
 import { ShowInputErrorLabel } from "./ShowInputErrorLabel.js";
 
 const charset =
@@ -69,6 +70,9 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
   const [showCashouts, setShowCashouts] = useState<string | undefined>();
   const [updatePassword, setUpdatePassword] = useState<string | undefined>();
   const [removeAccount, setRemoveAccount] = useState<string | undefined>();
+  const [showCashoutDetails, setShowCashoutDetails] = useState<
+    string | undefined
+  >();
 
   const [createAccount, setCreateAccount] = useState(false);
   const { pageStateSetter } = usePageContext();
@@ -90,10 +94,28 @@ export function AdminPage({ onLoadNotOk }: Props): VNode {
 
   const { customers } = result.data;
 
+  if (showCashoutDetails) {
+    return (
+      <ShowCashoutDetails
+        id={showCashoutDetails}
+        onLoadNotOk={onLoadNotOk}
+        onCancel={() => {
+          setShowCashoutDetails(undefined);
+        }}
+      />
+    );
+  }
+
   if (showCashouts) {
     return (
       <div>
-        <Cashouts account={showCashouts} />
+        <Cashouts
+          account={showCashouts}
+          onSelected={(id) => {
+            setShowCashouts(id);
+            setShowCashouts(undefined);
+          }}
+        />
         <input
           class="pure-button"
           type="submit"
diff --git a/packages/demobank-ui/src/pages/BusinessAccount.tsx b/packages/demobank-ui/src/pages/BusinessAccount.tsx
index 64ec81c2e..fd7d2535c 100644
--- a/packages/demobank-ui/src/pages/BusinessAccount.tsx
+++ b/packages/demobank-ui/src/pages/BusinessAccount.tsx
@@ -32,11 +32,10 @@ import { ErrorMessage, usePageContext } from "../context/pageState.js";
 import { useAccountDetails } from "../hooks/access.js";
 import {
   useCashoutDetails,
-  useCashouts,
   useCircuitAccountAPI,
   useRatiosAndFeeConfig,
 } from "../hooks/circuit.js";
-import { CashoutStatus, TanChannel, undefinedIfEmpty } from "../utils.js";
+import { TanChannel, undefinedIfEmpty } from "../utils.js";
 import { ShowAccountDetails, UpdateAccountPassword } from "./AdminPage.js";
 import { ErrorBanner } from "./BankFrame.js";
 import { LoginForm } from "./LoginForm.js";
@@ -57,7 +56,9 @@ export function BusinessAccount({
   const backend = useBackendContext();
   const [updatePassword, setUpdatePassword] = useState(false);
   const [newCashout, setNewcashout] = useState(false);
-  const [showCashout, setShowCashout] = useState<string | undefined>();
+  const [showCashoutDetails, setShowCashoutDetails] = useState<
+    string | undefined
+  >();
   function showInfoMessage(info: TranslatedString): void {
     pageStateSetter((prev) => ({
       ...prev,
@@ -79,18 +80,18 @@ export function BusinessAccount({
         }}
         onComplete={(id) => {
           setNewcashout(false);
-          setShowCashout(id);
+          setShowCashoutDetails(id);
         }}
       />
     );
   }
-  if (showCashout) {
+  if (showCashoutDetails) {
     return (
-      <ShowCashout
-        id={showCashout}
+      <ShowCashoutDetails
+        id={showCashoutDetails}
         onLoadNotOk={onLoadNotOk}
         onCancel={() => {
-          setShowCashout(undefined);
+          setShowCashoutDetails(undefined);
         }}
       />
     );
@@ -129,7 +130,7 @@ export function BusinessAccount({
           <Cashouts
             account={backend.state.username}
             onSelected={(id) => {
-              setShowCashout(id);
+              setShowCashoutDetails(id);
             }}
           />
         </div>
@@ -593,7 +594,11 @@ interface ShowCashoutProps {
   onCancel: () => void;
   onLoadNotOk: <T, E>(error: HttpResponsePaginated<T, E>) => VNode;
 }
-function ShowCashout({ id, onCancel, onLoadNotOk }: ShowCashoutProps): VNode {
+export function ShowCashoutDetails({
+  id,
+  onCancel,
+  onLoadNotOk,
+}: ShowCashoutProps): VNode {
   const { i18n } = useTranslationContext();
   const result = useCashoutDetails(id);
   const { abortCashout, confirmCashout } = useCircuitAccountAPI();