diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/kyc')
3 files changed, 155 insertions, 43 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.stories.tsx new file mode 100644 index 000000000..046636b4b --- /dev/null +++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.stories.tsx @@ -0,0 +1,57 @@ +/* + 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 { PaytoString } from "@gnu-taler/taler-util"; +import * as tests from "@gnu-taler/web-util/testing"; +import { ListPage as TestedComponent } from "./ListPage.js"; + +export default { + title: "Pages/KYC/List", + component: TestedComponent, + argTypes: { + onUpdate: { action: "onUpdate" }, + onBack: { action: "onBack" }, + }, +}; + +export const Example = tests.createExample(TestedComponent, { + status: { + timeout_kycs: [], + pending_kycs: [ + { + aml_status: 0, + exchange_url: "http://exchange.taler", + payto_uri: "payto://iban/de123123123" as PaytoString, + kyc_url: "http://exchange.taler/kyc", + }, + { + aml_status: 1, + exchange_url: "http://exchange.taler", + payto_uri: "payto://iban/de123123123" as PaytoString, + }, + { + aml_status: 2, + exchange_url: "http://exchange.taler", + payto_uri: "payto://iban/de123123123" as PaytoString, + }, + ], + }, +}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx index 6b9a50660..3eeed1d7b 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021 Taler Systems S.A. + (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 @@ -19,16 +19,16 @@ * @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 { MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; export interface Props { - status: MerchantBackend.Instances.AccountKycRedirects; + status: TalerMerchantApi.AccountKycRedirects; } export function ListPage({ status }: Props): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <section class="section is-main-section"> @@ -38,7 +38,7 @@ export function ListPage({ status }: Props): VNode { <span class="icon"> <i class="mdi mdi-clock" /> </span> - <Translate>Pending KYC verification</Translate> + <i18n.Translate>Pending KYC verification</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options" /> @@ -63,7 +63,7 @@ export function ListPage({ status }: Props): VNode { <span class="icon"> <i class="mdi mdi-clock" /> </span> - <Translate>Timed out</Translate> + <i18n.Translate>Timed out</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options" /> @@ -85,43 +85,71 @@ export function ListPage({ status }: Props): VNode { ); } interface PendingTableProps { - entries: MerchantBackend.Instances.MerchantAccountKycRedirect[]; + entries: TalerMerchantApi.MerchantAccountKycRedirect[]; } interface TimedOutTableProps { - entries: MerchantBackend.Instances.ExchangeKycTimeout[]; + entries: TalerMerchantApi.ExchangeKycTimeout[]; } function PendingTable({ entries }: PendingTableProps): VNode { + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Exchange</Translate> + <i18n.Translate>Exchange</i18n.Translate> </th> <th> - <Translate>Target account</Translate> + <i18n.Translate>Target account</i18n.Translate> </th> <th> - <Translate>KYC URL</Translate> + <i18n.Translate>Reason</i18n.Translate> </th> </tr> </thead> <tbody> {entries.map((e, i) => { - return ( - <tr key={i}> - <td>{e.exchange_url}</td> - <td>{e.payto_uri}</td> - <td> - <a href={e.kyc_url} target="_black" rel="noreferrer"> - {e.kyc_url} - </a> - </td> - </tr> - ); + if (e.kyc_url === undefined) { + // blocked by AML + return ( + <tr key={i}> + <td>{e.exchange_url}</td> + <td>{e.payto_uri}</td> + <td> + {e.aml_status === 1 ? ( + <i18n.Translate> + There is an anti-money laundering process pending to + complete. + </i18n.Translate> + ) : ( + <i18n.Translate> + The account is frozen due to the anti-money laundering + rules. Contact the exchange service provider for further + instructions. + </i18n.Translate> + )} + </td> + </tr> + ); + } else { + // blocked by KYC + return ( + <tr key={i}> + <td>{e.exchange_url}</td> + <td>{e.payto_uri}</td> + <td> + <a href={e.kyc_url} target="_black" rel="noreferrer"> + <i18n.Translate> + Pending KYC process, click here to complete + </i18n.Translate> + </a> + </td> + </tr> + ); + } })} </tbody> </table> @@ -130,19 +158,20 @@ function PendingTable({ entries }: PendingTableProps): VNode { } function TimedOutTable({ entries }: TimedOutTableProps): VNode { + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Exchange</Translate> + <i18n.Translate>Exchange</i18n.Translate> </th> <th> - <Translate>Code</Translate> + <i18n.Translate>Code</i18n.Translate> </th> <th> - <Translate>Http Status</Translate> + <i18n.Translate>Http Status</i18n.Translate> </th> </tr> </thead> @@ -163,6 +192,7 @@ function TimedOutTable({ entries }: TimedOutTableProps): VNode { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -171,7 +201,7 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate>No pending kyc verification!</Translate> + <i18n.Translate>No pending kyc verification!</i18n.Translate> </p> </div> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx index 3ef95cb34..ed0e1220f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/kyc/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021 Taler Systems S.A. + (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 @@ -19,30 +19,55 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from "preact"; +import { HttpStatusCode, TalerError, assertUnreachable } from "@gnu-taler/taler-util"; +import { VNode, h } from "preact"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; -import { HttpError } from "../../../../hooks/backend.js"; import { useInstanceKYCDetails } from "../../../../hooks/instance.js"; import { ListPage } from "./ListPage.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError) => VNode; - onNotFound: () => VNode; } -export default function ListKYC({ - onUnauthorized, - onLoadError, - onNotFound, -}: Props): VNode { +export default function ListKYC(_p: Props): VNode { const result = useInstanceKYCDetails(); - if (result.clientError && result.isUnauthorized) return onUnauthorized(); - if (result.clientError && result.isNotfound) return onNotFound(); - if (result.loading) return <Loading />; - if (!result.ok) return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + /** + * This component just render known kyc requirements. + * If query fail then is safe to hide errors. + */ + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.GatewayTimeout: { + return <div /> + } + case HttpStatusCode.BadGateway: { + const status = result.body; + + if (!status) { + return <div>no kyc required</div>; + } + return <ListPage status={status} />; - const status = result.data.type === "ok" ? undefined : result.data.status; + } + case HttpStatusCode.ServiceUnavailable: { + return <div /> + } + case HttpStatusCode.Unauthorized: { + return <div /> + } + case HttpStatusCode.NotFound: { + return <div />; + } + default: { + assertUnreachable(result) + } + } + } + const status = result.body; if (!status) { return <div>no kyc required</div>; |