diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers/list')
3 files changed, 73 insertions, 45 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx index 22ad0b8d8..927e36cf7 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; import { FormProvider } from "../../../../components/form/FormProvider.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { CardTable } from "./Table.js"; -import { TalerMerchantApi } from "@gnu-taler/taler-util"; export interface Props { transfers: TalerMerchantApi.TransferDetails[]; @@ -40,7 +40,7 @@ export interface Props { onChangePayTo: (p?: string) => void; payTo?: string; onCreate: () => void; - onDelete: () => void; + onDelete: (wid: TalerMerchantApi.TransferDetails) => void; } export function ListPage({ @@ -73,14 +73,14 @@ export function ListPage({ > <InputSelector name="payto_uri" - label={i18n.str`Account URI`} + label={i18n.str`Bank account`} values={accounts} fromStr={(d) => { const idx = accounts.indexOf(d) if (idx === -1) return undefined; return d }} - placeholder={i18n.str`Select one account`} + placeholder={i18n.str`All accounts`} tooltip={i18n.str`filter by account address`} /> </FormProvider> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx index b9235c669..5687d5e57 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx @@ -25,6 +25,7 @@ import { format } from "date-fns"; import { h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; import { datetimeFormatForSettings, usePreference } from "../../../../hooks/preference.js"; +import { WithId } from "../../../../declaration.js"; type Entity = TalerMerchantApi.TransferDetails & WithId; @@ -129,12 +130,6 @@ function Table({ <i18n.Translate>Credit</i18n.Translate> </th> <th> - <i18n.Translate>Address</i18n.Translate> - </th> - <th> - <i18n.Translate>Exchange URL</i18n.Translate> - </th> - <th> <i18n.Translate>Confirmed</i18n.Translate> </th> <th> @@ -150,10 +145,8 @@ function Table({ {instances.map((i) => { return ( <tr key={i.id}> - <td>{i.id}</td> + <td title={i.wtid}>{i.wtid.substring(0,16)}...</td> <td>{i.credit_amount}</td> - <td>{i.payto_uri}</td> - <td>{i.exchange_url}</td> <td>{i.confirmed ? i18n.str`yes` : i18n.str`no`}</td> <td>{i.verified ? i18n.str`yes` : i18n.str`no`}</td> <td> @@ -167,13 +160,13 @@ function Table({ : i18n.str`unknown`} </td> <td> - {i.verified === undefined ? ( + {i.verified !== true ? ( <button class="button is-danger is-small has-tooltip-left" data-tooltip={i18n.str`delete selected transfer from the database`} onClick={() => onDelete(i)} > - Delete + <i18n.Translate>Delete</i18n.Translate> </button> ) : undefined} </td> 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> ); } |