diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers/list')
4 files changed, 557 insertions, 0 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx new file mode 100644 index 000000000..def03fe27 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/List.stories.tsx @@ -0,0 +1,94 @@ +/* + This file is part of GNU Taler + (C) 2021-2024 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { AmountString, PaytoString } from "@gnu-taler/taler-util"; +import { FunctionalComponent, h } from "preact"; +import { ListPage as TestedComponent } from "./ListPage.js"; + +export default { + title: "Pages/Transfer/List", + component: TestedComponent, + argTypes: { + onCreate: { action: "onCreate" }, + onDelete: { action: "onDelete" }, + onLoadMoreBefore: { action: "onLoadMoreBefore" }, + onLoadMoreAfter: { action: "onLoadMoreAfter" }, + onShowAll: { action: "onShowAll" }, + onShowVerified: { action: "onShowVerified" }, + onShowUnverified: { action: "onShowUnverified" }, + onChangePayTo: { action: "onChangePayTo" }, + }, +}; + +function createExample<Props>( + Component: FunctionalComponent<Props>, + props: Partial<Props>, +) { + const r = (args: any) => <Component {...args} />; + r.args = props; + return r; +} + +export const Example = createExample(TestedComponent, { + transfers: [ + { + exchange_url: "http://exchange.url/", + credit_amount: "TESTKUDOS:10" as AmountString, + payto_uri: "payto//x-taler-bank/bank:8080/account" as PaytoString, + transfer_serial_id: 123123123, + wtid: "!@KJELQKWEJ!L@K#!J@", + confirmed: true, + execution_time: { + t_s: new Date().getTime() / 1000, + }, + verified: false, + }, + { + exchange_url: "http://exchange.url/", + credit_amount: "TESTKUDOS:10" as AmountString, + payto_uri: "payto//x-taler-bank/bank:8080/account" as PaytoString, + transfer_serial_id: 123123123, + wtid: "!@KJELQKWEJ!L@K#!J@", + confirmed: true, + execution_time: { + t_s: new Date().getTime() / 1000, + }, + verified: false, + }, + { + exchange_url: "http://exchange.url/", + credit_amount: "TESTKUDOS:10" as AmountString, + payto_uri: "payto//x-taler-bank/bank:8080/account" as PaytoString, + transfer_serial_id: 123123123, + wtid: "!@KJELQKWEJ!L@K#!J@", + confirmed: true, + execution_time: { + t_s: new Date().getTime() / 1000, + }, + verified: false, + }, + ], + accounts: ["payto://x-taler-bank/bank/some_account"], +}); +export const Empty = createExample(TestedComponent, { + transfers: [], + accounts: [], +}); 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 new file mode 100644 index 000000000..22ad0b8d8 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/ListPage.tsx @@ -0,0 +1,137 @@ +/* + This file is part of GNU Taler + (C) 2021-2024 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +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[]; + onLoadMoreBefore?: () => void; + onLoadMoreAfter?: () => void; + onShowAll: () => void; + onShowVerified: () => void; + onShowUnverified: () => void; + isVerifiedTransfers?: boolean; + isNonVerifiedTransfers?: boolean; + isAllTransfers?: boolean; + accounts: string[]; + onChangePayTo: (p?: string) => void; + payTo?: string; + onCreate: () => void; + onDelete: () => void; +} + +export function ListPage({ + payTo, + onChangePayTo, + transfers, + onCreate, + onDelete, + accounts, + onLoadMoreBefore, + onLoadMoreAfter, + isAllTransfers, + isNonVerifiedTransfers, + isVerifiedTransfers, + onShowAll, + onShowUnverified, + onShowVerified, +}: Props): VNode { + const form = { payto_uri: payTo }; + + const { i18n } = useTranslationContext(); + return ( + <section class="section is-main-section"> + <div class="columns"> + <div class="column" /> + <div class="column is-10"> + <FormProvider + object={form} + valueHandler={(updater) => onChangePayTo(updater(form).payto_uri)} + > + <InputSelector + name="payto_uri" + label={i18n.str`Account URI`} + values={accounts} + fromStr={(d) => { + const idx = accounts.indexOf(d) + if (idx === -1) return undefined; + return d + }} + placeholder={i18n.str`Select one account`} + tooltip={i18n.str`filter by account address`} + /> + </FormProvider> + </div> + <div class="column" /> + </div> + <div class="tabs"> + <ul> + <li class={isAllTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n.str`remove all filters`} + > + <a onClick={onShowAll}> + <i18n.Translate>All</i18n.Translate> + </a> + </div> + </li> + <li class={isVerifiedTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n.str`only show wire transfers confirmed by the merchant`} + > + <a onClick={onShowVerified}> + <i18n.Translate>Verified</i18n.Translate> + </a> + </div> + </li> + <li class={isNonVerifiedTransfers ? "is-active" : ""}> + <div + class="has-tooltip-right" + data-tooltip={i18n.str`only show wire transfers claimed by the exchange`} + > + <a onClick={onShowUnverified}> + <i18n.Translate>Unverified</i18n.Translate> + </a> + </div> + </li> + </ul> + </div> + <CardTable + transfers={transfers.map((o) => ({ + ...o, + id: String(o.transfer_serial_id), + }))} + accounts={accounts} + onCreate={onCreate} + onDelete={onDelete} + onLoadMoreBefore={onLoadMoreBefore} + onLoadMoreAfter={onLoadMoreAfter} + /> + </section> + ); +} 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 new file mode 100644 index 000000000..b9235c669 --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx @@ -0,0 +1,214 @@ +/* + This file is part of GNU Taler + (C) 2021-2024 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { TalerMerchantApi } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { format } from "date-fns"; +import { h, VNode } from "preact"; +import { StateUpdater, useState } from "preact/hooks"; +import { datetimeFormatForSettings, usePreference } from "../../../../hooks/preference.js"; + +type Entity = TalerMerchantApi.TransferDetails & WithId; + +interface Props { + transfers: Entity[]; + onDelete: (id: Entity) => void; + onCreate: () => void; + accounts: string[]; + onLoadMoreBefore?: () => void; + onLoadMoreAfter?: () => void; +} + +export function CardTable({ + transfers, + onCreate, + onDelete, + onLoadMoreAfter, + onLoadMoreBefore, +}: Props): VNode { + const [rowSelection, rowSelectionHandler] = useState<string[]>([]); + + const { i18n } = useTranslationContext(); + + return ( + <div class="card has-table"> + <header class="card-header"> + <p class="card-header-title"> + <span class="icon"> + <i class="mdi mdi-arrow-left-right" /> + </span> + <i18n.Translate>Transfers</i18n.Translate> + </p> + <div class="card-header-icon" aria-label="more options"> + <span + class="has-tooltip-left" + data-tooltip={i18n.str`add new transfer`} + > + <button class="button is-info" type="button" onClick={onCreate}> + <span class="icon is-small"> + <i class="mdi mdi-plus mdi-36px" /> + </span> + </button> + </span> + </div> + </header> + <div class="card-content"> + <div class="b-table has-pagination"> + <div class="table-wrapper has-mobile-cards"> + {transfers.length > 0 ? ( + <Table + instances={transfers} + onDelete={onDelete} + rowSelection={rowSelection} + rowSelectionHandler={rowSelectionHandler} + onLoadMoreAfter={onLoadMoreAfter} + onLoadMoreBefore={onLoadMoreBefore} + /> + ) : ( + <EmptyTable /> + )} + </div> + </div> + </div> + </div> + ); +} +interface TableProps { + rowSelection: string[]; + instances: Entity[]; + onDelete: (id: Entity) => void; + rowSelectionHandler: StateUpdater<string[]>; + onLoadMoreBefore?: () => void; + onLoadMoreAfter?: () => void; +} + +function Table({ + instances, + onLoadMoreAfter, + onDelete, + onLoadMoreBefore, +}: TableProps): VNode { + const { i18n } = useTranslationContext(); + const [settings] = usePreference(); + return ( + <div class="table-container"> + {onLoadMoreBefore && ( + <button + class="button is-fullwidth" + data-tooltip={i18n.str`load more transfers before the first one`} + onClick={onLoadMoreBefore} + > + <i18n.Translate>load first page</i18n.Translate> + </button> + )} + <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> + <thead> + <tr> + <th> + <i18n.Translate>ID</i18n.Translate> + </th> + <th> + <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> + <i18n.Translate>Verified</i18n.Translate> + </th> + <th> + <i18n.Translate>Executed at</i18n.Translate> + </th> + <th /> + </tr> + </thead> + <tbody> + {instances.map((i) => { + return ( + <tr key={i.id}> + <td>{i.id}</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> + {i.execution_time + ? i.execution_time.t_s == "never" + ? i18n.str`never` + : format( + i.execution_time.t_s * 1000, + datetimeFormatForSettings(settings), + ) + : i18n.str`unknown`} + </td> + <td> + {i.verified === undefined ? ( + <button + class="button is-danger is-small has-tooltip-left" + data-tooltip={i18n.str`delete selected transfer from the database`} + onClick={() => onDelete(i)} + > + Delete + </button> + ) : undefined} + </td> + </tr> + ); + })} + </tbody> + </table> + {onLoadMoreAfter && ( + <button + class="button is-fullwidth" + data-tooltip={i18n.str`load more transfers after the last one`} + onClick={onLoadMoreAfter} + > + <i18n.Translate>load next page</i18n.Translate> + </button> + )} + </div> + ); +} + +function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); + return ( + <div class="content has-text-grey has-text-centered"> + <p> + <span class="icon is-large"> + <i class="mdi mdi-magnify mdi-48px" /> + </span> + </p> + <p> + <i18n.Translate> + There is no transfer yet, add more pressing the + sign + </i18n.Translate> + </p> + </div> + ); +} 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 new file mode 100644 index 000000000..8b4d1f3cb --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/index.tsx @@ -0,0 +1,112 @@ +/* + This file is part of GNU Taler + (C) 2021-2024 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +/** + * + * @author Sebastian Javier Marchano (sebasjm) + */ + +import { HttpStatusCode, TalerError, assertUnreachable } from "@gnu-taler/taler-util"; +import { VNode, h } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; +import { Loading } from "../../../../components/exception/loading.js"; +import { useInstanceBankAccounts } from "../../../../hooks/bank.js"; +import { useInstanceTransfers } from "../../../../hooks/transfer.js"; +import { LoginPage } from "../../../login/index.js"; +import { ListPage } from "./ListPage.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; + +interface Props { + onCreate: () => void; +} +interface Form { + verified?: boolean; + payto_uri?: string; +} + +export default function ListTransfer({ + onCreate, +}: Props): VNode { + const setFilter = (s?: boolean) => setForm({ ...form, verified: s }); + + 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 [form, setForm] = useState<Form>({ payto_uri: "" }); + + const shoulUseDefaultAccount = accounts.length === 1 + useEffect(() => { + if (shoulUseDefaultAccount) { + setForm({...form, payto_uri: accounts[0]}) + } + }, [shoulUseDefaultAccount]) + + const isVerifiedTransfers = form.verified === true; + const isNonVerifiedTransfers = form.verified === false; + const isAllTransfers = form.verified === undefined; + + const result = useInstanceTransfers( + { + position, + payto_uri: form.payto_uri === "" ? undefined : form.payto_uri, + verified: form.verified, + }, + (id) => setPosition(id), + ); + + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + default: { + assertUnreachable(result); + } + } + } + + 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 }))} + /> + ); +} |