1 files changed, 65 insertions, 30 deletions

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
index 8b4d1f3cb..6a16446d8 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx
@@ -19,8 +19,12 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { HttpStatusCode, TalerError, assertUnreachable } from "@gnu-taler/taler-util";
-import { VNode, h } from "preact";
+import {
+  HttpStatusCode,
+  TalerError,
+  assertUnreachable,
+} from "@gnu-taler/taler-util";
+import { Fragment, VNode, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js";
 import { Loading } from "../../../../components/exception/loading.js";
@@ -29,6 +33,10 @@ import { useInstanceTransfers } from "../../../../hooks/transfer.js";
 import { LoginPage } from "../../../login/index.js";
 import { ListPage } from "./ListPage.js";
 import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js";
+import { useSessionContext } from "../../../../context/session.js";
+import { NotificationCard } from "../../../../components/menu/index.js";
+import { Notification } from "../../../../utils/types.js";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
 
 interface Props {
   onCreate: () => void;
@@ -38,25 +46,28 @@ interface Form {
   payto_uri?: string;
 }
 
-export default function ListTransfer({
-  onCreate,
-}: Props): VNode {
+export default function ListTransfer({ onCreate }: Props): VNode {
   const setFilter = (s?: boolean) => setForm({ ...form, verified: s });
+  const { i18n } = useTranslationContext();
+
+  const { state, lib } = useSessionContext();
+  const [notif, setNotif] = useState<Notification | undefined>(undefined);
 
   const [position, setPosition] = useState<string | undefined>(undefined);
 
   const instance = useInstanceBankAccounts();
-  const accounts = !instance || (instance instanceof TalerError) || instance.type === "fail"
-    ? []
-    : instance.body.accounts.map((a) => a.payto_uri);
+  const accounts =
+    !instance || instance instanceof TalerError || instance.type === "fail"
+      ? []
+      : instance.body.accounts.map((a) => a.payto_uri);
   const [form, setForm] = useState<Form>({ payto_uri: "" });
 
-  const shoulUseDefaultAccount = accounts.length === 1
+  const shoulUseDefaultAccount = accounts.length === 1;
   useEffect(() => {
     if (shoulUseDefaultAccount) {
-      setForm({...form, payto_uri: accounts[0]})
+      setForm({ ...form, payto_uri: accounts[0] });
     }
-  }, [shoulUseDefaultAccount])
+  }, [shoulUseDefaultAccount]);
 
   const isVerifiedTransfers = form.verified === true;
   const isNonVerifiedTransfers = form.verified === false;
@@ -78,7 +89,7 @@ export default function ListTransfer({
   if (result.type === "fail") {
     switch (result.case) {
       case HttpStatusCode.Unauthorized: {
-        return <LoginPage />
+        return <LoginPage />;
       }
       case HttpStatusCode.NotFound: {
         return <NotFoundPageOrAdminCreate />;
@@ -90,23 +101,47 @@ export default function ListTransfer({
   }
 
   return (
-    <ListPage
-      accounts={accounts}
-      transfers={result.body}
-      onLoadMoreBefore={result.isFirstPage ? undefined: result.loadFirst }
-      onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext}
-      onCreate={onCreate}
-      onDelete={() => {
-        null;
-      }}
-      onShowAll={() => setFilter(undefined)}
-      onShowUnverified={() => setFilter(false)}
-      onShowVerified={() => setFilter(true)}
-      isAllTransfers={isAllTransfers}
-      isVerifiedTransfers={isVerifiedTransfers}
-      isNonVerifiedTransfers={isNonVerifiedTransfers}
-      payTo={form.payto_uri}
-      onChangePayTo={(p) => setForm((v) => ({ ...v, payto_uri: p }))}
-    />
+    <Fragment>
+      <NotificationCard notification={notif} />
+
+      <ListPage
+        accounts={accounts}
+        transfers={result.body}
+        onLoadMoreBefore={result.isFirstPage ? undefined : result.loadFirst}
+        onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext}
+        onCreate={onCreate}
+        onDelete={async (transfer) => {
+          try {
+            const resp = await lib.instance.deleteWireTransfer(state.token, String(transfer.transfer_serial_id));
+            if (resp.type === "ok") {
+              setNotif({
+                message: i18n.str`Wire transfer "${transfer.wtid.substring(0,16)}..." has been deleted`,
+                type: "SUCCESS",
+              });
+            } else {
+              setNotif({
+                message: i18n.str`Failed to delete transfer`,
+                type: "ERROR",
+                description: resp.detail.hint,
+              });
+            }
+          } catch (error) {
+            setNotif({
+              message: i18n.str`Failed to delete transfer`,
+              type: "ERROR",
+              description: error instanceof Error ? error.message : undefined,
+            });
+          }
+        }}
+        onShowAll={() => setFilter(undefined)}
+        onShowUnverified={() => setFilter(false)}
+        onShowVerified={() => setFilter(true)}
+        isAllTransfers={isAllTransfers}
+        isVerifiedTransfers={isVerifiedTransfers}
+        isNonVerifiedTransfers={isNonVerifiedTransfers}
+        payTo={form.payto_uri}
+        onChangePayTo={(p) => setForm((v) => ({ ...v, payto_uri: p }))}
+      />
+    </Fragment>
   );
 }